AI 画的图总带“AI 味“？2.1 万 Star 的开源 Skill，让图直接能上片-平芜编程栈

本文介绍一个给 Claude Code / Codex 等 AI 编程工具装的开源 Skill：diagram-design。装上之后，AI 画出来的不再是"通用圆角框"，而是品牌一致、编辑级、能直接导出的图。全文含安装命令、使用示例和选型对比，读完 5 分钟，装完 1 分钟。

文章目录
@[toc]
一、AI 画图为什么总带"AI 味"
二、diagram-design 是什么
三、五个核心能力（重点）
3.1 27 种图型，每种 3 个变体
3.2 60 秒"品牌 onboarding"：图自动长成你网站的样子
3.3 把已有的 draw.io / Mermaid 图重画一遍
3.4 语义模式 + 可选动效
3.5 导出，外加 3 个"彩蛋级"原语
四、安装与上手（3 步）
Step 1：安装
Step 2：（可选）绑定你的品牌
Step 3：直接说人话
五、设计哲学：高质量靠"删"
六、和 Mermaid / draw.io / Excalidraw 怎么选
七、总结

一、AI 画图为什么总带"AI 味"

做技术内容、做架构设计、做方案汇报的人，估计都干过这事：让 AI 画个架构图、流程图，吐回来的基本是"通用圆角框"——字体随机、配色随机、间距随机，往 PPT 里一贴、往官网上一放，一眼 AI 味。

然后你只有两条路：

花 30 分钟在 Figma 里硬调，调到怀疑人生；
或者算了，不画了，用文字描述。

今天介绍的diagram-design就是来终结这个循环的。先甩数据：

项目	数据
GitHub	cathrynlavery/diagram-design
Star	21,000+（2026-04-16 创建，4 个月）
协议	MIT
当前版本	2.3.1（作者持续在提交）

一句话：它是装给 Claude Code、Codex、Pi 这类 AI 编程工具的"图表设计系统"，内置 27 种编辑级图型，读一下你的网站，60 秒匹配你的品牌色，输出自包含文件，浏览器直接打开。

二、diagram-design 是什么

一句话定义：它是一个 agent skill（技能插件），不是独立软件，也不是网页工具。它装进你的 AI 编程环境里，AI 画图的"审美"就换了。

几个关键点：

内置 27 种"编辑级"图表类型：架构图、流程图、时序图、状态机、ER 图、时间线、泳道图、四象限、树状图、组织架构图、韦恩图、金字塔/漏斗、2×2 矩阵、雷达图、甘特图、柱状/折线/散点图……技术场景要画的图基本都覆盖；
输出自包含 HTML + SVG：无构建步骤、无外部依赖、没有 JavaScript，浏览器直接打开就能看；
作者是 Cathryn Lavery（BestSelf.co 创始人，在 littlemight.com 写 AI 和设计），她的出发点特别"产品人"：自己每次要画架构草图，问 AI 拿回来的都是通用圆角框，跟网站风格完全不搭，干脆自己写了这个 skill。

README 里有两句话，把项目态度说得很直白：

“Editorial diagrams your designer won’t hate.” —— 你的设计师不会讨厌的编辑级图表。

No Figma. No generic rounded boxes. No 30-minute color-picking sessions.
不用 Figma，没有通用圆角框，没有 30 分钟配色环节。

先放一张它真实的输出（作者个人网站的内容架构，也是 README 头图）：

↑ 注意看：单强调色、发丝线边框、4 倍数网格对齐——这就是它说的"编辑级"。

三、五个核心能力（重点）

3.1 27 种图型，每种 3 个变体

每种图型都带 3 个静态变体：

变体	用途
minimal light	浅色文档、技术博客
minimal dark	深色站点、终端风
full editorial	官网、产品发布、PPT

全部静态、无脚本、无外部图片依赖。抽两张仓库里的真实输出看看水平：

↑ 流程图：决策逻辑

↑ 时序图：随时间推移的消息

3.2 60 秒"品牌 onboarding"：图自动长成你网站的样子

这是我认为最惊艳的功能。把你的网站 URL 丢给它，它自动做四件事：

1. 抓你的首页 2. 提取主色板 + 字体栈 3. 映射到 5 个语义角色：paper(背景) / ink(正文) / muted(次级文字) / accent(强调) / link(链接) 4. 给你看一份 diff，确认后写进样式指南

之后每画一张新图自动用你的品牌色和字体：网站背景色变成图的纸色，CTA 按钮色变成焦点强调色，正文字体变成节点标签字体。

更狠的两个细节：

写入前自动做 WCAG AA 对比度检查。如果你的配色在图表 9~12px 小字号下看不清，它会主动给一个调整值并解释为什么——这个细节，很多正经设计工具都不做；
支持多客户 profile：一次 onboarding 存成命名 profile，以后每个客户项目里放个 marker 文件就自动套用对应品牌。做外包、服务多客户的，这是刚需。

3.3 把已有的 draw.io / Mermaid 图重画一遍

这可能是最实用的一块。手上已经有 draw.io 或 Mermaid 的图？直接指着源文件，它会"重画"——内容不变，换成这套设计系统。

