Better Design MCP Server
UI design systems and accessibility reviews for AI coding agents and IDEs.
Data last scanned today · Reviewed yesterday
Overview
Better Design provides AI coding agents with specific design context, including semantic CSS tokens, component overrides, and accessibility rules. By connecting this server to MCP-compatible tools like Claude Code, Cursor, or VS Code, users can apply design patterns from established systems such as Stripe, Linear, or Vercel directly to their project code. The server operates via a Design Intelligence layer and a Scaffold layer. It enables developers to feed AI agents curated design languages—covering typography, spacing, and icon sets—to ensure generated interfaces match professional product standards. Additionally, the server includes a review feature that cross-references code outputs against WCAG guidelines and visual design principles.
Our verdict
This server carries a high risk level with a security score of 28/100. The primary security concern is the lack of an authentication method, meaning any entity with access to the configuration can use it. Furthermore, it operates without a read-only mode, providing full write access upon installation. Given these findings, this tool should only be used in isolated, non-sensitive environments by developers who have reviewed the source code.
- Zero direct dependencies reduce supply-chain surface area
- Integrates with popular IDEs like Cursor and VS Code
- Includes automated WCAG and design principle review rules
- No authentication method implemented
- No read-only mode for file system operations
- Community-maintained rather than official vendor software
Tools
| Tool | Description | Risk |
|---|---|---|
| resolve-design-system | Semantically matches the right design system for a prompt | low |
| get-design-system-docs | Loads tokens, components, usage notes, and install context | low |
| get-ui-principle | Fetches focused guidance for hierarchy, spacing, typography, depth, motion, forms, and more | low |
| get-review-rules | Returns accessibility and visual-design review checklists | low |
| resolve-icon-library | Picks an icon family that matches the design personality | low |
| search-icons | Finds specific icons through Iconify | low |
Compatibility
| Client | Local | Docker | Remote | Read-only |
|---|---|---|---|---|
| ChatGPT | ||||
| Claude Desktop | ||||
| Cursor | ||||
| VS Code | ||||
| Windsurf |
Frequently asked questions
›Which AI coding agents are compatible with Better Design?
Better Design works with any MCP-compatible agent or editor, including Claude Code, Cursor, VS Code, GitHub Copilot, Claude Desktop, and claude.ai.
›What kind of design assets does the server provide to my agent?
The server provides semantic CSS tokens, component code, design-system documentation, icon library mappings, UI principles, and visual-design review checklists.
›How do I trigger the design system matching feature?
You can trigger matching by specifying a design system or project style in your prompt, such as asking to build a dashboard in the style of Stripe, and invoking the better-design server.
›Does the server perform automated design reviews?
Yes, you can use the get-review-rules tool to fetch WCAG and visual-design checklists, which allows your agent to critique its output for issues like contrast, focus states, and spacing.
›What design system frameworks are supported?
The server includes 31 open-source design systems tailored for use with shadcn/ui.
Alternatives
Badge
Maintain this server? Add the live badge to your README.