夜雨聆风写技术文档、产品提案或融资PPT时，最纠结的往往不是内容，而是配图。
你向AI描述想要的架构或流程，它几秒就吐出一张图表——可永远是那副面孔：圆角矩形、默认配色、拥挤的字体，放进自己的网站或文档里，就像穿了别人的衣服。
开Figma调吧，一调半小时，还未必会用它那个自动布局；放弃吧，纯文字又显得单薄。
于是很多人选择凑合用那张“AI模板图”，再默默祈祷读者别注意这些细节。
现在有了个开源方案，专门破除这种尴尬。
它不是另一个设计工具，而是给AI助手装的“图表技能包”
这款项目叫 Diagram Design，由 BestSelf.co 创始人 Cathryn Lavery 开发。它不是一个独立应用，而是一套技能包（Skill），直接植入你常用的AI编程助手——Claude Code、Codex 或 Pi。
装上之后，你只需用自然语言说“画一张系统架构图”或“给我一个影响-努力象限图”，它就会生成一张可直接在浏览器打开的 HTML 图表。
无需构建、无需安装依赖、更不用打开 Figma。
更重要的是，它生成的图，不再是千人一面的默认模板。它会主动读取你的官方网站，把配色和字体映射到每一张图表上，整个过程不到一分钟。
60秒“认领”你的品牌，从此每张图都长成你网站的样子
初次使用时，你只需说一句“把这个技能绑定到我的网站”，它便会自动抓取首页，分析背景色、主文字色、强调色、标题字体、正文字体、代码字体，并写入配置文件。
之后你每次画图，所有颜色和字体都来自你自己的品牌体系。
你的网站是深色背景？图表背景自动变深。 你的CTA按钮是亮橙色？图表里的焦点节点也变成同款橙色。 你的正文用 Inter 字体？节点标签也跟着用 Inter。
全自动，不需要手动选色，也不用纠结色值。
而且它内置了 WCAG AA 对比度检查，确保小字号（9–12px）下的可读性——如果发现不达标，它会主动提醒并建议调整。
27种图表类型，三种风格，覆盖日常所需
不管是架构图、流程图、状态机、ER图、时间线、泳道图、象限图、金字塔、雷达图、循环图，还是更专业的甘特图、散点图、数据流图、安全矩阵……它一共支持 27 种 常见类型。
每种图表都提供三种样式：浅色极简、深色极简、完整编辑版（带标题卡片和注释区域）。
生成的是自包含的 HTML+SVG，双击就能在浏览器里查看，无需任何服务器或编译步骤。
设计上遵循一套严格规则：一个强调色最多用于1–2个焦点元素；三个字体族（标题用衬线、节点名用无衬线、技术标签用等宽）；所有间距和坐标必须是4的倍数。
这些规则让图表看起来更像是出自设计师之手，而不是AI的随机组合。
最实用的功能：把旧图重绘成你想要的规格
如果你已经有一堆 draw.io 或 Mermaid 格式的老图表，不用重画。
直接告诉工具“把这份 draw.io 文件重绘成适合我PPT的样式”，它会自动解析源文件，然后按照你的需求重新生成。
这里有四个可调节的维度：
格式：HTML、SVG、PNG，分别适应网页、设计软件或幻灯片。 尺寸：文档内嵌、宽幅、16:9/4:3 幻灯片、社交媒体卡片、打印页面等，不同尺寸自动调整字号和画布。 细节密度：忠实还原（≤24节点）、平衡（≤12节点）、简化（≤7节点），按预设规则降级，保留核心关系，删除冗余装饰。 受众：工程师、混合、高管，措辞会自动调整——比如将“Auth Service / JWT / RS256 / :8443”简化为“登录验证”。
导入完成后，它会输出一份“变更清单”，明确告诉你哪些元素被合并、折叠或删除了，完全透明。
导出也方便：SVG给设计师，PNG放PPT
生成的图表默认是 HTML 文件，但你可以随时导出为 SVG 或 PNG。
SVG 会提取 <svg> 节点并嵌入字体，方便在 Figma、Illustrator 里继续编辑；PNG 则通过 Playwright 光栅化，默认 2 倍清晰度，直接放入 Keynote 或 Word。
导出命令很简单，也可以直接用自然语言说“把这张图导出为 PNG”。
设计哲学：少即是多，每张图都要“挣”到它的位置
项目文档里有一句话：“最高质量的操作通常是删除。每个节点都必须挣到它的位置。”
这意味着，它鼓励你只保留真正重要的信息，而不是堆砌所有细节。强调色只留给最需要被注意的一两个元素，整体信息密度控制在 4/10 左右。
如果一张图传递的信息还不如一段文字清晰，那就不该画图。
谁来用，什么时候用
写技术博客、产品文档、内部 Wiki 的工程师和产品经理——需要清晰、美观的示意图，又不想在设计上花太多时间。 做融资材料、项目汇报的创业者或咨询师——图表要专业、品牌统一，却无力单独雇设计师。 任何已有大量 draw.io/Mermaid 历史图表的人——一键重绘，适配不同场景。
至于那些只需一行文字就能说清的简单列表，或者推特上的 ASCII 图，则不必动用它。
安装和上手
支持三种主流 AI 编程环境：
Pi： pi install https://github.com/cathrynlavery/diagram-design，然后/reloadClaude 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
首次使用时，它会询问是否要绑定品牌——你可以让它自动抓取网站，也可以手动编辑配置文件，或直接使用默认的“白底黑字+亮橙”配色。默认配色已比多数 AI 生成图顺眼，但绑定品牌只需 60 秒，效果完全不一样。
作者与开源
项目由 Cathryn Lavery 开发，她同时也是《BestSelf》日记本的创始人，并在 littlemight.com 撰写关于 AI 与创业的博客。这个工具最初只是为了她自己写文章时不那么糟心，后来发现大家都有类似需求，便开源了出来。
项目已在 GitHub 上获得不少关注，欢迎尝试、点星，或参与贡献。
在线示例画廊（所有 27 种图表预览）：
cathrynlavery.github.io/diagram-design简单放几张大家看看
GitHub 仓库：
github.com/cathrynlavery/diagram-design
如果你也受够了“AI 模板图”，不妨花几分钟装一下，下次写文档时，它会给你省下不少时间和白眼。