输出前给你 4 个控制旋钮：

旋钮	选项	说明
format	html / svg / png	SVG 进 Figma，PNG 进 PPT，HTML 上网页
size	9 种预设	文档内嵌、16:9 幻灯片、A4 横版……字号会跟着放大，投屏用 16px 节点名而不是 12px
detail	faithful(≤24节点) / balanced(≤12) / simplified(≤7)	按固定梯度降级：先删装饰 → 再删重复 → 再并叶子 → 最后删基础设施
audience	engineer / mixed / executive	改的是措辞，不是数量

audience 这个旋钮举个例子：一个节点原来叫Auth Service / JWT · RS256 · :8443，给混合观众看变成Auth Service / token check，给高管看直接是Sign-in。

每次导入结束还会生成一份fidelity ledger（保真度台账）：哪些节点被合并了、哪些被丢掉了，白纸黑字列出来。

仓库里这张就是从一份.drawio文件重画出来的：

↑ 源文件是 draw.io 导出的.drawio，重画后风格直接对齐设计系统，节点内容不变。

3.4 语义模式 + 可选动效

2.3 版引入了"语义模式"：当你要表达的是行为（队列瓶颈、策略审计轨迹、信任边界、补偿性安全层……）时，先选语义模式，再挑最接近的视觉类型。好处是新行为不用新增类型，图型数量不会无限膨胀。

动效是可选的：none / reveal / step / loop 四种模式。默认静态无脚本；开了动效也走无障碍契约，prefers-reduced-motion的用户看到的是完整静态帧。

2.0 新加的 Loop 图型（带共享记忆中枢的飞轮）长这样，虚线是 write-back：

↑ Loop：飞轮 + 站点对，虚线是回写（write-back）

3.5 导出，外加 3 个"彩蛋级"原语

SVG 导出：提取图节点、注入 Google Fonts，浏览器、Figma、Illustrator 里都能独立渲染；
PNG 导出：Playwright 栅格化，默认 2 倍分辨率，一次性装一下就行；
3 个彩蛋原语：
- annotation：编辑风斜体批注 + 虚线贝塞尔引线，适合文章旁白；
- sketchy：SVG turbulence 滤镜一键"手绘风"（适合 essay，不适合技术文档）;
- icons：55 个单色 IT/云图标（server、database、Docker、K8s、AWS、Azure、Postgres……），全用currentColor，自动继承你的品牌色。

四、安装与上手（3 步）

Step 1：安装

Claude Code：

/plugin marketplaceaddcathrynlavery/diagram-design /plugininstalldiagram-design@diagram-design

⚠️ 注意：第三方 marketplace 默认关闭自动更新，需要去/plugin→ Marketplaces 手动打开 auto-update。

Codex：

codex plugin marketplaceaddcathrynlavery/diagram-design codex pluginadddiagram-design@diagram-design

Pi：

piinstallhttps://github.com/cathrynlavery/diagram-design

Step 2：（可选）绑定你的品牌

onboard diagram-design 到 https://yoursite.com

Step 3：直接说人话

装完不用学语法，自然语言就行：

“帮我画个架构图：前端、后端、数据库、Redis 缓存”
“画个四象限：Q2 项目按影响力 vs 工作量分布”
“把这份 drawio 重画一版给我做 deck 用”
“onboard diagram-design 到 https://yoursite.com”

一句话：从安装到第一张图，熟练的话不超过 1 分钟。

五、设计哲学：高质量靠"删"

这块值得单独说，也是整个项目的灵魂。作者把设计约束写成了硬规则：

全图只有一种强调色，焦点元素只有1~2 个——读者第一眼该看什么，就只强调什么；
1px 发丝线边框，无阴影，最大圆角 10px；
所有坐标、宽度、间距必须是 4 的倍数——“non-negotiable”（不可协商），这是图不显 AI 味的关键；
目标视觉密度：4/10；
三套字体各司其职：Instrument Serif（标题）、Geist Sans（节点名）、Geist Mono（端口、URL、字段类型）。

原话是：

“The highest-quality move is usually deletion. Every node earns its place.”
最好的操作通常是删减。每个节点都得有存在的理由。

更难得的是，README 里专门写了"什么时候不该用这个 skill"：

想在推特里随手丢个 unicode 小图 → 别用它；
列表、前后对比 → 直接用表格；
就一个框加一个标签的"图" → 直接写句话。

判断标准是：读者从这张图里，能不能比从一个写得好段落里学到更多？不能，就别画。

这种自我约束，在 AI 工具项目里挺少见的。

六、和 Mermaid / draw.io / Excalidraw 怎么选

维度	diagram-design	Mermaid	draw.io	Excalidraw
生成方式	AI 自然语言生成	写 DSL 代码生成	纯手绘	手绘风白板
风格	编辑级、品牌一致	固定默认样式，难改	取决于你自己	手绘风
品牌适配	60 秒 onboarding	需手写 theme	手动配	手动配
适合谁	要直接产出成品的	图当代码管理进 Git 的	复杂图、精细控制	头脑风暴、草图
学习成本	零（会说话就行）	学 DSL 语法	低但耗时	零