Isometric Explainer 是一个用于制作单页交互式等距机械图的技能。图形是一台放在工作台上的实体等距机器，机器的每个工位代表流程中的一个步骤。例如，请求卡片在传送架上移动、探针下落、压机盖章。一个纯状态模型决定每一次动作，因此画面、数字和文字彼此一致。templates/ 文件夹提供可运行的起步模板，kit/ 提供其使用的几何库。
用途
当概念是一个具有工位、顺序和失败模式的流程时使用，例如循环、流水线、缓存、队列、重试策略。当读者可以破坏某一部分并看到什么会失败时使用。当图形是页面主要内容时使用。
不适用的情况
如果静态图就能说明想法，应改用平面 SVG 图。如果概念没有顺序或状态变化，应改用静态图。如果图形只是课程或 README 中的小图，应使用同类技能 blueprint-figure。如果无法写出确定性的行为模型，不要对猜测做动画。如果任务需要超过 150 个零件且用户尚未批准该规模，也不适用。
方法
首先发明机器。写一句话：“X 经过 Y 移动，这一运动意味着 Z。”如果写不出来，就换一台机器。参见 references/concept.md。
在绘制前先在纸上清点零件数量，并选择层级。层级分为：Figure（40 到 80 个零件，无需批准）、Hero（80 到 150 个零件，无需批准）、Larger（超过 150 个零件，需先获得用户批准）。
先编写状态模型。让 model.mjs 保持纯函数和确定性，不涉及 DOM 和时钟。simulate(config) 返回事件列表和总计。在任何几何工作之前先测试它。参见 references/state-model.md。
将每个概念映射到一个工位。写一张表：工位、铭牌上的概念词、它做什么、没有它会失败什么。
编写零件清单。列出每个零件及其装配体、世界单位尺寸、色调以及是否移动。几何在清单之后进行。
设置相机。使用世界单位和单一等距相机。仰角设为 30 度。选择方位角，使工作面朝向观看者。让投影同时适配装配姿态和爆炸姿态。
一次性构建静态几何。每个零件成为一个带深度键的 SVG 组。移动件获得 data-live 钩子。参见 references/geometry.md。
通过平移实现动画。仅通过改变 transform 来移动零件。仅当形状改变时才重建路径，例如变长的杆。
从后到前绘制。按深度键加上当前偏移的深度对组排序。仅当顺序变化时重排 DOM。
使用一种强调色。恰好一种强调色标记活动零件及其铭牌。其余全部使用四种灰色调与四种线条色调。
添加能改变模型的控制项。运行、单步、破坏、修复、重置以及配置开关都作用于真实的 simulate 运行。将配置写入 URL。参见 references/live.md。
在无头浏览器中验证页面。在桌面和手机宽度、两种主题下截图。添加 4 倍特写、线端检查、零控制台错误的场景扫描以及联系表。参见 references/verify.md。
规则
真实性：状态模型是唯一事实来源。运动、读数、轨迹线和结果文本都来自其事件。相同配置的 simulate 返回相同事件，测试对每种配置组合证明这一点。绝不伪造真实模型、真实服务或真实指标。脚本化零件在页面文案中标注“fixed script”。每个带模拟计时的页面都显示一句以“This is a simulation.”开头的话，并说明时间是固定成本而非测量值。在模型中使用真实算术，测试断言页面打印的确切数字。
几何：所有坐标均为世界单位，像素只出现在投影中。仰角为 30 度，方位角全页固定，参考页使用 60。实体使用四个明暗带和一条轮廓线。线条使用 hi、mid、lo、faint 色调。每条线终止于实体或另一条线。故意留出松散端的线带有 data-free="start"、"end" 或 ""。每个工位带有雕刻铭牌，用大写显示其概念词，例如 CACHE 或 VERIFIER。搁在另一零件上的零件获得深度偏置，以便在其支撑件之后绘制。
运动：移动件仅改变 transform。形状改变的路径尽可能从缓存结果重建。一拍持续 0.1 到 1.3 秒，移动时间随距离增长。爆炸使用刚度 64、阻尼 14.2、每个装配体 0.04 秒错开的弹簧。将帧步长钳制为 1/20 秒，使慢帧不会跳过一拍。在减少动态效果模式下，运行速度加快 40 倍，爆炸直接跳到结束姿态。当舞台离开屏幕且无任何移动时，动画循环停止。
页面：工作台在桌面宽度下适配一屏：工具栏、舞台和读数在 100svh 内。手机宽度下页面堆叠且不横向滚动。按钮至少 44 像素高。舞台可获焦点，并有用于运行、单步、爆炸、破坏和修复的键盘按键。SVG 具有 role="img" 和命名每个工位的 aria-label。aria-live="polite" 区域在运行结束时宣布结果。
完成前检查
一句话机器陈述写在页面文案或构建说明中。零件数量符合批准的层级。模型测试通过，包括对每种配置组合的扫描。页面是构建脚本的输出，重建不产生差异。每个配置控件调用 simulate 并更新 URL。用 ? 参数打开 URL 可恢复相同配置。任意时刻恰好显示一种强调色，并跟随活动零件。每个工位在两种主题和手机宽度下都显示可读铭牌。线端检查报告零松散端。场景扫描将每种配置运行到底且零控制台错误。桌面和手机在明暗主题下的截图无裁剪、无横向滚动。爆炸姿态保持在舞台内。模拟说明句在页面上。
文件
references/concept.md：发明机器、一句话测试、概念映射、规模。references/state-model.md：模型契约、事件形状、测试、URL 状态。references/geometry.md：单位、相机、零件清单、kit 函数、明暗、深度键、铭牌。references/live.md：节拍时间线、绘制循环、排序、强调色、控件、无障碍、布局。references/verify.md：带脚本的无头验证循环。templates/model.mjs、templates/model.test.mjs、templates/build.mjs、templates/live.js：一个可运行的缓存机器。运行 node templates/build.mjs 写出 templates/out.html。运行 node --test templates/model.test.mjs 进行模型测试。kit/iso-kit.mjs、kit/lathe.mjs、kit/tube.mjs：投影、实体、车削体、管和基础 CSS。保留 kit/LICENSE 与 kit 一起。在 AI Engineering from Scratch 仓库内，还可参见 scripts/agent-machine/ 和 site/test_agent_machine.js，这是一个包含 57 个深度排序项的完整 hero 构建。