Claude Design Skills
How it worksBrowse library
147 web design styles

A library of design styles, packaged as Claude Code skills

Browse fully-tokenized web aesthetics, preview them live on a shared component set, then copy the whole thing into your project as a ready-to-use skill.

Keep scrolling — the preview re-themes itself ↓
Even this page is a skill from the library → Amber Gallery
acme.example
147
Styles
10
Categories
30
Published token systems
95
Typefaces

Featured styles

View all →
Amber GallerySaaS & Product
Inter · Inter
Linear-Style Dark SaaSSaaS & Product
Inter · Inter
NeubrutalismBrutalism
Archivo Black · Public Sans
GlassmorphismEmerging
Outfit · Inter
Bloomberg Terminal Dense DataDashboard & Data
IBM Plex Mono · IBM Plex Mono
CyberpunkCultural & Thematic
Rajdhani · Saira
ClaymorphismEmerging
Montserrat · Poppins
What you get

Every style is a complete design system

Not just a mood board — each skill carries a full token map: color roles, a font pairing, spacing and radius scales, shadow recipes, motion conventions, component recipes, and honest accessibility notes.

Color palettes

Named color roles per style — background, surfaces, text, accents, borders — with WCAG contrast labeled honestly, never silently “fixed”.

Font pairings

Display and body faces from Google Fonts, with fallback chains — and the premium face named when the real thing costs money.

Ready-to-use exports

Copy or download every style in the format your project speaks:

SKILL.mdthe skill file Claude Code reads
tokens.cssdrop-in CSS variables, dark mode included
tailwind.cssTailwind v4 @theme block
tokens.jsonmachine-readable token map
Explore by category
SaaS & Product16Design Systems18Brutalism4Minimalism14Retro & Nostalgic25Editorial & Print13Dashboard & Data4Cultural & Thematic30Emerging16Terminal Themes7

Find your aesthetic, ship it as a skill

Every style ships with SKILL.md, tokens.json and tokens.css — copy, install, and Claude Code builds in that style.

Browse the library