Claude Code's frontend-design skill, and what it still needs

The frontend-design skill is a set of instructions Anthropic publishes for Claude Code that makes Claude work like a studio design lead before it writes UI: ground the design in the subject, plan a small token system, check that plan against generic defaults, then build and critique. It produces more deliberate pages than a bare prompt does.

It does not know your brand, your audience or your media. Its own text also says that when a brief pins down a visual direction, Claude follows the brief exactly. The skill supplies discipline, and the specification supplies the direction, which is why the two work best together.

What follows: where the skill comes from, how to install it, what it tells Claude, what it changes, and what you still have to hand it.

Where the skill comes from#

Anthropic described the approach in November 2025 in Improving frontend design through Skills, written by its Applied AI team. The post calls the problem distributional convergence: without direction, a model reaches for the most probable choices in its training data, which on the web means Inter, purple gradients on white and minimal motion. Putting design guidance in a system prompt would weigh on every unrelated request, so it went into a skill that loads only when a task calls for it. The post put that general frontend skill at about 400 tokens.

In Claude Code's terms a skill is a folder with a SKILL.md file (skills docs). Its description stays in context so Claude knows it exists, and the body loads only when the skill is invoked, by you or by Claude.

The current version lives in two public repositories:

• anthropics/claude-plugins-official, as the frontend-design plugin, version 1.1.1 at the time of writing.
• anthropics/skills, as a standalone skill.

The two SKILL.md files are identical at the time of writing, and both were last rewritten in September 2026, according to their commit history. The current text is about twice the length of the 2025 release. It lists the looks that generated design falls into, with hex values, and adds a plan-and-review step before any code. The 2025 text named fonts to avoid, Inter, Roboto and Arial among them; the current one names none and works on process instead, so older write-ups describe rules that are no longer there.

What the skill tells Claude to do#

Paraphrased, the current text opens with two rules about content before it says anything about style:

• Start from the subject. Identify the product, its audience and its main job, and take visual choices from that world's industry, materials and vernacular.
• Open with the most characteristic thing. The hero should show the subject's world in its best form: a headline, an image, an animation, a live demo.

Those two are the rules most briefs skip. These three designs are built around their subject's world, which is what the skill asks a hero to do:

The rest of the text is about restraint and process:

• Treat type as the personality. One family, or two clearly distinct ones, chosen on purpose and set on a clear scale after The Elements of Typographic Style, with lines under 80 characters.
• Drop three typographic tells: one accented word in a headline, all-caps labels, and labels nobody needed.
• Let structure carry information. Numbered markers only for content that really is a sequence.
• Use motion sparingly. One orchestrated moment over fade-ups on every section and hover effects on every card, with motion that answers a person's action welcome.
• Plan in tokens, then review. Four to six named hex values, type roles, a layout sketch and principles, then a check of that plan against what any similar prompt would produce.
• Spend boldness in one place, keep the rest quiet, and build to a floor: responsive, visible keyboard focus, reduced motion respected.

For calibration it also names the looks generated design keeps landing on: a cream ground near #F4F1EA with a terracotta accent near #D97757, a near-black with one acid-green or vermilion accent, a broadsheet layout with hairline rules, the SaaS card kit with an rgba(0,0,0,.1) shadow under every card, and template chrome such as tinted blacks like #0B0B0B and #111. Each is legitimate for some briefs, the text adds; the problem is reaching for them when nothing in the brief asked.

How to install and run it#

1. Install the plugin#

Claude Code registers Anthropic's official marketplace the first time you open an interactive session, so one command is enough (plugin docs):

/plugin install frontend-design@claude-plugins-official

When the panel opens, choose user scope for every project on your machine, or project scope to turn it on for everyone who works in the repository. From a shell, claude plugin install frontend-design@claude-plugins-official does the same job. To confirm it loaded, open /plugin and look on the Installed tab, or type / and look for the skill under the plugin's name.

2. Let it trigger, or call it#

The skill's description tells Claude to use it when building new UI or reshaping an existing one, so "build the landing page" loads it without being asked. To force it, use the namespaced name: plugin skills run as /plugin-name:skill-name, which here is /frontend-design:frontend-design.

3. Use the same file in other tools#

The skill is plain Markdown in the Agent Skills format. Cursor loads skills from .claude/skills/ for compatibility (Cursor docs), so a copy at .claude/skills/frontend-design/SKILL.md in the repository works in both tools. Claude Code vs Cursor for frontend work covers what else carries over between the two.

What changes in the output#

