yakeworld Operational Steps
- 确认输入参数完整
- 执行核心操作（参考本目录下的 scripts/ 或 references/）
- 验证输出符合契约
- 保存结果并报告
Pitfalls
-
-
Verification
-
-
-
-
1. 2. 3.
IO_CONTRACT
- input:
request: str, context: dict— 用户请求描述、上下文信息 - output:
result: dict — 技能执行结果（结构因技能而异）
对应原则：P2（机械原子暴露输入输出规范）
Popular 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.
Related design skills
claude-design— 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.design-md— use when the deliverable is a formal DESIGN.md token spec file, not a rendered artifact.
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
generative-widgetsskill to serve the result via cloudflared tunnel
Each template includes a Hermes Implementation Notes block at the top with:
- CDN font substitute and Google Fonts
<link>tag (ready to paste) - CSS font-family stacks for primary and monospace
- Reminders to use
write_filefor HTML creation andbrowser_visionfor verification
HTML Generation Pattern
<!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 write_file, serve with the generative-widgets workflow (cloudflared tunnel),
and verify the result with browser_vision to confirm visual accuracy.
Font 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.
Design Catalog
AI & Machine Learning
| Template | Site | Style |
|---|---|---|
claude.md |
Anthropic Claude | Warm terracotta accent, clean editorial layout |
cohere.md |
Cohere | Vibrant gradients, data-rich dashboard aesthetic |
elevenlabs.md |
ElevenLabs | Dark cinematic UI, audio-waveform aesthetics |
minimax.md |
Minimax | Bold dark interface with neon accents |
mistral.ai.md |
Mistral AI | French-engineered minimalism, purple-toned |
ollama.md |
Ollama | Terminal-first, monochrome simplicity |
opencode.ai.md |
OpenCode AI | Developer-centric dark theme, full monospace |
replicate.md |
Replicate | Clean white canvas, code-forward |
runwayml.md |
RunwayML | Cinematic dark UI, media-rich layout |
together.ai.md |
Together AI | Technical, blueprint-style design |
voltagent.md |
VoltAgent | Void-black canvas, emerald accent, terminal-native |
x.ai.md |
xAI | Stark monochrome, futuristic minimalism, full monospace |
Developer Tools & Platforms
| Template | Site | Style |
|---|---|---|
cursor.md |
Cursor | Sleek dark interface, gradient accents |
expo.md |
Expo | Dark theme, tight letter-spacing, code-centric |
linear.app.md |
Linear | Ultra-minimal dark-mode, precise, purple accent |
lovable.md |
Lovable | Playful gradients, friendly dev aesthetic |
mintlify.md |
Mintlify | Clean, green-accented, reading-optimized |
posthog.md |
PostHog | Playful branding, developer-friendly dark UI |
raycast.md |
Raycast | Sleek dark chrome, vibrant gradient accents |
resend.md |
Resend | Minimal dark theme, monospace accents |
sentry.md |
Sentry | Dark dashboard, data-dense, pink-purple accent |
supabase.md |
Supabase | Dark emerald theme, code-first developer tool |
superhuman.md |
Superhuman | Premium dark UI, keyboard-first, purple glow |
vercel.md |
Vercel | Black and white precision, Geist font system |
warp.md |
Warp | Dark IDE-like interface, block-based command UI |
zapier.md |
Zapier | Warm orange, friendly illustration-driven |
Infrastructure & Cloud
| Template | Site | Style |
|---|---|---|
clickhouse.md |
ClickHouse | Yellow-accented, technical documentation style |
composio.md |
Composio | Modern dark with colorful integration icons |
hashicorp.md |
HashiCorp | Enterprise-clean, black and white |
mongodb.md |
MongoDB | Green leaf branding, developer documentation focus |
sanity.md |
Sanity | Red accent, content-first editorial layout |
stripe.md |
Stripe | Signature purple gradients, weight-300 elegance |
Design & Productivity
| Template | Site | Style |
|---|---|---|
airtable.md |
Airtable | Colorful, friendly, structured data aesthetic |
cal.md |
Cal.com | Clean neutral UI, developer-oriented simplicity |
clay.md |
Clay | Organic shapes, soft gradients, art-directed layout |
figma.md |
Figma | Vibrant multi-color, playful yet professional |
framer.md |
Framer | Bold black and blue, motion-first, design-forward |
intercom.md |
Intercom | Friendly blue palette, conversational UI patterns |
miro.md |
Miro | Bright yellow accent, infinite canvas aesthetic |
notion.md |
Notion | Warm minimalism, serif headings, soft surfaces |
pinterest.md |
Red accent, masonry grid, image-first layout | |
webflow.md |
Webflow | Blue-accented, polished marketing site aesthetic |
Fintech & Crypto
| Template | Site | Style |
|---|---|---|
coinbase.md |
Coinbase | Clean blue identity, trust-focused, institutional feel |
kraken.md |
Kraken | Purple-accented dark UI, data-dense dashboards |
revolut.md |
Revolut | Sleek dark interface, gradient cards, fintech precision |
wise.md |
Wise | Bright green accent, friendly and clear |
Enterprise & Consumer
| Template | Site | Style |
|---|---|---|
airbnb.md |
Airbnb | Warm coral accent, photography-driven, rounded UI |
apple.md |
Apple | Premium white space, SF Pro, cinematic imagery |
bmw.md |
BMW | Dark premium surfaces, precise engineering aesthetic |
ibm.md |
IBM | Carbon design system, structured blue palette |
nvidia.md |
NVIDIA | Green-black energy, technical power aesthetic |
spacex.md |
SpaceX | Stark black and white, full-bleed imagery, futuristic |
spotify.md |
Spotify | Vibrant green on dark, bold type, album-art-driven |
uber.md |
Uber | Bold black and white, tight type, urban energy |
Choosing a Design
Match the design to the content:
验证清单 · VERIFICATION
- 已从 54 个模板目录中选取与内容匹配的设计系统（按 developer tools/docs/marketing/dark mode 等类别），并加载
templates/<site>.md全文 - HTML 的
:root已定义模板 Section 2 的完整色彩调色板为 CSS 自定义属性，排版（字号/字重/字间距）与模板 Section 3 一致 - 专有字体已按 Font Substitution 参考表替换为 Google Fonts 替代（含
<link>标签），且严格遵循原模板的 weight/size/letter-spacing - 组件样式（按钮/卡片/间距/阴影）遵循模板 Section 4-6 的规格，viewport meta 与 lang 属性正确
- 已用
write_file写入文件并通过browser_vision截图验证视觉准确性与模板一致性 - 交付物为渲染页面而非令牌规范；若需 DESIGN.md 则已切换至
design-md技能
约束规则 · RULES
- 输入约束: 参数类型、范围、格式必须校验
- 输出约束: 返回值结构、编码、命名必须一致
- 异常约束: 错误信息必须包含上下文和恢复建议
- 安全约束: 不执行未验证的任意代码，不暴露内部状态
Golden 集合 · GOLDEN SET
- Golden Input: 标准输入样本（覆盖正常路径）
- Golden Output: 预期输出（精确匹配或格式校验）
- Golden Error: 预期错误信息（覆盖失败路径）
Golden 集合是测试的单一真理来源。所有改进必须通过 golden 测试。
违反规则的操作视为不安全，必须拒绝或隔离。
每项验证必须可执行、可记录、可复现。验证失败时记录原因和修复。
- 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
Genes (策略基因)
紧凑策略表示。条件→策略。需要深度时参考完整文档。
- [POPU-001] 生成 HTML/CSS 时 → 从 54 个真实设计系统模板中选取匹配风格，加载其完整视觉语言（色彩、排版、组件、间距、阴影）
- [POPU-002] 遇到专有字体无法通过 CDN 加载时 → 使用模板提供的 Google Fonts 替代字体，并严格遵循原模板的字号、字重和字间距以保留视觉特征
- [POPU-003] 构建页面结构时 → 将模板中的色彩调色板定义为 CSS 自定义属性（:root variables），确保样式的一致性和可维护性
- [POPU-004] 需要区分设计流程与视觉实现时 → 结合
claude-design处理设计思维与验证，使用本技能提供具体的视觉词汇和代码实现 - [POPU-005] 交付物为正式设计令牌规范而非渲染页面时 → 切换至
design-md技能生成 DESIGN.md 文件，而非使用本技能的 HTML 生成模式 - [POPU-006] 完成 HTML 文件编写后 → 使用
write_file保存文件，并通过browser_vision验证视觉准确性，确保符合模板规范
示例 · EXAMPLES
给开发者 dashboard 选模板并生成页面
- 输入: 内容 = 数据密集的分析面板，需 dark mode。
- 操作: 按 Choosing a Design 选
linear.app.md（超极简暗色 + 紫色强调）或sentry.md（数据密集）；加载templates/<site>.md全文，把 Section 2 调色板写成:rootCSS 变量，按 Section 3-6 套排版/组件/阴影。 - 验证: 用
write_file写出 HTML 后经browser_vision截图比对模板，色彩/字重/间距一致。
专有字体 CDN 替换（Spotify 风格落地页）
- 输入: 选用
spotify.md，其 Circular 字体无 CDN。 - 操作: 按 Font Substitution 表用 Google Fonts 的 DM Sans 替代，粘贴模板 Hermes notes 中的
<link>标签，严格沿用原模板的 weight/size/letter-spacing。 - 验证: 渲染页面中字体栈生效（非回退默认体），绿底深色的品牌特征仍在。
- 输入: 选用
交付物是 DESIGN.md 令牌规范时
- 输入: 用户要"给我一份可复用的设计令牌文件"而非渲染页面。
- 操作: 不调用本技能的 HTML 生成模式，切换到
design-md技能输出 DESIGN.md；本技能仅用于挑选模板作为视觉词汇来源。 - 验证: 交付物为规范文件且不含渲染 HTML；页面需求时再回到本技能。