我写东西的时候经常遇到一个场景文章写到一半想插一张架构图或者流程图让读者一眼看明白我在说什么。于是我去问 Claude它吐出来的东西倒也不能说错但就是丑。那种圆角矩形套圆角矩形的通用模板灰扑扑的配色跟我的网站放在一起像是从别处随便扒来的。读者一看就知道这是 AI 生成的跟文章主体没什么关系。要么就打开 Figma拖拽半小时调颜色、对齐、改字号最后弄出一张还过得去的图。时间花了不少文章的气也泄了。有时候干脆就跳过不画了。但事后想想那张图其实挺重要的它能让一个复杂的概念变得直观能让读者在文字的间隙里喘口气。这个叫 diagram-design 的项目解决的正是这件事。它是一个给 Claude Code 用的技能能生成 13 种图表——架构图、流程图、时序图、状态机、数据模型、时间线、泳道图、四象限、嵌套图、树形图、层叠图、韦恩图、金字塔。每种都有三个版本浅色极简、深色极简、完整编辑风。打开就是一张 HTML 文件直接在浏览器里看不用装东西不用跑命令没有外部依赖。你让它画一个架构图它生成一个 HTML 文件你双击打开截图插进文章完事。真正有意思的地方在于它的品牌适配。你给它一个网址它会抓取你网站的主色、辅色、强调色、字体然后把这些值写进一个配置文件。此后生成的每一张图都用你的颜色和字体。你的网站背景色变成图表的底色你的 CTA 按钮色变成图表里的焦点色。六十秒一套视觉语言就统一了。它还会自动做对比度检查如果某个颜色在图表尺寸下不达标它会建议调整值并解释原因。这套机制背后是一个设计系统。作者说“最高质量的操作通常是删除”。每个节点都要有存在的理由强调色只留给读者应该第一眼看的一两个元素。目标密度是 4/10——不是塞满而是留白。边框 1 像素没有阴影圆角最大 10 像素。所有坐标、宽度、间距都必须能被 4 整除。这套规矩让图表看起来不像 AI 生成的倒像是一个设计师手工调过的。字体也有讲究。标题和斜体注释用衬线体节点名称用无衬线技术标签用等宽字体。等宽字体只出现在该出现的地方——端口号、URL、字段类型——而不是一股脑地给所有东西套上开发者风格。我总怀疑那些动不动就生成一堆花里胡哨图表的工具其实是在用信息密度掩盖设计能力的不足。这个项目反其道而行克制、干净、有呼吸感。它不试图用渐变和阴影告诉你我很专业而是用精确的留白和一致的视觉语言让你一眼就觉得这图属于这里。当然它也有自己的边界。作者明确说了如果你只是想在推文里放一个简单的 ASCII 图或者只是要一个列表、一个对比表格那就不需要这个工具。画图之前先问一句这张图能告诉读者的会比一段写得好的文字更多吗不会就别画。这种克制的态度让我更愿意信任它。知道什么不该做比什么都想插一手要靠谱得多。经常写东西又不想在图表上耗时间的人可以试试。反正免费不好用删了便是。https://github.com/cathrynlavery/diagram-design