9 天冲上 GitHub 周榜第一：这个开源 Skill 让 AI 把技术概念变成了一台真机器！

最近在 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 给你一台能拆开的机器。

三种输出形态，满足不同场景

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。

02

PART

快速上手

安装：三种方式任选

方式一：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 会根据这些选项调整构建流程。

///

LAST

写在最后

我看完 Anatomy 的 README 和 Gallery 之后，脑子里冒出来一个想法：Anatomy 给 AI 画图设了一个新的及格线。

这些要求合在一起，就把 AI 生成的图从「看起来像那么回事」拉到了「可以放进正式文档里」。

而且它的 MIT 协议开源，Node 内置模块零依赖，跑在几乎所有主流 AI 编程助手里。你花三分钟装好，三句话就能出图。

GitHub: https://github.com/wheresryan22/anatomy