The Claude Code frontend-design skill, and what it needs from you

Ask a coding agent for a landing page with no other direction and you tend to get the same page. Anthropic described the pattern in November 2025 in Improving frontend design through Skills: without guidance, a model "will almost always conform to Inter fonts, purple gradients on white backgrounds, and minimal animations." Their name for the cause is distributional convergence. Safe design choices dominate the web the model learned from, so an unguided model samples from the middle.

The frontend-design skill is Anthropic's fix, packaged so Claude Code can load it on its own. For this guide I read the skill file, the plugin manifest and the Claude Code docs, and everything below comes from those sources, linked where it appears.

What the skill and the plugin are

A skill in Claude Code is a folder with a SKILL.md file in it. The file has a short YAML header with a name and a description, then plain instructions. Claude reads the description to decide when the skill applies, and loads the instructions only then, so a skill costs little context until it is used. The skills docs also let you call one directly by typing a slash and its name.

A plugin is the packaging that installs skills (and sometimes commands, agents, hooks or MCP servers) from a marketplace. The frontend-design plugin holds exactly one skill. Its README says "Claude automatically uses this skill for frontend work," and the plugin manifest lists version 1.1.0 by Prithvi Rajasekaran and Alexander Bricken of Anthropic.

The same SKILL.md lives in three public places, and on October 19, 2026 all three copies were identical:

• anthropics/claude-code, under plugins/frontend-design
• anthropics/claude-plugins-official, the official marketplace Claude Code installs from
• anthropics/skills, Anthropic's example skills repo, where it was last updated on September 3, 2026 "to avoid generic design defaults"

So "the frontend-design skill" and "the frontend-design plugin" are the same instructions. The plugin is how most people install them.

How to install it

In a Claude Code session in your terminal, run:

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

Per the plugin docs, that opens the plugin's details, where you pick a scope. User scope turns it on in every project on your machine. Project scope writes it into the repo's .claude/settings.json, so collaborators get it enabled too (each of them still installs it once). Local scope keeps it to you in that one repo. For the official marketplace the details pane also shows a context cost estimate, which is worth a glance before you install anything.

From a plain shell, outside a session, the same install is:

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

Claude Code registers the official marketplace the first time you open an interactive session. On a fresh machine where nobody has, run claude plugin marketplace add anthropics/claude-plugins-official first.

If you would rather take the skill on its own, copy SKILL.md into .claude/skills/frontend-design/ in your repo or into ~/.claude/skills/frontend-design/ for every project. Anthropic's skills repo also installs as a marketplace (/plugin marketplace add anthropics/skills), and its example-skills plugin includes frontend-design along with the rest of the examples.

Two things trip people up. Plugin skills are namespaced, so the direct call is /frontend-design:frontend-design. And cloud sessions, including Claude Code in the browser, don't load plugins you installed on your own machine. A skill committed to the repo's .claude/skills/ does load there.

What the skill tells Claude to do

The skill is about 1,500 words. It opens by casting Claude as "the design lead at a design studio known for giving every client a distinct visual identity," for a client who "has already rejected proposals that felt cliché or templated." Every rule after that follows from the brief.

Start from the subject. If the brief doesn't say what the product is, Claude is told to propose what it is and who it's for, then confirm before designing. The skill's example is that a toy for girls aged 8 to 11 should look nothing like a dashboard for financial analysts.

Treat type as the personality. One family or two, chosen on purpose, with a clear scale and lines under 80 characters. It names three habits it calls "the commonest tells of a generated page": one accented word in a headline, all-caps labels, and labels nobody needed above content.

Use structure only when it means something. Numbered markers like 01, 02 and 03 belong on content that is actually a sequence. Motion is for drawing attention or answering a click. Fade-and-slide entrances on every section "read as AI-generated."

Plan, check the plan, then build. Before writing code, Claude drafts a compact token system: four to six named hex colors, the typefaces and their roles, a layout sketched in prose and ASCII wireframes, and a few principles. Then it reviews that plan against the brief and revises anything that looks like the default it would produce for any similar page.

