frontend-design: make the agent decide who the page is for before it writes CSS
The front-end design skill from Anthropic's official skills repository. It has the agent ground the design in the product and its industry, commit to a small token system, then build and self-review from screenshots, so the result stops looking like every other AI-generated page.
Skill details
npx skills add anthropics/skills --skill frontend-designAsk an agent for “a landing page” and you tend to get the same one: a warm cream background, a terracotta accent, a row of identical rounded cards, and a fade-in on every section. frontend-design is the design guide Anthropic ships in its official skills repository, and its job is to keep those defaults out.
The order it works in
The skill splits front-end work into five steps. First understand the product and its industry. Then write down a compact set of design tokens: a few named colors, one or two typefaces, and layout principles. Check that plan against the brief and revise it if it reads as generic. Only then write the code, and finish by reviewing screenshots and cutting whatever doesn’t earn its place.
What it constrains
- Type: at most two families, with body lines under 80 characters.
- Color: a core palette of four to six named values, steering away from the familiar “AI default” palettes.
- Motion: sparing and deliberate, never a fade-in on every card.
- Layout: borders and dividers encode structure instead of decorating it, and 01/02/03 markers only appear when the content really is a sequence.
Who it’s for
If you have Claude Code, Codex or a similar agent build interfaces and keep pulling the results back from template territory, this is worth installing. It won’t choose a style for you, but it makes the agent commit to a design plan that holds together before any code is written.