让AI图表告别模板感！diagram-design让Claude画出设计师不嫌弃的编辑级图

每次让 Claude 画图，你是不是也受够了那个「圆角蓝框 + 白底」的 AI 模板感？画出来的东西放到自己的技术博客或产品文档里，怎么看怎么违和。

diagram-design 就是来解决这个问题的——一个让 AI 图表「去 AI 味」的 Claude Code 技能。

它能做什么

作者 Cathryn Lavery 在 littlemight.com 写技术博客，每次需要架构图、流程图的时候，Claude 给出来的都是那种「一看就是 AI 画的」通用模板。她要么花半小时在 Figma 里改，要么就干脆不画了。

后来她干脆自己写了一个 Skill：现在支持 38 种图表类型，架构图、流程图、时序图、ER 图、甘特图、四象限、旭日图……几乎覆盖了技术文档里会用到的所有图。

最关键的是，输出不是 Mermaid 那种丑东西，而是自包含的 HTML + SVG，可以直接贴进任何文档，零依赖、零构建，直接浏览器打开就能用。

品牌识别是亮点

这个 Skill 最让我惊喜的功能是 60 秒品牌识别。

你跟它说：onboard diagram-design to https://yoursite.com

它会自动抓取你的网站，提取主色、辅色、字体系列，然后把这些语义映射成图表的设计 token：背景色、标题色、强调色、节点字体……之后生成的每一张图都会自动用你的品牌配色，不再是那个刺眼的橙色默认皮肤。

而且会自动跑 WCAG AA 对比度检查——如果你的品牌色放在小字号上对比度不够，它会提示你调整。

安装和使用

支持 Claude Code、Codex 和 Pi：

Claude Code：

/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design

Codex：

npx skills add https://github.com/cathrynlavery/diagram-design --skill diagram-design

装完之后直接自然语言让它画就行：

“Make me an architecture diagram of my app: frontend, backend, database, Redis cache.”

Claude 会自动选最合适的图类型，生成 HTML 文件，打开浏览器预览。

一个很实在的设计哲学

作者在 README 里写了几个原则，我很喜欢：

• 「最高质量的操作通常是删除」——如果一段文字已经能说清，就不要强行画图
• 强调色只留给最需要被注意的一两个元素——不是每个节点都标红
• 目标信息密度 4/10——留白很重要，不要塞太满

MIT 协议，可以商用，可以修改。

GitHub： https://github.com/cathrynlavery/diagram-design

GitHub: https://github.com/cathrynlavery/diagram-design