popular-web-designs

常见 Web 设计

54 套可直接用于生成 HTML/CSS 的真实设计系统。每个模板都涵盖网站的完整视觉语言：配色方案、字体层级、组件样式、间距系统、阴影、响应式行为，以及包含精确 CSS 值的实用 Agent 提示词。

相关设计技能

• claude-design — 用于设计的流程与审美（界定需求、制作变体、验证本地 HTML 成品、避免 AI 设计的粗制滥造）。 当用户想要一个经过精心设计、参考知名品牌风格的页面时，可与此技能搭配使用：claude-design 负责工作流，此技能提供视觉词汇。
• design-md — 当交付内容是正式的 DESIGN.md 设计令牌规范文件，而非渲染成品时使用。

使用方法

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 字体系列栈
• 提醒使用 write_file 创建 HTML，并使用 browser_exec（capture_screenshot()）进行验证

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>
  
  <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>
  
</body>
</html>

使用 write_file 写入文件，通过 generative-widgets 工作流（cloudflared 隧道）提供服务，并使用 browser_exec 验证结果：打开页面，执行 capture_screenshot()，然后检查图像以确认视觉效果准确。

字体替代参考

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

专有字体	CDN 替代字体	特点
Geist / Geist Sans	Geist（Google Fonts 提供）	几何风格，字距紧凑
Geist Mono	Geist Mono（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，电影级影像
bmw.md	BMW	深色高端界面，精密工程美学
ibm.md	IBM	Carbon 设计系统，层次分明的蓝色调色板
nvidia.md	NVIDIA	绿黑配色，科技力量美学
spacex.md	SpaceX	冷峻的黑白配色，全幅影像，未来感
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