Better Design: Open source Claude Design

Turn your AI coding IDE into a design engineer. Better Design works with MCP-compatible agents and editors like Claude Code, Cursor, VS Code/GitHub Copilot, Claude Desktop, and claude.ai. It is a design MCP server, AI design-system registry, and UI review layer for generating polished product interfaces from prompts.

Website · Design systems · Setup · Contributing

What is Better Design?

Better Design gives AI coding agents the design context they usually miss: design tokens, component code, UI principles, icon direction, accessibility checks, and visual-design review rules.

Think of it as a Claude Design-style workflow for your own codebase:

• Pick the product direction: Linear, Supabase, Vercel, Airbnb, Stripe, Apple, Notion, Figma, or another curated design system.

• Feed your AI agent the right globals.css, semantic tokens, component overrides, icon set, spacing, typography, shadows, radius, and motion language.

• Ask Claude Code, Cursor, VS Code/GitHub Copilot, Claude Desktop, claude.ai, or another MCP-compatible coding agent to build the interface.

• Have the MCP review the output against accessibility and design principles before you ship it.

Instead of "AI-looking UI," you get interfaces that look like they were built from a real product design system.

Why Better Design?

• Claude Design-style workflow, open MCP. Bring the artifact-first design loop people expect from Claude Design into Claude Code, Cursor, VS Code/GitHub Copilot, Claude Desktop, claude.ai, and any MCP-compatible client.

• Design systems, not vague vibes. Each system includes semantic CSS tokens plus production component code, so generated UI uses real implementation details instead of guessed colors.

• AI UI generation with guardrails. The MCP can load principles for hierarchy, spacing, typography, depth, motion, forms, and accessibility exactly when the agent needs them.

• Self-review before handoff. get-review-rules gives your agent a WCAG and visual-design checklist so it can catch missing focus states, weak hierarchy, bad contrast, and inconsistent spacing.

How it works

Better Design has two layers: an always-on Design Intelligence layer and an on-demand Scaffold layer.

Design Intelligence — always active for UI work

When your agent builds UI, Better Design loads the relevant product-design principles and review rules automatically:

You: "Add a settings page with a form"

AI: calls get-ui-principle("spacing") + get-ui-principle("hierarchy")
 → writes the page
 → calls get-review-rules("accessibility") + get-review-rules("visual-design")
 → fixes contrast, labels, focus states, spacing, and hierarchy

Scaffold — design-system matching for new UI

When starting a product, page, or component set, say "use better-design" and the MCP finds a matching design system:

You: "Build a fintech dashboard in the style of Stripe. use better-design"

AI: calls resolve-design-system("fintech dashboard, Stripe")
 → loads design-system docs, CSS tokens, and component code
 → resolves a matching icon library
 → builds with semantic tokens instead of raw colors

What the MCP gives your agent

Tool What it does Why it matters

resolve-design-system Semantically matches the right design system for a prompt Stops agents from guessing a visual direction

get-design-system-docs Loads tokens, components, usage notes, and install context Gives the agent implementation-ready design context

get-ui-principle Fetches focused guidance for hierarchy, spacing, typography, depth, motion, forms, and more Makes UI decisions principled instead of random

get-review-rules Returns accessibility and visual-design review checklists Helps the agent critique and fix its own output

resolve-icon-library Picks an icon family that matches the design personality Keeps icon style consistent with the UI

search-icons Finds specific icons through Iconify Speeds up implementation without mixing icon styles

Available Design Systems

31 open-source design systems for shadcn/ui. Browse and preview them all at better-design.com.

System Theme Vibe Best For

Linear Dark Minimal, professional, purple accents Developer tools, productivity apps

Linear Quality Dark Precision-crafted, multi-layer shadows High-polish developer tools

Supabase Dark Technical, modern, green accents Backend dashboards, dev portals

Vercel Dark Pure black, Geist font, minimal Deployment, developer platforms

Airbnb Light Warm, friendly, coral primary Marketplaces, consumer apps

Notion Light Minimal, flat blue, rgba shadow Productivity, note-taking apps

Stripe Light Fintech, indigo accents, premium shadows Payments, financial products

Apple Light Premium, SF Pro, pill buttons Consumer apps, marketing sites

Figma Light Design tool, electric violet, purple glow Design/creative tooling

Light Marketplace Light Charcoal buttons, flat cards, no shadows E-commerce, listings

Precision Light Light Charcoal primary, precision layered shadows B2B SaaS, enterprise

Minimal Light Light Black primary, no shadows, border-only cards Clean utilities, productivity

Dark Orange Dark Brand orange, 10px radius, layered shadows Modern SaaS, dashboards

Vibrant Dark Dark Vibrant blue, color-bloom shadows Consumer apps, social

Neutral Monochrome Dark White on near-black, no color Understated, data-heavy tools

Cinematic Dark Dark Ultra-dark, content-first media Streaming, media platforms

Editorial Dark Dark Serif display, flat, content-first Publishing, editorial

Corporate Fintech Light Blue accents, data-dense layouts Banking, enterprise, fintech

Beam Custom Dark Custom beam aesthetic Custom applications

Beam Lib Dark Library-style beam theme Component libraries

Glassmorphic Dark Dark Glass layers, blur, frosted UI Modern dashboards, SaaS

Inset Dark Dark Inset shadows, recessed elements Data-dense, analytical tools

Lumen Dark Dark Glow accents, luminous depth Creative tools, media apps

Metal FX Gold Dark Gold metallic surfaces Premium, luxury products

Metal FX Silver Dark Silver metallic surfaces Tech, hardware products

Metal FX Chromatic Dark Chromatic shift, iridescent Cutting-edge, bold brands

Midnight Glass Dark Deep midnight, glass panels Dashboards, analytics

Monochrome Industrial Dark Industrial grays, utilitarian Developer tools, CLIs

Pillow Light Light Soft shadows, rounded comfort Consumer, lifestyle apps

Tactile Minimal Light Tactile depth, minimal color Productivity, focus tools

TV Style Dark Cinematic, large-format TV UI Media, streaming, TV apps

Each design system includes a full globals.css token layer plus component overrides. Install any component into your shadcn/ui project:

npx shadcn@latest add https://www.better-design.com/registry/<design-system>/<component>.json

Example — install Linear's button:

npx shadcn@latest add https://www.better-design.com/registry/linear/button.json

Usage examples

Once connected to your MCP client, ask