Roast My Design System

roast-my-design-system

找出 AI Agent 会在哪里凭空编造 UI。

AI 可以编写 UI。这个工具能确保它编写的是你的 UI。

npx roast-my-design-system@latest

在 UI 仓库根目录运行。1 秒后，报告就会打开。 无需账户。无需联网。无遥测。不修改仓库中的任何内容。

版本历史记录见 CHANGELOG.md。

理念

Agent 会照搬它找到的内容。

仓库没有答案的地方，它就会凭空编造。

我们在 10 个真实的开源产品上进行了测试，共运行 355 次 Agent 会话，对比是否使用此工具的情况。

按本工具自身的规则统计每次会话新增的问题：

任务	模型	时间	未使用 roast	安装 Roast MCP 和规则	使用带编辑钩子的 Roast 插件
为 4 个产品各新增一个图表和一个组件，每个运行 3 次	Sonnet 5	2026 年 10 月，roast 10.1	24 次运行中有 21 个	未运行	24 次运行中有 7 个
为 4 个产品各新增一个图表和一个组件，每个运行 3 次	Haiku 4.5	2026 年 10 月，roast 10.1	24 次运行中有 72 个	未运行	24 次运行中有 1 个
添加面板、构建仪表盘、优化列表（80 次会话）	Sonnet 5	2026 年 9 月	7	9	未运行
圣诞主题，10 个产品	Sonnet 5	2026 年 9 月	28	2	未运行
为 4 个产品各新增一个图表，每个运行 5 次	Sonnet 5	2026 年 9 月	20 次运行中有 10 个	未运行	20 次运行中有 0 个
为 4 个产品新增一个图表	Haiku 4.5	2026 年 9 月	25	39	15 次运行中有 14 次为 0 个
图表、状态颜色、空状态、新组件	Haiku 4.5	2026 年 9 月	16 次运行中有 42 个	16 次运行中有 49 个	51 次运行中有 3 个

无论是否使用此工具，常规工作都保持了系统的一致性。但需要新增内容的工作没有做到这一点。

Agent 并不总会在应该调用工具时调用。10 月，Sonnet 在 24 次会话中有 7 次调用了 MCP 工具，Haiku 则在 24 次会话中有 2 次。编辑钩子无需请求便会运行。使用编辑钩子时，数字最低。

Agent 在哪里凭空编造？就在仓库没有可供照搬内容的地方。Dub 没有图表配色方案，自身的图表将 17 种颜色硬编码在代码中。让 Haiku 创建图表后，它又硬编码了 9 种颜色。10 月，启用插件后 Sonnet 遗留的 7 个问题中，有 5 个是 Dub 的图表颜色。Agent 保留了这些颜色，还写下注释，说明仓库没有图表配色方案。

因此，Agent 引入的混乱，正好标示出系统中的缺口。

这个工具会绘制这张地图。

Roast、Teach、Guard

Roast 仓库，找出实际的设计系统、其中的混乱以及存在的缺口。

Teach Agent，通过生成的规则和本地 MCP 服务来提供指导。

Guard 每次编辑，让 Agent 不必记得主动请求检查。

ROAST   仓库里有什么，以及缺少什么
  ↓
TEACH   Agent 文件中的规则，通过 MCP 提供答案
  ↓
GUARD   检查每次编辑，并在 PR 中设为门禁

你将获得什么

你的 Agent 需要在哪些地方猜测？

报告首先指出：仓库中尚无答案的地方，或者“未发现问题”。

• 一句话说明问题
• 能证明问题的文件
• 解决问题的一项措施

目前有一个已确认的问题，因为运行结果发现了它：仓库没有图表配色方案，图表却硬编码了颜色。126 个公开仓库中有 43 个存在这种情况。只有经过测量的问题才会列入清单。

立即可执行、能提高健康分数的修复项

Agent 会照着做的混乱做法，按修复价值排序。

