Next AI Draw.io
draw.io diagrams your AI agent draws on a live browser canvas that you can also edit by hand
作者提供的说明(英文原文)
Audit your Design System and serve your Agent the rules that keep AI-written UI on-system.
这三项永远不会合并成一个分数:意见、测量和人气是不同的东西。
我们还没有为它写通俗的介绍。下面是我们从注册中心读取到的事实。
选择你使用的 AI 应用,然后复制设置。
你需要
你用的是哪个应用?
在上方选择你的应用。我们会记住它,下次按钮会显示“安装到 …”。
打开 Claude Desktop → Settings → Developer → Edit Config,把下面的内容粘贴到 claude_desktop_config.json
{
"mcpServers": {
"roast-my-design-system": {
"command": "npx",
"args": [
"-y",
"roast-my-design-system",
"--mcp"
]
}
}
}在终端中运行这条命令
claude mcp add roast-my-design-system -- npx -y roast-my-design-system --mcp粘贴到项目中的 .cursor/mcp.json,或 ~/.cursor/mcp.json
{
"mcpServers": {
"roast-my-design-system": {
"command": "npx",
"args": [
"-y",
"roast-my-design-system",
"--mcp"
]
}
}
}浏览器会先询问是否打开应用,然后应用会显示设置并请你确认。密钥的值会留空,由你自己填写。
粘贴到项目中的 .vscode/mcp.json
{
"servers": {
"roast-my-design-system": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"roast-my-design-system",
"--mcp"
]
}
}
}浏览器会先询问是否打开应用,然后应用会显示设置并请你确认。密钥的值会留空,由你自己填写。
这个服务器在你的电脑上运行,而 ChatGPT 只能连接互联网上的服务器。请选择其他应用。
你的选择通过 Cookie 保存在这台设备上,无需账户。
这些设置是根据作者在注册中心的条目生成的。如果 README 的写法不同,请以 README 为准。
依据这个服务器的连接方式和各应用自己的文档,检查于 2026年11月10日。
在你的电脑上运行,适用于
ClaudeGooseLM StudioMsty StudioCherry StudioCursorVS Code + GitHub CopilotVisual StudioWindsurf (Devin Desktop)ZedKiroClineContinueJetBrains AI AssistantClaude CodeCodex CLIGemini CLIOpenCodenodecodeWarpLibreChatRaycast
它在你的电脑上运行;安装后,工具列表会显示在你的 AI 应用中。
我们检查的是任何人都能看到的信息;我们没有阅读代码。不适用的检查项不计入总数。 · 检查于 2026年11月10日
注册名称已通过 GitHub 账户 gregkozakiewicz 验证,该账户拥有此仓库
代码最后更新于3天前
我们还没有从 GitHub 读取这个仓库
它在你的电脑上运行,没有互联网端点
在你的电脑上运行,改用本地设置
它在你的电脑上运行;我们只能读取互联网端点的工具列表
与注册中心里这个分类中所有活跃的服务器比较。只有当发布者拥有该仓库时,星标数才计入。
它在 2 项适用的基础检查中通过了 2 项。我们没有阅读代码。在添加密钥或令牌之前,请先看看这个服务器要求哪些权限,并使用只具备所需权限的密钥。
注册中心没有列出必需的密钥,不过有些服务器会在首次使用时要求你登录。
它在你的电脑上运行。你的 AI 应用会在需要时启动它,数据不会经过作者的服务器(除非它自己调用在线服务)。
GitHub 仓库最后更新于3天前,最新版本(10.2.4)于3天前进入注册中心。
支持 MCP 的应用,例如 Claude Desktop、Claude Code、Cursor 和 VS Code。你的电脑上还需要有 Node.js。
同一分类中有:Next AI Draw.io, Pascal 3D Editor, screenpipe
同一分类中其他作者的服务器,按星标数排序。
如何看卡片:↓ 每周下载量i★ GitHub 星标i三大支柱:评价 · 检查 · 使用情况i更新 = 最新版本发布到注册中心的时间i
draw.io diagrams your AI agent draws on a live browser canvas that you can also edit by hand
Create, inspect, validate, and save editable 3D building scenes with Pascal's MCP server.
Search your local screen recordings, audio transcripts, and computer activity from screenpipe.
按原文从作者的仓库复制。PopNx MCP 没有审查或背书其内容。HTML、图片和脚本已被移除。链接会离开本站。
Your AI can write the UI. This makes sure it writes *your* UI.
npx roast-my-design-system@latest
Run it at the root of a UI repo. One second later, a report opens. No account. No network. No telemetry. Nothing in your repo changes.
Website, with the live example reports: www.roastds.com.
Version history is in CHANGELOG.md.
We tested this on 10 real open-source products, in 355 agent sessions, with and without this tool.
Findings each session added, counted by this tool's own rules:
| Task | Model | When | Without roast | Roast MCP and rules installed | Roast plugin with its edit hook |
|---|---|---|---|---|---|
| A new chart and a new component, 4 products, 3 runs each | Sonnet 5 | Oct 2026, roast 10.1 | 21 in 24 runs | not run | 7 in 24 runs |
| A new chart and a new component, 4 products, 3 runs each | Haiku 4.5 | Oct 2026, roast 10.1 | 72 in 24 runs | not run | 1 in 24 runs |
| Add a panel, build a dashboard, tighten a list (80 sessions) | Sonnet 5 | Sept 2026 | 7 | 9 | not run |
| A Christmas theme, 10 products | Sonnet 5 | Sept 2026 | 28 | 2 | not run |
| A new chart, 4 products, 5 runs each | Sonnet 5 | Sept 2026 | 10 in 20 runs | not run | 0 in 20 runs |
| A new chart, 4 products | Haiku 4.5 | Sept 2026 | 25 | 39 | 0 in 14 of 15 runs |
| Chart, status colour, empty state, new component | Haiku 4.5 | Sept 2026 | 42 in 16 runs | 49 in 16 runs | 3 in 51 runs |
Routine work stayed on-system with or without the tool. Work that needed something new did not.
An agent does not always call a tool when it should. In October, Sonnet called the MCP tools in 7 of 24 sessions and Haiku in 2 of 24. The edit hook runs without being asked. That is the column with the lowest numbers.
Where did the agent invent? Where the repo had nothing to copy. Dub has no chart palette. Its own charts hardcode 17 colours. Asked for a chart, Haiku hardcoded 9 more. In October, 5 of the 7 findings Sonnet left with the plugin on were chart colours on Dub. The agent kept them and wrote a comment saying the repo has no chart palette.
So the mess an agent adds is a map of the gaps in your system.
This tool draws the map.
Roast the repo to find its real design system, the mess in it, and the gaps.
Teach the agent, through generated rules and a local MCP server.
Guard every edit, so the agent does not have to remember to ask.
ROAST what is in the repo, and what is missing ↓ TEACH rules in the agent files, answers over MCP ↓ GUARD every edit checked, the PR gated
The first thing the report says: the places where the repo has no answer yet, or "No gaps found".
One gap is known for certain today, because the runs found it: charts hardcoding colours in a repo with no chart palette. 43 of 126 public repos look like that. A gap joins the list when it has been measured.
The mess the agent will copy, ranked by what fixing it is worth.
Fix, rescan, press the next button.
0 to 100. The same number every run.
Measured against three yardsticks: the ideal norms of a design system, the median of 34 product repos at the core of a 119-repo benchmark, and 10 reputable systems (Primer, Polaris, Carbon, shadcn/ui and others).
Monorepos get a score per package. packages/ui at 80 stops hiding apps/web at 40.
And 8 more kinds, all in What it measures. One HTML file. Open it, Slack it, email it.
The colour usage bar shows where the repo's colour comes from: of every 100 colour uses, how many read a theme colour by name, how many use Tailwind's palette, and how many are strays written by hand. It follows CSS variables, Tailwind themes, Sass and Less variables and JavaScript theme objects to do the counting.
The header names what the repo is built on: shadcn/ui, a Tailwind theme, MUI, Mantine, Chakra or Ant Design, and both kits when a repo uses two.
Generated from your repo, into design-system-rules.md:
canonical components the file of colour, spacing and type values known duplicates to avoid spacing steps typefaces the kit's own vocabulary
--apply writes them into every agent file you have: Claude, Cursor, GitHub Copilot, Windsurf. Every scan also checks the rules you already have for stale references.
Every number comes from a deterministic read of your files. Claude writes the explanation, labelled as written by AI and kept apart from the numbers.
Claude Code, headless, on 10 public products pinned to one commit each: cal.com, Dub, Metabase, Plausible, SigNoz, trigger.dev and four more. 259 sessions in September 2026 and 96 in October 2026 on roast 10.1, with Sonnet 5 and Haiku 4.5. The October sessions repeat the chart and new-component tasks on Plausible, SigNoz, trigger.dev and Dub at the same commits. Every changed file was judged by this tool's rules at the end of the session and at the pinned commit. A finding counts only if the session added it.
Nothing was rendered. Zero findings means the code follows these rules. It does not mean the design was reviewed. Method, tables and limits are in the research write-up, which will be published separately.
Eleven reports, hosted exactly as the tool writes them. Every number deterministic, every path real.
The full report for vercel/ai-chatbot. The verdict answers what the agent will learn here, the gap section comes first, then "What the repo teaches the agent", Claude's read of the scan:
The same report in light mode (one file, built-in toggle):
tests/, one JSON file each.tools/benchmark/.scoreHarvest(harvest) returns the score and metrics as plain data. The report and a CI check get the same numbers.The long version, with scan scoping and what the plugin runs on your machine, is in docs/reference.md.
React, Next.js, Remix, Vite Stencil, Lit, custom elements
Tailwind, sha