Claude Frontend Design Skill Review: Verdict, Safety and Alternatives

The Claude frontend design skill is Anthropic's 71-line frontend-design file that steers agents off stock AI looks. Our verdict is Recommended, 76/100, with safety grade A at Moderate confidence.

Get the skill: frontend-design folder on GitHub · SKILL.md at the reviewed commit · skills.sh listing

What is the Claude frontend design skill?

The Claude frontend design skill is Anthropic's frontend-design Agent Skill, one 71-line SKILL.md. It casts the agent as a studio design lead. It forces a plan, a review against the brief, a build and a critique before UI code.

An Agent Skill is a folder of instructions that an agent loads when a task matches its description. This skill holds one such file. The format is explained in how a SKILL.md file works. Anthropic publishes it in the anthropics/skills repository on GitHub.

Its job is to steer an agent away from generic, templated UI. It pushes toward a visual identity that fits the brief's subject. Its users are developers and designers who generate front-end pages with Claude Code or similar agents. The SKILL.md description reads:

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one.

The file names neither React nor Tailwind. The skill is framework-agnostic and needs no toolchain. Maintainers last rewrote it on 2026-09-03, in PR #1713.

What does the frontend design skill tell the agent to avoid?

The frontend design skill names five stock looks that AI-generated pages fall into. Examples include cream backgrounds with terracotta accents and identical rounded SaaS cards. Since the September 2026 rewrite, it bans no font by name.

The five looks sit in the process section of the SKILL.md file, lines 39 to 43:

1. Cream backgrounds near #F4F1EA, paired with a serif face and terracotta #D97757 accents.
2. Near-black pages with a single acid-green or vermilion accent.
3. Broadsheet layouts built from hairline rules.
4. SaaS card kits, with identical rounded cards and an rgba(0,0,0,.1) shadow.
5. Template chrome, with ALL-CAPS eyebrows, middle-dot meta lines and near-black #0B0B0B.

One rule sits above the list: the brief's own words always win. The looks are defaults to avoid when the brief says nothing. A brief that asks for cream and serif still gets them.

Many guides from early 2026 say the skill bans Inter, Roboto, Arial and Space Grotesk. They mention purple gradients too. Those claims describe the 2025 file. The reviewed file bans no font by name and never mentions purple.

Which copy is official: the skill, the plugin or the claude-code repo?

All three official copies are the same file. The anthropics/skills folder, the claude-code plugin folder and the claude-plugins-official plugin hashed identical on 2026-10-21. The plugin wraps that file at version 1.1.0.

All three copies hold the same text and measure 9,390 bytes. The claude-code plugin.json lists Prithvi Rajasekaran and Alexander Bricken as authors. Its last commit to the folder is dbdd79c, dated 2026-09-02. The skills repository publishes no tags or releases, so our review names the exact commit.

Is the Claude frontend design skill worth installing?

Yes, for new pages: the Claude frontend design skill scores 76/100, Recommended, at Moderate confidence. Tessl measured a 1.27x uplift on Sonnet 4.6. Pill buttons still slipped through on 10 of 21 Opus 5.5 pages.

Tessl is a registry that publishes evals and quality reviews of Agent Skills. Its eval supplies the uplift figure.

The skill's strength is concrete. It names failure looks with hex values. It forces a token plan, reviewed against the brief, before any code. Its weakness is specific too. Element-level defaults slip through, as issue #1808 shows. Briefs bound to an existing design system get no guidance.

The skill fits developers who want a new landing page, marketing site or prototype from a loose brief. It fits poorly in two places:

• Established design systems or component libraries, where its push for bespoke palettes and typefaces fights the codebase.
• Internal tools and dense admin UIs, where art direction is a cost.

Compare it with the best design skills, ranked by verdict before you choose.

Three questions have no published answer yet:

• No post-rewrite with/without comparison on several models exists.
• No element-level default rate after PR #1806 exists.
• No test inside a codebase that already uses a design system exists.

Test it yourself:

• Run three of your own no-direction briefs.
• Run each one with and without the skill.
• Count stock tells such as pill buttons, cream backgrounds and ALL-CAPS eyebrows.

How many tokens does the frontend design skill use?

The frontend design skill file measures about 2,348 tokens per load. Our estimate for a typical landing page is 8,000 input and 12,000 output tokens. The plan and critique pass adds turns.

The typical task is a single landing page from a short brief. The 11,348 figure adds the 2,348-token file and about 1,000 tokens of conversation overhead to the 8,000-token task. Tessl rates conciseness 3/5, because the file restates typography and UX basics. The plan-and-review pass and screenshot critique add output tokens and turns.

