Anatomy 交互式机械原理图 Anatomy

把你想解释的原理变成交互图解

看过 Anatomy 的演示后，你可能也想做一幅这样的图：部件有清楚的结构，操作后会运动，旁边的读数跟着变化。真正需要想清楚的是，自己的主题该怎样变成一台能说明问题的“机器”。

这篇教程先带你观察一个官方成品，再尝试提出制作要求、修改结果，最后换成自己的主题。完成后，你应该能给 AI 一份具体的制作说明，而不只是说“帮我画得像演示一样”。

Anatomy 的核心是用机械结构表达原理。SVG 负责绘制部件；交互代码让部件和读数响应操作；有需要时再加入 WebGL 特效或实验性 3D。最终交付的是可以修改的代码，可做成独立 HTML、SVG 文件或 React/Next.js 组件。

示例说明： 安装和构建命令来自官方仓库，文中的百分表示例构建命令已实际运行。后文的制作提示词由本站编辑编写，尚未实际生成验证。它们用于示范怎样组织需求，不能保证得到与作者演示相同的结果。

1. 先看懂一个成品

先打开 Anatomy 官方演示页，选择一幅你感兴趣的图解。暂时不用研究代码，只观察三件事：画面是什么、操作改变了什么、这种变化说明了什么。

以仓库自带的百分表示例为例：滑台带着不同高度的量块移动，测杆接触量块，表针显示对应的变化。它的作用是把“高度变化如何变成读数”展示出来。部件、运动和数字共同讲解一个过程。

你可以照着下面的格式，记下自己看到的内容：

主题：百分表测量量块高度。
主要部件：量块、滑台、测杆、表针。
操作：移动滑台，让不同量块经过测杆下方。
画面变化：测杆位置和表针读数一起变化。
读者应理解：量块高度与测量读数的关系。

现在换一幅图，试着填出同样的五行。如果只能写出“画面很精致”，就再观察它的操作和反馈。后面给 AI 的要求，也需要包含这些信息。

2. 安装 Anatomy，运行一个可修改的示例

在 AI 编程工具中安装技能后，才能让它按 Anatomy 的方法制作图解。先准备 Node.js：工具包要求 20.10+，官方 README 记录的 skills CLI 1.7.1 要求 22.20+。使用下列安装命令时，建议准备 Node.js 22.20 或更新版本。

浏览器检查需要 Chrome 或 Chromium。只有输出 React 组件时才需要 React 18+。

1. 在终端安装技能。 根据安装器提示，选择你使用的 AI 编程工具。

   # 查看版本，再全局安装 Anatomy
   node --version
   npx skills add wheresryan22/anatomy -g

   若只安装给一个工具，可在末尾加 -a claude-code、-a codex、-a antigravity 或 -a opencode。去掉 -g 可改为项目级安装。

2. 下载官方示例并构建。 在准备存放示例的目录执行：

   # 下载工作副本，生成浅色主题的百分表示例
   git clone https://github.com/wheresryan22/anatomy.git anatomy-demo
   cd anatomy-demo
   node examples/dial-indicator/build.mjs --light

   工具包使用 Node 内置模块，无需在仓库执行 npm install。构建完成后，终端应显示 wrote dial-indicator-light.html。

3. 用浏览器打开文件。 在 Chrome 或 Chromium 中打开：

   anatomy-demo/examples/dial-indicator/dial-indicator-light.html

   移动鼠标，观察滑台和表针。按 Tab 键选中图解后，尝试方向键。能看到画面变化，就完成了第一次预览。不加 --light 时，输出文件名是 dial-indicator.html。

保留这份工作副本。它既能用于观察效果，也能帮助 AI 理解一个成品由哪些文件组成。

3. 把一个想法写成制作说明

假设你想在开发者文档中解释数据库连接池。“画一个连接池”还不够具体：AI 不知道你要讲连接复用、排队，还是性能监控。先确定读者看完后应该明白的一件事。

这里选择“连接数量有限，请求使用后要归还，忙时需要等待”。接着补上会影响画面和行为的信息：

