| name | frontend-design |
| description | Create distinctive, production-grade frontend interfaces with high design quality. ALSO covers HTML design artifacts: slide decks, interactive prototypes, animation demos, design system showcases. Merged design-artifact workflow (questions-driven, verifier-loop), starter components (deck_stage / design_canvas / animations / device frames), Tweaks Protocol. Triggers (English): build web components, create website, landing page, dashboard, React component, web UI, styling, beautify, frontend design, web design, slide deck, interactive prototype, animation demo, design system showcase, HTML artifact, design mockup. Triggers (Chinese): 前端开发, 网页设计, 制作网页, 创建网站, 做界面, 前端UI, React组件, 样式美化, Web开发, 做前端, 幻灯片, 做PPT, 交互原型, 设计 artifact, 动画演示, 设计系统展示。 Use when the user asks to build web components, pages, artifacts, posters, applications, or HTML design deliverables.
|
| license | Complete terms in LICENSE.txt |
| github_url | https://github.com/anthropics/skills |
| github_hash | f458cee31a7577a47ba0c9a101976fa599385174 |
| version | 0.1.0 |
| triggers | ["build web components","slide deck","landing page prototype","animation demo","interactive prototype","design system showcase","HTML artifact","幻灯片","落地页原型","动画演示","交互原型","设计稿"] |
| secondary_sources | [{"name":"react-best-practices","url":"https://github.com/vercel-labs/agent-skills","hash":"b9c8ee0643d87d3c5a953d1e22382ff2ead39229"}] |
This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices. It ALSO covers HTML design artifacts: slide decks, landing-page prototypes, animation demos, interactive prototypes, and design-system showcases (merged from the former design-artifact skill).
The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.
Design Thinking
Before coding, understand the context and commit to a BOLD aesthetic direction:
- Purpose: What problem does this interface solve? Who uses it?
- Tone: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
- Constraints: Technical requirements (framework, performance, accessibility).
- Differentiation: What makes this UNFORGETTABLE? What's the one thing someone will remember?
CRITICAL: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.
Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:
- Production-grade and functional
- Visually striking and memorable
- Cohesive with a clear aesthetic point-of-view
- Meticulously refined in every detail
DESIGN.md System
DESIGN.md is a standardized format for capturing complete visual design systems in markdown — directly consumable by AI agents. It complements CLAUDE.md (code behavior) and AGENTS.md (build behavior) with the visual/aesthetic layer.
Reading DESIGN.md
When a project contains a DESIGN.md in its root:
- Read it first — DESIGN.md overrides all default aesthetic choices below
- Extract design tokens — colors, typography, spacing, elevation from the spec
- Follow component patterns — buttons, cards, inputs must match the spec's states and styles
- Respect Do's and Don'ts — the spec's guardrails take precedence over this skill's defaults
- Use Agent Prompt Guide — Section 9 of DESIGN.md contains ready-to-use color references
Generating DESIGN.md
When no DESIGN.md exists and the user wants a design system, generate one following the 9-section schema:
| # | Section | What to Define |
|---|
| 1 | Visual Theme & Atmosphere | Mood descriptor, design density, overall philosophy (e.g., "void-black canvas, emerald accent, terminal-native") |
| 2 | Color Palette & Roles | Semantic name + hex + functional role for each color. Include: primary, secondary, accent, background, surface, text, muted, border, error, success, warning |
| 3 | Typography Rules | Font families (display + body), full size hierarchy table (h1-h6, body, caption, overline), line-height, letter-spacing, font-weight |
| 4 | Component Stylings | Buttons (primary/secondary/ghost + hover/active/disabled states), cards, inputs, navigation, badges, tooltips with exact CSS values |
| 5 | Layout Principles | Spacing scale (4px base or 8px base), grid system, max-width, whitespace philosophy, container padding |
| 6 | Depth & Elevation | Shadow system (sm/md/lg/xl), surface hierarchy (background → surface → elevated → overlay), border treatments |
| 7 | Do's and Don'ts | Design guardrails: what to always do, what to never do, specific anti-patterns for this brand |
| 8 | Responsive Behavior | Breakpoints table, touch target minimums (44px), collapsing strategy (stack/hide/drawer), mobile-specific overrides |
| 9 | Agent Prompt Guide | Quick color reference block for copy-paste, ready-to-use Tailwind/CSS variable declarations, example prompts |
Brand Mood Vocabulary
Use evocative compound descriptors to capture design identity in minimal tokens:
By archetype:
- Luxury/Premium: "cinema-black canvas, monochrome austerity, monumental display type"
- Technical/Developer: "terminal-first, monochrome simplicity, code-forward"
- Editorial/Content: "paper-white broadsheet density, custom serif, ink-blue links"
- Playful/Friendly: "playful gradients, friendly aesthetic, rounded surfaces"
- Fintech/Trust: "clean blue identity, trust-focused, institutional feel"
- Cinematic/Media: "dark cinematic UI, media-rich layout, waveform aesthetics"
- Minimal/Precise: "black and white precision, radical subtraction, systematic typography"
- Bold/Energetic: "bold dark interface, neon accents, high-contrast surfaces"
Preview HTML Generation
After generating a DESIGN.md, also generate a preview.html visual catalog containing:
- Color swatches (all palette colors with hex labels)
- Typography scale (all heading levels + body + caption rendered)
- Button states (primary/secondary/ghost x default/hover/active/disabled)
- Card examples (basic, with image, interactive)
- Input states (default, focus, error, disabled)
- Spacing scale visualization
- Shadow/elevation examples
Generate both light and dark variants (preview.html + preview-dark.html) when the design system includes dark mode.
HTML Artifact Workflow (6 Steps)
When the task is to build an HTML artifact (slide deck, prototype, animation demo, showcase), follow this workflow. Deep-dive details in reference/workflow.md.
- Understand — Clarify scope with
questions_v2 (below). Do not skip: one ambiguous answer now costs ten revisions later.
- Explore — Pick a starter (
reference/starter-patterns.md); decide on 1 or N design variations; commit to an aesthetic direction (see Design Thinking).
- Plan — Outline the structure: sections, data, states, transitions. For decks, one section per slide. For prototypes, one component per screen.
- Build — Produce the HTML. For React artifacts, follow
reference/react-babel-guide.md (pinned 18.3.1 + Babel 7.29.0 + integrity hashes). Apply design tokens from reference/design-tokens.md.
- Verify — Self-check against
reference/anti-slop.md (5 core rules). Confirm: real content not lorem ipsum, distinctive typography not default fallbacks, contrast-safe, starter contracts honored.
- Summarize — Report: what was built, what starter(s) used, what variations presented, what tweaks are available.
questions_v2 Checklist
Before building an HTML artifact, clarify these 5 mandatory dimensions:
| Dimension | Question |
|---|
| Context | What is this for — talk, pitch, portfolio, internal review? Who is the audience? |
| Variation count | Do you want one polished option, or multiple variations to compare? |
| Divergence | Should variations differ in color, typography, layout, or all three? |
| Focus | Which section matters most — hero, pricing, testimonial, data viz, motion? |
| Tweaks | Should the artifact support post-generation tweaks via EDITMODE markers? |
Full 10-question JSON template lives in reference/workflow.md.
Precedence Rule
IF the project has DESIGN.md OR explicit brand tokens:
→ questions_v2 REDUCES to missing-facts-only.
Skip Context / Divergence (already defined by DESIGN.md).
Still ask: Variation count, Focus, Tweaks — these are artifact-specific.
ELSE (no DESIGN.md, no brand tokens):
→ Ask the full questions_v2 checklist.
DESIGN.md and explicit brand tokens are the PRIMARY authority; questions_v2 is the fallback for greenfield work. Do not re-ask what DESIGN.md already answers.
Starter Components
Always prefer a starter over hand-rolling. Each starter provides a contract (postMessage events, data attributes, localStorage keys) that the host environment depends on.
| Starter | Use Case | How to Load |
|---|
starters/deck_stage.js | Slide decks (1920×1080 letterboxed, keyboard/touch nav, PDF print) | <script src="starters/deck_stage.js"></script> |
starters/design_canvas.jsx | Multi-option side-by-side comparison grid | <script type="text/babel" src="starters/design_canvas.jsx"> |
starters/animations.jsx | Timeline / scrubber-driven animation demos | <script type="text/babel" src="starters/animations.jsx"> |
starters/device_frames/*.jsx | iOS / Android / macOS / browser chrome for mockups | <script type="text/babel" src="starters/device_frames/ios_frame.jsx"> |
Usage contracts and copy-paste examples: reference/starter-patterns.md.
Critical: deck slide labels are 1-indexed (01 Title, not 00 Title). localStorage key for deck state is deck_stage_index. Nav controls must live outside the scaled element.
Tweaks Protocol (Summary)
When the host requests tweakable output, wrap editable regions with markers and respond to postMessage from the parent frame:
<h1>Your Headline</h1>
The parent posts four message types: read, write, list, commit. The artifact responds with the matching region's current HTML or acknowledges the write. Full protocol + handler skeleton: reference/react-babel-guide.md.
Frontend Aesthetics Guidelines
Focus on:
- Typography: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.
- Color & Theme: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
- Motion: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
- Spatial Composition: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
- Backgrounds & Visual Details: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.
NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character.
Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.
IMPORTANT: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.
Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.
Reference Index
When references conflict, the Authority column resolves precedence.
| Reference | Topic | Authority |
|---|
reference/typography.md | Full type scale, distinctive font pairing | PRIMARY (overrides design-tokens.md font defaults) |
reference/color-and-contrast.md | Color theory, WCAG contrast | PRIMARY |
reference/spatial-design.md | Spacing scale, grid, breakpoints | PRIMARY |
reference/anti-slop.md | Tactical anti-AI-slop checklist (5 rules + avoid list) | PRIMARY |
reference/design-tokens.md | CSS custom properties, oklch, artifact-fallback defaults | FALLBACK (when no DESIGN.md or brand tokens) |
reference/react-babel-guide.md | Inline JSX CDN setup, scope isolation, EDITMODE | REFERENCE |
reference/workflow.md | 6-step HTML artifact workflow deep-dive | REFERENCE |
reference/starter-patterns.md | Starter component contracts & use cases | REFERENCE |
用户确认检查点
以下操作前必须暂停并询问用户确认：
| 检查点 | 触发条件 | 确认内容 |
|---|
| 覆盖现有文件 | 生成的代码将写入已有项目文件 | 展示将被修改的文件列表，确认覆盖范围 |
| 设计方向选择 | 存在多个合理的美学方向时 | 展示 2-3 个设计方向的核心特征，请用户选择 |
| 第三方依赖引入 | 代码需要安装新的 npm 包或外部资源 | 列出依赖名称和用途，确认用户同意引入 |
错误处理与回退
| 错误场景 | 检测信号 | 回退策略 |
|---|
| 框架/技术栈不匹配 | 用户指定了 React/Vue 但生成了纯 HTML | 重新确认技术栈要求，按指定框架重写 |
| 生成的样式与 DESIGN.md 冲突 | 项目存在 DESIGN.md 但输出未遵循 | 重新读取 DESIGN.md 提取设计 token，按规范调整 |
| 响应式布局失效 | 组件在移动端显示异常 | 检查断点设置和 media query，补充移动端适配 |
| 字体/资源加载失败 | CDN 字体或外部资源不可用 | 替换为系统字体或本地资源，确保界面可用性 |
原则：不要静默失败——报错时同时提供修复建议。
