MCP-powered design for Claude

Design systems,
ready for Claude

Browse 153 professional design systems. Connect Claude to your brandbooks via MCP and build pixel-perfect UIs instantly.

Browse gallery Try roulette

Featured design systems

Start exploring — these are fully scanned and ready to use in Claude.

aerc-tui
View details →

aerc

Calm blue panes — modern suckless-style mail.

emailbluemodernsuckless-inspired
anthropic-inspired
View details →

Anthropic Inspired

Warm academic AI — terracotta on cream, serif undertones, the safety-conscious lab aesthetic.

warmacademicterracottaseriftrustworthy
atlassian-design
View details →

Atlassian Design

Bold blue team-first — confident verbs, semantic color roles, and a system built for 350K teams.

clearbluestructured
atuin-tui
View details →

Atuin

Sky-blue fuzzy search — shell history that remembers.

shellhistorysyncsearch
bottom-tui
View details →

bottom

One Dark widget grid — configurable system dashboard.

monitoringwidgetsrustone-dark
broot-tui
View details →

broot

Orange tree focus — fuzzy directory navigation.

filestreeorangefuzzy
View all 153 design systems →

Use in Claude via MCP

Connect once. Claude queries any design system, retrieves CSS tokens, and applies them directly to your project — no copy-paste.

# MCP call from Claude
POST /mcp
{"method": "get_theme_css", "params": {"id": "stripe-inspired"}}
→ Returns full CSS custom properties, ready to use
Explore all design systems

How it works

Three steps from signup to beautiful AI-generated UI.

1

Browse the gallery

Explore 50+ curated design systems from top brands. Preview tokens, colors, and typography before committing.

2

Connect via MCP

Point Claude at the Brandbook MCP endpoint — no API key needed during this preview.

3

Build with Claude

Ask Claude to "use the Stripe design system" — it fetches the tokens via MCP and generates perfectly branded code.