{/* This page is auto-generated from the skill's SKILL.md by website/scripts/generate-skill-docs.py. Edit the source SKILL.md, not this page. */}

流行网页设计

54 个真实设计系统（Stripe、Linear、Vercel）的 HTML/CSS。

Skill 元数据


来源	内置（默认安装）
路径	`skills/creative/popular-web-designs`
版本	`1.0.0`
作者	Hermes Agent + Teknium（设计系统来源：VoltAgent/awesome-design-md）
许可证	MIT
平台	linux, macos, windows

参考：完整 SKILL.md

信息

以下是 Hermes 在触发此 skill 时加载的完整 skill 定义。这是 agent 在 skill 激活时所看到的指令内容。

流行网页设计

54 个可直接用于生成 HTML/CSS 的真实设计系统。每个模板都完整呈现了某个网站的视觉语言：色彩调色板、排版层级、组件样式、间距系统、阴影、响应式行为，以及包含精确 CSS 值的实用 agent prompt（提示词）。

使用方法

从下方目录中选择一个设计

加载它：skill_view(name="popular-web-designs", file_path="templates/<site>.md")

生成 HTML 时使用设计 token 和组件规范

配合 generative-widgets skill，通过 cloudflared tunnel 提供服务

每个模板顶部都包含一个 Hermes 实现说明 块，内容包括：

CDN 字体替代方案及 Google Fonts <link> 标签（可直接粘贴）

主字体和等宽字体的 CSS font-family 栈

提醒使用 write_file 创建 HTML 文件，使用 browser_vision 进行验证

HTML 生成模式

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

字体替代参考

大多数网站使用无法通过 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

"流行网页设计 — 54 个真实设计系统（Stripe、Linear、Vercel）的 HTML/CSS"

流行网页设计

Skill 元数据

参考：完整 SKILL.md

流行网页设计

相关设计 skill

使用方法

HTML 生成模式

字体替代参考

设计目录

AI 与机器学习

开发者工具与平台

基础设施与云

设计与生产力

金融科技与加密货币

企业与消费者

选择设计

"流行网页设计 — 54 个真实设计系统（Stripe、Linear、Vercel）的 HTML/CSS"

流行网页设计#

Skill 元数据#

参考：完整 SKILL.md#

流行网页设计#

相关设计 skill#

使用方法#

HTML 生成模式#

字体替代参考#

设计目录#

AI 与机器学习#

开发者工具与平台#

基础设施与云#

设计与生产力#

金融科技与加密货币#

企业与消费者#

选择设计#

流行网页设计

Skill 元数据

参考：完整 SKILL.md

流行网页设计

相关设计 skill

使用方法

HTML 生成模式

字体替代参考

设计目录

AI 与机器学习

开发者工具与平台

基础设施与云

设计与生产力

金融科技与加密货币

企业与消费者

选择设计