跳至正文
Skills — Anatomy：让 Coding Agent 用交互式装置解释技术原理

Anatomy：让 Coding Agent 用交互式装置解释技术原理

Anatomy 官方介绍

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 版本）。

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

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

阅读前先看这几个词

英文术语中文名称简要解释
Anatomy保留原名（项目名称）生成技术插图的 Skill 及其配套绘图工具
Agent Skill智能体技能Agent 按任务读取的说明、代码和参考资源
isometric illustration等距插图用平行投影表现物体体积的插图风格
SVG可缩放矢量图形用路径和形状描述图形，适合精细线条与结构
WebGL保留原名（浏览器图形 API）在浏览器中利用 GPU 绘制火焰、光等效果
geometry audit几何检查检查已记录零件的穿透、连接和遮挡关系
Custom Elements自定义元素可通过自定义 HTML 标签使用的网页组件
LRU cache最近最少使用缓存容量不足时淘汰最久没有被访问的条目

它提供了什么

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

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

需要区分两个仓库：

入口用途什么时候选它
anatomySkill、绘图 kit、参考材料、检查脚本与源代码示例希望 Agent 为自己的主题制作新插图
anatomy-figures作者已制作的交互插图组件库已有插图恰好能解释所需主题，希望直接嵌入

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

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

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

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

概念作者选择的装置读者观察什么
LRU cache有上下两层的书架命中后调整顺序，未命中时取书，容量不足时淘汰
Message queue弹珠轨道任务排队，按顺序经过控制机构
Mutex两台泵、水箱和钥匙只有持有钥匙的一方可以进入临界区
Bloom filter三个转轮和一排标志位多个 hash 对应的标志位共同决定查询结果

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

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

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

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

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

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

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

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

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

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

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

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

WebGL 与 3D 分别解决什么

方式主要用途实现与边界
SVG零件、线条、仪器与大多数算法类比用路径、填充和排序表现体积
SVG + WebGL火焰、水、气流、光与等离子体shader 与 SVG 共用相机参数，并通过图层或几何遮罩表现遮挡
3D beta需要在深度方向转动的部件转动部分每帧重新投影、着色和排序，仍保留 SVG 风格

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

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

检查脚本能保证到哪一步

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 小时，均包含复核修正。这些是作者记录，不是本次实测或交付承诺。制作时间

适合哪些场景

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

场景适合解释的内容判断是否值得做
技术博客与开发者文档缓存淘汰、排队、互斥、重试与限流一次输入是否能显示一个明确的状态变化
教学与课程算法步骤、传动、波与时间变化读者能否先预测结果，再通过操作核对
产品机制介绍请求如何经过某个装置，参数如何影响输出能否用一个小机制讲清关键行为
机械或科学科普拆解、旋转、流动与可量化关系是否有可靠参数，是否能清楚限定简化条件

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

怎样开始使用

先体验已有作品

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

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

让 Agent 制作新作品

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

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

sh
# 只列出可安装的 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 的要求重新加载技能，再提出制作任务。以下是本文建议的任务示例，尚未实际生成：

text
/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。然后检查动画和读数是否表达同一结果。调用入口

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

直接复用组件

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

sh
npm install anatomy-figures@0.1.0
tsx
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

进一步阅读

本文共 3706 字，创建于 Oct 13, 2026

相关标签：Tools, Skills, AI, Agent, ByAI, 项目分析

博客助手

正在打开博客助手…