Frontend Design
Anthropic's official frontend-design skill. Before writing any code, it commits to a clear aesthetic direction — minimal, maximalist, editorial, brutalist, retro-futuristic, or something true to the context — then implements real, working HTML/CSS/JS, React, or Vue with meticulous attention to typography, color, motion, spatial composition, and atmospheric background detail. It explicitly steers away from the overused fonts (Inter, Roboto, system stacks), cliched purple-gradient-on-white palettes, and cookie-cutter layouts that make AI-generated UIs look generic. Use it whenever you're building or styling a web component, page, dashboard, landing page, or artifact and want the result to feel genuinely designed rather than templated. Third-party skill from Anthropic's official skills repository.
Install the skill (and keep its license)
This is a single-file skill: the SKILL.md below is the exact pinned commit (0075614) Uristocrat reviewed, and it's all Claude needs to run. It's licensed Apache-2.0 by Anthropic, with the full terms in a sibling LICENSE.txt, so keep a copy of that license with the file if you redistribute it.
- 1
Get the skill file
Open the pinned SKILL.md and save it, then add it in Claude under Code → Customize → Create a new skill (desktop) or Customize → Skills → + (claude.ai).
- 2
Keep the license with it
frontend-design is Apache-2.0. Grab the matching LICENSE.txt at the same pinned commit and retain it alongside the skill if you share or redistribute it.
- 3
Use it
Say a trigger phrase (for example, "design a frontend for…") to activate the skill.
What Claude does with this skill
The following is the exact SKILL.md content Claude reads when this skill is
active. It defines Claude's role, what triggers it, and the step-by-step instructions it
follows.
The full SKILL.md for this third-party skill lives on GitHub at the
pinned commit we reviewed. Open it to read the exact instructions Claude will follow.