Frontend design skill for Claude Code

Anthropic ships a skill called frontend-design that changes how Claude Code approaches interface work. Here is what it does, how to install it, and how to pair it with the prompts on this site so the result looks like your product instead of a demo.

What the skill changes

Without it, Claude Code writes UI the way it writes everything: correct, generic, and identical to the last twenty projects. Centered hero, three feature cards, rounded corners, a violet accent. The skill adds a design pass before the code pass. Claude picks a direction, commits to a type pairing, decides on a grid and a spacing scale, and only then writes markup. It also tells the model what to avoid, which is most of the value.

It changes the decisions made before writing, not the CSS. There is no component library in it.

Installing it

Skills live in a skills folder that Claude Code reads at start. Anthropic publishes frontend-design in its skills repository; add it the same way you add any skill:

git clone https://github.com/anthropics/skills
cp -r skills/frontend-design .claude/skills/

Keep it inside the project if you want it version-controlled with the code, or in ~/.claude/skills/ for every project. Restart the session so it loads, then invoke it by name at the start of UI work: "Use the frontend-design skill to build the settings page."

Pairing it with a style prompt

The skill decides composition. It does not know your palette or the look you are after, so it will pick something reasonable and forgettable. That is where a style prompt fits. The order matters:

Paste the style prompt (or the "For design.md" block from a style page) into design.md under a heading like "Design direction".
Start the session and ask for the page with the skill by name.
When it needs a specific component, paste a snippet prompt. The skill respects the class names and the values because they are precise.

Skill first, then style prompt, then snippet prompts. Skip one and the model fills the gap with its defaults.

What it still gets wrong

Fonts. It will suggest a webfont pairing. Say "system font stack only" if you care about bytes, or name the two families you have licensed.
Motion. It tends to add fade-in-on-scroll to every section. Ask for hover and focus states only.
Dark mode. It offers one by default. Decline unless the brand calls for it.
New CSS. It stays on safe 2019 features. The New in CSS prompts name the newer ones so it uses them.

Codex, Cursor and the others

The skill format is Claude Code specific, but the idea ports. Cursor reads .cursor/rules, Codex reads AGENTS.md. Paste the same design-direction block there and you get most of the effect. The Cursor page has the exact file layout.

Start with one style: Swiss, Neo-brutalism or the full list.