Better Design
A design harness for AI coding agents: design systems, design principles, icons and UI review.
Installation
Ajoutez ceci à la configuration MCP de votre client (Claude Desktop : claude_desktop_config.json ; Cursor : .cursor/mcp.json ; VS Code et les autres utilisent la même forme « mcpServers »).
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>"
}
}
}
}Variables d'environnement
BETTER_DESIGN_API_KEYobligatoire secret Create or manage a key at https://better-design.com/mcp
Documentation
Tirée du README du projet sur GitHub, actualisée chaque semaine. Les liens ouvrent 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.
Questions fréquentes
Qu'est-ce que Better Design ?
A design harness for AI coding agents: design systems, design principles, icons and UI review.
Comment installer Better Design ?
Il fonctionne comme serveur distant. Dans Claude Code : claude mcp add --transport http better-design 'https://better-design.com/api/mcp'. Pour les autres clients, collez la configuration JSON de cette page dans leurs réglages MCP.
Faut-il une clé API pour Better Design ?
Oui. Il attend BETTER_DESIGN_API_KEY, à renseigner dans sa configuration.
Better Design est-il open source ?
Oui. Son code est sur GitHub sous licence MIT.
Qui maintient Better Design ?
Il est publié par better-designs. AI.tn le référence sans le maintenir ni le recommander.
Issu du registre MCP officiel. Être listé n'est pas une recommandation : vérifiez le code et les permissions d'un serveur avant de lui donner accès à vos données.