• 发现的问题
• 问题所在位置及文件路径
• 问题为何重要
• 应如何更改
• 用于复制修复提示词的按钮，供你的 Agent 使用

修复、重新扫描，然后点击下一个按钮。

在会议上站得住脚的分数

0 到 100。每次运行都得到相同的分数。

依据三个基准衡量：设计系统的理想规范、119 个仓库基准中 34 个产品仓库的中位数，以及 10 个值得信赖的系统（Primer、Polaris、Carbon、shadcn/ui 等）。

单体仓库会按软件包分别评分。packages/ui 的 80 分不再掩盖 apps/web 的 40 分。

每项发现及其文件路径

• 每个硬编码颜色及其几乎相同的副本
• 每个不符合间距尺度的值
• 每个重复组件

还有 8 种类型，详见测量内容。一个 HTML 文件。打开它，发到 Slack，也可以通过电子邮件发送。

颜色使用情况栏显示仓库中的颜色来源：每 100 次颜色使用中，有多少次按名称读取主题颜色，有多少次使用 Tailwind 配色，以及有多少次是手动编写的非规范颜色。它会追踪 CSS 变量、Tailwind 主题、Sass 和 Less 变量以及 JavaScript 主题对象，并据此进行统计。

页眉会说明仓库基于什么构建：shadcn/ui、Tailwind 主题、MUI、Mantine、Chakra 或 Ant Design；如果仓库使用两套工具包，也会同时列出。

给 Agent 的规则

从你的仓库生成，写入 design-system-rules.md：

规范组件
token 文件
已知重复项，需避免使用
间距步长
字体
工具包专属词汇

--apply 会将这些规则写入你使用的每个 Agent 文件：Claude、Cursor、GitHub Copilot、Windsurf。每次扫描也会检查现有规则中是否有过时引用。

由脚本负责统计

每个数字都来自对文件的确定性读取。Claude 会撰写说明，并标注为 AI 撰写，且与数字分开呈现。

运行过程

使用 Claude Code 无头模式，对 10 个公开产品进行测试，每个产品固定在一个提交：cal.com、Dub、Metabase、Plausible、SigNoz、trigger.dev，以及另外四个。2026 年 9 月共运行 259 个会话，2026 年 10 月在 roast 10.1 上运行 96 个会话，使用 Sonnet 5 和 Haiku 4.5。10 月的会话在相同提交上，对 Plausible、SigNoz、trigger.dev 和 Dub 重复执行图表和新增组件任务。每个会话结束时以及固定提交处，都会依据本工具的规则评估所有变更文件。只有会话中新引入的问题才会计入。

没有渲染任何内容。零项发现意味着代码符合这些规则，并不意味着设计经过了审核。方法、表格和限制详见将另行发布的研究报告。

实例报告

11 份报告，完全按照工具生成的原样托管。每个数字都确定无误，每条路径都真实存在。

