最近在 GitHub 首页上刷到了一个项目，作者叫 Ryan，名字叫 Anatomy。
它的 README 开头放了一张截图：一台机械钟表，等距视角，齿轮叠着齿轮，擒纵机构的每一个齿都清清楚楚。标题写着："Name an idea in one line, and Claude draws the machine that does it."
Anatomy 是一个开源的 Agent Skill——说得直白一点，就是一个给 AI 编程助手用的「提示词 + 工具链包」。
它跑在 Claude Code、OpenCode、Codex、Antigravity 这些编程助手里。
你给 AI 一行话，比如「画一台机器解释 token bucket 限流是怎么工作的」，然后 Anatomy 会引导 AI：
1先收集真实数字——token bucket 容量是多少？填充速率是多少？限流阈值在哪？所有数字必须明确，不能拍脑袋。
2发明一台机器——桶是什么形状的？token 用什么东西代表？漏出来去哪？
3写零件清单——底座、桶、token 小球、出水阀门、传感器读数……至少 40 个零件，每个零件必须坐在另一个零件上。
4构建几何——按「画家顺序」从后往前涂，确保不会出现前面的东西被后面的东西盖住的错误。
5自检——用一个几何审计器去测：管道有没有穿过别的管道？法兰有没有浮在半空？哪根线在半空中断掉？审计必须跑到 0 才允许收工。
这个工作流不是我总结的，是 Anatomy 的 SKILL.md 里写死的规则。它对 AI 很严格——每个零件必须真实存在，每个数字必须来自同一套模型，所有运动和读数必须同步。
这也是 Anatomy 和市面上那些「文本转图表」工具（比如 Napkin AI、Mermaid）最本质的区别。
那些工具给你一串方框箭头，Anatomy 给你一台能拆开的机器。
📦 3 Parts + Conclusion
👉 滑动
Anatomy 说自己只做三种图，但这三种图覆盖了从简单说明到复杂演示的大部分场景。
SVG：核心形态，也是最常用的
纯 SVG，四色调色板着色，等距视角，分层绘制。
成品可以是独立 HTML 页面（打开浏览器就能看），可以是单独的 .svg 文件（直接插到文档里），也可以是 React/Next.js 组件（可以嵌入你的应用）。
SVG + WebGL：画不出来的效果用 shader 来补
有些东西线条画不出来：火焰、水波、蒸汽、光照、眩光。
这时候 Anatomy 会在 SVG 中间插一层 WebGL canvas——前面一层 SVG，中间 WebGL shader，后面一层 SVG。
shader 必须用 Anatomy 自己的等距相机坐标系，所以火焰会「站在」发动机的喷口上，而不是浮在图的某个位置。
3D 模式（Beta）：让零件真的转起来
第三种是 3D 模式，目前还在 Beta。
Anatomy 只让「会动的零件」进入 3D，其他部分还是静态 SVG。比如一个密码锁的转盘——转盘本身在真实三维空间里旋转，旁边的数字刻度还是静态图。这样做的好处是性能不会太差，一个 30 零件的小图能跑 60fps。
安装：三种方式任选
方式一：skills CLI（推荐，最省事）
npx skills add wheresryan22/anatomy -g -a claude-code
-g 表示全局安装，
-a claude-code 表示装给 Claude Code。
把 claude-code 换成 opencode、codex、antigravity、minimax-code 就能装给其他助手。
方式二：git clone
git clone https://github.com/wheresryan22/anatomy.git ~/.claude/skills/anatomy
根据你用的助手换路径：
OpenCode~/.config/opencode/skills/anatomy
Codex~/.agents/skills/anatomy
Antigravity~/.gemini/antigravity/skills/anatomy
方式三：下载 ZIP
# macOS / Linux 一行搞定
mkdir -p ~/.claude/skills/anatomy && curl -L
https://github.com/wheresryan22/anatomy/archive/refs/heads/main.tar.gz | tar -xz --strip-components=1 -C ~/.claude/skills/anatomy
装好之后重启一下编程助手（Claude Code 里运行 /reload-skills 也行），就能用了。
使用：三句话原则
Anatomy 的 README 里说，要出好图，记住三句话：
第一句：命名你要解释的概念，而不是画图的方式。
❌ 不好的提示词：「画一张缓存的架构图」——这还是在说画图。 ✅ 好的提示词：「画一台机器解释缓存 key 没变就跳过重算这个概念」——这是在说概念本身。
第二句：或者直接命名你想要的机器。
如果你心里已经有想法了，直接说：「画一台弹子锁来解释缓存键匹配」。
第三句：说清楚图要放哪。
独立 HTML 页面？单独 SVG 文件？React 组件？浅色主题还是深色主题？Anatomy 会根据这些选项调整构建流程。
我看完 Anatomy 的 README 和 Gallery 之后，脑子里冒出来一个想法：Anatomy 给 AI 画图设了一个新的及格线。
这些要求合在一起，就把 AI 生成的图从「看起来像那么回事」拉到了「可以放进正式文档里」。
而且它的 MIT 协议开源，Node 内置模块零依赖，跑在几乎所有主流 AI 编程助手里。你花三分钟装好，三句话就能出图。
GitHub: https://github.com/wheresryan22/anatomy
如果本文对您有帮助，也请帮忙点个
赞👍 + 在看 哈！❤️
