夜雨聆风别再让 AI 画"又丑又通用"的示意图了：Claude Code 神级技能 diagram-design 测评
最近在 GitHub 上，一个叫 diagram-design 的项目悄悄火了起来——短短几天内星标数从几千冲到 1.6 万+，Fork 近千次。它解决的问题看似很小，却是几乎每个用 AI 写文档、做技术分享、写博客的人都踩过的坑：用 AI 画的图，永远长得像个"AI 画的图"。
今天就来聊聊这个项目到底是什么、怎么用，值不值得装。
一、解决了什么问题
如果你经常让 Claude、ChatGPT 之类的工具帮你画架构图、流程图、时间线，大概率遇到过这些情况：
• 千篇一律的圆角方框 + 阴影：不管你的产品调性是极简、复古还是赛博朋克，AI 给你的永远是那种"教程配图既视感"的通用风格； • 配色和你的品牌毫无关系：网站是黑金极简风，图却是马卡龙色系； • 要么用 Figma 手搓半小时，要么干脆放弃配图：项目作者 Cathryn Lavery（同时也是 BestSelf.co 的创始人）在项目说明里坦言，自己写博客时经常因为"懒得调图"而直接跳过配图这一步； • Mermaid 类工具虽然快，但样式呆板，很难体现"编辑级"的排版质感，作者称之为 "Mermaid-slop"（Mermaid 糊弄图）。
一句话总结：AI 能帮你想清楚逻辑，却画不出一张"这图是我们家的"的图。
二、它是什么
diagram-design 是一个专为 Claude Code（也兼容 Codex、Pi 等支持 Agent Skills 协议的工具）打造的技能包（Skill），核心卖点可以浓缩成一句话：
27 种编辑级示意图类型，自包含的 HTML + SVG，60 秒内自动适配你的品牌视觉。
具体拆开看，它有这么几个特点：
1. 图的类型覆盖面很广
从架构图、流程图、时序图、状态机、ER 图，到组织架构图、甘特图、雷达图、漏斗图、飞轮循环图（Loop）……总共 27 种类型，基本涵盖了技术文档和商业汇报里能用到的绝大多数图表场景。每种图都提供 浅色 / 深色 / 完整编辑版 三个变体，直接用浏览器打开就能看，不需要任何构建步骤。
2. 自动读取你的网站，提取品牌视觉
这是整个项目最讨巧的设计。你只需要对 Claude 说一句：
"把 diagram-design 的风格对齐到 https://yoursite.com"
Claude 就会：
1. 抓取你网站首页； 2. 提取主色调和字体栈； 3. 把提取到的颜色/字体映射到语义化的角色（背景色 paper、文字色ink、强调色accent等）；4. 给你看一份改动预览； 5. 你确认后，写入配置文件 style-guide.md。
之后你再让 Claude 画任何图，用的都是你自己的品牌配色和字体，而不是默认的橙黑配色。项目还内置了 WCAG AA 对比度自动检测——如果你网站的颜色在小字号下可读性不达标，它会主动帮你调整并解释原因。
3. 有一套很克制的设计哲学
项目 README 里有句话很打动人：
图里最高级的操作，往往是"删除"。每一个节点都要配得上出现在图里，强调色只留给读者最先该看到的 1-2 个重点。
具体到规则上：全图只用一个强调色、最多 1-2 个视觉焦点、三种字体分工明确（衬线字体做标题、无衬线做节点名、等宽字体做技术性小字）、所有坐标和间距必须是 4 的倍数（这条被作者称为"防止图看起来像 AI 生成的"关键细节）。
4. 渐进式加载，不占用上下文
项目内置了 34 个参考文件，但 Claude 并不会一次性全部读取——只有当你明确要画某一种图时，才会加载对应的说明文件（比如画流程图只加载 type-flowchart.md）。这样即使技能库很大，也不会拖慢 Claude 的响应速度。
三、怎么用
安装
最简单的方式是作为 Claude Code 插件安装：
/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design如果你想自己修改样式配置（比如手动调色），推荐用克隆 + 软链的方式，这样改动不会被后续插件更新覆盖：
git clone git@github.com:cathrynlavery/diagram-design.git ~/code/diagram-design
ln -s ~/code/diagram-design/skills/diagram-design ~/.claude/skills/diagram-design重启 Claude Code，技能会自动注册，之后你只要开口要图，它就会自动激活。
第一次使用：品牌对齐
第一次在新项目里用它画图时，Claude 会主动停下来问你：
"这是这个项目里的第一张图，样式还是默认配置，要不要先做品牌对齐？"
你可以选择：从网站 URL 提取、从已安装的技能中提取、从本地设计规范文件夹提取、手动粘贴色值，或者直接用默认配色开始。
日常画图
装好之后，直接用自然语言提需求就行，比如：
• "帮我画一个我的应用架构图：前端、后端、数据库、Redis 缓存" • "我要一个按影响力/工作量两个维度分类 Q2 项目的四象限图" • "画一个带 401 刷新 token 的 bearer 调用时序图"
Claude 会自动判断该用哪种图型、生成对应的 HTML 文件并保存下来，全程不需要你手动挑模板。当然你也可以直接从模板起步：
cp assets/template.html my-diagram.html # 极简浅色版
cp assets/template-full.html my-diagram.html # 完整编辑版，带摘要卡片导出成图片
图默认是自包含的 HTML 文件，如果你要放进 Figma、PPT 或者社交媒体配图，可以一键导出成 SVG/PNG：
/diagram-design:export path/to/diagram.html
/diagram-design:export path/to/diagram.html --svg-only
/diagram-design:export path/to/diagram.html --png-only --scale=3也可以直接用大白话说"把这个图导出成 SVG 和 PNG"，Claude 会自动理解并执行。
什么时候不该用它
项目作者也很清醒地列出了不适用场景：发推特用的 Unicode 简易图、纯粹的清单/对比表格、只有一个节点的"伪示意图"——这些场景直接写文字或者列表就够了，硬要画图反而是过度设计。作者给出的判断标准是："读者是否能从这张图里学到比一段写得好的文字更多的信息？如果不能，就别画。"
四、总结
diagram-design 本质上解决的是一个"不起眼但天天遇到"的痛点：AI 生图效率很高，审美却很平庸。它没有走"再造一个 Figma"的重路线，而是选择了一条很轻巧的路径——把设计规范系统化成 Claude 能读懂的规则文件，再通过读取你的网站自动完成品牌适配，最终让每一张图都"长得像自己家的东西"，而不是随手一份能在任何网站上找到的通用配图。
对于经常需要写技术文档、做产品分享、维护博客或知识库的人来说，这类工具的价值不在于"能不能画图"（AI 早就能画了），而在于能不能画出你愿意直接发出去、不用二次修图的图。如果你也正被"AI 画图千篇一律"这件小事反复困扰，这个项目值得花几分钟装上试试。
项目地址：github.com/cathrynlavery/diagram-design
本文基于项目公开 README 及技能说明文档整理，具体功能以项目最新版本为准。