roast-my-design-system plugin
A design system scanner for a repo with MCP and an edit hook: a 0 to 100 score, agent rules and the places where AI invents UI
- 65 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- `--apply` appends a rules block to agent files and the plugin hook runs on every edit
- The local MCP server reads repo files at startup and answers the agent from them
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add plugins/roast-my-design-systemDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- `--apply` appends a rules block to agent files and the plugin hook runs on every edit
- The local MCP server reads repo files at startup and answers the agent from them
This is third-party code. Review the repository files before installing.
What it does
roast-my-design-system is a zero-dependency npm package that reads the files of a UI repo and shows where an AI agent will start inventing UI. Running `npx roast-my-design-system@latest` at the project root opens a report a second later: a 0 to 100 design system health score, where to start fixing and the findings, such as colors and spacings written by hand where a token exists. Monorepos get a score per package. It teaches the agent in three ways. `--apply` writes generated rules into the agent files: `CLAUDE.md`, `AGENTS.md`, `.cursorrules`, `.cursor/rules/`, `.windsurfrules` and `.github/copilot-instructions.md`. `--mcp` starts a local MCP server with five tools, such as `roast_find_token`, and a `roast-fix` prompt that serves the top fix from a fresh scan. The Claude Code plugin adds a hook that checks every edit. Every number comes from a deterministic read of the files, and the explanations written by Claude are labelled as AI and kept apart from the numbers. It runs locally with no account, no network and no telemetry, and the repo stays untouched until you ask for `--apply`. `--sarif` output is there for CI.
Who it is for. Frontend teams and design engineers who let an agent edit the interface and want it to use the project tokens and components.
Good fit when
- An agent draws a new chart or panel, the repo has no palette and the agent hardcodes colors
- You need a design system score with a detailed report and a list of where to start
- Rules for `CLAUDE.md`, `AGENTS.md` and `.cursorrules` should be generated from the repo itself
- CI needs a gate on scan results in SARIF format
Not a fit when
- The repo has no UI code: the scanner reads frontend files
- You need a check of the rendered look: the tool renders nothing and does not review design
- You want a visual quality verdict from screenshots: the score rests on code alone
Example request
Run roast-my-design-system at the project root, show the score and the top three fixes, then apply the agent rules with --applyLimitations
- The score reflects code. A zero-finding result means the code follows the rules, not that the design was reviewed, and nothing was rendered.
- An agent does not always call the MCP tool: in the author's October runs Sonnet called it in 7 of 24 sessions and Haiku in 2 of 24, so the edit hook from the plugin works more reliably.
- For kits such as MUI, Mantine, Chakra UI and Ant Design the score accounts for your own wrappers and themes, but the result depends on how the repo is read.
- The author's measurements cover ten open products and the full write-up is promised as a separate publication.
How to disable. Remove the plugin with `/plugin uninstall roast-my-design-system` and the MCP server with `claude mcp remove roast`. Delete the rules block in agent files by hand between the markers that `--apply` inserted.
FAQ
How do I run roast-my-design-system?
Run `npx roast-my-design-system@latest` at the root of a UI repo. A report opens a second later; no account or network is needed.
How do I connect the MCP server in Claude Code and Cursor?
For Claude Code run `claude mcp add roast -- npx roast-my-design-system@latest --mcp`. For Cursor add an `mcpServers` block to `.cursor/mcp.json` with the `npx` command and arguments `roast-my-design-system` and `--mcp`.
What does --apply do?
It writes rules built from the repo into every agent file it finds, inside a marked block, and checks whether your existing rules reference stale items.
Does it send my code anywhere?
No. The README states no network, no account and no telemetry, and the tests fail if `package.json` ever declares a dependency.
How do I install the Claude Code plugin?
Run `/plugin marketplace add gregkozakiewicz/roast-my-design-system`, then `/plugin install roast-my-design-system@roast-my-design-system`. The MCP server and the edit hook come with it.
Discussion
No questions or reviews yet.
Related
PluginsAn MCP server and skill for interfaces: 31 design systems for shadcn/ui, UI and UX principles and accessibility review for agent-written code
A design-system MCP server and linter: the agent reads tokens and rules before generating UI, and a check returns violations
A 147-rule design check that finds AI-interface tells, fixes the mechanical ones and hands the rest to an agent skill
Finds AI-look tells in generated frontend, from purple gradients to cream and terracotta, and rewrites the interface
A design studio for people and agents: dsa CLI, MCP endpoint and skill to edit layouts, slides, reports and 3D together.
A kit of skills, tokens and rules that turns Claude into a design architect: DTCG tokens, components, accessibility and objective quality gates
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Repository stars | Main difference |
|---|---|---|---|
| roast-my-design-system (this card) | no | 65 | |
| designlang | no | 5,058 | That tool extracts a design system from a live site, while roast-my-design-system scores the one in your repo and teaches the agent to follow it. |
| design.how | no | 314 | design.how turns a UI into a system for the agent through skills, while roast counts deviations in code and guards edits. |
README in short
The README explains the idea (an agent copies what it finds and invents where there is no answer), gives measurements over 355 sessions and describes the report, the score, rule generation, the MCP server and setup in Claude Code, Cursor and Windsurf.