流行网页设计

从真实网站中提取的 54 个生产级设计系统。加载模板以生成与 Stripe、Linear、Vercel、Notion、Airbnb 等网站视觉标识相匹配的 HTML/CSS。每个模板都包含颜色、排版、组件、布局规则以及即拿即用的 CSS 值。

技能元数据

来源	捆绑（默认安装）
路径	skills/creative/popular-web-designs
版本	1.0.0
作者	Hermes Agent + Teknium（设计系统源自 VoltAgent/awesome-design-md）
许可证	MIT

参考：完整 SKILL.md

信息

以下是触发此技能时 Hermes 加载的完整技能定义。这是技能激活时代理看到的指令。

流行网页设计

54 个可用于生成 HTML/CSS 的真实世界设计系统。每个模板都捕捉了网站的完整视觉语言：调色板、排版层级、组件样式、间距系统、阴影、响应式行为，以及包含确切 CSS 值的实用代理提示。

使用方法

1. 从下面的目录中选择一个设计
2. 加载它：skill_view(name="popular-web-designs", file_path="templates/<site>.md")
3. 在生成 HTML 时使用设计令牌和组件规范
4. 与 generative-widgets 技能配合使用，通过 cloudflared 隧道提供服务结果

每个模板顶部都包含一个 Hermes 实施说明 块，其中有：

• CDN 字体替代品和 Google Fonts <link> 标签（可直接粘贴使用）
• 主要字体和等宽字体的 CSS font-family 堆栈
• 提醒使用 write_file 创建 HTML 并使用 browser_vision 进行验证

HTML 生成模式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title</title>
  <!-- Paste the Google Fonts <link> from the template's Hermes notes -->
  <link href="https://fonts.googleapis.com/css2?family=..." rel="stylesheet">
  <style>
    /* Apply the template's color palette as CSS custom properties */
    :root {
      --color-bg: #ffffff;
      --color-text: #171717;
      --color-accent: #533afd;
      /* ... more from template Section 2 */
    }
    /* Apply typography from template Section 3 */
    body {
      font-family: 'Inter', system-ui, sans-serif;
      color: var(--color-text);
      background: var(--color-bg);
    }
    /* Apply component styles from template Section 4 */
    /* Apply layout from template Section 5 */
    /* Apply shadows from template Section 6 */
  </style>
</head>
<body>
  <!-- Build using component specs from the template -->
</body>
</html>

使用 write_file 写入文件，通过 generative-widgets 工作流（cloudflared 隧道）提供服务，并使用 browser_vision 验证结果以确认视觉准确性。

字体替代参考

大多数网站使用的专有字体无法通过 CDN 获取。每个模板都映射到一个能保留设计特征的 Google Fonts 替代品。常见映射如下：

专有字体	CDN 替代品	特征
Geist / Geist Sans	Geist (on Google Fonts)	几何风格，紧凑字距
Geist Mono	Geist Mono (on Google Fonts)	简洁等宽，支持连字
sohne-var (Stripe)	Source Sans 3	轻量级优雅感
Berkeley Mono	JetBrains Mono	技术感等宽字体
Airbnb Cereal VF	DM Sans	圆润、友好的几何风格
Circular (Spotify)	DM Sans	几何风格，温暖感
figmaSans	Inter	简洁的人文主义风格
Pin Sans (Pinterest)	DM Sans	友好、圆润
NVIDIA-EMEA	Inter (或 Arial 系统字体)	工业风，简洁
CoinbaseDisplay/Sans	DM Sans	几何风格，可信赖感
UberMove	DM Sans	粗体，紧凑
HashiCorp Sans	Inter	企业级，中性
waldenburgNormal (Sanity)	Space Grotesk	几何风格，略微压缩
IBM Plex Sans/Mono	IBM Plex Sans/Mono	可在 Google Fonts 获取
Rubik (Sentry)	Rubik	可在 Google Fonts 获取

当模板的 CDN 字体与原始字体匹配时（Inter、IBM Plex、Rubik、Geist），不会发生替代损失。当使用替代品时（如用 DM Sans 替代 Circular，用 Source Sans 3 替代 sohne-var），请严格遵循模板的字重、字号和字间距值——这些比具体的字体面更能承载视觉标识。

设计目录

AI 与机器学习

