Anatomy实测：让AI把抽象概念画成会动的机械剖面图

写技术博客或文档的人大概都遇到过同一个困境：概念在脑子里很清楚，落到纸面上就变成一大段拗口的比喻。令牌桶限流、GPU 上下文共享这些东西，配一张干巴巴的截图，读者看完还是懵。找插画师画一套交互式示意图，价格和周期都不在一个量级上。现在有个开源项目想用 AI 把这个环节自动化——Anatomy，一个让 Claude 把抽象概念"造"成会动的机械模型的 Agent Skill。

Anatomy 在 GitHub 上线不到一周就涨到六千五百多个 Star，MIT 协议，零第三方依赖，只需要 Node.js 20.10 以上版本。它的核心思路很有意思：你说一个概念，它先把这个概念"物化"成一台假想的机器——缓存键失效检查变成一把只有齿形完全匹配才能转动的弹子锁，GPU 单上下文服务多画布变成一台龙门绘图仪，用唯一的打印头依次访问 16 个井位——然后用几十个带四色阴影的等距小零件把这台机器搭出来，装进一张带标题和实时读数的卡片里，鼠标划过时零件会平滑地动起来。

它有三种产出形态。SVG 是核心：实心等距零件、四色阴影、从后往前绘制，可以输出成独立 HTML 页面、内嵌样式的单个 SVG 文件，或者 React/Next.js 组件。SVG 加 WebGL 的组合用来处理线条画不出来的东西——火焰、尾焰、水波、光晕、蒸汽，shader 渲染层被夹在前后的 SVG 之间，共用同一台等距相机，看起来就像画在图纸里。3D 模式还在 beta：拨盘能真的转起来，官方例子里有大约 90 个零件逐帧重新投影和着色。

安装一步到位。在 Claude Code 里执行：

```

npx skills add wheresryan22/anatomy -g -a claude-code

```

会装到用户级技能目录（约 10MB，包含全部示例）。如果当前会话启动时技能目录还不存在，跑一下 /reload-skills 即可生效。OpenCode、Codex 和 Antigravity 用户把参数换成 -a opencode、-a codex 或 -a antigravity 就行，不想用命令行也可以直接 git clone 到对应的技能文件夹，效果一样。

用起来就是一句话的事：

```

/anatomy explain how a token bucket rate limiter works, interactive

```

其实也不用显式叫它——当你在对话里要求"画一张等距示意图"、"给文档配个交互图解"时，Claude 会自动加载这个技能。Codex 里用 $anatomy 触发。

官方示例库里最能说明问题的是那个猛禽发动机模型：悬停鼠标，整个引擎会分解成 11 个组件悬挂在试车台上，尾焰用 WebGL shader 绘制，"没有一根管子穿过另一个零件"这件事是技能自己逐帧审计过的。还有一个水波干涉实验台，两层 WebGL 分别负责灯光和水面焦散，视觉效果相当讲究。每个例子都是普通 HTML 文件，浏览器打开就能玩。

值得一提的是它的自检机制：生成之后，技能会启动无头 Chrome，把每个关节逐个放大检查、截图核对，确认装配关系没问题才算完成。Codex 用户注意，它的沙箱可能会拦掉这个浏览器检查，按 README 的建议放行即可，图本身不受影响。

我的判断是，这类项目代表了 Agent Skill 生态的一个清晰方向：从"帮我写点什么"走向"帮我交付一个可用的工件"。之前流行过的 logo 设计技能是同一个逻辑——AI 不只是产出文字，而是产出能直接放进产品的东西。对教程作者、文档工程师来说，Anatomy 给出的卡片质量已经接近手工定制的水平，虽然离"一句话就完美"还有距离，复杂概念偶尔要来回改几轮，但把几个小时的工作压到几分钟，这件事本身已经成立。

项目地址：https://github.com/wheresryan22/anatomy

唯一的成本是 token：图越复杂花得越多，但怎么算都比请外包划算。如果你的博客或产品文档里有讲不清的概念，值得花十分钟装上试一次。