用 Anatomy 把一个系统画成能运转的等轴测机器

方框加箭头解释一个缓存键，大概就像火柴人解释一把小提琴。Anatomy 是一个 17k 星的 Claude skill，它解释概念的方式是把它造成一件真实、能运转的物体：README 自己的例子里，一个"没有变化就跳过工作"的缓存键变成了只有每根弹子都对上才能转动的弹子锁，一个 GPU 上下文服务多个 canvas 变成了一台龙门绘图仪，单个打印头造访 16 个孔位。

为什么这个 Skill 重要

然后 Claude 用几十个小而实、经过着色的零件把这件物体造出来，放进一张带标题、提示和实时读数的框卡里，让它在指针和键盘下平稳地动起来，再放大每一个接合处检查自己的活。图上显示的每个数字都来自驱动零件运动的同一个小模型。拿到手的是你自己拥有的源码——一个 Node 构建脚本和它写出的页面，或者对 React 来说，几何模块加一个负责静态画面的服务端组件和一个负责运动的客户端组件——kit 随之一并交付。

三种图形共用一套 kit、一个相机和一组工艺规则。SVG 是核心：四色调着色的实体等轴测零件，从后往前绘制，可以交付为独立 HTML 页面、内嵌样式的单个 .svg，或 React/Next.js 组件。SVG 加 WebGL 补上线条画不出的东西——火、尾气、水、焦散、灯光、辉光、蒸汽——作为夹在前后两层 SVG 之间、处于同一等轴测相机下的 shader；没有 WebGL 时 SVG 仍然可读。标为 beta 的 3D 模式每帧重新投影并重新着色会转动的零件，其余部分保持静态画面。

安装

npx skills add wheresryan22/anatomy -g

CLI 会问你要配置哪些 agent——Claude Code、Antigravity、OpenCode、Codex、MiniMax Code——也可以用 -a claude-code、-a antigravity、-a opencode、-a codex 或 -a minimax-code 跳过提问。没有 API key，也没有需要 npm install 的东西：kit 只用 Node 的内建模块。你需要 Node.js 20.10 或更高版本，以及用于检查的 Chrome 或 Chromium；React 18 或更高版本只在输出 React 时才需要。CLI 会复制整个仓库，包括示例，约 10 MB。

Claude Code 在运行中的会话里就能识别新 skill；如果会话启动时 skills 文件夹本身还不存在，运行 /reload-skills。在 Codex 里命令是 $anatomy 而不是 /anatomy。

实战：画一个可以戳的限流器

输入 README 自己的快速开始提示词：

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

SKILL.md 设定的工作流按固定顺序进行：先收集真实数字，发明物体，写零件清单，规划场景，用 kit 一次性构建几何，从后往前绘制，装框，让它动起来，然后像评论家一样核验。核验是机械化的：kit/audit.mjs 证明没有任何东西穿过别的东西、每个端点都落在支座上、每处重叠都按深度顺序绘制；在无头 Chrome 里，scripts/capture.mjs 和 scripts/drive.mjs 拍下截图、特写和慢放的联系表，scripts/lines.mjs 让任何悬在半空的线条不通过。这个 skill 要求 Claude 读它生成的每一张 PNG。

按 README 的说法，三个习惯能得到最好的图。说清概念而不是画面，并给出真实数字——尺寸、数量、速率、阈值——因为发明物体是大部分工作。或者直接点名物体，如果你已经知道想要哪台机器，再说清什么该动。还要说清它将落在哪里：独立 HTML 页面、单个 SVG，还是 React/Next.js 组件，亮色还是暗色，因为各自的构建不同。eval 里的一条提示词展示了完整形状：一张给 Next.js 文档用的连接池图，10 个连接组成的池，请求借出再归还，10 个都忙时新请求排队，交付为一个 React 组件加一个静态 HTML 预览，暗色主题。

技巧

• 你不必点名这个 skill：当你要一张等轴测插图、一张给文档、博客或落地页用的解释图，或一个可交互的解释页时，Claude 也会加载它。
• 亮色是这个 skill 优先设计的主题，shader 也包括在内；每张图都有亮色和暗色两版。
• 在 Codex 里，沙箱可能会拦下检查所需的无头 Chrome。图仍然会被构建，只是检查失败——被询问时批准在沙箱外运行检查，这需要默认的 approval_policy = "on-request"。
• 对任何图要一个可打印版本，Anatomy 会写出它的 sheet.mjs；scripts/print.mjs 产出 A4 PDF——一页海报、一页技术图纸和两页解释稿。
• 最小的示例 dial-indicator 约 300 行；全部八个示例的构建产物页面都已提交，打开 examples/ 下任意 .html 就能试。

何时不用这个 Skill

README 的 Limits 一节说得很直接。它不是图表库：没有坐标轴、数据序列或数据图——数字以模型驱动的实时读数出现，也体现为零件的真实尺寸和数量。它画机器、仪器、工具和家具，不画人物或精确地图，没有机制可造的概念会画得偏弱。它是有意慢的：一张图要一个长会话，Raptor 示例的构建要几分钟，30 个零件的完整 3D 环绕审计要 15 到 20 分钟。Shader 需要 WebGL，在减少动态效果的设置下每张图都会静止，而 3D 模式是 beta——只在它的示例和一张测试图上验证过，尚未在生产图上验证。

查看 排行榜 了解更多 skill。