About Better Design
Better Design is a design plugin for AI coding agents that connects them to the Better Design MCP server. It provides design systems, principles, icons, and interface review capabilities for building and checking UI.
Key features
- 01Find, preview, and install design systems
- 02Generate systems from descriptions or websites
- 03Design principles for visuals and UX
- 04Create React icon components
- 05Review accessibility, copy, and spacing
Use cases
- 01Choose and install a design system for an app
- 02Build interfaces and flows using design principles
- 03Check built screens for accessibility and copy clarity
- 04Create icon components without a runtime CDN
MCP support
The plugin connects to Better Design's remote MCP server at https://better-design.com/api/mcp. The server gives coding agents access to design systems, design principles, icons, and UI review capabilities.
Configuration
Remote servers need no local install. Pick your client, then copy the config or install in one click.
https://better-design.com/api/mcpclaude mcp add --transport http marvkr-better-design https://better-design.com/api/mcp{"mcpServers":{"marvkr-better-design":{"type":"http","url":"https://better-design.com/api/mcp"}}}Open in Cursor{"servers":{"marvkr-better-design":{"type":"http","url":"https://better-design.com/api/mcp"}}}Open in VS Code{"mcpServers":{"marvkr-better-design":{"type":"http","url":"https://better-design.com/api/mcp"}}}{"mcpServers":{"marvkr-better-design":{"serverUrl":"https://better-design.com/api/mcp"}}}Run commands in a terminal; paste JSON into the client’s MCP config and restart. Servers that need sign-in will prompt on first connect.
Tools
Details
From the project READMEBetter Design
A design harness for AI coding agents. This plugin connects your agent to the Better Design MCP server, so the interfaces it builds use a real design system, follow design principles, and pass UI review checks.
What your agent gets
- A design system for your app. Find one that fits your product, preview it, and install its components, or generate a custom one from a description or your own site.
- Design principles. Visual design, UX flows, forms, onboarding and interface copy, plus references for React Native, SwiftUI, Three.js and Shopify themes.
- Review checks. Accessibility, copy clarity and measured spacing for the screens your agent builds.
- Icons you own. Icon sets returned as React components, with no runtime CDN.
What this repository holds
This repository holds the plugin files only: the manifests, the MCP server entry and two skills. The Better Design server and its design systems run at better-design.com. Browse the catalog at better-design.com/design-systems.
| Skill | What it does |
|---|---|
build-with-better-design | Chooses a design system with the user, installs it, and builds on it |
review-ui-with-better-design | Reviews a screen for accessibility, visual design, copy clarity and spacing |
Install
| Tool | How |
|---|---|
| Any terminal agent, no account | npx better-design |
| Gemini CLI | gemini extensions install https://github.com/better-designs/better-design-plugin |
| Claude Code | /plugin marketplace add better-designs/better-design-plugin, then /plugin install better-design@better-design |
| Claude Code, MCP only | claude mcp add --transport http better-design https://better-design.com/api/mcp |
| Any skills client | npx skills add better-designs/better-design-plugin |
| Any MCP client | Add the remote server https://better-design.com/api/mcp |
npx better-design needs no account. It connects Better Design to your coding tools and creates a free key with a small allowance. When the allowance runs out, the agent gives you a claim link that moves the key onto a free account.
Every other route opens a Better Design sign-in on the first connection. A free account works.
Privacy
Better Design's privacy policy and terms apply. Support: [email protected].
Comments
New to MCP?
From what the protocol is to installing your first server, these answers cover most first questions.
An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.