Log inSubmit server
Roast My Design System logo

Roast My Design System

Audits UI repositories, finds design-system gaps, generates agent rules, and serves them through a local MCP server.

InstallRepositoryWebsite
Full README Compare alternatives Embed widget Claim this listing

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": {
      "command": "npx",
      "args": [
        "-y",
        "roast-my-design-system@latest"
      ]
    }
  }
}

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

Install not yet sandbox-tested— we haven't run this command through our automated sandbox yet. Not a red flag; we're working through the catalog.

Overview

Roast My Design System MCP server audits a UI repository for design-system inconsistencies, missing guidance, hardcoded values, off-scale spacing, and duplicated components. It produces a deterministic HTML report, generates repository-specific rules for AI agents, and serves those rules through a local MCP server. Run it from the root of a UI repository when you want agents to reuse existing conventions and expose places where the codebase provides no clear answer.

Use cases

  • Audit a UI repository for design-system inconsistencies
  • Find missing rules that may cause agents to invent UI
  • Generate repository-specific guidance for coding agents
  • Review hardcoded colours and off-scale spacing
  • Rescan a monorepo package after design-system changes

Key features

  • Deterministic HTML audit reports
  • Design-system gap detection
  • Repository-specific agent rules
  • Local MCP rule serving
  • Monorepo package scoring
  • Agent-file updates with --apply

Security & health

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

ActiveLast checked Today

Recent health check succeeded.

8/8 checks healthy over the last 41d

Supply-chain signal

No high-severity advisories surfaced by our automated scan.

Critical 0High 0Medium 0Low 0

Scanned 16d 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 downloads11kPackage downloads in the last 30 days.
Last commit7d agoMost recent push to the default branch.
Directory activity1 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 a UI repository and maps the conventions an AI coding agent can copy, along with the places where the repository gives it no reliable answer. The audit reports design-system findings such as hardcoded colours, spacing values outside the established scale, duplicated components, and other measured issues. It also identifies the UI foundation it detects, including systems such as shadcn/ui, Tailwind, MUI, Mantine, Chakra, or Ant Design.

The output is a single HTML report that includes file paths, findings, suggested changes, and a score from 0 to 100. Monorepos can receive separate scores for individual packages. The report also shows how colour usage is distributed across theme values, framework palettes, and manually written values.

How it works

The Roast My Design System MCP server reads files locally and calculates its findings deterministically. It follows CSS variables, Tailwind themes, Sass and Less variables, and JavaScript theme objects when measuring colour usage. The numeric results come from the repository scan; any explanatory text written by Claude is kept separate and labelled as AI-written.

After the audit, the project can generate design-system-rules.md containing the canonical components, token locations, known duplicates, spacing steps, typefaces, and detected kit vocabulary. The local MCP server then makes those rules available to an agent. The generated rules can also be written into Claude, Cursor, GitHub Copilot, and Windsurf agent files with --apply.

Setup and configuration

Run the package with npx roast-my-design-system@latest from the root of a UI repository. The tool opens its report after the scan and does not require an account, network access, or telemetry. The scan does not modify the repository unless you explicitly use an option such as --apply to place generated rules in agent files.

Roast My Design System is suitable for the Developer Tools category when you need a local review of an existing UI codebase rather than a hosted design-system inventory. Rescan after making changes to check whether findings or generated rules have changed.

Tools and capabilities

  • Audit a repository’s design-system usage and gaps.
  • Produce a deterministic HTML report with scores, findings, file paths, and suggested fixes.
  • Find hardcoded colours, off-scale spacing, duplicated components, and other measured patterns.
  • Generate agent guidance in design-system-rules.md.
  • Serve repository-specific rules through a local MCP server.
  • Check existing generated rules for stale references during scans.
  • Apply generated guidance to supported agent files with --apply.

Limitations and notes

The audit measures source files and does not render the interface. A zero finding count means the code passed the tool’s rules; it does not mean the visual design was reviewed. Agents may not call MCP tools consistently, so serving rules through MCP is not equivalent to checking every edit. The README’s reported research results also describe specific test repositories, models, tasks, and tool versions rather than a guarantee for every codebase.

The project reports no network access and no telemetry for its command-line scan. Its findings depend on what can be inferred from the repository, so a missing documented convention may appear as a design-system gap.

Read the full README View source on GitHub

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 to a local UI repository and exposes its design-system audit and generated rules to AI agents. Its main capabilities are deterministic repository scanning, HTML report generation, gap detection, and serving guidance such as components, tokens, spacing, and typefaces through MCP.

Run `npx roast-my-design-system@latest` from the root of a UI repository. The command scans the repository and opens an HTML report.

Yes, Roast My Design System is verified in Cursor. Its generated rules can also be applied to Cursor agent files with `--apply`.

Yes, the README identifies Claude Code and Windsurf as verified clients. The generated rules can be written into Claude and Windsurf agent files with `--apply`.

Related MCP servers

All in Developer Tools All alternatives
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?style=directory)](https://allmcps.com/mcp/roast-my-design-system)
HTML Embed
<a href="https://allmcps.com/mcp/roast-my-design-system"><img src="https://allmcps.com/api/badge/roast-my-design-system?style=directory" alt="Roast My Design System on AllMCPs" /></a>