anthropics/skills · skills/frontend-design/SKILL.md
frontend-design
“Anthropic's anti-template design guide: a sharp list of AI-UI clichés and a plan-first process, no scripts”
What it does
Pushes the agent to design frontends that don't look generated. It grounds choices in the subject, plans a small token system, checks it against a list of common AI-design defaults, then builds and self-critiques. It closes with UI copywriting rules.
- When the agent uses it
- When building new UI or reshaping an existing one and you want deliberate aesthetic direction, typography and layout rather than templated defaults.
- Who it is for
- For anyone using an agent to build landing pages or app UI who is tired of cream-and-terracotta sameness. Skip it if you need component or framework help rather than visual taste.
- What it costs
- 44 lines, about 2.5k tokens once the agent loads it, plus 1 file beside it.
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
What it tells the agent to do
- Identify the subject, audience and primary job, and confirm with the client if the brief doesn't say
- Draft a token plan: 4–6 named hex colors, typefaces and roles, layout with ASCII wireframes, principles
- Review the plan against the brief and the listed AI-design defaults, revise generic parts and say what changed
- Write the code from the revised plan, watching for CSS selectors that cancel each other out
- Meet the quality floor: responsive, visible focus, reduced motion respected, accessible color
- Critique as you build, with screenshots if available, and cut one unneeded decoration
- Write copy from the user's view: specific CTAs, consistent action names, direct errors
Lines worth reading
Straight from the file, with why each one matters.
line 3Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one.
The trigger. It's clear on intent but never says 'landing page', 'website' or 'component', the words people actually type.
line 39Anthropic's own Claude-interaction accent, so on a user's brief it reads as a tell
Anthropic tells Claude to stop wearing Anthropic's colors. Candid, and a useful calibration with real hex values.
line 45the brief's own words always win, including when it asks for one of these looks
A sharp guardrail. The anti-cliché list never overrides an explicit request, so the taste stays in service of the user.
line 59a picture is worth 1000 tokens
A good joke that also carries an instruction: take screenshots and look at your own output.
line 59Consider Chanel's advice: before leaving the house, take a look in the mirror and remove one accessory.
Restraint as a rule, borrowed from fashion. Memorable, if more mood than method.
Watch out for
Nothing risky that Kin could see in SKILL.md. Scripts beside it were not read.
The scorecard
- TriggerSays when to use it7/10
Says what and when, but lacks request words like landing page, website, dashboard
- FocusOne clear job8/10
One job, visual design. The copywriting section is related and earns its place
- LeanLight to load8/10
72 lines, about 2.5k tokens. A few narrative asides (studio role, Chanel, memory)
- ConcreteSteps you can follow7/10
Real plan format and hex-level tells, but no example plan and no done checklist
- SafeSafe to run10/10
No commands, network calls or overrides. Pure design guidance
What it does well
- Names specific AI-design clichés with hex values and patterns (middle-dot meta, '→' buttons, 01/02/03), which the model can't infer alone
- Plan, review, then build makes the agent check for genericness before writing code
- Concrete copy rules: 'Save changes,' not 'Submit', and Publish → Published kept consistent
How it could be better
Put request words in the description
The agent matches on the words people type, and 'distinctive visual design' won't catch 'make me a landing page'.
Adddescription: Visual design direction for web UI: landing pages, websites, dashboards, app screens and components, new or redesigned. Use when building or restyling frontend UI to choose palette, typography and layout that don't look templated.
Show one worked design plan
The plan format is described but never shown, and an example fixes the expected shape and length.
AddExample plan: Color: <name> <#hex>, <name> <#hex>, <name> <#hex>, <name> <#hex> Type: <display face> for headlines, <body face> for text Layout: <one sentence> ``` [ <hero element> ] [ <section> | <section> ] ``` Align: <left/center> Principles: <what makes this page specific to the brief>
End with a done checklist
The quality floor and anti-default checks are scattered through prose, and a list is easier to verify.
AddBefore handing off, check: - [ ] No trait from the defaults list unless the brief asked for it - [ ] One memorable element, the rest quiet - [ ] Works at 360px wide, keyboard focus visible, prefers-reduced-motion honored - [ ] Body line length under 80 characters - [ ] Every button label says what happens
Trim the narrative asides
The studio role-play and the human-memory musing cost tokens without changing what the agent does.
AddMake deliberate, opinionated choices about palette, typography and layout that are specific to this brief, and take aesthetic risk when justified.
In the skill’s folder
Listed, not read: the agent opens these only when SKILL.md sends it there.
LICENSE.txt
Kin reviews against Anthropic’s Extend Claude with skills and agentskills.io’s the Agent Skills standard. It reads SKILL.md only, so a script beside it can still do things the file does not say.