• npx shadcn create，刚安装（全新安装，全部 61 个组件）：应视为全新安装，“分数属于工具包，而不是你”；13 种颜色，所有主题变量都已就位，shadcn 自带的 24 个方括号值均已命名且不计入统计。不评分。
• Unleash（MUI）：1,109 个文件导入工具包，主题被读取 6,166 次；每 100 个工具包文件中，有 4 种颜色和 2 种间距被写入组件。得分 60。
• Metabase（Mantine）：其自有的 Mantine 封装层被计作工具包，因此读取了 2,679 个文件，而非 392 个；没有任何内容写入组件，每 100 个工具包文件中有 2 种间距。得分 47。
• SigNoz（Ant Design）：在存在令牌的地方，每 100 个工具包文件中，有 2 种颜色和 7 种间距以样式对象的形式写入。得分 51。
• Apache Airflow（Chakra UI）：没有颜色写入组件；在存在间距阶梯的地方，每 100 个工具包文件中有 4 种间距以像素字符串表示。得分 43。
• vercel/ai-chatbot（shadcn 安装）：有 71 个类似 [13px] 的值写在 Tailwind 尺度之外；在存在主题变量的地方，每 100 个文件中有 66 种调色板颜色；内嵌 Claude 的备注。得分 80。
• excalidraw/excalidraw：78 个偏离尺度的间距值和 90 个 !important 声明。得分 55。
• dubinc/dub：642 个任意方括号值、21 个重复组件，并指出了图表调色板的缺口。得分 20。
• telekom/scale（Stencil）：按标签读取了 95 个 Stencil 组件；有 66 个间距值偏离尺度，而大约 12 个就足够；内嵌 Claude 的备注。得分 55。
• magicuidesign/magicui（注册表）：按其发布的组件统计；每 100 个文件中，发布的代码里有 52 种颜色偏离主题；其文档站点已排除在外并明确标注。得分 78。
• adobe/spectrum-web-components（Lit）：740 个颜色令牌，旁边还有 8 种硬编码颜色，以及 37 个 !important 声明。得分 83。

vercel/ai-chatbot 的完整报告。结论会回答 Agent 在这里能学到什么；缺口部分排在最前面，接着是“代码库教给 Agent 的内容”，以及 Claude 对扫描结果的解读：

同一份报告的浅色模式（单文件，内置切换）：

为什么这些数字可信

• 确定性。 一个零依赖的 Node 脚本会读取每个文件，每次运行都返回相同的数字。在普通仓库中约需 1 秒。
• 只读。不联网。不收集遥测数据。 如果 package.json 声明了依赖，测试套件就会失败。每次发布在打标签前，都会针对 29 个示例仓库运行 468 项检查；测试样例及其快照保存在 tests/ 中，每个样例对应一个 JSON 文件。
• 如实呈现缺失数据。 扫描无法读取的内容会标记为“未测量”，并从评分中剔除。
• 如实说明排除项。 测试、故事、文档站点、插图和邮件模板均不纳入统计。报告标题中会列出你自行设置的排除项及文件数量。
• 真实基准。 包含 119 个公开仓库。由 34 个 React 仓库组成的核心组用于计算中位数；其余仓库则用于工具包和 Web 组件分组，因此 shadcn 仓库会与 shadcn 仓库比较，Lit 系统会与 Lit 和 Stencil 系统比较。构建器位于 tools/benchmark/。
• 可导入的评分函数。 scoreHarvest(harvest) 会以纯数据形式返回评分和指标。报告与 CI 检查使用相同的数字。

更详细的说明，包括扫描范围以及插件在你的机器上会执行哪些操作，请参阅 docs/reference.md。

适用范围

框架

React、Next.js、Remix、Vite Stencil、Lit、自定义元素

工具包和样式

Tailwind、shadcn/ui、MUI、Mantine、Chakra UI、Ant Design CSS Modules、Sass、Less、Emotion、styled-components、vanilla-extract、CVA、Stitches

每个仓库都会与采用相同方式构建的仓库比较：shadcn 安装与 shadcn 安装比较，使用 MUI、Mantine、Chakra 或 Ant Design 的产品与使用相同工具包的产品比较，Tailwind 主题与 Tailwind 主题比较，Lit 或 Stencil 系统与其他 Web 组件系统比较，shadcn 注册表与 shadcn 组比较。如果仓库使用两个工具包，系统会予以说明，并在规则中列出两者。

已识别，但尚未测量

Vue、Angular、Svelte：会列在标题中，颜色和间距会计入统计，但不会测量组件。报告会对此说明。 HeroUI、NextUI、Radix Themes、Fluent UI、React Bootstrap、Grommet：会列在标题中，但没有对应的工具包规则。

所有命令

所有功能都由一次扫描提供支持；标志决定哪些内容会写入磁盘。可自由组合。

自行运行