需要说明的内容	本例怎么填写	为什么要写
讲给谁看	第一次接触连接池的开发者	决定文案深度和术语解释
核心原理	借用、归还、全部占用后等待	决定图解必须展示的过程
实际规则	10 个连接，先到先处理	让数量、读数和运动有依据
用户操作	添加请求、完成请求	让读者能主动观察状态变化
使用位置	文档中的独立 HTML 演示	决定交付形式和布局

有了这些信息，再让 Anatomy 设计合适的机械结构。你不必先画出每根管线和每个零件，但需要说清楚它们要表达什么。

把下面的提示词发给 Claude Code、Antigravity 或 OpenCode。Codex 中把 /anatomy 换成 $anatomy。其中 interactive 表示需要交互。

/anatomy
为首次接触数据库连接池的开发者制作交互图解，interactive。
我想讲清楚：连接数量有限，请求借用后归还，全部占用时需要等待。

使用教学参数：10 个连接，等待请求按先到先处理的顺序获得连接。
提供添加请求、完成一个请求和重置控件。
占用数、空闲数、等待数与部件运动使用同一套状态。

请先提出一个容易理解的机械结构，并说明各部件代表什么。
这一步只给结构方案，等我确认后再生成代码。
第一版计划使用 SVG、浅色主题和独立 HTML，不加 WebGL 或 3D。

收到方案后，先看“对应关系”是否成立：读者能分清连接和请求吗？等待的位置在哪里？一次操作能否展示借用或归还？不合适时，先改方案，再让 AI 做图。

4. 先做出能说明原理的第一版

结构方案确认后，继续发出制作请求：

按刚才确认的结构制作第一版。
先完成核心部件、交互和必要的中文说明，再细化零件。
保留键盘操作，并遵循系统的“减少动态效果”设置。
交付独立 HTML、源文件和实际预览方法。
说明哪些检查已执行，哪些尚未执行。

打开结果后，先试一次完整过程：添加请求、占满连接、继续添加、完成一个请求。观察等待中的请求是否获得释放的连接。这个过程帮助你判断画面是否真的解释了排队与复用。

只看数字正确还不够。请再看图中的运动是否容易理解。例如，读数显示“等待 1”，但所有请求都挤在机器里，读者仍然很难分辨“正在使用”和“排队等待”。这时需要修改表达方式。

可以这样反馈：

现在读数能显示等待，但画面里看不出哪个请求正在排队。
请把等待区域与正在使用连接的区域区分开，并添加简短标签。
当请求获得连接时，让它从等待区域移动到对应位置。
保留现有容量和排队规则，本轮只修改这部分表达。

反馈时写清楚“哪里看不懂”和“希望读者看出什么”，比只说“更直观一点”更容易得到可检查的修改。

5. 通过一次小修改，学会控制结果

先保存能正常运行的 HTML 和源文件。然后选一个改动，观察它会影响哪些部分。本例把连接数从 10 改为 6：

保留当前机械结构、观察视角和配色。
把连接池容量从 10 改为 6，标题改为“连接复用”。
同步修改状态计算、对应部件、控件范围和说明文字。
不要只替换显示出来的数字。
提供更新后的预览方法，并列出修改的文件。

打开新版本，连续添加 7 个请求。预期是 6 个占用连接，1 个等待；完成一个请求后，等待的请求应获得连接。检查画面与读数是否一致，再搜索说明里是否还残留旧容量。

这次修改要掌握的是：一个参数可能影响模型、图形和文字多个位置。 后面换成自己的数据，也要告诉 AI 哪些内容需要一起更新。

如果结果不对，把操作、实际结果和预期结果一起提供：

重置后连续添加 7 个请求。
实际结果：占用数显示 7，等待数为 0。
预期结果：容量为 6，应有 6 个占用、1 个等待。
请检查容量判断，保留布局和配色。

6. 换成自己的主题和产品

现在离开连接池例子，写一份自己的制作说明。先填完下面五行，再发送给 AI。方括号里的内容需要替换，不能原样发送。

