Claude 画图丑？试试这个 42K 星的神级 Skill，5 天涨 1 万 star 的背后是什么
Claude 画图丑？试试这个 42K 星的神级 Skill，5 天涨 1 万 star 的背后是什么
我最近帮一个独立开发者看他的 AI 生成项目，PPT 里全是那种「四个圆角矩形 + 渐变背景」的图。他自己都承认：「发给投资人前还得手动去 Figma 改一遍。」
这不是个例。实际上，Claude Code 默认画出来的图，大概长这样：千篇一律的圆角盒子、毫无信息量的连线、用烂了的蓝绿渐变——圈内管这叫 Mermaid slop，就是那种一看就知道是 AI 堆出来的图。
直到我发现了 diagram-design。
这个 Skill 5 天涨了 1 万 star，目前累计 42,065 ⭐，GitHub Trending 长期霸榜。它解决的就是一个问题：让 Claude 画出的图，看起来像你的设计师亲手做的。
它牛在哪
diagram-design 最核心的理念是：Semantic Patterns（语义模式）而不是 Layout Templates（布局模板）。
普通工具给你一堆现成模板往里填内容。它不是——它先问：你要表达什么关系？是流程、架构、对比还是因果？然后根据语义匹配最适合的视觉类型。
目前支持的图类型包括但不限于：
- Sankey 图 — 流量、能量、预算分配
- Wardley Map — 技术演进路线
- Fishbone 图 — 根本原因分析
- Kanban — 任务看板
- User Journey — 用户旅程
- Deployment diagram — 部署拓扑
- UML Class / 数据库 Schema — 技术文档
总数已经超过 28 种，而且持续增加。
60 秒匹配你的品牌
最有意思的功能：给它一个网址，它会自动读取你的品牌色和字体，然后输出匹配品牌调性的图表。
不是截图，是语义级别的匹配——颜色系统、字重、留白比例，全套跟。
也就是说，你让它画一个系统架构图，出来的图和你官网的设计语言是统一的，不用再进 Figma 调颜色。
静态优先，可选动效
默认输出是静态 HTML+SVG，加载快、不依赖外部资源。如果你想做演示讲解，也可以打开可选动效，做有序的视觉引导。
对，就是那种「一页 PPT 讲清楚一个复杂系统」的效果。
适合谁
- 独立开发者 / 创业者 — 做产品演示、融资 PPT、技术博客配图
- AI 开发者 — 给 agent 生成的结果做可视化输出
- 技术写作者 — 画架构图、流程图、决策树，不用打开 Figma
- 任何受够了 AI 廉价图的人
怎么安装
在 Claude Code 里直接：
/plugin marketplace add cathrynlavery/diagram-design
或者手动 clone：
git clone https://github.com/cathrynlavery/diagram-design
老实说，42K star 的 Skill 并不少，但像 diagram-design 这样真正解决一个日常痛点的，不多。它不炫技，不搞花哨概念，就是让你从「AI 生成的图还得手动改」，变成「AI 生成的图直接能用」。
这大概就是它 5 天涨 1 万 star 的真正原因。
GitHub：https://github.com/cathrynlavery/diagram-design
评论区
登录后可评论。