# 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.

Updated 19 October 2026. By Arlan Marat (https://design.how/about).

## 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:

```text
"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.

## Sources

- [anthropics/skills: frontend-design SKILL.md (Apache-2.0, rewritten 3 September 2026)](https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md)
- [Claude blog: Improving frontend design through Skills (12 November 2025)](https://claude.com/blog/improving-frontend-design-through-skills)
- [skills.sh: anthropics/skills frontend-design](https://skills.sh/anthropics/skills/frontend-design)

## Related

- [The best design system for AI agents](https://design.how/best-design-system-for-ai-agents.md)
- [AI slop UI](https://design.how/ai-slop-ui.md)
- [design.how vs DESIGN.md files](https://design.how/compare/design-md.md)