命令	运行结果
npx roast-my-design-system@latest	扫描结果和 design-system-roast.html，并在浏览器中打开
... <path>	扫描当前目录以外的其他代码库
... --apply	将生成的 Agent 规则注入你拥有的每个 Agent 文件：CLAUDE.md、AGENTS.md、.cursorrules、.cursor/rules/、.windsurfrules 和 .github/copilot-instructions.md，并放在标记块中。再次运行时只会替换该标记块，不会改动你自己的文本。
... --rules	将相同的规则写入 design-system-rules.md，供你手动粘贴
... --card	生成 roast-card.svg：一张可分享的 1200x630 卡片，显示评分和最严重的问题。纯 SVG，可嵌入 README
... --sarif	生成供 GitHub 代码扫描使用的 design-system-roast.sarif：将其上传到 CI 后，问题会显示在 Security 选项卡中，并标注在文件上
... --check	在终端中检查工作树中已更改的文件是否符合设计系统。发现问题时退出码为 1，可用于脚本
/roast-my-design-system:review（在 Claude Code 中）	使用插件的第二个技能，在聊天中执行相同的检查：列出每个已更改文件的问题并指出修复方法，然后应用修复并重新检查
... --exclude lab/	不扫描某个文件夹（可重复使用此标志，或用逗号分隔多个文件夹）。也可以在代码库根目录的 .roastignore 文件中列出文件夹。无论采用哪种方式，报告都会在标题中说明
... --json	将扫描摘要以 JSON 格式输出到 stdout，供脚本和管道使用。包含 schemaVersion、所用基准，以及以数字表示的每项指标，便于比较两次扫描
... --by "Dwayne Hicks"	在报告标题中添加姓名，适用于你为他人运行扫描的情况
... --theme light / --out <file> / --no-open / --open	浅色报告、自定义报告路径、始终不打开浏览器、始终打开报告

面向你的 Agent

命令	输出内容
... --notes <file.md>	Agent 对此次扫描的解读，会嵌入报告中，标题为 “仓库教给 Agent 的内容”：哪些发现很重要，哪些好看的数字只是偶然，应该先修复什么。会标注为 AI 撰写，并与实测数字分开。Claude Code 技能会自动撰写并传入此内容；此标志的作用是让任何 Agent 都能
... --section "Title" <file.md>	在备注之后添加一章由 Agent 撰写的内容，样式和标注相同，也可以使用小标题。可重复使用
... --hook	Claude Code 插件在每次编辑后运行的检查，适用于手动安装的配置：从 stdin 读取 hook 事件，检查发生更改的文件，并仅以 JSON 格式输出此次编辑新增的发现。始终以 0 退出
... --stop-hook	Claude Code 插件在 Agent 完成一轮工作时运行的审查，适用于手动安装的配置：从 stdin 读取 Stop 事件；如果会话更改的文件存在新问题，则返回一个区块，让 Agent 再处理一次。--session-start 会记录此前尚未提交的工作。设置 ROAST_STOP_REVIEW=off 可将其关闭。始终以 0 退出
... --mcp	将扫描作为本地 MCP 服务运行：提供 5 个供 Agent 编写 UI 时调用的工具，以及从最新扫描结果中提供首要修复项的 roast-fix 提示词。参见 通过 MCP 获取实时答案
/roast-my-design-system（在 Claude Code 中）	完整体验：在聊天中查看 roast，并且 将其嵌入报告，标题为“仓库教给 Agent 的内容”；还包括规则建议，以及 Claude 根据你自己的数字协助修复的循环

**“为何重要”是通用内容，随工具一同提供，在每份报告中的内容都相同。“仓库教给 Agent 的内容”**是你的 Agent 对仓库的解读，只有在 Agent 传入此内容时才会显示。

通过 MCP 获取实时答案

报告和规则文件描述的是扫描时的仓库状态。--mcp 会让同一套引擎在 Agent 工作期间持续运行，因此问题会根据代码的当前状态得到解答，错误也能在提交前被发现。

