01 / 从想法到输出
一个可以照着做的流程
先给机制，再谈画面
以限流器为例，先明确容量、补充速率以及超额请求的去向。可用的输入是“容量 5，每秒补充 1 个，空桶时拒绝请求”。这些规则决定画面如何运动。先把机制说清，才能判断漂亮的机械图是否真的解释了问题。
选择一个足够小的交付物
第一轮可以只交付一个可交互 HTML。先在浏览器里确认，再接入网站。一起索要一个静态状态，用作封面、减少动态效果时的回退，也方便在动画完成前检查构图。不要一开始就把复杂场景、三维旋转和成片导出放在同一个请求里。
用操作验证解释是否成立
分别测试空、满和中间状态。每次只改一个输入，同时检查机构、数字读数与说明文案。如果界面说“空了”，画面却仍然发放令牌，说明状态没有统一。除了鼠标，也要验证键盘能否触达操作，以及失焦后是否还在无意义地运动。
先解释正确，再编排成片
交互页面允许任意探索，视频需要明确的观看顺序。一个 12 秒小样可以依次展示完整装置、消耗容量、请求被拒绝、容量恢复。为每一步指定时间，让画面在给定时间点可重现，再尝试导出 MP4。这里的时间线与导出需要另外实现。
02 / 从这里开始
复制后，换成自己的任务
下面是本站编写的完整示例请求。先替换输入材料与交付规格，再发给 Agent。它不是展示案例作者的原始提示词，也不保证一次生成相同作品。
/anatomy 用一个可交互机械装置解释令牌桶限流。容量 5，每秒补充 1 个令牌，上限为 5；一次请求消耗 1 个，空桶时拒绝。交付独立 HTML 和安静的静态状态。机构与数字读数使用同一状态模型。提供键盘操作、减少动态效果模式，以及空桶、满桶、补充的测试案例。先提出机构方案与输出文件清单。真实素材、要解释的机制、已核实的数字。
独立 SVG / HTML · 明确尺寸、时长和文件。
静帧 → 小样 → 完整输出 → 独立播放或操作。
03 / 看懂一条作品
静态结构与动态机制
这两张官方示例图展示了不同的检查目标。静态展开图关注遮挡、连接和空间关系；点火状态关注画面层次与效果的一致性。制作自己的讲解时，先确定观众需要读懂哪一层，再安排动画，不要让所有部件同时争夺注意力。
04 / 检查与修正
效果不对时，先查这些
部件很漂亮，机制却不对
先写出预期的状态变化，再修改画面。用最简单的输入序列测试，让读数和运动从同一模型计算。
复杂结构读不清
分别检查闭合状态与展开状态。减少同时运动的部件，突出当前工作的组件，放大检查接合处。不要用更多运动弥补讲解顺序不清。
在线可操作，导出时不动
把依赖指针的动作改成编排好的输入序列。验证两次请求同一时间点能得到相同姿态，再录制或逐帧渲染完整片段。
常见问题
安装后能直接生成 MP4 吗？
Anatomy 负责图解和交互。HTML 可以直接嵌入网页；MP4 需要额外的录制或渲染流程。在需求中把这两个交付件写清楚。
这里的演示是谁做的？
它们是作者以 MIT 发布的完整示例，本站保留署名并托管演示。嵌入文档增加了 noindex 标记；这些机器不是本站生成的，工程参数也未由本站独立验证。
什么时候值得加 3D？
当解释依赖于部件在空间中的旋转时再使用。仅需展示状态变化的流程，可以先从 SVG 开始。增加几何复杂度前先在手机上检查性能。
来源与展示说明
工具能力与安装信息以原项目为准；本文中的创作流程、示例请求和检查建议由 Hermes 编辑编写。推荐不等于完成了全部工具实测。
Anatomy · official interactive collection ↗Source, examples & MIT license ↗