让 AI 画一张「解释某样东西」的图，你会得到什么？一叠方框、若干箭头、几行悬浮标签——信息没错，但没人愿意看第二眼。技术图示的困境在于：它画的是关系，不是东西。
Anatomy 的答案近乎偏执：不画图，造物。 你说「解释令牌桶限流」，它发明一台真实的机器——漏斗、转鼓、挡片——让机器的运转方式就是概念本身。缓存键命中所以跳过重算，变成一把弹子锁：所有弹子对齐时锁芯转动，什么都不重画。
这个 Skill 创建于 2026-10-08，到今天（2026-10-13）正好 5 天，7.4k Star，526 fork。
项目速览
| 项 | 内容 |
|---|---|
| 名称 | Anatomy |
| 定位 | Claude Skill：把技术概念变成可交互的等距（isometric）机械剖面图 |
| Star / Fork | 7,438 / 526（截至 2026-10-13，仓库创建仅 5 天） |
| 作者 | Ryan（@wheresryan22） |
| 许可证 | MIT |
| 技术要求 | Node.js ≥ 20.10（零依赖，只用内置模块）；Chrome/Chromium（自检用）；React 18+（仅 React 产物需要） |
| 运行环境 | Claude Code / Antigravity / OpenCode / Codex |
| 官网 | skills.wheresryan.sh/anatomy |
| 社区画廊 | anatomy-community（16 star） |
一、核心理念：对象即解释
SKILL.md 里最重要的一句话只有五个词：The object is the explanation.（对象即解释。） 不要画方框、箭头和标签，去发明一个真实的、制作精良的实体，让它的工作机制就是概念本身。
README 里给出了一组概念到实物的映射，最能说明这个思路：
| 概念 | Anatomy 发明的实物 |
|---|---|
| 一个 GPU context 服务多个 canvas | 一台龙门绘图仪：单个打印头依次拜访 16 个孔位 |
| 缓存键命中则跳过重算 | 一把弹子锁：所有弹子对齐时锁芯转动，什么都不重画 |
| 7 个不同字节/纹素的渲染目标 | 一个七斗柜，每个抽屉的深度就是它的字节数 |
| 可分离模糊（49×49 抽头 vs 49+49） | 一张钉床印章，旁边是两条导轨上的梳子 |
| 一根会按压又会倾斜的弹簧 | 一台带弹簧、探针和百分表的试验台 |
| 高度剖面 | 一把贴着工件边缘按压的轮廓规（profile gauge） |
| 依赖朝向的光照 | 一间小型摄影棚：环形转盘旁的主光与补光灯 |
失败方式只有两种，README 都见过实例：太抽象——叠放的板子、漂浮的方块、贴标签的框，读不出任何东西；太平淡——一大块板上画几条线，没有体积、没有零件、没有可发现之处。两者的解同一个：一台可识别的机器，由许多小而精确、各有用途的零件搭成。
还有一条贯穿所有产物的硬约束：图里显示的每一个数字，都来自驱动其零件运动的同一个模型。 右下角的实时读数不是贴上去的文案，是模型算出来的真值——零件怎么动，数字就怎么走。
二、三种产物形态
Anatomy 产出三种图，共享同一套 kit、同一个相机、同一套工艺规则：
| 形态 | 是什么 | 例子 |
|---|---|---|
| SVG（核心） | 实心等距零件、四色调着色、从后往前绘制的装订卡片，带实时读数与缓动运动。可交付为独立 HTML 页、内嵌样式的单个 .svg 文件，或 React/Next.js 组件。 | dial-indicator、desk-computer、arcade-cabinet、test-rig |
| SVG + WebGL | 线条画不了的：火焰、尾焰、水、焦散、灯光、辉光、蒸汽。着色器跑在前后两层 SVG 之间的画布上，与图形共用同一个等距相机，所以它「长」在画里。没有 WebGL，SVG 依然完整可读。 | raptor-engine、ripple-tank |
| 3D（beta） | 真正在三维里转动的零件：转盘、屈伸的手指、断裂脱落的自由体。运动零件每帧由 kit 自己的规则重新投影、重新着色，其余部分保持静态美术。 | turning-dial |
每个图都有明暗两个主题，浅色是首要设计主题——着色器也按纸面设计：写在纸上应该是的颜色，再反解出墨水量。浅色主题的辉光必须是「一个饱和的实体加一个浅色的核」，绝不能直接把深色主题的颜色调暗——那正是 Raptor 尾焰曾经变成一团「红墨水烟雾」的教训。
三、十步工作流：质量在动笔之前就决定了
SKILL.md 规定了一条严格有序的工作流，第一条原则是：先写概念和零件清单，再碰几何——大部分质量在那两步就已经定了。
几个值得展开的步骤：
第 1 步，定尺寸。 三档：Figure（单个机制，40–80 个零件，最多一层 WebGL，通常一小时以内完成）；Hero（密集物体、多层 WebGL 或单个 3D 主体，80–150 个零件，约 2–4 小时，要报价）；Epic（整车、整楼、整厂，6 小时以上）——不许直接开工，先给估价、提议一个保留核心思路的 Hero 版本、列出完整版会多做什么，等用户拍板。任何尺寸都要保证第一小时内有一个能在浏览器打开的页面，然后逐步加深。
第 2 步，先求真。 收集被解释对象的真实数字与行为：尺寸、数量、阈值、曲线。读数、动画、说明文字全部必须为真。能写个小而纯的模型模块就写（test-rig 示例里的 rig.ts 就是范本），让一切都从它驱动。
第 3 步，发明对象。 选一台机器、工具、仪器或家具，机制与概念一一映射；用一句话说清什么在动、动意味着什么。有一条容易被忽视的戒律：绝不照抄参考图——取它的质感，不取它的对象。
第 4 步，零件清单。 至少 40 个零件，分组管理：基座（底板、脚、沟槽、角螺钉、铭牌、标尺带）、结构（立柱、导轨、框架杆、限位）、机构（滑台、轴瓦、弹簧、柱塞、指针）、控制件（滚花旋钮、thumb screw、冠形轮），以及被表现的主体本身——全图唯一被「点亮」的零件。每个零件都必须坐在另一个零件上。
第 7 步，从后往前、从下往上画。 重复零件用 depthOf 排序；包裹别件的零件拆成前后两半（弹簧分成前后、车架横杆在滑台处断开）。一旦图里出现管道、线缆和回转体，就停止靠肉眼调层级：用 recorder 记录每个部件的真实形状，settle 逐对测量重叠处的真实深度并设置绘制键，最后以 auditOrExit 收尾。用「替身形状」糊弄审计被视为 bug，审计会专门抓它。
第 9 步，让它活。 用平静的基于时间的运动：指数跟随或真实弹簧；无人触碰时自动巡回展示；响应指针与键盘；离屏时停止渲染；reduced-motion 下完全静止。属性写在 refs 上，不逐帧重渲染。
四、最硬核的部分：它给自己出考卷
如果只挑一个部分推荐你细读 SKILL.md，我会挑第 10 步。「验证得像一个评论家」——原话是：
The owner finds faults by zooming in, so you zoom in first. Read every PNG you make. （主人是靠放大找毛病的，所以你要先放大。读你拍出的每一张 PNG。）
验证分三层，一层比一层刁：
第一层是几何审计，这在整个开源生态里都少见。kit/audit.mjs 在部件被绘制的同一步骤里记录它们的真实形状（回转体、板、棱柱、盒、球、管、被宿主切出的座），然后 settle 对每一对屏幕重叠物做射线投射，测出真实深度并设置绘制键；auditOrExit 在构建末尾跑完全部检查——间隙、端点、悬空端、支撑、折叠、自重叠、拥挤度（细长件按线处理）、替身形状、 wobble、鞍座、深度顺序——任何一项不为零就非零退出。node build.mjs --audit 必须以 audit passed 结尾。
第二层是浏览器自检。 无头 Chrome（保持 WebGL 开启）跑 capture.mjs 截图：桌面、390px 手机、悬停、运动中的若干时刻；drive.mjs 做脚本化会话、拆解姿态和 --no-webgl 降级路径，用 ["slow", 0.05] 拍接触表抓跳变；lines.mjs 专查审计看不见的线稿——每条接缝、标尺线、肋、刻度、指针都必须终止在某个笔画、圆点或轮廓上，输出 line ends: 0 才算过。
第三层是 4× 特写。 两个主题、装配与拆解两种状态，逐个接头放大：法兰、三通、弯头、卡箍、阀门、波纹管、箍带、鞍座、球头、每个交叉点；每个曲面体不能有色调阶梯；每处纹理的终止处必须在真实边缘或自然淡出；每根滑杆在静止位和行程末端各拍一次。然后 Claude 被要求读它拍出的每一张 PNG，对着 examples 问自己：它一眼就是个真东西吗？1× 时细节丰富吗？4× 时还经得起看吗？有空白的面或空旷的角落吗？——迭代到全是「是」为止。
evals/evals.json 把这一切变成了可复现的考题。比如第 1 题是「为解释令牌桶限流的博文做一张可交互等距插图，白底，单 HTML 文件，桶容量 20、每秒补 5、每个请求取 1、空了就拒绝」，而「期望输出」写的是：单文件浅色主题、真实取物、实时读数、缓动运动、曲面无阶梯、纹理不中断、任何管道都必须经 --audit 以 audit passed 收尾且每个失败项为零、经过 4× 特写复核且每张 PNG 都被看过。
换句话说，这个 Skill 把「好不好看」这个通常靠抽奖的问题，拆成了工作流 + 零件词汇表 + 可执行审计 + 截图复核四层工程纪律。
五、仓库架构：仓库本身就是一个 Skill
Anatomy 是一个标准的 Agent Skill——根目录一个 SKILL.md 的文件夹，这个仓库就是那个文件夹。
kit/ 是真正的绘图库：iso-kit.ts 单文件装下相机、实体、零件库、SVG 字符串渲染器、卡片与页面构建器和 CSS（另有编译好的 .mjs 给 Node 构建脚本用）；lathe.mjs 造任意轴上的回转体（钟形、法兰、阀门、执行器，平滑曲线自动切换平滑着色）；tube.mjs 把 3D 管道线缆切成可深度排序的段，处理颈圈间隙、椭圆端盖和随截面走的编织/波纹纹理；gl.mjs 是把 GLSL 相机搬进等距视角的 WebGL 图层；turn*.mjs 是 beta 的 3D 运行时。除 React 组件外零依赖，全部只用 Node 内置模块。
references/ 下九篇长篇指南按需取用：craft（含零件词汇表与代码配方）、kit API、motion、react、verify、webgl、walkthrough（test-rig 从概念到代码的完整设计复盘）、3d、publish。
工艺规则速览几条最有「手感」的：实体而非线框（每件填纸色、按序绘制的实心件，没有透视边、没有虚线隐藏线）；明暗层级（基座 lo、结构 mid、主体 hi，全图恰好一个 lit 强调件——读者该盯着的那个零件）；小即精确（倒角 0.4–1.6、沟槽距边 3–5、螺钉是 0.4–0.55 的点、标尺每 4–5 单位一刻度、每第 5 条为主刻度、铭牌上三条规线）；线条必须有着落（没有引线、气球、尺寸箭头和漂浮标签）；没有穿模（管道离任何东西保持约 1.5 倍半径的间隙，法兰箍带处断开避让）；曲面平滑无双阶梯（曲率结标记 smooth，色调带逐渐收细到零而不是一刀切）。
六、八个官方示例：从 300 行到火箭发动机
仓库自带八个完整示例，构建产物已提交，打开任何 .html 就能玩：
| 示例 | 展示什么 | 规模 |
|---|---|---|
dial-indicator | 台架上的百分表，滑台推移时指针读数。最小示例。 | 约 300 行 |
desk-computer | 1984 风格台式机，键盘可打字，字符出现在机箱正平面内的 CRT 上；关机时画面塌缩成一条线和一个点。 | 约 85 个实体、850 条路径 |
arcade-cabinet | 侧板卸掉的街机。投币滚过币道触发 Coin Switch，脉冲沿电缆一段段传到主板，CRT 预热自检进入 attract mode。摇杆倾斜触发面板下微动开关。 | 约 240 个实体、15 根线缆 |
raptor-engine | 试车台上的 Raptor 2 发动机。可拆解成 11 个总成，SVG 前后层之间跑 WebGL 尾焰、冲击波、水花和蒸汽。密集管路、平滑着色与审计的参考实现。 | 构建需几分钟 |
ripple-tank | 44° 俯视的水波槽，两层 WebGL（灯光焦散与水面反射）注册到等距平面，由 model.mjs 的纯色散光学模型驱动。 | — |
test-rig | 来自真实 React/Next.js 站点的生产图：弹簧滑台上的玻璃按钮、导轨上的指形探针、读倾斜量的百分表。 | 53 个实体、约 470 条路径 |
spot-plate | 同一站点的第二张生产图：六对玻璃液滴，每对由一个距离场绘出，靠近时融合成一整块玻璃。 | — |
turning-dial | 3D 模式：真三维转动的密码盘，盘上趴着一只小型机械手，三铰手指会抬起，一个舱室会断裂成自由体脱落。 | 约 90 个运动零件；stress.mjs 是 380 件手的性能压测 |
先看官方截图。第一张是 raptor-engine 的点火态：发动机与试车台是 SVG，红色的尾焰是同一个等距相机里的 WebGL 着色器——卡片上写着 Fig 1、Pc 300 bar、230 tf：
悬停即拆解，发动机散开成 11 个总成，管线与线缆悬在试车台立柱之间——而审计要证明的是：静止态、拆解态和爆炸动画的每一帧里，没有任何一根管子穿过任何东西：
ripple-tank 是「SVG apparatus + 双层 WebGL」的代表：槽上的灯具、纸屏上的焦散与水面的反射各归其层：
turning-dial 是 beta 的 3D 模式：拖动密码盘时约 90 个零件每帧被重新投影、重新着色，盘上的机械手随之转动，LED 的光池与火花跟着运动件走：
最小的 dial-indicator 约 300 行——但麻雀俱全：带刻度的标尺带、滚花旋钮、滑台、指针，一应俱全：
七、安装与使用
npx skills add wheresryan22/anatomy -g -a claude-code
然后在 Claude Code 里：
/anatomy explain how a token bucket rate limiter works, interactive
OpenCode 与 Antigravity 用同一条 /anatomy 命令，Codex 里输入 $anatomy。不需要 API key，没有 npm install——kit 只用 Node 内置模块。
官方给了三个把图做好的习惯：
- 说出想法，别说出画法。 讲清它该解释什么，给出真实数字（尺寸、数量、速率、阈值）。Anatomy 负责发明对象——那才是大部分工作，而且它比你描述「方框和箭头」做得更好。
- 或者直接说出物件。 如果你已经知道要什么机器（咖啡机、本生灯、一把锁），直说，并说明什么该动。
- 说出它将住在哪。 独立 HTML 页、单个 SVG 文件、还是 React/Next.js 组件；浅色还是深色。三种住处的构建各不相同。
产物是你拥有的源码：一个 Node 构建脚本加它写出的页面；React 路线则是几何模块、一个渲染静态美术的服务端组件，加上一个专管运动的客户端组件。kit 随之一并交付——这意味着你可以改零件、重建，而不是对着一张死图叹气。
顺带一提它的「时间与 token 记账」：publish.mjs 投稿社区画廊时会记录这张图做了多久、用了多少 token（从 Claude Code 会话日志里读，扣除 10 分钟以上的空闲、不计缓存读取），发送前先给你看一遍。做图成本第一次变成了明账。
八、成熟度判断：这不是一个玩具
- 提交与协作：约 123 个提交（仓库仅 5 天）、8 位贡献者，第二名贡献了 33 个提交；CI badge 在 README 顶部；4 个 open issue
- 版本纪律：CHANGELOG 遵循 Keep a Changelog + SemVer，1.1.0（2026-10-12）发布，Unreleased 里排着 Antigravity 支持
- 工程洁癖：贡献规则里写着「代码里不写注释」和「kit 的任何改动必须让所有既有示例逐字节不变」——后者意味着 kit 是被当作公共 API 对待的
- 文档自洽：README、SKILL.md、九篇 references 与 evals 的期望输出互相引用且口径一致
- 诚实的边界：README 专设 Limits 一节，主动说明自己不是什么（见下）
以 5 天的仓库龄论，这套完整度远超「周末项目」水位；但它也确实年轻——380 件手的 3D 压测数据是在「一台负载很重的机器上」测得的，生产环境请自行验证。
九、Limits：它主动告诉你自己不能干什么
- 它不是图表库。 没有坐标轴、没有序列、没有数据图。数字只以两种形式出现：由模型驱动的实时读数，和零件的真实尺寸与数量。
- 它画机器、仪器、工具和家具。 不画人，不画精确地图。一个没有机制可造的概念，做出来的图会弱。
- 它故意很慢。 一张图是一场长会话：零件清单、几何、审计、两个主题下每个接头的特写。Raptor 的构建要几分钟，30 个零件的完整 3D 轨道审计要 15–20 分钟。
- 着色器需要 WebGL。 没有它 SVG 仍然可读；开启 reduced motion 时所有图静止。
- 3D 是 beta。 引擎只在它的示例和一张测试图上被证明，未上生产图。小图 60fps；380 零件的压力测试手在 1440px 宽约 20fps、手机档 13–15fps（重载机器）。
十、为什么这个 Skill 值得你关注
第一，它把「生成质量」从抽奖变成了工程。 大多数 AI skill 是一层提示词包装；Anatomy 交付的是一台绘图库、九篇长篇指南、一套几何审计、一组可复现的考题，和一条「先写零件清单再动几何」的流水线。你调用它一次得到的图漂不漂亮是运气，你调用它一百次得到的水位是工程。
第二，产物是源码，不是死图。 这跟 Dashi PPT 是同一个命题的另一半：生成之后能不能改，比生成本身更重要。Anatomy 的答案是给你构建脚本和 kit——零件是可追溯的代码，改一个弹簧就是改一个函数调用。
第三，它是 Agent 自我验收的样板。 放大、截图、慢放、读 PNG、审计到零——它示范了一个 agent 如何用工具和证据验收自己的工作，而不是用「我觉得挺好的」。
第四，它诚实。 主动声明边界、标注 beta、承认「慢是故意的」——在一个人人都在演示完美效果的圈子里，这反而建立了信任。
最后是一个朴素的观察：它很酷。 「用一台绘图仪解释 GPU context」「用一把弹子锁解释缓存键」——这种把抽象概念实体化的想象力，本身就是对「AI 只会画方框」这个偏见最漂亮的反驳。