Anthropic's post showed before-and-after pairs for a SaaS landing page, a blog layout and an admin dashboard, and noted that an instruction about typography alone seemed to lift other parts of the design too. The current text works on process more than on any one style, and three changes follow from that:

1. A plan before code. Claude writes the token system and layout first, which gives you something to correct before a file exists.
2. Fewer house defaults. The looks above are named so Claude can recognize them in its own plan and revise.
3. A floor of craft. Focus states, reduced motion, line length and CSS specificity are written in as requirements.

What it cannot change is that the direction is invented per session. Two sessions on the same one-line brief can produce two different, equally deliberate pages, and the skill even suggests keeping notes so later passes try something new. For an experiment that is useful. For a brand, a client site or a product that ships updates for a year, it means the look lives in a conversation instead of a file.

There is a second limit. The skill can choose a palette and a typeface, but it cannot choose a film, a product photograph or a cut-out, because Claude Code writes code and does not make media. A carefully planned layout around a CSS gradient still reads as generated, which is the gap described in why AI websites look the same.

What it still needs from you#

The skill's plan step asks for exactly the decisions a specification makes. Hand them over and the plan becomes a check of your values instead of an invention. Which model runs the skill matters less than this table, a point the frontend model comparison makes in detail:

Written as a brief, that table becomes a few lines Claude cannot misread:

Palette: ground #101B3D, ink #EDE7FF, accent #FF5B2E (CTA and one highlight only).
Type: display 800 at clamp(4rem, 11vw, 10rem), tracking -0.04em; text 400 at
17px/1.6, measure 60ch; scale ratio 1.25.
Hero: the cut-out stands in front of the headline; the headline sits behind it.
Motion: one load sequence, cubic-bezier(0.16, 1, 0.3, 1), 900ms, stagger 60ms.
Hover response 200ms, transform only. Nothing else animates on scroll.
Media: /media/hero-cutout.webp (alpha), /media/loop.mp4 (muted, playsinline).

Look at the last motion line. Saying what does not move is as much a decision as saying what does, and the skill's warning about scattered motion is easiest to honor when the brief already rules it out. For the token file itself, design tokens for AI-built websites goes further.

The skill and a full specification together#

The sentence that matters most in the skill is short: where the brief pins down a visual direction, follow it exactly, because the brief's own words always win, even when the brief asks for one of the looks on its calibration list. That makes the skill a good partner for a written art direction. The specification decides, and the skill makes Claude plan against it, catch its own defaults and hold the quality floor while it builds.

That pairing is what Thanor is built for. Each design in the library comes with a long prompt that is a full art direction written as values: the palette in hex, the typefaces and scale, spacing, easing curves and durations, the section order and every interaction, plus hosted media that the built page uses. Paste one into Claude Code with the skill installed, or connect the Thanor MCP so Claude fetches it with its get_prompt tool (setup). The full build, pass by pass, is in how to build a website with Claude Code.

Two designs where the brief makes a loud choice on purpose, one in color and one in type:

For 3D scenes, where the skill has the least to say, the 3D website guide lists the camera, light and material values a brief should carry.

Mistakes when you lean on the skill#

The skill is good at what it covers. Most disappointments come from asking it to cover the rest.

• Treating it as art direction. It gives Claude a process. With a one-line brief, the direction is still Claude's guess, made carefully.
• Leaving the subject vague. The skill builds from the subject's world. "A landing page for a startup" gives it no world to build from.
• Accepting the copy unchecked. The skill has good rules for interface writing, such as active voice and buttons that say what happens, but it cannot know your product's facts.
• Re-rolling for variety mid-project. Each new session may plan a new direction. Freeze the one you like in a file and import it from CLAUDE.md.
• Skipping the plan review. Ask to see the token plan before any code, and correct it there, where a change costs one line.
• Stacking design skills that disagree. Claude Code's memory docs warn that when two instructions contradict each other, Claude may pick one arbitrarily. One skill and one specification is enough.

The prompts that fix each of these, from the interview to the final screenshot check, are collected in Claude Code prompts for UI that ships.

Try it with a free direction#

Install the skill, then open Vesperion and copy its prompt; it is free with an account. Paste it into Claude Code as the brief and ask to see the plan before any code is written. The plan should repeat the prompt's values instead of inventing its own, which is the skill doing its job with a direction to follow. Then ask a new session for "a portfolio hero" in one line and read that plan next to the first.

When you want the same discipline on other directions, the library has them, and the paid plans on pricing include the Thanor MCP for Claude Code.