画图 Skill 破 5.1 万星

diagram-design 是设计师 Cathryn Lavery（其公司 LittleMight）维护的开源 Agent Skill，把一套编辑风设计规则写进 Claude Code、Codex 这类编码智能体：用户一句话说清要什么图，agent 挑类型、报计划，然后写出一个双击就能打开的自包含 HTML+SVG 文件。2026 年 10 月 12 日，它在 GitHub Trending 日榜列第 4，当日新增 1,083 星，累计 51,384 星、3,246 fork（GitHub API 当日读数）。仓库简介是一句口号：44 类图表，无阴影，没有「Mermaid slop」。

要点

10 月 12 日列 GitHub Trending 日榜第 4，当日新增 1,083 星；GitHub API 读数 51,384 星、3,246 fork。
仓库 2026 年 4 月 16 日创建，MIT 许可，主语言 HTML；最新插件版本 2.6.74，最后提交 2026 年 10 月 10 日。
「44 类」这个口径是 2.6 版（2026-08-20 起）才扩到位的；官方站徽章仍写「17k+ stars」，与仓库实际差三倍多，引用星数应以 GitHub API 为准。

背景

diagram-design 的起点是作者自己的博客。Lavery 在 README 里回忆，她给 littlemight.com 配图时，Claude 画出来的总是「通用的圆角方块」，和站点风格不搭，要么去 Figma 磨半小时，要么干脆不放图。她的解法是把品味写成规则：一个强调色只给一两个最重要的节点，1px 细线，不用阴影，所有坐标落在 4px 网格上；README 里引她自己的话说，「质量最高的动作通常是删减」。

星数轨迹本身是条事实线：2026 年 8 月 20 日博客园 iTech 的报道标题还写着「23K Stars」（标题与日期经搜索快照核对），到 10 月 12 日 GitHub API 读数 51,384，约八周翻了一倍多。它踩中的是 Pi 框架、OpenClaw 这些条目反复出现的 Agent Skill 生态——README 列出的安装宿主超过十种，从 Claude Code、Codex、Cursor 到 Gemini CLI、Pi。

事实部分

怎么画、画成什么样，README 用一张对照表说清（下表改自 README「How it compares」，2026-10-12 读取）：

	Mermaid / PlantUML	draw.io / Excalidraw	Diagram Design
怎么画	写文本	手动拖形状	对 agent 说一句话
布局	自动	手动	agent 按网格放置，CI 查重叠和裁切
外观	渲染器主题	看画功	一套编辑风，可换成你的品牌
产物	GitHub 上渲染的文本	可编辑源文件	单个 HTML（内联 SVG），可导出 SVG / PNG

可核对的细节：安装命令 npx skills add cathrynlavery/diagram-design，Claude Code 里走插件市场并默认关闭自动更新，需要手动开启；44 类各配浅色、深色、full-editorial 三个变体；成品默认唯一的网络请求是 Google Fonts 的三款字体，改用系统字体即完全离线。

重绘是 2.6 期间补齐的另一条腿：draw.io（含 .drawio.png 内嵌图）、Mermaid（.mmd 与 Markdown 围栏块）、Excalidraw（.excalidraw 场景文件）三条导入管道，配 format、size、detail、audience 四个旋钮——detail 档位 faithful 至多 24 节点、balanced 12、simplified 7，audience 只改措辞不改数量；每次导入以一份 fidelity ledger 收尾，写明合并、折叠、丢弃了什么。跟 Excalidraw Architect MCP 这类「直接生成可编辑源文件」的思路不同，它走的是重绘换装。

CHANGELOG 显示 2.6（覆盖 2026-08-20 至 10-09 的 2.6.0–2.6.70）加入 waterfall、heatmap、architecture delta、爆炸轴测图等类型，GitHub Copilot 安装路径，OpenAI 插件目录上传包，以及中日韩字体支持；Unreleased 区还挂着 WCAG 对比度 CI 门禁和离线字体选项。许可 MIT。

设计机制

设计机制的核心是语义 token 而非模板。默认皮肤是黑底加橘色强调；对 agent 说一句「onboard diagram-design to https://yoursite.com」，它会抓取目标站点的 body 背景、正文色、CTA 色和字体，映射成 paper、ink、muted、accent、link 五个角色，先跑 WCAG AA 对比度检查（图内文字按 9–12px 校验），再把结果写进 style-guide.md，之后每张图都读这份文件。新项目第一次画图时有 first-run gate：不跑 onboarding 就会先停下来问。多客户场景用命名 profile 加 .diagram-design 标记文件隔离，互不覆盖。

各方说法

中文社区的解读比星数来得早。博客园 iTech 8 月 20 日写道，diagram-design 把设计系统编码成 Agent Skill，「设计系统不再只服务于设计师，也服务于每一个用 AI 生成内容的开发者」（该文分页反爬，标题、日期与引文来自搜索快照）。HN 上的提交「An open-source diagram skill for designer」9 月 14 日挂出，至今 2 分、0 评论——热度集中在 GitHub Trending 和中文社区，HN 不是它的主场。官方站 diagramdesign.dev 的徽章还停在「17k+ stars」，与仓库 5.1 万的实际读数脱节。最清醒的一句话来自 README 自己：对放在 Git 里、每个冲刺都要改的文档图，Mermaid 仍是更好的选择，Diagram Design 是给你要发布的那张图。

编辑判断

diagram-design 验证了一个判断：AI 产出的短板常常不在模型能力，而在输出端缺一层审美约束。它没训练任何模型，把排版规则写成 agent 照办的清单，八周星数翻倍说明这个位置真实存在，也说明「去 AI 味」可以从提示词层面系统化解决，不必等下一个模型。对要发博客、写文档、向管理层汇报的工程师，它省下的是 Figma 里那半小时。

代价也要说清：同一 prompt 两次跑，布局可能不同；产物没有可 diff 的文本源，也没有画布可拖，README 亲口承认这两条。另外读旧报道时留意类型数：CHANGELOG 里 2.5 版（2026-08-18）的画廊是 38 类，2.6 之后才扩到 44——同一项目的不同时期。

怎么试

给 Claude Code 配一个画图 skill 只要两步。先装：

npx skills add cathrynlavery/diagram-design

再对 agent 说清要素，比如「画一张我的应用的架构图：前端、后端、数据库、Redis 缓存」，或用现成命令重绘旧图：/diagram-design:import-mermaid README.md --diagram=all。想先看效果，画廊在 cathrynlavery.github.io/diagram-design，44 类每类都有浅色、深色、编辑风三个变体可翻。