Anatomy 是一套让 Coding Agent 制作技术插图的 Skill（官方介绍）。给它一个概念，例如“LRU cache 怎样淘汰条目”，它会选择一个能表现这套规则的实体装置，再生成可操作的网页代码。读者通过移动、点击或按键，观察装置怎样工作。

[!info] AI 参与说明（Agent：Codex）
本文根据作者网站、Anatomy 与 anatomy-figures 公开源码协助调研、整理和校验，资料核验于 2026-10-13；中文正文使用 humanizer-zh 编辑。Anatomy 源码锁定为提交 454a0ef。

运行记录：模型 gpt-6.1-sol，reasoning effort ultra，执行入口 Codex Desktop，提供方 openai；CLI 版本 0.162.0-alpha.17.2（不代表桌面 App 版本）。

它把抽象规则变成可观察的动作：最近访问的书移动到书架左端，缓存满了就把最右端的书送回下层。读者既能看见命中和淘汰，也能操作输入并检查结果。

1. 阅读前先看这几个词

2. 它提供了什么

Anatomy combines agent instructions, a drawing kit, reference examples, and verification scripts. 它把制作过程交给 Coding Agent：理解题材、选择装置、编写模型、搭建几何、实现交互，再检查结果。生成物是项目中的 SVG、HTML、TypeScript 或 React 组件代码（SKILL.md）。

SKILL.md 是入口，详细参考材料按制作步骤需要读取，绘图 kit 则提供实际运行的代码。这种组织方式把写作与设计要求交给 Agent，将投影、几何和检查交给可重复执行的程序；它的能力来自这几部分配合（参考材料入口）。

需要区分两个仓库：

作者主要用 Claude Code 制作展示作品，当前 Skill README 也给出 Codex 安装与调用方式。作品成形之后由浏览器运行本地的模型和绘图代码；从已检查的组件源码看，运行交互无需再调用远端 AI。Agent 的模型服务与计费属于制作阶段的条件，不能由此推断制作免费（Skill README、组件库）。

截至整理日，Collection 列出 52 项：22 项 SVG、10 项 WebGL、1 项 3D，以及 19 项 early examples。主页的 33 项对应前三组，浏览完整作品应进入 Collection。

3. 原理一：让装置的动作对应概念的规则

它的设计规则可以概括为：先写清“什么在动，这个动作意味着什么”，再开始画。对于真实机器，表现的是机器自身的结构；对于算法和系统概念，需要设计一个行为对应的类比装置（Craft 规则）。

类比是否有用，取决于装置的行为能否对应概念的规则。以 LRU cache 为例，“书架有四个位置”只是容量说明；命中后把书移到左端、满额时从右端淘汰，才表现了 LRU 的规则。类比没有覆盖的行为仍需正文补充，不能让画面暗示系统还具备未建模的能力。

4. 原理二：图形、动画和读数共用一个模型

The motion and the readout are derived from the same model. Skill 要求先收集真实参数与规则，将它们写入一个小模型，再让零件位置、动画、数值和说明读取这个模型（Workflow）。

下面的流程根据源码职责整理，图中的分支表示共用数据：

flowchart TD
    A[概念与一手资料] --> B[明确行为、参数与适用范围]
    B --> C[编写共享模型]
    C --> D[选择对应装置，列出零件]
    D --> E[建立坐标、相机与 SVG 几何]
    E --> F[计算状态变化]
    F --> G[更新零件与动画]
    F --> H[更新读数与可访问文本]
    G --> I[geometry audit、线端检查与截图复核]
    H --> I
    I --> J[修正后交付网页或组件]

这在仓库中有具体实现。dial-indicator 示例让测头、表针、数字和 aria-valuenow 使用同一个位移状态；ripple-tank 的模型计算波数、波长、相速和群速，再供图形与读数使用。这样修改参数时，图形、动画和读数能够一起变化（dial-indicator、ripple-tank/model.mjs）。

共用模型能减少“动画与数字对不上”的问题，但模型本身仍可能错误。公式、单位、输入条件与类比范围需要单独核验。

5. 原理三：用三维坐标组织零件，用 SVG 表现结构

多数插图先在世界坐标中组织零件，再经正交投影生成屏幕上的 SVG 路径。远处的零件不会因为距离而缩小，平行线仍然平行，适合阅读机械结构。静态路径提前计算，运动优先更新变换，形状发生变化的部分才重新计算（iso-kit.ts）。

作者以 isometric 命名这种视觉风格；默认相机方位角为 45°、俯视角为 30°，严格数学分类属于 dimetric。称它为“类等距的正交插图”更准确，并非所有作品都采用标准等轴投影（作者的相机说明）。

SVG 的遮挡来自绘制顺序：后画的覆盖先画的。如果弹簧绕着一根杆，弹簧后半段应先画，杆居中，弹簧前半段最后画；一整根弹簧不能用一个排序位置同时满足这两个关系。Anatomy 的 kit、拆分规范和 geometry audit 用于处理这类问题（kit.md）。

它的线稿规范包括实体填充、分档侧面阴影、较亮的顶面，以及引导注意力的少量强调色。这些约束写入 Skill 与参考材料，用于帮助 Agent 保持相近的视觉语言（craft.md）。

6. WebGL 与 3D 分别解决什么

WebGL 与 3D 是分别选择的能力。提示词中的 interactive 请求交互，WebGL 请求 shader 效果，3D 请求真正的深度转动。选择方式应由解释需要决定：讲缓存顺序通常用 SVG 就够了，讲火焰和气流可能需要 WebGL，讲季节的地球姿态才需要考虑 3D（SKILL.md）。

