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-rulesgives 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