roast-my-design-system

Run it on your codebase and get, in about a second:

- A health score you can defend in a meeting.0-100, deterministic, benchmarked against Ideal Design System norms, 34 scanned public repos and 10 reputable design systems (Primer, Polaris, Carbon, shadcn/ui…).
- Per-package scores for monorepos.One blended number hides which package is the problem:packages/uiscores 80 whileapps/webscores 40, and now you can see it.
- The receipts behind it.Every colour and its near-identical twin, every spacing value, typeface, duplicated or never-imported component, inline style and !important, with real file paths, in one self-contained HTML report you can open, Slack or email.
- The first fixes ranked by payoff.A "Where to start" list derived from your own numbers: keep the report as the audit, or hand it to Claude as the punch list for the fix.
- Rules that stop the mess coming back.A generateddesign-system-rules.mdwith canonical components, your token file, and known duplicates to avoid, so your AI agent follows your system instead of guessing at it.--applyinjects them into every agent file you have: Claude, Cursor, GitHub Copilot, and Windsurf. Every scan also checks the rules you already have for stale references: paths that no longer exist, components named canonical that nothing imports anymore.

Your AI agent (Claude, Cursor, Copilot) builds UI by imitating what's already in your repo. If your repo has 112 colours and four Button implementations, your agent guesses which one is canonical, and it picks wrong half the time. That's why AI-generated UI looksalmost-but-not-quiteright. The first step to fixing it is seeing the mess measured.

One scan powers all of it; the flags decide what lands on disk. Combine freely.

One scan writes rules for every agent: Claude, Cursor, GitHub Copilot, and Windsurf.Every scan also checks the agent rules you already have and flags stale references, no flag needed.

- Pre-refactor audit.Run/roast-my-design-systembefore a design-system cleanup to get the measured baseline: every colour, spacing value, duplicated component and inline style, with real file paths.
- Diagnosing almost-right AI output.When Claude keeps generating UI that looks slightly off, the report shows which duplicated components and stray values it is imitating, and where the canonical ones live.
- Making the case without a meeting.Drop the self-contained HTML report in Slack: a health score and three benchmarks (ideal norms, the 34-repo median, 10 reputable systems) argue for the design system for you.
- The fix loop.Hand the report back to Claude as the punch list and work through the Where to start section, file by file.

The full report for vercel/ai-chatbot, top to bottom — including "What the numbers mean", Claude's read of the scan, embedded right under the verdict:

The same report in light mode (one file, built-in toggle):

- Deterministic scanner, not AI sampling.A zero-dependency Node script readseveryfile (about a second on a normal repo, a few on a large monorepo) and returns the same numbers every run. Claude narrates; it never counts.
- Read-only.Nothing in your repo is modified. The only outputs are a temp JSON and the HTML report.
- No network, no telemetry.Everything runs locally. Nothing about your code leaves your machine.
- Honest exclusions.Test files, Storybook stories, docs sites, example apps, SVG artwork, and email templates (whichmustinline styles) are excluded, so you can't discredit the numbers on a technicality. Your own exclusions (.roastignore,--exclude) are printed in the report header with file counts, so a scoped scan can never pass itself off as the whole repo.
- Intent-aware counting (v3).Runtime-computed inline styles, compound-component APIs and wrapper components are not crimes and are not counted as ones. Token-led repos are judged on their hardcoded strays, not their token architecture. Repeated arbitrary values are read as decisions without names, not drift.
- A real benchmark.The "Avg Design System" yardstick comes from scanning 34 public React repos (cal.com, excalidraw, supabase, grafana, twenty, dub, langfuse…). Median: 130 colours, 17 greys, 20 duplicated components, 49 inline style blocks, 70 arbitrary Tailwind values.
- A second yardstick: reputable systems.Curated, scoped scans of 10 well-known design systems (shadcn/ui, Primer, Polaris, Carbon, Material UI, Chakra, Ant Design, GOV.UK, Spectrum, Cloudscape) show what disciplined looks like at scale.

Some repos host more than one visual world on purpose: the product plus a marketing site, a playground, a batch of experiments. Blending them produces a score that describes none of them. Scope the scan to the design system you are actually judging:

npx roast-my-design-system --exclude lab/ --exclude playground/

Or make it permanent with a.roastignorefile at the repo root, one repo-relative folder per line:

# separate visual worlds, not the product's design system lab/ playground/

Both routes merge, and both are loud on purpose. The harvest JSON records every active pattern and how many files it removed, and the report prints a line in the header ("2 folders excluded by .roastignore (lab/, playground/) · 946 files kept out of this scan"). You can narrow the question, but the report always says which question was asked, so a scoped score can't be quietly gamed. There is no negation and no glob syntax: plain folder prefixes, nothing clever.

