The frontend-design skill is Anthropic's own guidance for making Claude design interfaces that don't look generated. It ships in Anthropic's skills repository and as the frontend-design plugin in the official Claude Code plugin marketplace, and it is the skill most people mean when they search for "the Claude frontend design skill". It is one Markdown file, 71 lines long when we read it on 9 October 2026. It contains no scripts and no component library; everything it changes, it changes by changing how Claude plans.
We ran it on a real brief and compared the result with the same brief and no skill. This page covers what the skill tells Claude, how to install it, what the run produced, and where it falls short.
What the skill tells Claude
Read the SKILL.md and you will find four ideas.
Design from the subject, not from habit. Claude is told to work out the product, the audience and the page's one job first, and to take its visual choices from the subject's own world: its materials, vocabulary and industry.
A named list of generated-design tells. This is the skill's most useful part. It lists the looks AI-generated pages currently cluster around, and asks Claude not to spend a free choice on them:
- a warm cream background with a high-contrast serif and a terracotta accent (Anthropic notes that its own Claude accent colour reads as a tell on a user's brief);
- a near-black page with one acid-green or vermilion accent;
- a broadsheet layout with hairline rules and dense columns;
- the "SaaS card kit": identical rounded cards, one radius everywhere, the same soft grey shadow and decorative gradient washes;
- template chrome: an ALL-CAPS eyebrow over every heading,
A · B · Cmeta strings, labels built with a spaced em dash, near-black instead of black, monospace data labels and an arrow on every button.
It also bans three typographic habits outright: accenting a single word in the headline, all-caps labels, and labels nobody needs. Numbered markers (01, 02, 03) are allowed only when the content really is a sequence.
Plan, check the plan, then build. Before any code, Claude writes a compact token system: 4 to 6 named hex colours, the typefaces and their roles, a layout sketched in ASCII, and the page's principles. It then reviews the plan against the brief, and revises any part that looks like the default it would produce for any similar page.
Restraint and plain copy. "Spend your boldness in one place", keep a quality floor (responsive, visible focus, reduced motion respected), and write copy that says what things do in the user's words.
Install it
In Claude Code, from the official marketplace:
/plugin install frontend-design@claude-plugins-official
From SkillGild, which installs the same skill for Claude Code, Codex, Cursor or Gemini CLI:
skillgild install frontend-design --agent claude-code
Or copy the folder by hand: clone anthropics/skills and place skills/frontend-design in ~/.claude/skills/. The install guide lists the folders for other agents. The skill triggers on its own when you ask for UI work; you can also name it in your prompt.
The test: one brief, with and without the skill
We gave Claude Code the same brief twice: a landing page for Ledgerline, a fictional bookkeeping app for freelance designers, as one self-contained HTML file with Google Fonts as the only external resource. The brief listed the sections and forbade invented testimonials, customer counts, logos and awards. One run had the frontend-design skill in its project folder and was told to follow it; the other had no skill. Both used Claude Code 2.1.278 with Claude Opus 5 on 9 October 2026, with the Skill tool switched off so no other installed skill could load. Each ran once, so treat this as one example, not a benchmark.
With the frontend-design skill. The hero is a working tagging demo: pick a client swatch, click a transaction, and the totals update.
The same brief with no skill. A competent page, built on the cream-and-serif look the skill lists as a tell.
What the skill changed
Before writing code, the skill run produced exactly the plan the SKILL.md asks for: a five-colour palette named for the subject ("drafting-paper sage", "navy ink"), with four client colours that mean "client" everywhere on the page rather than decorating it; Familjen Grotesk for text and IBM Plex Mono only for amounts and dates; an ASCII wireframe of the hero. Then it built the hero as a small working tool: choose a client, click transactions in a sample month, and the per-client totals and the quarterly tax set-aside recompute.
The baseline is not bad. Claude Opus 5 without help produced a tidy page with a product card, an accessible FAQ accordion and reduced-motion support. But it landed squarely on the defaults the skill names: a cream background with a serif display face, a highlighted phrase in the headline, an all-caps pill over the hero and all-caps section labels.
We counted those tells on both pages at 1440 px:
| Tell the skill names | No skill | frontend-design |
|---|---|---|
| All-caps labels | 9 | 0 |
A · B middle-dot strings |
4 | 0 |
| Spaced em dashes in the copy | 10 | 7 |
| One word or phrase accented in the headline | Yes | No |
| Numbered markers | 0 | 3, on the three real steps |
| Horizontal scroll at 375 px | 16 px overflow | None |
The whole frontend-design page, top to bottom (no sound). Watch it on skillgild.dev.
The skill run also cost more. It took 14 turns and 5.7 minutes against 2 turns and 3.3 minutes for the baseline, and Claude Code reported an API-equivalent cost of $1.61 against $0.98. Most of the extra went on the plan and a self-critique pass that made nine small edits.
What it did not fix
Both pages invented product facts the brief never gave. The skill run says Ledgerline connects to "most banks and credit unions in the US, Canada, the UK and the EU", keeps data exportable for 30 days, needs no card to start and matches receipts. The baseline made similar claims. frontend-design shapes how a page looks and reads; it does not know what your product does. Of the four skills we tested, only Impeccable refused to invent facts, because it records what the brief leaves unstated. With this skill, put the real facts in the brief and tell Claude not to add features.
It also kept seven spaced em dashes, so the tell list is a strong nudge rather than a filter. If a look matters to you, say so in the brief: the skill's own rule is that the brief's words always win.
The skill run at 375 px. No horizontal scroll; the demo stacks under the headline.
Briefs that get the most from it
The skill works from your brief, so give it the material it asks for:
Use the frontend-design skill to build the landing page for <product>.
Product facts (do not add others): <what it does, price, trial, integrations>.
Audience: <who>, and the one action the page should drive: <action>.
Keep: <brand colours, fonts, routes>. Avoid: <looks you dislike>.
Show me the token plan and ASCII layout before you write code.
Asking to see the plan first is cheap and gives you a decision point before the build. If the plan's palette or type is wrong for your brand, correct it there.
When to pick something else
frontend-design is a direction skill: it decides how a new page should look. For an audit of an existing interface, pair it with Web Design Guidelines or Impeccable's audit commands. For motion, add Emil Kowalski's skills. If you want options to choose between rather than one opinion, UI UX Pro Max searches a database of styles and palettes instead. The top 10 Claude frontend and design skills compares all of them, with the same brief run through four.
Originally published at skillgild.dev.
Top comments (0)