What changed since our review?

Nothing in the frontend design skill changed since our 2026-09-30 review. The file still matches the reviewed hash on 2026-10-21. Fix PRs #1806 and #1663 remain open, so the verdict stands.

Checked on 2026-10-21:

• SKILL.md hash unchanged in all three copies.
• No new tag or release in anthropics/skills.
• No commits to skills/frontend-design after 2026-09-28.
• PRs #1806 and #1663 still open.
• Issues #1808 and #1562 still open.
• GitHub stars up from 179,153 to 182,463.
• Claude.com plugin listing at 1,134,112 installs.

Is the frontend design skill safe to install?

Yes, the frontend design skill is safe to install and carries safety grade A. Its two text files hold no scripts, hooks, network calls or credentials. Gen Agent Trust Hub, Socket and Snyk all report Pass.

Grade A means the folder holds no executable code. For the checks to run on any skill, see how to vet a skill before you install it.

Findings at the reviewed commit:

• SKILL.md is 9,390 bytes, about 2,348 tokens, next to LICENSE.txt.
• No scripts, hooks, MCP configs or agent manifests exist.
• No network endpoints or environment variables are referenced, and network access is false.
• No toolchain is required, and the file never mentions React or Tailwind.
• The skill writes only the UI code the user asked for.
• Screenshots support self-critique where the environment allows them.
• The brief's own words always win, which limits instruction override.
• No external content is fetched, so no prompt-injection surface exists beyond the user's brief.

skills.sh, Vercel's registry and installer for Agent Skills, runs those three audits. Tessl's Snyk scan found nothing either.

What do users and maintainers report about the frontend design skill?

Users and maintainers report a measured lift for the frontend design skill. Tessl's three-scenario eval shows 1.27x, while issue #1808 counts pill buttons on 10 of 21 pages. Reviewers say it needs a real brief.

These are the 16 dated reports we weighed, from the six months before our review. Strong items come first.

What are the frontend design skill's known failures?

The frontend design skill has two known failures at the reviewed commit. Element-level defaults such as pill buttons slip through. Briefs bound to an existing design system get no guidance, and both fix PRs are unmerged.

