流行网页设计

从真实网站中提取的 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 值的实用代理提示。

使用方法

从下面的目录中选择一个设计
加载它：skill_view(name="popular-web-designs", file_path="templates/<site>.md")
在生成 HTML 时使用设计令牌和组件规范
与 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

技能元数据​

参考：完整 SKILL.md​

流行网页设计

使用方法​

HTML 生成模式​

字体替代参考​

设计目录​

AI 与机器学习​

开发者工具与平台​

基础设施与云​

设计与生产力​

金融科技与加密货币​

企业与消费者​

选择设计风格​

技能元数据

参考：完整 SKILL.md

使用方法

HTML 生成模式

字体替代参考

设计目录

AI 与机器学习

开发者工具与平台

基础设施与云

设计与生产力

金融科技与加密货币

企业与消费者

选择设计风格