工具	它能回答的问题
roast_get_context	在这里改动 UI 前，我应该了解什么？根据正在编辑的文件夹提供内容
roast_find_component	已经有适用于此处的组件了吗？哪个才是标准组件？附带一个真实用例示例。如果两个候选项不相上下，它会明确说明，并列出二者
roast_find_token	我手头有 #111111 / 13px。应该用什么？
roast_validate	我马上要保存了。这样会破坏系统吗？
roast_review	审查我改动过的文件。它会自行读取 git diff，无需粘贴代码

工作循环：构建前获取上下文，构建时查找，保存前验证，结束前审查。

以下是一个真实的交互，针对 Unleash，一个评分为 60/100 的 MUI 产品。Agent 手头有一种灰色，并且想好了一个内边距：

roast_find_token #6b7280
→ Nearest token: #607d8b, 11 channel steps from #6b7280. Unless the difference is a deliberate decision, use the token.

roast_validate (first draft)
→ ✕ L5 Colour #6b7280 written onto an MUI component, and the theme has no such colour.
     Fix: Add it to the theme once (frontend/src/themes/dark-theme.ts), then read it there: color: 'text.secondary' in sx.
  ✕ L5 Pixel size p: 12px on an MUI component.
     Fix: 12px is between steps 1 (8px) and 2 (16px). Keep it with a comment, or use the nearest step in sx.

roast_validate (second draft: color: 'text.secondary', p: 1.5)
→ No measured violations found. Checked: hardcoded colours vs the token set, near-identical colour twins, off-scale spacing …

四次调用，不到 800 个 token，新组件读取主题，而不是添加第 44 种颜色。

图表有专门的规则，因为图表需要多种彼此有区别的颜色，而大多数设计系统从未为它们命名。如果仓库为图表维护了调色板，那么在图表文件中手写颜色就会被报告，并指出调色板的位置。如果仓库有图表却没有调色板，那么新图表中手动设置颜色时会收到一条警告，指出已有的类似图表，并建议创建调色板。这条警告就是实时的缺口报告。

服务读取仓库的方式与报告一致。对于基于 MUI、Mantine、Chakra UI 或 Ant Design 构建的产品，上下文会指出主题文件和该组件库自身的读取方式；roast_find_token 会按间距步长给出答案；检查则会标出写在组件库组件上的颜色或像素尺寸，而主题中其实已有对应值的情况。对于 Tailwind 主题或 shadcn 仓库，它们会标出诸如 text-gray-500 这样的调色板类，前提是主题中已为此类颜色命名。直接将令牌原始值粘贴到组件中会被标记，并附上令牌名称；如果仓库已有广泛使用的 Button，却从头构建了一个按钮，则会收到警告，指出应该使用的导入语句。

roast-fix 提示词会从全新扫描结果中提供优先级最高的「从何处开始」操作，与报告中的复制按钮内容完全一致。在 Claude Code 中输入 /mcp__roast__roast-fix，并添加编号即可调整处理顺序。修复后再次提问，下一个操作就会升至首位：扫描结果就是进度条。

已安装 Claude Code 插件？ 服务已经就绪。否则：

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

已在 Claude Code、Cursor 和 Windsurf（现为 Devin Desktop）中验证。 每款产品都经过端到端测试：服务已连接、列出了全部 5 个工具，并且能在编辑器自带的聊天窗口中给出真实答案。本地运行、只读、启动时扫描一次、不需要端口或账户。

Cursor：将以下内容放入项目中的 .cursor/mcp.json（必须放在项目中，这样扫描只会处理一个仓库，而非整个磁盘），然后首次使用时在 Settings → Tools & MCP 下启用 roast：

{ "mcpServers": { "roast": { "command": "npx", "args": ["roast-my-design-system", "--mcp"] } } }

