design.how vs the frontend-design skill
The frontend-design skill in the anthropics/skills repository is a design brief for the model: it has Claude commit to a direction, a small palette and one or two typefaces, plan and critique its own work, and avoid five clusters of AI defaults. A design.how system is the other kind of help: the direction is already chosen, and the agent gets components, tokens, rules and a lint for it. Use frontend-design for a one-off page with no system; use a design system when every screen has to match.
Side by side
| frontend-design | design.how system | |
|---|---|---|
| What it is | One SKILL.md, in the anthropics/skills repository | A theme, components, blocks, a skill and a lint |
| Who picks the look | The model, for each brief. The brief's own words win | The system. The agent builds from its tokens and never invents one |
| Components | None. The model writes the markup | 50 to 66 per system, installed as source |
| Defaults it avoids | Five clusters: cream with terracotta, near-black with an acid accent, broadsheet hairlines, the SaaS card kit, and template chrome such as capital eyebrows, middle dots and arrows on links | An anti-slop list per system, such as no eyebrows, no middle dots between facts, no arrow links, no status dots |
| How it is checked | The model reviews its own work against the brief | An ESLint config that fails on the code |
| An existing design system | Says nothing about following one | Is one, and the skill says to use its components before custom markup |
| Install | npx skills add https://github.com/anthropics/skills --skill frontend-design | npx shadcn@latest add https://design.how/r/quartz/theme.json |
| License | Apache-2.0 | MIT |
Where they agree
Both ban the same template chrome. frontend-design tells Claude to avoid capital eyebrows, middle dots and arrows on links; Quartz's lint has a rule for each, no-caps, no-dot-separator and no-arrow-link. The difference is that the lint fails the build, with a message like this one:
"Rotating API keys →" ends in an arrow; a screen reader reads it aloud, so drop it and let the text name where the link goes.When to use which
- Use frontend-design for a landing page, a demo or a one-off screen, where a fresh, distinct look is the point and nothing else has to match it.
- Use a design.how system for a product: many screens, built over weeks, that have to look like one team made them.
- If both are installed, two skills give Claude different instructions for UI work. Call the one you want by name, such as
/quartz.
frontend-design is one of the most installed skills on skills.sh, which lists about 1.0M installs. It has no memory of the last screen, so each brief starts the look again.