模板	网站	风格
claude.md	Anthropic Claude	温暖的赤陶色点缀，简洁的编辑布局
cohere.md	Cohere	鲜艳的渐变，数据丰富的仪表板美学
elevenlabs.md	ElevenLabs	深色电影感 UI，音频波形美学
minimax.md	Minimax	大胆的深色界面，带有霓虹点缀
mistral.ai.md	Mistral AI	法式工程极简主义，紫色调
ollama.md	Ollama	终端优先，单色简约
opencode.ai.md	OpenCode AI	以开发者为中心的深色主题，全等宽字体
replicate.md	Replicate	简洁的白色画布，代码优先
runwayml.md	RunwayML	电影感深色 UI，媒体丰富布局
together.ai.md	Together AI	技术感，蓝图风格设计
voltagent.md	VoltAgent	虚空黑画布，翡翠绿点缀，终端原生
x.ai.md	xAI	鲜明的单色，未来主义极简主义，全等宽字体

开发者工具与平台

模板	站点	风格
cursor.md	Cursor	时尚深色界面，渐变点缀
expo.md	Expo	深色主题，紧凑字间距，以代码为中心
linear.app.md	Linear	极简深色模式，精准，紫色点缀
lovable.md	Lovable	活泼渐变，友好的开发者美学
mintlify.md	Mintlify	简洁，绿色点缀，针对阅读优化
posthog.md	PostHog	活泼的品牌形象，对开发者友好的深色 UI
raycast.md	Raycast	时尚深色铬质感，鲜艳渐变点缀
resend.md	Resend	极简深色主题，等宽字体点缀
sentry.md	Sentry	深色仪表盘，数据密集，粉紫色点缀
supabase.md	Supabase	深色翡翠主题，代码优先的开发者工具
superhuman.md	Superhuman	高端深色 UI，键盘优先，紫色光晕
vercel.md	Vercel	黑白精准，Geist 字体系统
warp.md	Warp	深色类 IDE 界面，基于块的命令 UI
zapier.md	Zapier	温暖橙色，友好的插图驱动风格

基础设施与云

模板	站点	风格
clickhouse.md	ClickHouse	黄色点缀，技术文档风格
composio.md	Composio	现代深色搭配彩色集成图标
hashicorp.md	HashiCorp	企业级简洁，黑白配色
mongodb.md	MongoDB	绿叶品牌形象，专注于开发者文档
sanity.md	Sanity	红色点缀，内容优先的编辑布局
stripe.md	Stripe	标志性紫色渐变，300 字重优雅风格

设计与生产力

模板	站点	风格
airtable.md	Airtable	多彩，友好，结构化数据美学
cal.md	Cal.com	简洁中性 UI，面向开发者的简约性
clay.md	Clay	有机形状，柔和渐变，艺术指导布局
figma.md	Figma	鲜艳多色，活泼而专业
framer.md	Framer	大胆黑蓝配色，动效优先，设计前沿
intercom.md	Intercom	友好蓝色调，对话式 UI 模式
miro.md	Miro	明亮黄色点缀，无限画布美学
notion.md	Notion	温暖极简主义，衬线标题，柔和表面
pinterest.md	Pinterest	红色点缀，瀑布流网格，以图像为主的布局
webflow.md	Webflow	蓝色点缀，精致的营销网站美学

金融科技与加密货币

模板	站点	风格
coinbase.md	Coinbase	简洁蓝色标识，注重信任，机构感
kraken.md	Kraken	紫色点缀深色 UI，数据密集仪表盘
revolut.md	Revolut	时尚深色界面，渐变卡片，金融科技精准感
wise.md	Wise	明亮绿色点缀，友好且清晰

企业与消费者

模板	站点	风格
airbnb.md	Airbnb	温暖珊瑚色点缀，摄影驱动，圆角 UI
apple.md	Apple	高端留白，SF Pro 字体，电影感 imagery
bmw.md	BMW	深色高端表面，精准工程美学
ibm.md	IBM	Carbon 设计系统，结构化蓝色调
nvidia.md	NVIDIA	绿黑能量感，技术力量美学
spacex.md	SpaceX	鲜明黑白，全出血 imagery，未来感
spotify.md	Spotify	深色背景上的鲜艳绿色，粗体排版，专辑封面驱动
uber.md	Uber	大胆黑白，紧凑排版，都市活力

选择设计风格

将设计与内容相匹配：

• 开发者工具 / 仪表盘： Linear, Vercel, Supabase, Raycast, Sentry
• 文档 / 内容站点： Mintlify, Notion, Sanity, MongoDB
• 营销 / 落地页： Stripe, Framer, Apple, SpaceX
• 深色模式 UI： Linear, Cursor, ElevenLabs, Warp, Superhuman
• 浅色 / 简洁 UI： Vercel, Stripe, Notion, Cal.com, Replicate
• 活泼 / 友好： PostHog, Figma, Lovable, Zapier, Miro
• 高端 / 奢华： Apple, BMW, Stripe, Superhuman, Revolut
• 数据密集 / 仪表盘： Sentry, Kraken, Cohere, ClickHouse
• 等宽字体 / 终端美学： Ollama, OpenCode, x.ai, VoltAgent