# Roast My Design System

Audits UI codebases for missing tokens and serves design rules to your agent so generated components stick to your design system.

- MCP server · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI · ★ 27
- Author: gregkozakiewicz
- License: MIT · policy=link-only · description only; the file stays with the author
- Source: https://github.com/gregkozakiewicz/roast-my-design-system
- Updated: 2026-10-16
- HTML: https://affpapa.org/en/nevibecode/mcp/roast-my-design-system

## What it 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.

## Requirements
- Needs: Node.js (commands run via npx)

## Install

### Claude Code (native platform)

**Platform CLI**
```bash
claude mcp add roast-my-design-system -- npx -y roast-my-design-system
```

### Codex

**Platform CLI**
```bash
codex mcp add roast-my-design-system -- npx -y roast-my-design-system
```

### Cursor

**Config file**
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "roast-my-design-system": {
            "command": "npx",
            "args": [
                "-y",
                "roast-my-design-system"
            ]
        }
    }
}
```

### GitHub Copilot

**Config file**
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "roast-my-design-system": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "-y",
                "roast-my-design-system"
            ]
        }
    }
}
```

### Gemini CLI

**Platform CLI**
```bash
gemini mcp add roast-my-design-system npx -y roast-my-design-system
```

## When to use it
- detect hardcoded hex colors and spacing values in UI files
- generate `design-system-rules.md` from existing repository tokens
- score design system compliance separately for monorepo packages
- provide live UI constraints to coding agents over MCP

## Example prompts
- 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

## Similar
- [Next AI Draw.io](https://affpapa.org/en/nevibecode/mcp/next-ai-drawio.md) — MCP server · ★ 36398
- [tldraw](https://affpapa.org/en/nevibecode/mcp/tldraw.md) — MCP server · ★ 51091
- [Figma-Context-MCP](https://affpapa.org/en/nevibecode/mcp/figma-context-mcp.md) — MCP server · ★ 16062
- [Agent-Native Assets](https://affpapa.org/en/nevibecode/mcp/agent-native-assets.md) — MCP server · ★ 7506
- [Remove AI Watermarks](https://affpapa.org/en/nevibecode/mcp/remove-ai-watermarks.md) — MCP server · ★ 6114
- [Dembrandt](https://affpapa.org/en/nevibecode/mcp/dembrandt.md) — MCP server · ★ 3821

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md