frontend-design

Adapted from Anthropic's official frontend-design skill for Open Design.

Use this skill when the user asks to build or improve a frontend interface: a website, landing page, dashboard, application screen, HTML/CSS artifact, React/Vue/Svelte component, or a visual redesign of an existing UI.

The goal is not just "make it nicer." The goal is to ship working frontend code with a clear design point of view, strong craft, and enough product detail that the result feels designed for the user's actual context.

Workflow

Understand the brief before choosing the look.
- Identify the audience, primary job, domain, and emotional tone.
- Note any technical constraints: framework, existing styles, accessibility, performance, export target, or responsive requirements.
- If the repo already has design tokens, components, screenshots, or a DESIGN.md, use those as the source of truth.
Commit to one specific aesthetic direction.
- Pick a direction that fits the product: brutally minimal, editorial, luxury, playful, industrial, retro-futuristic, dense operational, calm enterprise, artful consumer, or another precise direction.
- Make the direction concrete through typography, spacing, color, hierarchy, motion, and component shape.
- Avoid generic AI defaults: purple-blue gradients, vague glass cards, interchangeable SaaS layouts, over-rounded cards, stock icon rows, and decorative blobs that do not serve the interface.