Better Design MCP Server: Design Systems and UI Review for Agents

What is the Better Design MCP server?

Better Design describes itself as a design MCP server, an AI design-system registry and a UI review layer. It hands an AI coding agent the design context it usually lacks: tokens, component code, UI principles, icon direction and review rules.

Each of its 31 open-source design systems includes semantic CSS tokens plus component overrides for shadcn/ui, so the agent builds with real implementation details instead of guessed colors.

What changes in your agent's output

• A prompt that names a style, such as a fintech dashboard in the style of a payments product, resolves to a matching design system.
• The agent builds with semantic tokens instead of raw colors.
• Principles for hierarchy, spacing, typography, depth, motion and forms load when the agent needs them.
• After writing the page, the agent can pull a WCAG and visual-design checklist and fix contrast, labels, focus states and spacing.

How the setup works

1. Run npx better-design. The installer detects your coding tools and connects the MCP without replacing existing configuration.
2. Or add the hosted endpoint by hand, using an API key from the Better Design settings page.
3. Say use better-design when starting a new product, page or component set.

Who the Better Design MCP server is for

Best for

• Projects on React and shadcn/ui that need a consistent visual direction fast.
• Teams who want an agent to review its own output against accessibility rules, alongside a web design guidelines skill.
• Builders who pair it with the shadcn MCP server for installing the base components.

Not for

• Reading a Figma file. Look at the Figma MCP server for that job.
• Projects not built on shadcn/ui, since the systems ship as shadcn registry entries.
• Pixel-exact brand matching. The systems are curated styles, not copies of a specific company's assets.

Use it with UiChemy

Better Design shapes the code an agent writes for a React front end. For a WordPress site, UiChemy takes it from there: AI to WordPress imports an existing AI build, and Composer edits it inside Elementor or Gutenberg. Click Get Started on uichemy.com.

Connect Better Design MCP Server: Design Systems and UI Review for Agents to your AI client

npx better-design

1. Run the installer

   Run npx better-design once. The README says it detects your coding tools and connects the MCP without replacing existing configuration. No account is required for this path.

2. Or connect the hosted endpoint

   Get an API key from the Better Design settings page and add the remote entry above to your client's config.

3. Claude Desktop

   Add the same remote entry to claude_desktop_config.json, then restart the app.

4. Restart and ask

   Restart your coding agent, then say use better-design when you start new UI work.

Client configuration

{
  "mcpServers": {
    "better-design": {
      "url": "https://better-design.com/api/mcp",
      "headers": { "Authorization": "Bearer YOUR_API_KEY" }
    }
  }
}

Endpoints and ports

What you can do with it

• 31 design systemsOpen-source systems for shadcn/ui span dark and light themes, from developer tools to marketplaces and fintech.
• Tokens plus component codeEach system pairs semantic CSS tokens with per-theme component overrides, not just a color palette.
• Principles on demandUI guidance loads when the agent needs it, so context is not spent on rules the task does not touch.
• Built-in review rulesA WCAG and visual-design checklist lets the agent check focus states, contrast, hierarchy and spacing before handoff.
• Icon matchingIcon libraries are matched to the design personality and searched through Iconify, which keeps icon style consistent.
• Two ways to connectA local installer needs no account. A hosted endpoint uses a Bearer API key.

Tools it exposes

Frequently asked questions