Roast My Design System logo

Roast My Design System

Audits a UI repository, generates design-system rules for agents, and checks edits for off-system patterns.

Install Roast My Design System

Pick your client, then add it in one click or paste the config.

STDIONode.js
~/Library/Application Support/Claude/claude_desktop_config.json
claude_desktop_config.json
{
  "mcpServers": {
    "roast-my-design-system-2": {
      "command": "npx",
      "args": [
        "-y",
        "roast-my-design-system@latest"
      ]
    }
  }
}

Settings → Developer → Edit Config, merge this into mcpServers, then fully quit and reopen Claude Desktop.

We couldn’t confirm it starts correctly

We ran the install command but it didn't respond within our test window — this can mean a slow first-time install rather than a real problem.

npx -y roast-my-design-system@latest

No response to initialize.

This is an experimental automated check and can have false negatives — missing environment variables, a slow cold install, etc. It doesn’t necessarily mean something’s wrong. Last checked 19d ago.

Overview

Roast My Design System MCP server audits a UI repository to identify design-system patterns, inconsistencies, duplicates, and gaps that may cause AI-generated interfaces to drift. It reads project files deterministically, produces an HTML report and a 0–100 score, and can generate rules for an agent through a local MCP server. Use it when you want an agent to learn the repository’s components, tokens, spacing, typography, and vocabulary before changing UI. It also supports edit-time checks and can gate changes using generated rules.

Use cases

  • Audit a UI repository for design-system drift
  • Generate agent rules from existing components and tokens
  • Find missing patterns that may lead to invented UI
  • Check edits against repository-specific design rules
  • Gate pull requests on measured design-system findings

Key features

  • Deterministic repository scan
  • HTML audit report with file paths
  • 0–100 design-system score
  • Generated agent rules
  • Local MCP rule serving
  • Edit-time guard checks

Security & health

What it can reach and how reliably it runs — from our own checks, not the maintainer’s claims.

ActiveLast checked 2d ago

Recent health check succeeded.

7/7 checks healthy over the last 45d

Supply-chain signal

No high-severity advisories surfaced by our automated scan.

Critical 0High 0Medium 0Low 0

Scanned 5d ago via OSV.dev · roast-my-design-system@latest (npm)

Adoption & maintenance

Factual signals from GitHub, npm, and our automated checks — not a rating.

GitHub stars27Stargazers on the source repository.
npm downloads12kPackage downloads in the last 30 days.
Last commit6d agoMost recent push to the default branch.
Install checkInconclusiveDidn't respond in our test window — often a slow first install.
Directory activity5 viewsConfig copies, upvotes, and views on AllMCPs.

How Roast My Design System works

What Roast My Design System MCP server does

Roast My Design System MCP server examines the UI code in a repository and maps the conventions an AI coding agent is likely to copy. The scan identifies findings such as hardcoded colors, spacing values outside the project’s scale, duplicated components, and other measured patterns. It also reports places where the repository lacks a clear answer, such as a missing chart palette.

The result is an HTML report with file paths, measured findings, suggested changes, and a score from 0 to 100. Monorepos can receive separate scores for individual packages rather than one score that hides differences between applications.

How it works

The command reads repository files locally and counts findings using deterministic rules. The numeric results do not depend on an AI-generated explanation. Claude may add commentary to the report, but that text is labelled separately from the measurements.

The project has three related stages. First, the roast describes what exists and where the system has gaps. Next, it creates agent guidance containing canonical components, token locations, duplicates to avoid, spacing steps, typefaces, and project vocabulary. Finally, the edit guard checks changes against that guidance so an agent does not need to remember to request an audit.

Setup and configuration

Run the package from the root of a UI repository:

Terminal
npx roast-my-design-system@latest

The command opens a report after scanning.

Use --apply to write generated rules into the supported agent files for Claude, Cursor, GitHub Copilot, and Windsurf. The generated guidance is stored in design-system-rules.md. Each scan also checks existing rules for references that have become stale.

Tools and capabilities

Roast My Design System MCP server provides a local MCP layer that serves repository-specific design-system rules and answers to an agent. Its documented workflow includes:

  • auditing the repository and producing an HTML report;
  • exposing generated rules through MCP;
  • finding hardcoded colors and near-identical values;
  • detecting off-scale spacing and duplicated components;
  • identifying measured gaps where the repository provides no established pattern;
  • generating fix prompts for reported findings;
  • checking edits with a guard and supporting pull-request gating.

Limitations and notes

The scan is a consistency and gap detector, not a complete visual design review. A zero-finding result means the repository met the tool’s rules; it is not proof that every interface is well designed. The README also reports that MCP use varied by model in its experiments, while the edit hook operated without requiring the model to call an MCP tool.

Roast My Design System MCP server is focused on repository evidence. Its score and findings depend on the files and conventions it can read, so missing or ambiguous system definitions can appear as gaps rather than inferred design decisions.

Reviews

No reviews yet — be the first to share how it worked for you.

Frequently Asked Questions about Roast My Design System

Roast My Design System is an MCP server that connects AI agents to a local audit of a UI repository and its design-system rules. Its main tools scan files, report inconsistencies and gaps, serve generated guidance over MCP, and check edits against the repository’s components, tokens, spacing, typography, and vocabulary.

Run `npx roast-my-design-system@latest` from the root of a UI repository. The command scans the project and opens an HTML report. The documented setup does not require an account, network access, or telemetry.

Yes, Cursor is listed as a verified MCP client, and `--apply` can write generated rules into Cursor’s agent files. The rules describe repository-specific components, tokens, spacing, typefaces, duplicates, and vocabulary.

Run the scan with `--apply` to write generated rules into supported agent files. The resulting guidance is also stored in `design-system-rules.md`, and later scans check existing rules for stale references.

Yes, the project documents an edit hook that checks changes without waiting for an MCP request. It can also support pull-request gating, while the MCP layer serves the generated repository rules and answers to an agent.

Related MCP servers

Add a badge to your READMEShow it’s listed — live SVG, Markdown or HTML.

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:
Live Dynamic SVG PreviewRoast My Design System AllMCPs Directory Badge
Markdown (GitHub README)
[![AllMCPs](https://allmcps.com/api/badge/roast-my-design-system-2?style=directory)](https://allmcps.com/mcp/roast-my-design-system-2)
HTML Embed
<a href="https://allmcps.com/mcp/roast-my-design-system-2"><img src="https://allmcps.com/api/badge/roast-my-design-system-2?style=directory" alt="Roast My Design System on AllMCPs" /></a>