读者：[谁会看这幅图，他们已经知道什么]
主题：[希望解释的原理或机器]
关键过程：[输入是什么，经过哪些变化，最后得到什么]
交互与反馈：[读者操作什么，部件和读数怎样响应]
用途与输出：[放在哪个页面，需要 HTML、SVG 还是 React 组件]

如果已经有产品资料，可以提供真实参数、术语表、结构说明和品牌色。参考图适合说明质感与布局，但还需要文字解释部件关系，不能只让 AI 猜一张图片的工作原理。

想换的内容	给 AI 的材料	需要重新检查的地方
主题或机器	核心原理、部件及其关系	机械结构能否说明新主题
数量、速度或阈值	真实数值、单位和变化规则	模型、运动和读数是否一致
品牌风格	品牌色、背景、最终文案	文字是否清楚，部件是否容易区分
输出位置	页面宽度、框架、静态或交互需求	手机端布局、代码和样式是否正常

先让 AI 给出“部件如何对应原理”的方案。确认后再制作第一版，沿用前面的观察与局部修改方法。

不确定自己的说明是否足够时，试着回答：不看标题，读者能从操作中看出什么变化？如果答案只有“零件动了”，就还需要明确这种运动代表什么。

7. 按用途选择特效和交付方式

基础图解成立后，再决定要不要增强效果。选择依据是它能帮助读者看懂什么。

需要表达的变化	可以选择	官方参考
部件移动、分解和读数变化	SVG 与交互	dial-indicator
火焰、水面或光照	SVG + WebGL	raptor-engine、ripple-tank
部件真正绕轴转动	实验性 3D	turning-dial

例如，讲解燃烧过程时，火焰可能有解释价值；只讲连接如何借用和归还时，可以先保留 SVG 交互。WebGL 特效应与图形的视角、位置一致，不支持 WebGL 时，基础画面仍应能说明原理。

交付形式也要提前明确。独立 HTML 适合单独预览；静态文章插图可用 SVG；已有 React/Next.js 网站可要求组件。SVG 文件本身不会自动包含 HTML 示例中的控件和交互逻辑。

接入 Next.js 时，可以发出以下请求。组件名是示例，不是 Anatomy 内置 API。

把已确认的图解接入我的 Next.js 文档页，组件名使用 AnatomyFigure。
保留现有模型和交互。
按 Anatomy 的 React 指南组织几何代码、静态图形和客户端交互，复制所需 kit 模块。
适配现有内容列宽，支持键盘操作和系统的“减少动态效果”设置。
给出本项目的预览命令，检查桌面与手机尺寸并说明结果。

常见问题与官方资料

安装后找不到 Anatomy？

检查安装时选择的工具和安装范围。项目级技能要在对应项目中使用。Claude Code 可尝试 /reload-skills；Antigravity、OpenCode 和 Codex 找不到时可重启。Codex 在 /skills 中查看，用 $anatomy 调用。

已经有 HTML，浏览器检查却失败？

确认 Chrome 或 Chromium 可以运行。找不到浏览器时，可以用 CHROME_PATH 指定可执行文件。运行环境对本地端口或临时浏览器配置的限制也可能阻止检查，可在本机终端运行后查看截图。

生成太慢，怎么办？

缩小第一版范围，先做一个核心机构。复杂管线、多层 WebGL 和 3D 会增加制作与检查时间。先确认讲解方式有效，再增加细节。

画面好看，但原理表达不清楚？

回到部件与概念的对应关系。指出哪个操作难以理解，以及读者应该看到的变化。优先调整结构、运动和标签，再修改颜色与装饰。

图中的读数能用于工程计算吗？

不能直接使用。先验证参数、单位、公式和规则。几何审计关注穿插、端点和遮挡，不代表验证了机器安全性或物理精度。

继续制作时，可查阅 README 与示例、技能说明、React 指南、WebGL 指南 和 3D 指南。作者展示的效果见 原始发布演示。