我今天逛GitHub看见的，我觉得可用，也分享给大家。以下是正文：

我一直觉得AI画图有个很尴尬的问题。

内容可能是对的，但一眼看过去就是“AI味”。

几个圆角框、几根箭头，再配点蓝紫渐变。

Diagram Design就是专门治这个的。

它是一个给Codex、Claude Code这类Agent用的画图Skill。

现在已经有39种图表模板。

架构图、流程图、时序图、甘特图、桑基图、鱼骨图、用户旅程、数据库结构图这些都能做。

重点不是“能画”。

而是它对版式、字体、间距、颜色和信息密度都有一套设计规则，最后生成的是HTML、SVG，也可以导出PNG。

甚至可以把你原来的Mermaid、draw.io重新画一遍。

还有个我觉得很实用的功能：

把你的网站给它，它可以读取网站的主色、字体这些视觉元素，再让后面的图尽量保持同一套风格。

现在GitHub已经2.9万+ Star，MIT开源。

如果不会装，可以直接把这段发给Codex：

帮我安装Diagram Design：
https://github.com/cathrynlavery/diagram-design

先阅读README和官方安装说明，确认我当前的Codex版本支持Plugin Marketplace。

优先使用仓库提供的Codex官方安装方式，不要自己猜安装命令。

安装完成后重新启动会话，并生成一张简单的流程图确认Skill已经正常工作。

未经我确认，不要修改我现有的全局配置或品牌样式。

装好以后甚至不用研究复杂命令。

直接说：

“分析当前项目的结构，帮我画一张16:9架构图。重点突出核心模块和数据流，减少没必要的节点，使用Diagram Design生成，最后导出SVG和PNG。”

它会自己选择更合适的图表结构。

不过要说清楚，它不是Figma这种拖拽式画图软件。

它更像是给AI Agent装的一套“专业画图规范”。

如果你本来就经常让Codex或Claude Code帮你写方案、做技术文档、画架构图，这个挺值得装。

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

#howto入门codex #办公神器howto #howto实现一万种vibecoding #AI反常识howto #AI工具 #AI画图 #大模型 #ai关键词 #图片处理 #设计干货