Frontend Design: interfaces that don't read as AI-generated
AI-built pages are easy to spot: cream backgrounds with a terracotta accent, identical rounded cards, an all-caps eyebrow above every heading. Frontend Design names those habits outright and asks the agent to plan colour, type and layout first, check that plan against the brief, and only then write code.
Identifies the subject, audience and primary job of the page first, drawing visual choices from that industry's materials and vernacular.
Requires a token plan before code: four to six named hex colours, typeface roles, an ASCII wireframe and principles for this page.
Lists five clusters of generated-design tells, from the SaaS card kit with one grey shadow to an arrow appended to every button.
Sets type rules: one or two families, a clear scale after The Elements of Typographic Style, lines under 80 characters.
Covers interface copy too: active voice, a Publish button that yields a Published toast, and errors that never apologise.
When to use it
Your agent's landing pages all look alike and a client wants something that couldn't be mistaken for anyone else's.
You are reshaping an existing UI and need it bolder without losing keyboard focus, reduced motion or contrast.
The brief never says what the product is, so the agent should propose a subject and audience before designing.
Ask your agent
Design a homepage for a Lisbon tile workshop, and skip the cream-and-terracotta look
Before any code, show me a plan: hex palette, typefaces and an ASCII wireframe of the hero
Rewrite the button labels and error messages on this checkout form in plain active voice
Questions
How do I install the Frontend Design skill?
Run npx skills add anthropics/skills@frontend-design. Claude Code users can instead register the repo as a plugin marketplace with /plugin marketplace add anthropics/skills.
Will Frontend Design refuse a dark theme or a newspaper layout?
No. Those looks are listed as defaults, not mistakes; when the brief explicitly asks for one, the skill says the brief's own words win.
Is Frontend Design a component library?
No, it ships no components or code. It is a working method and a set of principles the agent uses to choose palette, typography, layout and motion for a specific brief.
