Skills / Design / frontend-design
frontend-design
Anthropic's design brief for Claude: distinct, intentional, not templated.
What frontend-design does
frontend-design is Anthropic's official answer to AI pages that all look alike. It asks Claude to work like the design lead of a studio whose client has already rejected anything cliché, and to ground every choice in the actual subject of the page.
It is a short, opinionated brief rather than a library: deliberate typography, structure that carries information, sparing motion, real copy, and a plan, review, build, critique loop. It was the first widely used design skill for Claude, and other skills such as Impeccable started from it.
Use it when
- You want Claude's default web output to look less generic with almost no setup.
- You are building a landing page, portfolio or product page from a short brief.
Skip it when
- You need a searchable style library or automated checks; see UI UX Pro Max or Impeccable.
How it works
- Identify the subject, audience and main job of the design, and confirm them if the brief does not say.
- Open with the most characteristic thing in the subject's world: a headline, image, demo or interaction.
- Choose typefaces deliberately, one or two families with a clear scale, and keep lines under about 80 characters.
- Avoid the common tells of generated pages: one accented word in a headline, all-caps labels, decorative 01/02/03 markers, and the colour schemes AI output currently clusters around.
- Plan, review against the brief, build, then critique and fix.
How to install frontend-design
Claude Code
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skillsfrontend-design is part of the example-skills plugin.
Claude.ai
Available on paid plans; enable skills in settings.
Prompts to try
- Build a landing page for a bakery that only sells sourdough
- Redesign this pricing section so it doesn't look like every other SaaS
- Make a portfolio site for a wildlife photographer
Tips and gotchas
- Tell it what the product is. The skill works best when it can ground the design in a real subject.
- Ask for the critique step explicitly on important pages, then let it fix its own top issues.
FAQ
Is frontend-design free?
Yes. It is in Anthropic's public skills repository under Apache 2.0.
frontend-design or Impeccable?
frontend-design is a short brief that changes how Claude thinks about design. Impeccable started from it and adds 24 commands, a project setup step and 59 automated design checks.
Does it work outside Claude?
The SKILL.md is plain Markdown in the open skills format, so other agents that read skills can use it, though it is written with Claude in mind.
Related skills
Impeccable
A design vocabulary for your agent: polish, audit, critique, bolder, quieter.
npx impeccable installTaste Skill
Gives coding agents an art direction, real pictures, and a browser to check their work.
npx skills add https://github.com/Leonxlnx/taste-skillUI UX Pro Max
A searchable design library your agent consults before it writes any UI.
npm install -g ui-ux-pro-max-cli
uipro init --ai claudeAwesome DESIGN.md
Drop a DESIGN.md into your project and your agent builds in that design language.
Nothing to install. Download a DESIGN.md from the collection.
This page summarises the project's own SKILL.md and README, checked on 2026-10-16. Star count from GitHub on 2026-10-16. Commands change between releases, so check the repository if one fails. Written by Skillary; not affiliated with Anthropic. See how we review skills.