Claude Design Skills

Ask an AI coding agent to “make it look nice” and you get the same site everyone gets: soft gradients, a serif headline, purple buttons. The models aren’t short on ability. They’re short on specification. “Nice” isn’t a spec; a named palette with real hex values, a font pairing, and shadow recipes is.

We kept hitting this on client work, and there was nowhere to point an agent that held real design systems in a form it could actually read. So we built the spec sheet: one hundred and forty-seven of them.

Claude Design Skills is a free library of 147 web design styles across 10 categories (Swiss typography to synthwave, GOV.UK to glassmorphism), where every style is a complete, engineered design system: colour roles with honest WCAG labelling, a font pairing, spacing and shadow scales, motion, and component-by-component build notes. Each one exports in six formats, including a Claude Code SKILL.md, a Tailwind v4 theme, and a shadcn/ui theme, with 30 of them published as fully tokenised systems.

The trick that makes it browsable: every style previews live on the same shared component set, so flipping between styles shows exactly what the tokens do, because the markup never moves. The site’s own look, Amber Gallery, was extracted into the same schema as everything else and published as skill #147. It was designed in Claude Design and built end to end with Claude, free with no signup.