Home · Frontend & Design · frontend-design
frontend-design
Anthropic's official skill for distinctive, non-templated visual design — aesthetic direction, typography and layout guidance for new UI.
Score
“The rare guidance skill whose live output is visibly less generic than baseline — docked mainly for a vague trigger description and zero worked examples.”
Ran the standard task with and without the skill. The difference was visible and measurable, not a matter of taste.
Sub-scores & evidence
| Task completion | All four required sections delivered in one file, responsive at three breakpoints. | 11/12 |
| Beats the no-skill baseline | Baseline fell into the exact default cluster the skill names; the skill version avoided all of it. | 8/10 |
| Self-verification in output | Two-pass process visible in the work: plan, review against the brief, four defaults revised before building. | 5/5 |
| Failure behaviour | No failure scenario was injected in this round; partial credit for the revise-if-generic loop observed in the plan. | 2/3 |
A clear plan → review → build → critique loop with an explicit quality floor (responsive, focus visible, reduced motion, accessibility).
Sub-scores & evidence
| Clear steps | Ordered sections, but written as prose rather than a numbered procedure. | 5/6 |
| Inputs & outputs defined | The plan deliverable is precisely specified (4–6 named hex tokens, type roles, layout concept); brief inputs are looser. | 3/4 |
| Checks & verification | Review-against-brief pass plus self-critique and a quality-floor checklist. | 4/4 |
| Stop conditions | One explicit ask-the-client point when the subject is unclear. | 2/3 |
| Failure recovery | Revise-the-plan loop covers design failure; nothing on build errors. | 2/3 |
71 lines and roughly 2,350 tokens — far under the 500-line guideline. One flat file, but at this size layering would add cost, not save it.
Sub-scores & evidence
| Leanness | SKILL.md is 71 lines / 9,390 bytes. | 5/5 |
| Progressive disclosure | No reference files; everything sits in the always-loaded layer — acceptable only because the total is tiny. | 3/5 |
| Organisation & naming | Five headed sections in working order. | 3/3 |
| No padding | Dense guidance; minor overlap between principles and restraint sections. | 2/2 |
The weakest dimension. The description says what it does but never says when NOT to use it — expect occasional false triggers on plain frontend bug fixes.
Sub-scores & evidence
| What it does | Distinctive visual design for new UI or reshaping existing UI — unambiguous. | 4/4 |
| When to use | Scenarios are clear but there is no explicit 'Use when…' phrasing. | 3/4 |
| User-word keywords | Covers 'distinctive', 'typography', 'templated'; misses common phrasings like 'make it beautiful'. | 2/3 |
| When NOT to use | No boundary statement at all in the description. | 0/3 |
| Naming & voice | Short functional name; impersonal description. | 1/1 |
Pure guidance text: no scripts, no commands, no network, no file access. Nothing to abuse.
Sub-scores & evidence
| Least privilege | Requests no tools, files or network access. | 4/4 |
| Declared tool scope | No allowed-tools field declared. | 2/3 |
| Sensitive-action confirmation | No sensitive operations exist in scope; nothing stated either way. | 2/3 |
No worked examples — but its anti-pattern list, complete with the exact hex values of the defaults to avoid, works as a set of negative examples.
Sub-scores & evidence
| Examples & templates | Zero positive examples; five named default-trait clusters with concrete values as counter-examples. | 2/3 |
| Scripts & instruction precision | Ships no scripts (this sub-score has limited meaning for pure-guidance skills). | 2/3 |
| Dependencies stated | Zero dependencies; runs anywhere Markdown skills run. | 2/2 |
| Concrete instructions | Guidance-level, though the plan format is specified concretely. | 1/2 |
Best for / not for
Best for
- New brand and marketing pages that must not look templated
- Developers who want a design point of view, not a component kit
- Reshaping an existing page's visual identity
Not for
- Anyone expecting ready-made templates or code snippets
- Data-dense dashboards and admin UI
- Teams that need strict brand-guideline enforcement — this skill encourages aesthetic risk
What it does
frontend-design is a pure-guidance skill: a single SKILL.md (71 lines) with no scripts, templates or assets. It casts the agent as a design lead whose client has already rejected templated proposals, then pushes three things — ground the design in the subject’s own world, follow a two-pass process (plan, review the plan against the brief, then build), and spend boldness in exactly one place while keeping everything else quiet.
Its most distinctive content is a calibration list of the five looks AI-generated design currently clusters around — warm cream with terracotta and a serif display, near-black with one acid accent, broadsheet layouts, the uniform rounded-card SaaS kit, and template chrome like all-caps eyebrow labels — with instructions to treat them as defaults to avoid, not choices, unless the brief itself asks for one.
How the live test went
We ran one standard brief twice, with and without the skill loaded. The baseline output was clean and competent — and landed, unprompted, on nearly the exact default cluster the skill names: a warm bone background (#F5F1E8, against the skill’s listed #F4F1EA), a clay-toned accent, system serif headings, uniform rounded pricing cards.
The with-skill run worked differently in a way that left evidence: its written plan first proposed the same cream/terracotta direction, caught it in the review pass, and revised four things before building — a cold sea-mist/sea-pine base, Fraunces + Archivo instead of system stacks and Inter, pricing redrawn as sauna bench levels, and a CSS sauna thermometer as the single memorable element. It also shipped prefers-reduced-motion handling and visible focus styles that the baseline omitted entirely.
Where it falls short
The description never states when the skill should not fire, so borderline frontend tasks (a pure layout bug fix, for instance) risk pulling in a full design-direction process they don’t need. It also ships no positive worked examples: if your agent needs a concrete pattern to imitate rather than principles to apply, this skill gives it nothing to copy. And its guidance skews toward brand and marketing surfaces — dashboards get one acknowledgement that they differ, and no real help.
Live A/B test — the evidence
One brief, run twice: a landing page for 'Northlight Sauna Club', a Finnish sauna & cold-plunge membership club — hero, three membership tiers, ritual & weekly schedule, footer CTA. Single HTML file, responsive.
With the skill
#E7EDEA
#12332E
#A8BDB2
#D9A441
#6B4A2B
Fonts: Fraunces (display) + Archivo (body)
- Hero centrepiece: a CSS-drawn wooden sauna thermometer, needle sweeping to 85° on load
- Pricing drawn as three sauna bench levels instead of cards
- Plan review caught and revised four generic defaults before any code was written
Without the skill (baseline)
#F5F1E8
#C08552
#173A34
#A8C6CE
Fonts: System serif stack (Palatino / Georgia) + system sans (Roboto)
- Three equal rounded pricing cards (16–20px radius) with a 'Most popular' pill
- Gradient hero with a big-number stats row
- Competent and clean — and generic in exactly the ways the skill lists
| Objective count | With skill | Baseline |
|---|---|---|
| Gradient washes | 1 | 2 |
| Uniform large-radius card kit | None | Yes (16–20px) |
| prefers-reduced-motion respected | Yes | No |
| Visible keyboard focus style | Yes | No |
| External assets | 0 | 0 |
The baseline was competent — and generic in exactly the ways this skill warns about. The skill's effect is measurable, not vibes.
Full outputs: With-skill page (full output) · Without-skill page (baseline) · Design plan & review pass
Trigger tests
| Prompt | Expected | Result |
|---|---|---|
| “Design a landing page for my SaaS product” | trigger | Triggers — squarely 'building new UI'. |
| “This page looks like a template, redo the visuals” | trigger | Triggers — 'reshaping an existing one' plus the anti-templated framing. |
| “Give this dashboard a distinctive visual identity, pick typography and a palette” | trigger | Triggers — aesthetic direction and typography are named in the description. |
| “Write the API docs for this endpoint” | skip | Skips — unrelated to visual design. |
| “Fix the flexbox alignment bug in this component” | skip | Borderline — no when-not boundary in the description, so a false trigger is plausible. |
Desk-simulated against the skill's description matching rules; noted as simulated wherever the score depends on it.
Security screen
✓ Pass
Credential theft / exfiltration
✓ Pass
Remote code download & execute
✓ Pass
Data sent to unrelated third parties
✓ Pass
Hidden instructions (incl. invisible Unicode)
✓ Pass
Obfuscated payloads
✓ Pass
Privilege escalation requests
Screening only — not a security certification. Industry context: Snyk's ToxicSkills scan of 3,984 public skills found security flaws in 36.82% of them, which is why every review on this site carries this section.
Install
Claude Code (plugin)
/plugin marketplace add anthropics/skills /plugin install example-skills@anthropic-agent-skills
Any agent (skills CLI)
npx skills add anthropics/skills --skill frontend-design
Cursor / Codex (manual)
# copy the frontend-design folder into: .cursor/skills/frontend-design/ # Cursor project .agents/skills/frontend-design/ # shared agents folder
Alternatives
web-design-guidelines (Vercel)
A rule-checklist auditor for existing UI. frontend-design creates a direction from zero; web-design-guidelines checks work against 100+ rules. One stops you being generic, the other stops you being wrong.
Frequently asked questions
Is the frontend-design skill safe?
In our screening on 2026-10-22, frontend-design passed all six security red lines (credential theft, remote code execution, data exfiltration, hidden instructions, obfuscated payloads, privilege abuse) and scored 8/10 on the safety dimension. Screening is not a certification — re-screen after major updates.
What is the frontend-design skill used for?
Anthropic's official skill for distinctive, non-templated visual design — aesthetic direction, typography and layout guidance for new UI.
How do I install the frontend-design skill?
For Claude Code, add the marketplace and install the plugin set that contains it. With the skills CLI: npx skills add anthropics/skills --skill frontend-design. For Cursor or Codex, copy the frontend-design folder into .cursor/skills/ or .agents/skills/. Full commands are in the Install section of this page.
How good is the frontend-design skill?
frontend-design scored 80/100 (grade A) in our live test on 2026-10-22: The rare guidance skill whose live output is visibly less generic than baseline — docked mainly for a vague trigger description and zero worked examples.
Tested 2026-10-22 in an agent environment following the skill's own instructions — not inside the Cursor desktop app. Scores follow the Skills List methodology v1: red lines veto regardless of score; install counts and stars never count toward quality. More in Frontend & Design.