Windsurf（Devin Desktop）：它的 MCP 配置是全局的（~/.codeium/windsurf/mcp_config.json），因此请指定项目文件夹，让扫描范围限定在一个仓库内：

{ "mcpServers": { "roast": { "command": "npx", "args": ["roast-my-design-system", "--mcp", "/path/to/your/repo"] } } }

其他 MCP 客户端也可以注册相同的 stdio 命令。

在 CI 中使用

扫描器支持 SARIF，因此只需 6 行代码，就能将它接入 GitHub code scanning。发现的问题会显示在 Security 选项卡中，并标注在对应文件上：

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

如果只想因新增问题而阻止拉取请求，请使用 guard-my-design-system。

安装

无需安装，也无需 Claude：

npx roast-my-design-system@latest

Claude Code（推荐）：

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

安装内容：两个技能、一个本地 MCP 服务，以及两个独立运行的检查项，仅此而已。roast（/roast-my-design-system，或“roast my design system”）会扫描整个代码仓库，在报告中写入 Claude 对数据的解读，然后带你逐项修复。review（/roast-my-design-system:review，或“review my UI changes”）只检查发生变更的内容，大约一秒就能完成。编辑检查会在 Agent 每次编辑文件后运行，并反馈这次编辑新增的问题；如果文件没有新增问题，就不会发出消息。回合结束检查会在 Agent 表示完成时运行：如果本次会话修改的文件仍存在由它引入的问题，就会让 Agent 返回修复一次，然后再结束。仅提供建议的警告不会让它返回；每个会话中，同一个问题只会让它返回一次；会话开始前就未提交的工作则不会受到影响。要关闭检查，请在 Claude Code 设置中将 ROAST_STOP_REVIEW=off 设为关闭（"env": { "ROAST_STOP_REVIEW": "off" }）。

如果这些命令报错，说明你的 Claude Code 版本早于插件市场。请更新，或使用手动方式：

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

（在代码仓库内使用 .claude/skills/，即可与团队共享。review 技能需要与 roast-my-design-system 文件夹放在同一目录下。）

OpenAI Codex CLI（使用相同的 SKILL.md 和文件夹）：

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

使用 $roast-my-design-system 调用。在代码仓库内使用 .codex/skills/，即可与团队共享。

npx skills： 对于会读取 ~/.agents/skills/ 的 Agent，npx skills add gregkozakiewicz/roast-my-design-system 可以正常使用。Claude Code 会读取 ~/.claude/skills/，因此建议使用上述方式之一。

需要 Node 18+。

使用

在要进行分析的代码仓库中打开 Claude Code，然后输入：

/roast-my-design-system

当你的设计系统值得保护后，第二个技能会只检查你修改的内容：

/roast-my-design-system:review

它会对 git diff 中的文件运行与 --check 相同的检查，并列出每项发现及其修复方法；在使用 MUI、Mantine、Chakra、Ant Design 或 Tailwind 主题的代码仓库中，它会采用工具包自身的术语。没有评分，也没有报告：这是适合周二下午快速运行的小型检查。Claude 也能从“review my UI changes”或“did I break the design system”等普通措辞中识别出这一需求。

你会在聊天中看到分析结果，还会在代码仓库根目录得到 design-system-roast.html。这是一个独立页面，其中包含：

• 根据你的数据与理想值的差距计算得出的健康评分
• “代码仓库教会 Agent 的内容”：Claude 对扫描结果的解读，嵌入到你要转发的文件中，并标明由 Claude 撰写，与测量数据分开。单看评分可能会显得过于乐观；这一部分能让大家共同面对 85/100 这个评分
• 将你的数据与全部 3 个基准进行比较的统计图块
• 单文件中的浅色／深色主题切换
• 按使用情况加权的调色板条、灰色色阶、超出标准的间距记录、可点击文件路径的重复组件记录，以及问题最严重项的清单
• 立即修复以提高健康评分列表：根据代码仓库自身的数据得出的最多 3 项改进措施，每项都附有文件路径作为依据
• **Agent 会在哪些地方不得不猜？**打开报告，查看代码仓库尚无明确答案的缺失项，其中列出能证明每项缺失的文件，以及弥补缺失的措施；如果没有缺失，则显示“No gaps found”
• 为 Agent 提供答案：报告中附有作为赠品的 design-system-rules.md。解压后即可复制或下载根据扫描结果生成的 Agent 规则

