Better Design MCP
An MCP server and skill for interfaces: 31 design systems for shadcn/ui, UI and UX principles and accessibility review for agent-written code
- 518 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- The remote MCP receives design task descriptions from the agent and calls better-design.com with a key
- The npx better-design installer edits the configuration of detected clients to connect the MCP
- The shadcn add command puts third-party component code from a registry into the project
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add mcp/better-designDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The remote MCP receives design task descriptions from the agent and calls better-design.com with a key
- The npx better-design installer edits the configuration of detected clients to connect the MCP
- The shadcn add command puts third-party component code from a registry into the project
This is third-party code. Review the repository files before installing.
What it does
Better Design tells an agent how an interface should look and behave, then checks the result. Through MCP the agent gets get-ui-principle and get-ux-principle with guidance on hierarchy, spacing, typography, forms and navigation, while get-review-rules and check-comprehension return accessibility and visual-design checklists. For a new interface, find-design-system picks a theme for a request such as a fintech dashboard in the style of Stripe. The repository holds 31 design systems for shadcn/ui: Linear, Supabase, Vercel, Airbnb, Notion, Stripe, Apple, Figma and more. Each has a globals.css token file and component overrides. A component installs with npx shadcn@latest add and an address from the better-design.com registry, for example Linear's button. For icons there are resolve-icon-library and search-icons on top of Iconify. The better-design skill sets the order of work: inspect the project's framework and tokens first, load principles, write the code, then call the review rules and fix serious findings. The skill does not run setup itself and does not take instructions from pages it analyzes.
Who it is for. For developers and designers building React and shadcn/ui interfaces with Claude Code, Cursor, Codex or GitHub Copilot who want code based on a ready design system.
Good fit when
- A new page or product needs a ready visual base instead of random colors, for example in the style of Linear or Vercel
- The agent wrote a form or screen and it must be checked against accessibility rules: focus, contrast, labels, hierarchy
- A shadcn/ui project needs styled components installed with one command from the registry
- You need an icon set matched to the interface's character, without mixing libraries
- You work across clients: Claude Code, Cursor, VS Code, Claude Desktop or claude.ai connect to one MCP
Not a fit when
- The product already has a brand and design system: the skill itself says to preserve them and not swap in a catalog theme
- The project does not use shadcn/ui and Tailwind, and the ready component code targets them
- The task is backend or console work with no interface
- The remote MCP is not reachable from your network and you cannot get a key from better-design.com settings
Example request
Use better-design: build a Linear-style project settings page with billing, team members and API keysMCP
- Transport
- http
- Authentication
- API key
Limitations
- Design systems and components are built for shadcn/ui.
- Remote connection needs an API key from the settings on better-design.com. The npx better-design installer connects the MCP to detected clients without an account.
- The skill does not run setup commands itself: the user runs them after review.
- Tools such as review-ui-code and inspect-spacing work when the client exposes them and give measured data on a rendered page.
How to disable. Remove the better-design block from the MCP client config and the better-design skill folder from the agent's skills directory. Components already installed into a project stay as ordinary files and are removed by hand.
FAQ
How do I install Better Design in Claude Code?
Run npx skills add marvkr/better-design --skill better-design, then npx better-design, and restart the agent. The installer detects your tools and connects the MCP without replacing existing configuration. No account is required.
Which design systems does Better Design include?
31 themes for shadcn/ui, including Linear, Supabase, Vercel, Airbnb, Notion, Stripe, Apple and Figma. There are also abstract ones such as Glassmorphic Dark, Editorial Dark, Corporate Fintech and Pillow Light. All of them can be browsed at better-design.com/design-systems.
How do I install a component from a Better Design system?
In a shadcn/ui project run npx shadcn@latest add https://www.better-design.com/registry/linear/button.json, substituting the system and component you need. The nine transitions.dev ports install with a single transitions.json file.
How is Better Design different from a rule list in a prompt?
The agent does not keep the rules in context up front; it requests the principle it needs at the moment, such as spacing or forms. After building, it checks the result against accessibility and visual-design rules and fixes critical findings.
Do I need an account and a key for Better Design?
The npx install needs no account. The remote MCP at https://better-design.com/api/mcp requires an API key, which you get in the settings on better-design.com and send in an Authorization: Bearer header.
Discussion
No questions or reviews yet.
Related
MCP serversdesignlang
designlang (design-extract)
A CLI and MCP server that reads a live website and pulls out its design system: DTCG tokens, a Tailwind config, Figma variables and a brand book
A skill with a searchable base of styles, palettes, font pairings and UX rules that generates a design system per product type
Official shadcn/ui skill and MCP server: the agent searches registries, adds components via the CLI and follows the library's rules
A UI, presentation and graphics design skill for coding agents: canvas drafts driven through the superdesign CLI
A CLI that extracts any website's design system into tokens: colors, typography, spacing, shadows, in one run
Skills for design engineers: quick UI cleanup, accessibility, metadata and animation performance fixes
Comparison with similar tools
Entries that share the main search query, and how they differ.
| Entry | Official | Authentication | Repository stars | Main difference |
|---|---|---|---|---|
| Better Design (this entry) | no | API key | 518 | |
| TypeUI | yes | not required | 2,152 | an MCP server and plugin with curated design systems and rules for building interfaces |
| Oh My Design | no | 548 | installs a design system into an agent with one command from a catalog of rated components | |
| Shadcn UI MCP Server | no | key is optional | 3,069 | serves shadcn/ui source, demos and blocks, without ready themes or rule-based interface review |
README in short
The project page calls Better Design an open-source take on Claude Design for your own code: an MCP server, a design-system registry and an interface review layer. It explains two layers: always-on principles and checks, and scaffolding from a matched design system. A table of MCP tools, a table of 31 themes with their mood and use, component install commands, request examples and connection options, including a remote MCP with a key, follow.