SVG 和 WebGL 无法直接共用一个深度缓冲区，配套规范提供后层 SVG、canvas、前层 SVG 的组合；具体作品还可用 shader 中的几何遮罩处理遮挡。3D 模式要求转动的几何为凸零件，凹物体需要拆分，循环遮挡仍需处理（webgl.md、3d.md）。

7. 检查脚本能保证到哪一步

geometry audit 读取零件的几何记录，检查管路距离、端点连接、支撑、屏幕重叠区域的前后顺序，以及拆解过程中的部分姿态。另有线端检查，补充几何记录看不到的 SVG 线条问题；截图和放大检查用于发现接缝、明暗、动作突变等视觉问题（audit.mjs、lines.mjs、verify.md）。

The audit checks recorded geometry with sampling and tolerances. 源码中的重叠检查、距离检查与运动检查使用采样步长和数值阈值。因此，“检查通过”应限定在所记录的几何、检查姿态和阈值范围内；它不能替代工程级 CAD 碰撞分析，也不验证讲解的算法、物理参数或结论是否正确。这是根据检查实现作出的范围判断（overlapsOf 与 clearances）。

制作时间也主要花在复核。作者报告的 Watch 完整制作约为 1 小时 54 分钟，Raptor 为 10 小时 33 分钟，Turbofan 为 14 小时，均包含复核修正。这些是作者记录，不是本次实测或交付承诺（制作时间）。

8. 适合哪些场景

以下使用建议基于现有作品和实现范围：

如果问题主要是“哪些服务相连、谁调用谁”，流程图或 sequence diagram 更直接；如果要比较几十组数据，统计图更合适。Anatomy 侧重精细的实体装置。需要快速出图、精确工程设计或大型场景建模时，它的制作成本和能力范围都不适合。

9. 怎样开始使用

9.1. 先体验已有作品

建议先打开 LRU cache，通过 A–J 选择书，观察上层四个位置的顺序以及下层取回动作。再看 Message queue 和 Mutex，比较它们怎样用装置表达不同规则。

本次打开了 LRU cache 的实际页面，确认书架、实时读数和键盘操作入口能够呈现；没有用 Skill 生成新作品，也没有运行上游完整 geometry audit。

9.2. 让 Agent 制作新作品

在希望保存插图的代码项目中执行，需已安装 Node.js、npm 和对应 Coding Agent。下面是项目范围的安装示例；Skills CLI 的参数已通过 Context7 对照当前官方 README 核对，本次未执行安装（Skills CLI README）。

Anatomy 本地构建与检查脚本要求 Node.js 20.10 及以上；自动截图等步骤还需要本地 Chrome 或 Chromium。安装 Skill 只是准备资源，制作时仍需要 Agent 执行代码、浏览器检查并修正结果（运行条件）。

# 只列出可安装的 Skill
npx skills add wheresryan22/anatomy --list

# 选择所用 Agent，执行对应的一条安装命令
npx skills add wheresryan22/anatomy --skill anatomy --agent claude-code
npx skills add wheresryan22/anatomy --skill anatomy --agent codex

Claude Code 使用 /anatomy，Codex 使用 $anatomy。安装后按所用 Agent 的要求重新加载技能，再提出制作任务。以下是本文建议的任务示例，尚未实际生成：

/anatomy explain how an LRU cache evicts entries, interactive.
Use a capacity of 4 and keys A through J.
Make the MRU-to-LRU order and hit/miss readout visible.
Use a shared model for the motion and readout.
Deliver a browser page with keyboard controls and reduced-motion support.

在 Codex 中将首行的 /anatomy 换成 $anatomy。验收时先用确定的访问序列检查规则：依次访问 A、B、C、D，随后访问 B，再访问 E。容量为 4 时，B 应成为最近访问项，加入 E 时应淘汰 A。然后检查动画和读数是否表达同一结果（调用入口）。

这比只要求“画一个漂亮的缓存图”更容易验收。题材、参数、输出载体与通过标准都已写清；复杂机器还应先收窄到一个需要解释的子机制。

9.3. 直接复用组件

如果现有作品已经合适，可以使用 anatomy-figures。本次核对 npm 包版本为 0.1.0，以下实现说明对应其发布关联提交 d4590e3。在已有 React 18 及以上的项目中安装，再按独立入口导入，避免把全部作品都打包进来（package.json）。

npm install [email protected]

import LruCache from "anatomy-figures/lru-cache";

export default function CacheExplainer() {
  return <LruCache theme="light" />;
}

这段 TSX 用于已有 React 客户端页面，预期显示交互式书架；本次只核对包接口与实现，未安装运行此示例。源码核验表明 React wrapper 在客户端挂载图形，服务端输出占位容器；能够输出服务端 HTML，并不表示图形本体已经完整 SSR（React wrapper）。

不使用 React 时，新系列作品提供 Custom Elements，例如导入 anatomy-figures/element/lru-cache 的 define，调用后使用 <anatomy-lru-cache>。19 个 early examples 的内部实现仍依赖 React，不能把所有自定义标签都当作完全无 React 的组件。新系列提供五种主题和细粒度 tokens；early examples 的主题覆盖较少，应以组件库说明为准（组件库 README）。

Skill 和组件库均采用 MIT 许可。实际复用时仍须保留相应版权与许可说明（Skill LICENSE、组件库 LICENSE）。