1. Pill buttons appear on 10 of 21 Opus 5.5 pages in a 7-brief eval (issue #1808). Fix PR #1806 is reviewed but unmerged.
2. No design-system mode exists (issue #1562). The issue names Material and Spectrum, and PRs #1561 and #1663 sit unmerged.
3. Internal tools get too much art direction, per the DEV Community review.
4. Output still converges on defaults without an explicit brief, per wmedia.es and a Hacker News thread.
5. Engineering guidance is thin. Accessibility, responsiveness and CSS specificity get a sentence or two, so the engineering floor scores 62.

The worst plausible failure has two forms. The agent ignores or overrides an existing design system. Or it swaps one stock AI look for another while appearing to follow the skill.

Does the frontend design skill work in Codex, Cursor and other agents?

No published run outside Claude Code exists yet. The frontend design skill is verified only in Claude Code, on Sonnet 4.6 and Opus 5.5. Codex, Cursor and Antigravity read the same SKILL.md format but remain untested.

Compatibility scores 80. A plain SKILL.md loads in any agent that reads skills, but published runs exist only in Claude Code. The skill needs no tools and no MCP servers. Browse Claude Code skills ranked by verdict for other skills verified there.

How do you install the frontend design skill?

Install the frontend design skill in Claude Code with one plugin command or the skills CLI. Run /plugin install frontend-design@claude-plugins-official. Or run npx skills add anthropics/skills --skill frontend-design for other agents.

Setup friction scores 92: one file and no dependencies. The skills.sh registry listed 939.2K installs on 2026-09-30.

In Claude Code

Pick one of four routes. The first uses the official plugin marketplace:

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

The second adds Anthropic's skills marketplace. It installs the whole example-skills bundle, with frontend-design inside it.

/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

The third uses the Vercel skills CLI:

npx skills add https://github.com/anthropics/skills --skill frontend-design

The fourth is a manual copy. Copy skills/frontend-design/ to ~/.claude/skills/frontend-design/ for personal use. Use .claude/skills/frontend-design/ for one project. Our full Claude Code skills setup covers the general steps.

In Claude.ai and the Claude API

Anthropic's skills README says the example skills are "already available to paid plans". The Claude Help Center lists Skills on Free, Pro, Max, Team and Enterprise plans. The two official sources differ on plans. Neither states that frontend-design is on by default. API use goes through the Skills API. Follow the steps to turn on skills in the Claude app.

In Codex, Cursor and Antigravity

The skills CLI targets Codex with an agent flag, per Vercel's agent table:

npx skills add https://github.com/anthropics/skills --skill frontend-design -a codex

Cursor reads .cursor/skills/, .agents/skills/ and an existing ~/.claude/skills/ install. No published run of the skill exists in Codex, Cursor or Antigravity yet.

How do you use the frontend design skill?

Use the frontend design skill by asking for a new page with a real brief. Name the subject, audience and tone. The skill loads automatically, plans tokens, reviews them against the brief, then builds.

Claude loads a skill when its description matches the request. Type /frontend-design to call it directly. A plugin install answers to /frontend-design:frontend-design, per the Claude Code skills docs.

The working loop follows the SKILL.md process:

1. Write a brief that names the subject, audience and tone.
2. Let the skill plan a token system for colour, type and spacing.
3. Check the plan against the brief before any code exists.
4. Let it build the page.
5. Ask for a critique pass, with screenshots where your environment supports them.

Three example briefs match the tested use cases:

• A landing page for a loose-leaf tea shop selling to office workers. Tessl tested this job in its "Mist & Leaf landing page" scenario.
• A dashboard prototype for an investment portfolio with its own visual identity. Tessl's matching scenario is "Investment Portfolio Dashboard".
• An onboarding flow with plain UI copy for a new SaaS product. Tessl's matching scenario is "ShipFast Onboarding Flow".

Landing pages are the main use, and issue #1808 tested it across 7 briefs. Restyling an existing UI or building inside a design system is claimed by Anthropic but not shown in any published test. Anthropic's official usage guide is the Claude Academy course "Elevate Claude's design using skills".

How does the frontend design skill compare with other Claude design skills?

The frontend design skill ties Emil Design Engineering for top score among the Claude design skills here, at 76. UI/UX Pro Max scores 68, Impeccable 67 and Taste Skill 62, all Conditional. Each beats it on one narrow job.

Emil Design Engineering ties at 76, but it reviews motion and builds no pages.

The head-to-head page UI/UX Pro Max vs Frontend Design, side by side runs both skills through the same criteria.

Where is the frontend design skill on GitHub?

The frontend design skill lives in the anthropics/skills GitHub repository at skills/frontend-design. The folder holds SKILL.md, 9,390 bytes, plus LICENSE.txt. The repository publishes no tags, so our review names commit 8a1541c.

• Repository: anthropics/skills, folder skills/frontend-design/.
• SKILL.md: 71 lines and 9,390 bytes.
• File hash (sha256): d9197063…, unchanged on 2026-10-21.
• Reviewed commit: 8a1541c, dated 2026-09-28, reviewed on 2026-09-30.
• Rewrites: PR #1293 in June 2026 and PR #1713 on 2026-09-03.
• Open pull requests: #1806, #1663, #978 and #1364.

Maintainability scores 72. Maintainers merge their own rewrites, but outside fixes sit unmerged.

The design hub lists every design skill we rated, in verdict order.

What did Anthropic's "Improving frontend design through Skills" post say?

Anthropic's post "Improving frontend design through Skills" launched the frontend design skill on 12 November 2025. It targeted Inter fonts and purple gradients. The September 2026 rewrite names five different looks instead.

The original post carries the date 12 November 2025. It blamed generic pages on "distributional convergence". Models favour the safe choices that dominate training data, so pages look alike. The 2025 file answered with bans on Inter fonts and purple gradients.

The same post introduced web-artifacts-builder, a separate skill built on React and Tailwind CSS. That is why some guides link React and Tailwind to frontend-design.

Common questions

Is the frontend design skill free?

Yes. It ships free under Apache 2.0, and you can read what Claude skills are for how such folders load.

Is the frontend design skill a Vercel skill?

No, Anthropic publishes it. Vercel's skills.sh registry lists and installs it, and all three of its audits pass.

Does the frontend design skill work in Claude.ai?

Anthropic claims it does, though its README and Help Center list different plans. Our evidence covers Claude Code runs only.

Can I use the frontend design skill on existing code?

Partly. SKILL.md covers "reshaping an existing" UI, but no published test shows it, and issue #1562 shows it has no design-system guidance.

Is the frontend design skill the same as Claude Design or /design?

No. Anthropic names Claude Design and the Claude Code /design command as separate products from this skill.