分享一个开源项目，叫 Diagram Design，专门解决一个很具体的问题：让 AI 画出来的图表好看。

做这个项目的人叫 Cathryn Lavery，她自己开公司、写博客，经常需要在文章里放架构图、流程图这些东西。但每次让 AI 画，出来的都是圆圆的方块加随意的配色，跟她网站的风格完全搭不上。要么花半小时在 Figma 里自己调，要么干脆不放图了。所以她就自己做了一个给 AI 编程工具用的技能包。

这个 Skill 现在支持 42 种图表，架构图、流程图、状态机、时间线、甘特图、桑基图都有，连立体的拆解图和平面图都能画。输出就是一个独立的 HTML 文件，双击就能在浏览器里打开，不需要额外装什么。

先说第一个亮点。它能自动匹配你的品牌风格。你给它一个网站地址，它就去读你网站的配色和字体，然后把这些颜色对应到图表的背景、文字、强调色上面，大概 60 秒就搞定。之后你再画任何图表，自动就是你网站的风格。

然后说第二个。它能把你手上已有的图重新画一遍。比如你之前在 draw.io 里画了一张架构图，或者用 Mermaid 写了一个流程图，直接丢给它，它就会用自己这套设计规范重新出一版。你还能选输出的详细程度，给工程师看就保留技术细节，给领导看就精简到只剩关键节点。每次转换完它还会列一个清单，告诉你哪些东西被合并了，哪些被去掉了。

再说设计上的讲究。整套图表只用一个强调色，每张图最多突出一两个重点。所有间距都是 4 的倍数，边框只有 1 像素，没有阴影。标题、节点名、技术标签分别用三种不同的字体，各管各的位置。这些规矩加在一起，画出来的东西干净、整齐，一看就跟普通 AI 吐出来的模板差了一个档次。

这个项目适配了 Claude Code、Codex、GitHub Copilot 等好几个 AI Agent 。

传送门：github.com/cathrynlavery/diagram-design

#科技先锋官##How I AI#