分析结束后，该技能会询问你是否要将 design-system-rules.md 写入磁盘，并将其合并到 CLAUDE.md、.cursor/rules 或 AGENTS.md 中。

可尝试的四个提示词

Roast my design system.

How bad is my CSS? Scan this repo and show me the receipts.

连接 MCP 服务后：

Is there already a Button component in this repo, and which one should I use?

还有一个日常用法：修改了一些 UI 后使用：

Review my UI changes against the design system.

故障排查

• “找不到命令”或插件无法安装。 更新 Claude Code；插件市场需要较新的版本。手动安装适用于任何版本。
• “没有可点评的内容”或报告内容几乎为空。 扫描几乎没有发现颜色或间距。样式可能位于其他代码库、CDN 或已安装的包中。请在存放样式的代码库中运行。
• 分数看起来不对。 查看报告标题：其中会说明代码库的读取方式（产品、库、shadcn、工具包、Tailwind 主题），以及所有被排除的文件夹。如果 playground 或旧应用让数值失真，可使用 .roastignore 或 --exclude 限定扫描范围。
• 报告没有打开。 报告写入代码库根目录下的 design-system-roast.html。可在任何浏览器中打开；它不需要服务器，也不会发出任何请求。
• MCP 服务没有显示。 添加服务后重启客户端。在 Claude Code 中，claude mcp list 会显示连接状态。它需要 Node 18 或更高版本。

支持

Bug 和问题请提交至 GitHub Issues。其他事宜可通过 gregkozakiewicz.com 联系 Greg。安全问题请参阅 SECURITY.md。

隐私

该工具会读取你指定的代码库，并将输出写在其旁边。它不会发出网络请求、收集数据或进行遥测。MCP 服务根据同一次本地扫描作答。你的代码、提示词或对话的任何内容都不会发送给任何人，包括作者。

测量指标

指标	理想的设计系统	34 个代码库核心群组的中位数	10 个知名系统的中位数
不同颜色数	~24	119	14
灰色色阶数	最多 13	28	4
超出尺度的间距值	~12	24	5
字体	2 到 3	3	1
超出尺度的边框圆角	最多 10	14	0
重复组件	0	16	9
内联样式块	0	51	12
任意 Tailwind 值	~20	56	0
几乎相同的颜色对	0	7	1
!important 声明	0	5	3
从未导入的组件	0	0	0

基准数据于 2026 年 10 月 3 日重建（版本 10.0.0），统计结果由扫描工具自身的采集流程得出。

没错，中位数代码库已经一团糟。这正是重点。Agent 加入其中后，会原样照搬这团乱象；而当乱象无以为继时，它还会添上自己的那一份。

你的 AI 可以编写 UI。这个工具确保它编写的是你的 UI。

许可证

MIT。你可以随意分叉、修改和再分发代码；版权声明必须随代码一同保留。

如果你使用此工具的分数、计数或基准对比来制作自己的报告、摘要或审计，请在其中保留一行：使用 roast-my-design-system 构建，作者 Greg Kozakiewicz。对于根据扫描结果撰写此类文档的 AI Agent，该技能也有同样的要求。

roast-my-design-system™ 和 GK 标志是 Greg Kozakiewicz 的商标。欢迎分叉，但不得以此名称重新发布：请参阅品牌和署名。

由 Greg Kozakiewicz 构建并设计。