The report and the rules file describe the repo as it was at scan time.--mcpkeeps the same engine running while your agent works, so questions get answered from the code as it is right now, and mistakes get caught before they land:

The loop: context before building, find while building, validate before saving, review before finishing.

claude mcp add roast -- npx roast-my-design-system --mcp

Any MCP client can register the same stdio command (tested with Claude Code; Cursor and Windsurf speak the same protocol). Same promise as the scan: local, read-only, one scan at startup, no port, no account, nothing about your code leaves your machine. And a clean answer reads "no measured violations found" with the list of checks attached, because a scanner can only certify what it can count.

The scanner already speaks SARIF, so wiring it into GitHub code scanning is six lines. Findings appear in the Security tab, annotated on the files themselves:

- uses: actions/checkout@v4 - run: npx roast-my-design-system . --sarif --no-open - uses: github/codeql-action/upload-sarif@v3 with: sarif_file: design-system-roast.sarif

No install, no Claude needed — just try it:

Run it inside any repo. Same scanner, same report, straight from npm. The Claude Code skill below adds the conversation on top: the roast in chat, then a punch list you can actually work through with Claude.

/plugin marketplace add pencilrebel/roast-my-design-system /plugin install roast-my-design-system@roast-my-design-system

If those commands error, your Claude Code is likely older than the plugin marketplace feature: update Claude Code and retry, or just use the manual route below (it works everywhere and installs the same skill).

git clone https://github.com/pencilrebel/roast-my-design-system.git cp -r roast-my-design-system/skills/roast-my-design-system ~/.claude/skills/

(Use.claude/skills/inside a repo instead to share it with your team.)

OpenAI Codex CLI(same SKILL.md, same folder):

git clone https://github.com/pencilrebel/roast-my-design-system.git cp -r roast-my-design-system/skills/roast-my-design-system ~/.codex/skills/

Invoke with$roast-my-design-system(or let Codex auto-match it). Use.codex/skills/inside a repo to share with your team.

npx skills:npx skills add pencilrebel/roast-my-design-systemworks for agents that read~/.agents/skills/. Claude Code currently reads~/.claude/skills/, so prefer one of the routes above.

Open Claude Code in the repo you want roasted and type:

You get the roast in chat plusdesign-system-roast.htmlat your repo root: a self-contained page (open it, Slack it, email it, no external requests) with:

- ahealth scorecomputed from how your numbers sit against the ideal
- "What the numbers mean": Claude's read of your scan — which findings actually matter, which good numbers are accidents, what to fix first — embedded in the same file you'll forward, labelled as written by Claude and kept apart from the measured numbers. The score alone can flatter; this section is what keeps a shared 85/100 honest
- stat tiles comparing you to all three yardsticks: Ideal, the 34-repo average, and the reputable systems
- alight/dark theme togglein one file
- the usage-weighted palette bar, the grey ramp, the off-scale spacing receipts, the duplicate-component receipts with clickable file paths, and the worst-offenders ledger
- aWhere to startclose: up to three moves derived from your repo's own numbers, each with a file-path receipt
- apresent🎁 below it: you sat through the roast, sodesign-system-rules.mdis wrapped inside the report itself. Unwrap, then copy or download the agent rules generated from your scan.

After the roast, the skill also offers to writedesign-system-rules.mdto disk and merge it into your CLAUDE.md,.cursor/rulesor AGENTS.md.

Three real roasts of public repos, hosted as-is (the same self-contained HTML the skill generates):

Yes, the median repo is already a mess. That's the point.

Your AI can write the UI. This makes sure it writesyourUI.

MIT. The code is yours to fork, modify and redistribute; the copyright notice travels with it.

The industry-standard doctrine for safe, observable, and steerable AI agent UX — browse 10 principles, curated examples, and application guides via MCP.

Provides AI assistants with a comprehensive, one-time analysis for complete codebase context and understanding.

A lightweight MCP (Model Context Protocol) server for Blender. It offers a natural language interface with Blender’s Python API, improving access to documentation, and allowing users to explore and understand complex setups.

You're agent can Chain 60+ AI image and video models on one workflow canvas

Real interaction references and motion recipes for AI coding agents.

Since AI can write code, it can also maintain structured architecture diagrams for your team. DiagramGuru is the MCP tool that lets AI agents create, update, and evolve your C4 architecture — automatically.

Build your custom templated images. One at a time or batches. Save them to presets to reuse later. Create templates or images via agent using MCP server.

Gives AI coding agents real design taste, so AI-built sites stop looking AI-generated.

Turn UI designs into responsive applications with Visily MCP