Know the current defaults by name. The September rewrite added a calibration list of looks that generated design "clusters around." A warm cream background near #F4F1EA with a serif and a terracotta accent near #D97757 is on it, and the skill points out that this accent is Anthropic's own. So are near-black pages with one acid-green accent, broadsheet layouts with hairline rules, the SaaS card kit with one radius and one soft shadow on everything, and template chrome like tracked-out eyebrow labels and arrows appended to buttons.

Spend boldness in one place. One memorable element, everything around it quiet. It asks for a quality floor without announcing it: responsive to mobile, visible keyboard focus, reduced motion respected, and accessible color. It suggests screenshots for self-critique where the environment allows, and closes with Chanel's advice to remove one accessory before leaving the house.

The section on interface copy holds up on its own. Buttons say what happens ("Save changes," with "Submit" as the example to avoid), an action keeps its name through the whole flow, and errors explain the fix without apologizing.

Where it helps

The skill earns its place on blank-page work. A new marketing page, a prototype, a side project or a pitch demo all fit, because there is no system yet and a generic default is the real risk. The calibration list helps most here. A model that has been told what the cream-and-terracotta page looks like has a reason to pick something else.

The plan step helps even when you ignore the aesthetics. Getting a named palette and a wireframe back before any code exists gives you something cheap to reject. Correcting a plan is a short message, while correcting a finished page means reading the CSS.

The copy rules carry over to product UI as written. A button named for its action and an error that says how to fix it are good on any screen.

Where it stops

The skill is written for a studio pitching a fresh identity, and its instincts point that way. It tells Claude to "take aesthetic risk if justified" and to avoid the families "you would reach for on any other project." Inside a product with an established design system, that is the wrong instinct. You want the existing spacing scale and the components that already ship, in the font the brand already uses.

It also cannot know what your system is. The skill has no idea what your tokens are called or which choices are already fixed. Its own rule covers that gap, though. Where the brief pins down a visual direction, Claude is told to follow it exactly, because "the brief's own words always win." So the quality of the result depends on how much of your system reaches Claude as part of the brief.

Self-critique by screenshot needs an environment that can take one. In a terminal session without a browser tool, the build-then-look loop the skill describes doesn't happen, and a human still has to look.

How a DESIGN.md fills the gap

The plan the skill asks Claude to write before coding (named colors, typefaces and roles, layout guidance, principles) is close to the contents of a DESIGN.md. That's the file Google Labs open-sourced in April 2026 as a plain-text format for describing a visual identity to coding agents. It pairs YAML tokens with prose that explains what each value is for.

Put one at the root of the repo and the skill has a brief that "pins down a visual direction." In practice that means telling Claude, in CLAUDE.md or the prompt, to read the file first:

Read DESIGN.md before any UI work. Its tokens and its Do's and Don'ts
are the brief. Use the frontend-design skill's plan step, but take the
palette, type and spacing from DESIGN.md instead of inventing them.
Only propose a new token if the file has nothing that fits, and say so.

The skill then does what it is good at inside the lines you drew: layout ideas, hierarchy, where the one bold move goes, honest copy. The DESIGN.md holds the parts that should never be reinvented. The DESIGN.md guide has a full template and covers what to put in each section.

The essay Teach the agent your system once makes the same case from the other side. The useful change for designers is having one place to write a product's rules down, so the agent reuses them on the next task.

A short setup that works

1. Install the plugin at project scope, so everyone in the repo gets the same instructions.
2. Write a DESIGN.md with your real tokens and a Do's and Don'ts section, and lint it with npx @google/design.md lint DESIGN.md.
3. Add one line to CLAUDE.md pointing at DESIGN.md as the brief for any UI work.
4. Ask for the plan first and review it before you let Claude write components.
5. Read the result yourself, in a browser, at a phone width.

Anthropic's skills README notes that its example skills are "provided for demonstration and educational purposes" and that behavior can differ from what the files show. Treat the skill as a strong default you can read in ten minutes. It is worth reading the actual SKILL.md before you rely on it, because it changes. It was updated twice in 2026.