popular-web-designs
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChinesePopular Web Designs
热门网页设计
54 real-world design systems ready for use when generating HTML/CSS. Each template captures a
site's complete visual language: color palette, typography hierarchy, component styles, spacing
system, shadows, responsive behavior, and practical agent prompts with exact CSS values.
54套可直接用于生成HTML/CSS的真实设计系统。每个模板完整还原了网站的视觉语言：调色板、排版层级、组件样式、间距系统、阴影效果、响应式表现，以及带有精确CSS值的实用Agent提示词。
Related design skills
相关设计技能
- — use for the design process and taste (scoping a brief, producing variants, verifying a local HTML artifact, avoiding AI-design slop). Pair it with this skill when the user wants a thoughtfully-designed page styled after a known brand:
claude-designdrives the workflow, this skill supplies the visual vocabulary.claude-design - — use when the deliverable is a formal DESIGN.md token spec file, not a rendered artifact.
design-md
- — 用于设计流程与风格把控（梳理需求 brief、生成变体、验证本地HTML产物、避免AI设计的粗糙问题）。当用户希望打造一个模仿知名品牌风格的精心设计页面时，可将该技能与本技能搭配使用：
claude-design主导工作流程，本技能提供视觉词汇库。claude-design - — 当交付物是正式的DESIGN.md令牌规范文件而非渲染产物时使用。
design-md
How to Use
使用方法
- Pick a design from the catalog below
- Load it:
skill_view(name="popular-web-designs", file_path="templates/<site>.md") - Use the design tokens and component specs when generating HTML
- Pair with the skill to serve the result via cloudflared tunnel
generative-widgets
Each template includes a Hermes Implementation Notes block at the top with:
- CDN font substitute and Google Fonts tag (ready to paste)
<link> - CSS font-family stacks for primary and monospace
- Reminders to use for HTML creation and
write_filefor verificationbrowser_vision
- 从下方目录中选择一个设计
- 加载设计：
skill_view(name="popular-web-designs", file_path="templates/<site>.md") - 在生成HTML时使用设计令牌和组件规范
- 搭配技能，通过cloudflared隧道部署结果
generative-widgets
每个模板顶部都包含一个Hermes实现说明区块，内容包括：
- CDN字体替代方案和可直接粘贴的Google Fonts 标签
<link> - 主字体等宽字体的CSS font-family堆叠配置
- 提醒使用创建HTML文件，使用
write_file进行验证browser_vision
HTML Generation Pattern
HTML生成模板
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 the file with , serve with the workflow (cloudflared tunnel),
and verify the result with to confirm visual accuracy.
write_filegenerative-widgetsbrowser_visionhtml
<!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>使用写入文件，通过工作流（cloudflared隧道）部署，并使用验证结果以确保视觉准确性。
write_filegenerative-widgetsbrowser_visionFont Substitution Reference
字体替代参考
Most sites use proprietary fonts unavailable via CDN. Each template maps to a Google Fonts
substitute that preserves the design's character. Common mappings:
| Proprietary Font | CDN Substitute | Character |
|---|---|---|
| Geist / Geist Sans | Geist (on Google Fonts) | Geometric, compressed tracking |
| Geist Mono | Geist Mono (on Google Fonts) | Clean monospace, ligatures |
| sohne-var (Stripe) | Source Sans 3 | Light weight elegance |
| Berkeley Mono | JetBrains Mono | Technical monospace |
| Airbnb Cereal VF | DM Sans | Rounded, friendly geometric |
| Circular (Spotify) | DM Sans | Geometric, warm |
| figmaSans | Inter | Clean humanist |
| Pin Sans (Pinterest) | DM Sans | Friendly, rounded |
| NVIDIA-EMEA | Inter (or Arial system) | Industrial, clean |
| CoinbaseDisplay/Sans | DM Sans | Geometric, trustworthy |
| UberMove | DM Sans | Bold, tight |
| HashiCorp Sans | Inter | Enterprise, neutral |
| waldenburgNormal (Sanity) | Space Grotesk | Geometric, slightly condensed |
| IBM Plex Sans/Mono | IBM Plex Sans/Mono | Available on Google Fonts |
| Rubik (Sentry) | Rubik | Available on Google Fonts |
When a template's CDN font matches the original (Inter, IBM Plex, Rubik, Geist), no
substitution loss occurs. When a substitute is used (DM Sans for Circular, Source Sans 3
for sohne-var), follow the template's weight, size, and letter-spacing values closely —
those carry more visual identity than the specific font face.
大多数网站使用无法通过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），请严格遵循模板中的字重、字号和字距值——这些比具体字体本身更能体现视觉辨识度。
Design Catalog
设计目录
AI & Machine Learning
AI与机器学习
| Template | Site | Style |
|---|---|---|
| Anthropic Claude | Warm terracotta accent, clean editorial layout |
| Cohere | Vibrant gradients, data-rich dashboard aesthetic |
| ElevenLabs | Dark cinematic UI, audio-waveform aesthetics |
| Minimax | Bold dark interface with neon accents |
| Mistral AI | French-engineered minimalism, purple-toned |
| Ollama | Terminal-first, monochrome simplicity |
| OpenCode AI | Developer-centric dark theme, full monospace |
| Replicate | Clean white canvas, code-forward |
| RunwayML | Cinematic dark UI, media-rich layout |
| Together AI | Technical, blueprint-style design |
| VoltAgent | Void-black canvas, emerald accent, terminal-native |
| xAI | Stark monochrome, futuristic minimalism, full monospace |
| 模板 | 网站 | 风格 |
|---|---|---|
| Anthropic Claude | 温暖赤陶色强调色、简洁编辑式布局 |
| Cohere | 活力渐变、数据丰富的仪表盘风格 |
| ElevenLabs | 深色电影感UI、音频波形美学 |
| Minimax | 大胆深色界面搭配霓虹强调色 |
| Mistral AI | 法式极简主义、紫色调 |
| Ollama | 终端优先、单色简洁风格 |
| OpenCode AI | 开发者导向深色主题、全等宽字体 |
| Replicate | 简洁白色画布、代码优先 |
| RunwayML | 电影感深色UI、媒体丰富布局 |
| Together AI | 技术感、蓝图风格设计 |
| VoltAgent | 纯黑画布、翡翠绿强调色、原生终端风格 |
| xAI | 鲜明单色、未来极简主义、全等宽字体 |
Developer Tools & Platforms
开发者工具与平台
| Template | Site | Style |
|---|---|---|
| Cursor | Sleek dark interface, gradient accents |
| Expo | Dark theme, tight letter-spacing, code-centric |
| Linear | Ultra-minimal dark-mode, precise, purple accent |
| Lovable | Playful gradients, friendly dev aesthetic |
| Mintlify | Clean, green-accented, reading-optimized |
| PostHog | Playful branding, developer-friendly dark UI |
| Raycast | Sleek dark chrome, vibrant gradient accents |
| Resend | Minimal dark theme, monospace accents |
| Sentry | Dark dashboard, data-dense, pink-purple accent |
| Supabase | Dark emerald theme, code-first developer tool |
| Superhuman | Premium dark UI, keyboard-first, purple glow |
| Vercel | Black and white precision, Geist font system |
| Warp | Dark IDE-like interface, block-based command UI |
| Zapier | Warm orange, friendly illustration-driven |
| 模板 | 网站 | 风格 |
|---|---|---|
| Cursor | 流畅深色界面、渐变强调色 |
| Expo | 深色主题、紧凑字距、代码中心 |
| Linear | 极致极简深色模式、精准、紫色强调色 |
| Lovable | 趣味渐变、友好开发者风格 |
| Mintlify | 简洁、绿色强调色、阅读优化 |
| PostHog | 趣味品牌、开发者友好深色UI |
| Raycast | 流畅深色边框、活力渐变强调色 |
| Resend | 极简深色主题、等宽字体点缀 |
| Sentry | 深色仪表盘、数据密集、粉紫强调色 |
| Supabase | 深翡翠绿主题、代码优先开发者工具 |
| Superhuman | 高端深色UI、键盘优先、紫色光晕 |
| Vercel | 黑白精准风格、Geist字体系统 |
| Warp | 深色IDE风格界面、块级命令UI |
| Zapier | 温暖橙色、友好插画驱动 |
Infrastructure & Cloud
基础设施与云服务
| Template | Site | Style |
|---|---|---|
| ClickHouse | Yellow-accented, technical documentation style |
| Composio | Modern dark with colorful integration icons |
| HashiCorp | Enterprise-clean, black and white |
| MongoDB | Green leaf branding, developer documentation focus |
| Sanity | Red accent, content-first editorial layout |
| Stripe | Signature purple gradients, weight-300 elegance |
| 模板 | 网站 | 风格 |
|---|---|---|
| ClickHouse | 黄色强调色、技术文档风格 |
| Composio | 现代深色搭配多彩集成图标 |
| HashiCorp | 企业级简洁、黑白风格 |
| MongoDB | 绿叶品牌色、开发者文档导向 |
| Sanity | 红色强调色、内容优先编辑布局 |
| Stripe | 标志性紫色渐变、300字重优雅风格 |
Design & Productivity
设计与生产力
| Template | Site | Style |
|---|---|---|
| Airtable | Colorful, friendly, structured data aesthetic |
| Cal.com | Clean neutral UI, developer-oriented simplicity |
| Clay | Organic shapes, soft gradients, art-directed layout |
| Figma | Vibrant multi-color, playful yet professional |
| Framer | Bold black and blue, motion-first, design-forward |
| Intercom | Friendly blue palette, conversational UI patterns |
| Miro | Bright yellow accent, infinite canvas aesthetic |
| Notion | Warm minimalism, serif headings, soft surfaces |
| Red accent, masonry grid, image-first layout | |
| Webflow | Blue-accented, polished marketing site aesthetic |
| 模板 | 网站 | 风格 |
|---|---|---|
| Airtable | 多彩、友好、结构化数据风格 |
| Cal.com | 简洁中性UI、开发者导向极简风格 |
| Clay | 有机形状、柔和渐变、艺术指导式布局 |
| Figma | 活力多彩、趣味且专业 |
| Framer | 大胆黑蓝配色、动效优先、设计导向 |
| Intercom | 友好蓝色调色板、对话式UI模式 |
| Miro | 亮黄色强调色、无限画布风格 |
| Notion | 温暖极简主义、衬线标题、柔和质感 |
| 红色强调色、瀑布流网格、图片优先布局 | |
| Webflow | 蓝色强调色、精致营销网站风格 |
Fintech & Crypto
金融科技与加密货币
| Template | Site | Style |
|---|---|---|
| Coinbase | Clean blue identity, trust-focused, institutional feel |
| Kraken | Purple-accented dark UI, data-dense dashboards |
| Revolut | Sleek dark interface, gradient cards, fintech precision |
| Wise | Bright green accent, friendly and clear |
| 模板 | 网站 | 风格 |
|---|---|---|
| Coinbase | 简洁蓝色品牌、信任导向、机构感 |
| Kraken | 紫色强调色深色UI、数据密集仪表盘 |
| Revolut | 流畅深色界面、渐变卡片、金融科技精准风格 |
| Wise | 亮绿色强调色、友好清晰 |
Enterprise & Consumer
企业与消费级产品
| Template | Site | Style |
|---|---|---|
| Airbnb | Warm coral accent, photography-driven, rounded UI |
| Apple | Premium white space, SF Pro, cinematic imagery |
| BMW | Dark premium surfaces, precise engineering aesthetic |
| IBM | Carbon design system, structured blue palette |
| NVIDIA | Green-black energy, technical power aesthetic |
| SpaceX | Stark black and white, full-bleed imagery, futuristic |
| Spotify | Vibrant green on dark, bold type, album-art-driven |
| Uber | Bold black and white, tight type, urban energy |
| 模板 | 网站 | 风格 |
|---|---|---|
| Airbnb | 温暖珊瑚色强调色、摄影驱动、圆角UI |
| Apple | 高端留白、SF Pro字体、电影感视觉 |
| BMW | 高端深色质感、精准工程美学 |
| IBM | Carbon设计系统、结构化蓝色调色板 |
| NVIDIA | 绿黑能量感、技术力量美学 |
| SpaceX | 鲜明黑白、全屏视觉、未来主义 |
| Spotify | 深色背景配活力绿色、粗体字、专辑封面驱动 |
| Uber | 大胆黑白、紧凑字体、都市活力 |
Choosing a Design
设计选择指南
Match the design to the content:
- Developer tools / dashboards: Linear, Vercel, Supabase, Raycast, Sentry
- Documentation / content sites: Mintlify, Notion, Sanity, MongoDB
- Marketing / landing pages: Stripe, Framer, Apple, SpaceX
- Dark mode UIs: Linear, Cursor, ElevenLabs, Warp, Superhuman
- Light / clean UIs: Vercel, Stripe, Notion, Cal.com, Replicate
- Playful / friendly: PostHog, Figma, Lovable, Zapier, Miro
- Premium / luxury: Apple, BMW, Stripe, Superhuman, Revolut
- Data-dense / dashboards: Sentry, Kraken, Cohere, ClickHouse
- Monospace / terminal aesthetic: Ollama, OpenCode, x.ai, VoltAgent
根据内容匹配对应设计：
- 开发者工具/仪表盘：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