Better Design
A design harness for AI coding agents: design systems, design principles, icons and UI review.
Install
Add this to your client's MCP configuration (Claude Desktop: claude_desktop_config.json; Cursor: .cursor/mcp.json; VS Code and others use the same "mcpServers" shape).
claude mcp add --transport http better-design 'https://better-design.com/api/mcp'{
"mcpServers": {
"better-design": {
"type": "http",
"url": "https://better-design.com/api/mcp"
}
}
}better-designclaude mcp add better-design -e 'BETTER_DESIGN_API_KEY=<your better_design_api_key>' -- npx -y better-design@0.48.0 mcp{
"mcpServers": {
"better-design": {
"command": "npx",
"args": [
"-y",
"better-design@0.48.0",
"mcp"
],
"env": {
"BETTER_DESIGN_API_KEY": "<your better_design_api_key>"
}
}
}
}Environment variables
BETTER_DESIGN_API_KEYrequired secret Create or manage a key at https://better-design.com/mcp
Documentation
From the project's README on GitHub, refreshed weekly. Links open on GitHub.
Better 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: info@better-design.com.
Frequently asked questions
What is Better Design?
A design harness for AI coding agents: design systems, design principles, icons and UI review.
How do I install Better Design?
It runs as a remote server. In Claude Code: claude mcp add --transport http better-design 'https://better-design.com/api/mcp'. For other clients, paste the JSON configuration from this page into their MCP settings.
Does Better Design need an API key?
Yes. It expects BETTER_DESIGN_API_KEY, which you set in its configuration.
Is Better Design open source?
Yes. Its code is on GitHub under the MIT license.
Who maintains Better Design?
It is published by better-designs. AI.tn lists it but does not maintain or endorse it.
From the official MCP Registry. Listing is not an endorsement: review a server's code and permissions before giving it access to your data.