[Github] Anatomy – 把技术概念做成交互式等距图解的开源 Skill

Github发现2026-10-13发布 WarpEdit

Anatomy 是一个开源 Agent Skill，能让 AI 编程助手把技术概念做成可交互的等距图解：用锁的开合解释缓存匹配，用滑架和指针呈现数值变化，也能绘制带拆解效果的机械装置。它生成的是可修改的 HTML、SVG 或 React 组件，适合技术文档、博客和产品页面。读者能改变条件并观察结果；图解是否有用，取决于这些动作能否讲清概念本身。

Anatomy 主题封面：带滑架、量块、测杆与圆形表盘的等距精密仪器，标题为 Anatomy 和把技术概念做成可交互图解

从机制开始讲解

等距视角能同时看见物体的几个面。Anatomy 在这个视角下绘制底座、导轨、弹簧、旋钮、管路等零件，再把需要解释的关系放进机构里。缓存键匹配可以对应弹子锁：各个条件都对上，锁芯才转动；一个 GPU 上下文服务多个画布，则可以对应一台只有一个打印头、依次访问多个位置的龙门绘图机。

这类图的价值来自对应关系。锁上的每根弹子代表什么，哪个动作表示命中，条件变化后哪部分停止工作，都应该有解释。仅仅把方框换成立体机械，读者依然不知道系统如何运转。

仓库里的 dial-indicator 百分表示例很好理解：三块不同高度的量块装在滑架上，滑架移动时，测杆随下方量块升降，表盘指针和文字读数一起变化。图中的动作与读数由同一套模型驱动，适合观察“输入改变，输出跟着变”的关系。

Anatomy 官方百分表示例：带三块量块的滑架、测杆和圆形表盘，底部显示 block 2 与 14.0 px 读数 — Anatomy 官方百分表示例，当前停在第二块量块。移动滑架后，测杆、指针与文字读数随之变化。

三种输出怎样选

Anatomy 的主体是代码绘制的矢量图。普通机构使用 SVG 就能表达；火焰、水面或蒸汽需要不同的表现方式，才叠加 WebGL。选择时看要解释的动作，不必一开始就把所有效果加上。

形态	适合表现的内容	使用边界
SVG	实体零件、剖面、滑动机构、仪表读数；可交付独立 HTML、SVG 或 React/Next.js 组件	交互依赖页面或组件中的脚本；单独的静态 SVG 不等于完整交互页面
SVG + WebGL	在机构中加入火焰、尾焰、水面、光照等效果	着色器需要 WebGL；不可用时仍能显示 SVG 主体，效果会减少
3D（beta）	表盘真实转动、手指关节弯曲、零件脱落等三维运动	仍处试验阶段，不能据此当成成熟 CAD 工具或默认支持 GLB/glTF 导出

raptor-engine 示例展示了更复杂的一端：发动机可展开为 11 组组件，管路和线束留在同一等距空间中；点火时，SVG 发动机与试验架之间叠加 WebGL 尾焰。下面的官方图展示拆解状态，适合看组件之间的位置关系。

Anatomy 官方 Raptor 2 发动机拆解图：发动机组件、管路与线束分离悬挂在等距视角试验架中 — Anatomy 官方 Raptor 2 试验架示例的拆解状态，展示组件、管路和支撑结构。

放进普通文章时，截图只能保留一个状态。想让读者操作，需嵌入生成的 HTML 页面或集成相应组件；React 输出需要 React 18+ 环境。把页面截成 WebP 再插入正文，不会保留鼠标和键盘交互。

先打开一个实例

想判断这种图解是否适合自己的内容，可以先看仓库已提交的示例，不必先安装 Skill 或调用模型生成新图：

在 GitHub 仓库选择 Code → Download ZIP，解压到本地。
打开 examples/dial-indicator/dial-indicator-light.html。这是已构建的浅色百分表页面，可以直接用浏览器打开。
在图上移动指针，让滑架换到不同量块；也可以先点选图形区域，再用方向键切换。
对照量块、测杆、指针和右下角读数，观察它们是否同步。该示例的三个高度值为 18、14、10，读数以 px 表示模型中的位移，不能当成实物测量精度。

需要修改源码或重新构建时，在解压后的仓库根目录运行：

node examples/dial-indicator/build.mjs --light

命令会写出同目录下的 dial-indicator-light.html；刷新浏览器即可查看。这个示例使用 Node.js 内置模块，无需先执行 npm install。本文已验证这条浅色页面构建命令，新的图解生成质量仍取决于所用编程助手和具体任务。

安装与描述需求

Anatomy 需要能读取 Agent Skills 的编程助手。它主要为 Claude Code 编写，同时提供 OpenCode、Codex 和 Antigravity 的安装方式。工具包的构建要求是 Node.js 20.10+；README 对 skills CLI 1.7.1 标出的要求更高，为 Node.js 22.20+。使用下面的安装器时，应满足安装器本身的要求。

npx skills add wheresryan22/anatomy -g -a claude-code

-g 表示用户级安装，-a claude-code 只配置 Claude Code。OpenCode 可改为 -a opencode，Codex 可改为 -a codex。如果只给当前项目使用，可以省略 -g；不指定 -a 时，安装器会询问要配置哪些助手。也可以下载 ZIP，把仓库放到相应技能目录，并确保 anatomy/SKILL.md 存在。

安装后，Claude Code 和 OpenCode 使用 /anatomy，Codex 使用 $anatomy。助手没有识别新技能时，按其技能重载方式处理或重启会话。

提示词最需要交代的是机制、参数和交付位置。下面是用于说明需求写法的编辑示例，其中参数是示例设定：

/anatomy 解释一个容量为 5、每秒补充 1 个令牌、初始有 5 个令牌的令牌桶。
每次请求消耗 1 个令牌；不足时拒绝，请求被拒绝时不消耗令牌。
用一套可操作的等距机械装置表现补充、消耗和拒绝。
交付浅色独立 HTML，支持鼠标和键盘，显示当前令牌数。
先使用 SVG，不添加 WebGL 或 3D。

验收时可以连续发出请求，观察令牌是否减少、耗尽时是否拒绝，再等待补充，确认令牌数不会超过 5。这样的需求给出了可核对的行为，比只说“做一张漂亮的限流图”更容易判断是否解释正确。

Anatomy 本身采用 MIT 许可，工具包不要求单独配置绘图 API 密钥；生成过程依赖所用编程助手的模型服务，费用与额度由该服务决定，不能把“零依赖”理解成生成过程免费。