Roast My Design System — Claude Code MCP server: setup guide
Audits UI codebases for missing tokens and serves design rules to your agent so generated components stick to your design system.
claude mcp add roast-my-design-system -- npx -y roast-my-design-systemWhat Roast My Design System does
When an AI builds an interface, it guesses wherever your project lacks defined styles. This tool scans component files to identify loose CSS variables, stray colors, and irregular spacing. It inspects Tailwind configurations, Sass or Less variables, and JavaScript theme objects across UI libraries like MUI, Mantine, Chakra, and shadcn/ui.
The scan produces an HTML report alongside a consistency rating between 0 and 100. In monorepos, each package receives its own rating so library packages cannot mask issues in application code. It compiles standard components, spacing scales, and duplicated elements into design-system-rules.md, with --apply pushing these files directly into agent configurations.
Analysis operates locally without network access, third-party packages, or telemetry. It evaluates file contents purely through deterministic code checks rather than rendering interfaces. A clean audit proves your code adheres strictly to declared tokens, not that the layout looks visually appealing.
What it helps with
- detect hardcoded hex colors and spacing values in UI files
- generate
design-system-rules.mdfrom existing repository tokens - score design system compliance separately for monorepo packages
- provide live UI constraints to coding agents over MCP
Example prompts for the agent
- Run roast-my-design-system and list all unmapped color values
- Build a stats widget using only tokens from our design system
- Sync repository design rules to agent configuration files
How to install Roast My Design System
Platform CLI
claude mcp add roast-my-design-system -- npx -y roast-my-design-systemPlatform CLI
codex mcp add roast-my-design-system -- npx -y roast-my-design-systemConfig file
{
"mcpServers": {
"roast-my-design-system": {
"command": "npx",
"args": [
"-y",
"roast-my-design-system"
]
}
}
}Config file
{
"servers": {
"roast-my-design-system": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"roast-my-design-system"
]
}
}
}Platform CLI
gemini mcp add roast-my-design-system npx -y roast-my-design-systemStep by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about Roast My Design System
How do I install Roast My Design System in Claude Code?
Run claude mcp add roast-my-design-system -- npx -y roast-my-design-system. This registers the server using npx without adding extra project dependencies.
What does Roast My Design System do?
It audits front-end repositories to uncover missing tokens, duplicate components, and hand-written styles. It then feeds strict rules to your agent so created UI stays on-system.
Does the audit require rendering application pages?
No, the scanner checks files through deterministic source code inspection. It does not spin up a browser or verify visual presentation.
