We built a library of 147 design styles your AI agent can actually use

Ask an AI coding agent to “make it look nice” and you’ll get the same website everyone else 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. Neubrutalism with #ff90e8 accents, 2px black borders, and 4px 4px 0 #000 shadows is a spec.

So we built the spec sheet. One hundred and forty-seven of them.

What it is

Claude Design Skills is a free library of web design styles (from Swiss typography to synthwave, GOV.UK to glassmorphism, Catppuccin to claymorphism) where every style is a complete, engineered design system:

• Named color roles with real hex values, honestly labeled against WCAG (we never silently “fix” a canonical palette: if vaporwave pink fails AA, the skill tells you, and tells you where it’s safe to use)
• A font pairing from Google Fonts, with fallback chains and the premium face named when the real thing costs money
• Spacing and radius scales, shadow recipes, motion conventions, and component-by-component build notes
• Light and dark schemes where the style defines them

And every style exports in the format your project speaks: SKILL.md (the file Claude Code reads), tokens.css, a Tailwind v4 @theme block, tokens.json, Google’s DESIGN.md format for Claude Design, and a shadcn/ui theme you can apply with one npx shadcn add command.

The trick that makes it browsable

Screenshots of other people’s websites tell you what a style looked like once. We wanted apples-to-apples. So every one of the 147 styles is previewed on the same landing page (same nav, same hero, same pricing cards, same testimonial) restyled entirely by that style’s token map. Nothing else changes. When you flip from Bloomberg-terminal density to McBling glitter, you’re seeing exactly what the tokens do, because the markup never moves.

The styles span ten categories: the modern SaaS canon (Linear-style dark, Stripe-style gradients), published enterprise systems (Material 3, IBM Carbon, GOV.UK, SAP Fiori, all pulled from official token sources), internet aesthetics with real lineage (Frutiger Aero, McBling, weirdcore), print and art movements (Bauhaus, Art Deco, risograph), and a full set of terminal themes with verbatim published palettes.

Using a style takes about ten seconds

Find a style, copy its SKILL.md (or download the zip into ~/.claude/skills/), and ask Claude Code to build your page in that style. The skill carries everything the model needs: the tokens, the component recipes, the signature element to spend boldness on, and (just as important) the don’t list that keeps it from sliding back into generic-AI-website territory.

We ate the dog food

The site itself is one of its own styles. Amber Gallery (the calm near-white canvas, hairline borders, and single amber accent you’re looking at) was designed in Claude Design, extracted into the same token schema as every other style, and published as skill #147. Every text role passes WCAG AA in both its light and dark schemes. If you like how the library looks, you can install the library’s own look.

The whole project was also built the way it suggests you build: with Claude. The dataset was compiled from a deep research pass, authored and cross-checked by fleets of Claude agents against official token sources (they caught, among other things, GOV.UK’s 2025 palette change and two commonly mistyped hex values in famous terminal themes), and the site was designed in Claude Design and implemented with Claude Code, end to end.

Free, and staying that way

All 147 styles, every export format, no signup. It’s the tool we wanted to exist when clients ask us to make something that doesn’t look like every other AI-generated site.