GitHub 2 万 Star 爆火：一句话，让 AI 把复杂原理做成3D交互演示

GitHub 上最近有个叫 Anatomy 的开源项目，10 月 8 号才放出来，现在已经2万多 Star了，这个增速在开源项目里不多见。它是一个 Agent Skill，装在 Claude Code 这类工具里用。 装好以后你打一句话，比如"解释一下令牌桶限流是怎么工作的"，它就会给你做一个交互式的图解页面，生成出来是一个 HTML 文件，浏览器直接打开，能拿鼠标点，能拖着玩。 先看几张成品图 作者在仓库里放了一批做好的示例，我挑几个有代表性的放上来。如果你暂时不想装，examples 文件夹里那八个示例的 HTML 是直接提交在仓库里的，下载下来用浏览器打开就能玩。 第一个是这个 SpaceX Raptor 2 发动机，README 的头图用的就是它。这张图里，发动机和试车台架是 SVG 画的，喷出来的尾焰是 WebGL 着色器实时算的。页面左下角有个点火按钮，点一下，火就喷出来了。 还有个设计我觉得挺好玩的：鼠标悬停在发动机上，整台机器会原地拆开，一共拆成 11 个组件，涡轮泵、燃烧室、喷管这些会一层一层分开，内部结构看得清清楚楚。 这里要说明一点，这些图不是 AI 直接画出来的图片。Anatomy 生成的是代码，SVG、HTML、WebGL 着色器这些，浏览器把代码跑起来，才有你看到的画面。 这事带来的实际好处是，零件的尺寸在代码里都是确定的数字，你想改哪里，打开源码就能改。图上那些读数也不是写死的文字，背后有一个小模型在算，零件动了，读数会跟着变。 它跟普通 AI 画图不一样的地方 平时让 AI 画个示意图，出来的基本是方框加箭头，Mermaid 那一类。Anatomy 拿到题目以后的处理方式不一样，它会先想一台具体的机器出来，这台机器怎么运转，对应的就是那个原理本身。 README 里举了两个例子。 一个是"缓存键在数据没变的时候跳过重复计算"，它做成了一把弹子锁，每根弹子都对上了，锁才转得动。另一个是"一个 GPU 上下文服务多个画布"，它做成了一台龙门式绘图仪，一个打印头依次走到 16 个孔位上干活。 这样做出来的东西讲原理确实好使。图不是死的，零件一直在动，每个动作都对应原理里的一步，看的人容易把动作和概念对上。 三种输出形式 Anatomy 能做三种图，用的都是同一套绘制工具和同一套规则。 第一种，纯 SVG，这也是它最核心的能力。等距视角的立体零件，四种明暗色调，从后往前一层一层画，图上带一个实时读数框。成品可以给独立 HTML 页面，可以只给一个 SVG 文件，也可以给 React/Next.js 组件。下面这个百分表是官方最小的示例，三百行代码左右。 第二种，SVG 加 WebGL。有些东西线条画不出来，火焰、尾气、水波、光晕、蒸汽这些，就得靠着色器。它的做法是把着色器夹在前后两层 SVG 中间，用的还是图纸那个等距相机，所以特效看起来是从画面里长出来的，没有后期贴上去的感觉。下面这个波纹槽，水波就是 WebGL 算的。 第三种，真 3D，目前还是 beta。零件真的在三维空间里转，旋钮能拧，手指会弯，零件能掰下来掉下去。动的部分每一帧都重新投影、重新上色，不动的地方保持原样。 下面这个密码转盘就是 3D 模式的示例。这个功能作者自己说只在一个示例和一个测试图上验证过，用的时候要有心理准备。 怎么装，怎么用 安装一行命令： npx skills add wheresryan22/anatomy -g 跑完它会问你装给哪个 Agent，目前支持 Claude Code、Antigravity、OpenCode、Codex、MiniMax Code 这五家。不想被问就加个参数，比如 -a claude-code。不需要 API key，也不用装别的依赖，它只用 Node 自带的模块。 Node 版本这里提醒一句：Skill 本身要求 20.10 以上，但安装用的 skills 命令行工具要求更高，得 22.20 以上，装之前先看一眼自己的版本，免得白跑。另外它自检的时候要调用本机的 Chrome 或 Chromium 做无头截图，没装浏览器的机器会卡在这一步。 装好之后，在 Claude Code 里直接打： /anatomy explain how a token bucket rate limiter works, interactive 提示词怎么写 README 里给了三条建议，我用大白话转一下。 第一条，说概念，别描述画面。你就说要解释什么，把真实数字给它，尺寸、数量、速率、阈值这些，造什么机器让它自己想。这么干出来的效果，比你描述"帮我画几个方框连几条线"好得多。 第二条，如果你心里已经有想要的东西了，比如就是要一台浓缩咖啡机，那就直接报名字，再说清楚哪里要动。 第三条，说清楚成品放在哪用。独立 HTML、单个 SVG、React 组件，亮色还是暗色，这几种情况构建方式不一样，不说清楚的话，它做出来的东西容易跟你要的不一致。 我们来自己试试效果 我挑了三个官方仓库里没有的题目。官方那些示例读者自己翻仓库就能看到，照着重做一遍没什么意思。这三个零件都不算多，做出来也好看，提示词按上面三条原则写的，中文的，直接复制就能用。嫌麻烦的话，跑前两个就行。 案例一：相机光圈（推荐先跑这个） 纯机械结构，八片叶片围成一个孔，转环控制收放。圆形机械在等距视角下很出效果，零件少，跑得也快。 /anatomy 做一个相机镜头光圈的工作原理演示：8 片光圈叶片围成圆孔，拖动光圈环， 孔径从 f/1.8 平滑收到 f/16，旁边跟一个实时光圈值读数。一束光从镜头前方照进来， 孔越小光柱越细。纯机械质感，浅色主题，输出一个能直接打开的 HTML 文件， 界面文字用中文。 效果展示： 案例二：手压发电手电筒 齿轮、飞轮、灯泡，全是它擅长的零件，灯光用一点 WebGL 光晕，暗色主题下效果不错。交互也简单：压住压柄灯亮，松手灯慢慢暗。 /anatomy 做一个手压式发电手电筒的演示：侧面有个压柄，按住不放会带动齿轮组和 飞轮加速转动，飞轮带动发电机，灯泡随之亮起来（灯光用 WebGL 光晕实现）； 松手后飞轮靠惯性再转一会儿，灯慢慢暗下去。侧面做成透明的或者去掉外壳， 要能看见齿轮咬合。深色主题，独立 HTML 文件，中文标注。 效果展示： 案例三：杆秤 老祖宗的东西，不过杠杆、提绳、秤砣、刻度全是机械件，正好是它擅长的类型，对中文读者来说也比发动机亲切。纯 SVG，三个里面跑得最快。 /anatomy 做一杆老式杆秤的演示：秤钩上挂一个 2 kg 的砝码，可以拖动秤砣在秤杆上 滑动，秤杆绕着提绳上下倾斜，拖到平衡位置时秤杆恢复水平，读数窗口显示称出的重量； 点一个按钮把砝码换成 5 kg 的，平衡点明显外移。秤杆上要画出刻度。 浅色主题，独立 HTML 文件，中文标注。 效果展示： 耗时大概排一下：杆秤最快，光圈其次，手压手电因为带 WebGL 会慢一些。跑的时候不用守着，让它自己做完检查就行。 泼几盆冷水 热度高归高，有几个坑我觉得得说在前面。 它很慢，而且是故意慢。 做一张图要跑一个长会话，列零件清单、算几何、做检查、给每个接缝拍特写，一步都省不了。README 里写了，Raptor 那个示例光构建就要几分钟，30 个零件的 3D 环绕检查要 15 到 20 分钟。ExplainX 那篇文章给的参考耗时是，普通一张图 30 到 90 分钟，大一点的要几个小时。这些时间烧的都是你的 Claude Code 额度，Skill 免费，模型调用可不免费。 它不是图表库。 没有坐标轴，没有数据曲线，画不了图表。数字只会出现在实时读数和零件的真实尺寸里。 它只画机器、仪器、工具、家具。 不画人，也不画精确的地图。太抽象、变不成机械装置的概念，做出来效果会打折扣。 好看归好看，讲解偏弱。 这一点好几篇文章都提到了。动画是很炫，但如果你对这个领域完全不懂，光看一堆零件转来转去还是会懵——每个零件叫什么、起什么作用，它自带的文字说明比较简单。所以它更适合拿来给懂行的人做展示，或者你自己另外配一段讲解。 工程精度别当真。 它画的 Raptor 发动机是很像，但那是示意图，跟工程图两码事。wavect 的评测说得挺直白：一张详细的发动机插图，证明不了它在工程上准确。拿来做科普、做文档配图没问题，别拿去当设计依据。 Codex 用户注意。 自检要启动无头 Chrome，Codex 的沙箱可能会拦，到时候给对应命令开权限就行，README 里有具体的配置方法。 我的看法 Anatomy 让我觉得有价值的地方，是它交付的东西。你拿到手的是代码，一个带构建脚本的小工程：尺寸是确定的数字，运动有模型驱动，生成完还有自动检查。所以它能放进文档仓库，能改，能复用，比一次性生成的图片好控制得多。 从使用成本看，安装和写提示词都不难，难的是等。一张图几十分钟，还要花模型额度。它替不掉谁的工作流，但确实把"给文章配一个能上手玩的讲解"这件事的成本降下来了，以前这种图基本只有专业可视化团队做得起。 另外，它给 Skill 这种形态提供了一个参考样本。一个有价值的 Skill，里面得有工作流程、工具库、验收标准这几样东西，Anatomy 都配齐了。这也是它跟普通"AI 画图项目"拉开距离的地方。 开源地址 https://github.com/wheresryan22/anatomy