better-design

Better Design is an open-source design MCP server and shadcn/ui registry aimed at giving AI coding agents structured design context. It is described as working with MCP-compatible agents and editors, including Claude Code, Cursor, VS Code/GitHub Copilot, Claude Desktop, and claude.ai. The project combines a design-system registry, UI principles, icon guidance, accessibility checks, and visual-design review rules. The system has two layers. The Design Intelligence layer is always active during UI work: when an agent builds an interface, it can load relevant product-design principles and review rules. The Scaffold layer is on-demand and matches new UI work to a design system; a user can say "use better-design" and the MCP resolves a suitable system. The README lists MCP tools: resolve-design-system, get-design-system-docs, get-ui-principle, get-review-rules, resolve-icon-library, and search-icons. These cover semantic design-system matching, loading tokens and component code, focused guidance on hierarchy, spacing, typography, depth, motion, and forms, WCAG and visual-design checklists, icon-family matching, and icon search through Iconify. The registry contains 31 open-source design systems for shadcn/ui. Named themes include Linear, Linear Quality, Supabase, Vercel, Airbnb, Notion, Stripe, Apple, Figma, Light Marketplace, Precision Light, Minimal Light, Dark Orange, Vibrant Dark, Neutral Monochrome, Cinematic Dark, Editorial Dark, Corporate Fintech, Beam Custom, Beam Lib, Glassmorphic Dark, Inset Dark, Lumen Dark, Metal FX Gold, Metal FX Silver, Metal FX Chromatic, Midnight Glass, Monochrome Industrial, Pillow Light, Tactile Minimal, and TV Style. Each design system includes a globals.css token layer and component overrides. Components can be installed into a shadcn/ui project through the shadcn CLI using the registry URL, for example the Linear button. Setup can be local or remote. The README documents installing an agent skill with npx skills add marvkr/better-design --skill better-design and running npx better-design; the installer detects coding tools and connects the MCP without replacing existing configuration. A hosted remote MCP endpoint at better-design.com/api/mcp is also documented, using an API key from the site settings in an Authorization header. The README states that no account is required for the local setup path and provides a Claude Desktop configuration example for remote MCP. The repository structure includes components for per-theme shadcn/ui overrides, registry JSON entries, build and seed scripts, installable skills, and other agent skills. Contributing guidance says new design systems require component TSX overrides, corresponding registry entries, and a seed run. Design nuances such as shadow layers, focus states, border thickness, hover transitions, and context-specific radius variations are expected in component code, not only CSS variables. The project is licensed under MIT.