Better Design
# Better Design
Give your coding agent design systems, UI and UX guidance, icons, and code reviews through MCP.
Works with Codex, Claude Code, Cursor, VS Code, Devin, Antigravity, and other MCP clients.
[Website](https://better-design.com) · [Docs](https://better-design.com/docs) · [Design systems](https://better-design.com/design-systems) · [Installation guide](https://better-design.com/mcp/install)
## Install
Run these commands in your project:
```bash
npx skills add marvkr/better-design --skill better-design
npx better-design
```
The first installs the agent skill. The second connects Better Design to your coding tools and keeps your existing configuration. Restart your agent after setup.
If you have no account, setup creates a free key for you. If something does not work, run `npx better-design doctor`. It prints the command that fixes each problem.
## What it does
When your agent builds UI, Better Design gives it what it usually misses:
| Tool | What your agent gets |
|------|----------------------|
| `find-design-system` | A design system that fits the product you describe |
| `get-design-system-kit` | That system's tokens and component code, ready to install |
| `get-ui-principle` | Guidance on hierarchy, spacing, typography, depth, motion and more |
| `get-ux-principle` | Guidance on flows, forms, navigation, errors and onboarding |
| `find-icons` | Icons from one library, so the style stays consistent |
| `get-review-rules` | Accessibility and visual-design checks to fix its own work |
To check UI code yourself, run `npx better-design review` in your project.
## Try it
Ask your agent:
> Use Better Design to build a settings page with my project's design system, then review it for accessibility and consistency.
## Install a design system with shadcn
Every design system is also a shadcn registry. Browse them at [better-design.com/design-systems](https://better-design.com/design-systems), then install one component:
```bash
npx shadcn@latest add https://better-design.com/registry/<design-system>/<component>.json
```
For example, the Cashmere button:
```bash
npx shadcn@latest add https://better-design.com/registry/cashmere/button.json
```
Or the full Cashmere theme and components:
```bash
npx shadcn@latest add https://better-design.com/registry/cashmere/all.json
```
## This repository
This repository holds the agent skill in `skills/better-design`, and component and registry sources in `components/` and `registry/`.
The transition components come from one source, `scripts/transitions-src/`. After you edit it, run `node scripts/generate-transitions.mjs`, then run the tests:
```bash
cd tests && bun install && bun run test
```
## License
MIT
TDQS
Scored across 48 tools
Most tools occupy clearly separate territory: design-system discovery/creation/config, icon search/install, per-framework implementation guides, and review gates each have distinct verbs and subjects. A few pairs still need the descriptions to separate them — get-ui-principle vs get-ux-principle, review-dashboard-structure vs finalize-dashboard-review vs review-ui-code, and find-design-system vs get-design-system-kit overlap enough that an agent could reach for the wrong one first. The heavy cross-references embedded in descriptions mitigate this, so confusion is possible but recoverable.
Every one of the 48 names is kebab-case and starts with a verb (get-, find-, create-, review-, check-, set-, build-, read-, update-, install-, inspect-, extract-, plan-, render-, make-, send-, confirm-, preview-, finalize-, propose-, cut-, detect-). Noun suffixes are stable and predictable within families (get-*-guide, get-*-principle, find-* / install-* for icons, *-design-system for brand work). No camelCase, no mixed conventions, no vague standalone verbs.
48 tools is far past a workable single-surface count; the server has grown into roughly eight sub-products (design systems, icons, framework guides, video/Remotion, Figma, review/verification, team rules, feature mapping, hosted sales assets). Individual tools are defensible, but an agent must triage 48 options including six review-related and nine *-guide retrieval tools before it can act. Splitting the review/verification cluster and the video cluster into separate servers would restore a usable surface.
The core lifecycle is unusually well covered end to end: discover or extract a design system, generate and poll it, read/write its config, install kits per target, pick and install icons, build, then verify with source review, comprehension, spacing, dashboard structure and a source-bound final receipt. Gaps are minor — no delete/archive operation for created design systems or installed icons, and no explicit tool to list the account's existing design systems beyond semantic search. Those are workarounds, not dead ends.