Anatomy：7.4k Star 的 Claude Skill，把每个技术概念变成一台能运转的机器

Tue, 13 Oct 2026 20:45:00 +0800

让 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 规定了一条严格有序的工作流，第一条原则是：先写概念和零件清单，再碰几何——大部分质量在那两步就已经定了。

flowchart TD
 A["1 · 定尺寸
Figure / Hero / Epic"] --> B["2 · 先求真
收集真实数字与行为"]
 B --> C["3 · 发明对象
机制与概念一一对应"]
 C --> D["4 · 零件清单
≥40 个零件，分组管理"]
 D --> E["5 · 规划世界
世界单位 + 相机方位俯仰"]
 E --> F["6 · 几何只建一次
kit 预计算静态路径"]
 F --> G["7 · 从后往前画
settle 测深度，audit 收尾"]
 G --> H["8 · 装框
Fig n / 标题 / 提示 / 读数"]
 H --> I["9 · 让它活
平静运动 + 交互 + 无障碍"]
 I --> J["10 · 像评论家一样验证
审计 / 截图 / 4× 特写"]
 style A fill:#ffffff,stroke:#d97843,color:#8a4a1f
 style B fill:#ffffff,stroke:#d97843,color:#8a4a1f
 style C fill:#ffffff,stroke:#d97843,color:#8a4a1f
 style D fill:#ffffff,stroke:#d97843,color:#8a4a1f
 style E fill:#ffffff,stroke:#d97843,color:#8a4a1f
 style F fill:#ffffff,stroke:#d97843,color:#8a4a1f
 style G fill:#ffffff,stroke:#d97843,color:#8a4a1f
 style H fill:#ffffff,stroke:#d97843,color:#8a4a1f
 style I fill:#ffffff,stroke:#d97843,color:#8a4a1f
 style J fill:#c9552e,stroke:#a03e1c,color:#ffffff

几个值得展开的步骤：

第 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。）

验证分三层，一层比一层刁：

flowchart TD
 subgraph L1["第一层 · 几何审计 kit/audit.mjs"]
 A1["不穿模：静止态 / 拆解态 / 爆炸动画每一帧"]
 A2["每个端点都落在真实安装座上"]
 A3["每处重叠都按真实深度顺序绘制"]
 A4["弯曲不挤压、不折叠、不压线"]
 end
 subgraph L2["第二层 · 无头浏览器检查"]
 B1["capture.mjs：桌面 / 手机 390px / 悬停 / 关键时刻"]
 B2["drive.mjs：脚本会话 + 0.05× 慢放接触表抓跳变"]
 B3["lines.mjs：每条线必须终止在笔画 / 圆点 / 轮廓"]
 end
 subgraph L3["第三层 · 4× 特写人眼复核"]
 C1["每个法兰 / 三通 / 弯头 / 卡箍 / 阀门 / 球头 / 交叉点"]
 C2["明暗两个主题 × 装配态与拆解态"]
 C3["读自己拍出的每一张 PNG"]
 end
 L1 --> V["迭代到：audit passed + line ends: 0 + 4× 无瑕疵"]
 L2 --> V
 L3 --> V
 style V fill:#c9552e,stroke:#a03e1c,color:#ffffff
 style A1 fill:#ffffff,stroke:#d97843,color:#8a4a1f
 style A2 fill:#ffffff,stroke:#d97843,color:#8a4a1f
 style A3 fill:#ffffff,stroke:#d97843,color:#8a4a1f
 style A4 fill:#ffffff,stroke:#d97843,color:#8a4a1f
 style B1 fill:#ffffff,stroke:#d97843,color:#8a4a1f
 style B2 fill:#ffffff,stroke:#d97843,color:#8a4a1f
 style B3 fill:#ffffff,stroke:#d97843,color:#8a4a1f
 style C1 fill:#ffffff,stroke:#d97843,color:#8a4a1f
 style C2 fill:#ffffff,stroke:#d97843,color:#8a4a1f
 style C3 fill:#ffffff,stroke:#d97843,color:#8a4a1f

第一层是几何审计，这在整个开源生态里都少见。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 的文件夹，这个仓库就是那个文件夹。

flowchart TD
 ROOT["anatomy/（仓库即 Skill 文件夹）"] --> SKILL["SKILL.md
工作流 + 工艺规则速览"]
 ROOT --> KIT["kit/ 绘图库（零依赖）"]
 ROOT --> REFS["references/ 长篇指南 ×9"]
 ROOT --> SCRIPTS["scripts/ 无头浏览器检查"]
 ROOT --> EXAMPLES["examples/ 8 个完整示例"]
 ROOT --> EVALS["evals/evals.json 测试题与期望输出"]
 KIT --> ISO["iso-kit.ts / .mjs
相机 · 实体 · 零件库 · SVG 渲染器"]
 KIT --> LATHE["lathe.mjs 任意轴回转体"]
 KIT --> TUBE["tube.mjs 管道与线缆"]
 KIT --> GL["gl.mjs WebGL 图层"]
 KIT --> TURN["turn*.mjs 3D 运行时（beta）"]
 KIT --> REACT["react/ 服务端 + 客户端组件"]
 SCRIPTS --> CAP["capture.mjs / drive.mjs 截图与会话"]
 SCRIPTS --> LIN["lines.mjs 线端检查"]
 SCRIPTS --> PUB["publish.mjs 社区画廊投稿"]
 style ROOT fill:#c9552e,stroke:#a03e1c,color:#ffffff
 style SKILL fill:#ffffff,stroke:#d97843,color:#8a4a1f
 style KIT fill:#ffffff,stroke:#d97843,color:#8a4a1f
 style REFS fill:#ffffff,stroke:#d97843,color:#8a4a1f
 style SCRIPTS fill:#ffffff,stroke:#d97843,color:#8a4a1f
 style EXAMPLES fill:#ffffff,stroke:#d97843,color:#8a4a1f
 style EVALS fill:#ffffff,stroke:#d97843,color:#8a4a1f
 style ISO fill:#ffffff,stroke:#d97843,color:#8a4a1f
 style LATHE fill:#ffffff,stroke:#d97843,color:#8a4a1f
 style TUBE fill:#ffffff,stroke:#d97843,color:#8a4a1f
 style GL fill:#ffffff,stroke:#d97843,color:#8a4a1f
 style TURN fill:#ffffff,stroke:#d97843,color:#8a4a1f
 style REACT fill:#ffffff,stroke:#d97843,color:#8a4a1f
 style CAP fill:#ffffff,stroke:#d97843,color:#8a4a1f
 style LIN fill:#ffffff,stroke:#d97843,color:#8a4a1f
 style PUB fill:#ffffff,stroke:#d97843,color:#8a4a1f

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 只会画方框」这个偏见最漂亮的反驳。

仓库：github.com/wheresryan22/anatomy（MIT）
官网：skills.wheresryan.sh/anatomy
社区画廊：github.com/wheresryan22/anatomy-community

可视化 on 我的博客