Anatomy（等距交互插画技能）

技能介绍

Anatomy 是一个把技术概念画成「真实物理机器」的等距（isometric）插画技能：沉重的底座与支脚、带刻度尺的导轨、轴套上的滑块、滚花旋钮、线圈弹簧、会转动的指针式仪表、化作小圆点的螺丝——读者因为认得这台机器，也就理解了背后的想法。图上显示的每一个数字，都来自驱动零件运动的同一个模型。

技能自带 8 个完整示例与一整套绘图工具箱（kit）、WebGL 着色器层与验证脚本，输出高细节、可交互的 SVG 插画，支持无框架 TypeScript/JavaScript 与 React/Next.js。

适用场景

• 为文档、博客、落地页或文章制作解释性插画/图示
• 需要「Linear 风」或高质感技术制图时
• 画系统、算法或组件工作原理的交互式解释图
• 用户想要等距插画（即使没说 "isometric"）
• 需要给插画加真实感 WebGL 特效（火焰、尾焰、水波、焦散、灯光）

核心能力

核心理念：物件即解释。 不画方框、箭头和标签，而是发明一台做工精良的真实机械，让它的工作方式就是概念本身。原文给出的概念→物件映射示例：

常见失败有两种：太抽象（堆叠板、浮空块、贴标签的方框，看不出是什么）和太扁平无聊（一大块板加几根线，没有体积和可发现的细节）。解药相同：一台可辨认的机器，由许多小而精确、各司其职的零件构成。每一件作品都高度精细，哪怕只是小想法、快问快答，也是一台密集真实的机器，绝不是几块板。

工艺规则（精选）：

• 实体而非线框：每个零件填纸色、按序绘制，前面的挡住后面的，不用虚线画隐藏边。
• 色调层级：底座与脚 lo、结构 mid、主体 hi，恰好一个 lit 强调色（读者该盯的那个零件）。
• 线条有交代：每根线终止于一个面、另一条线或端点圆点；没有引线、气泡、尺寸箭头。
• 管线电缆绝不穿过任何物体，遮挡关系用 A.settle 真实深度证明，不靠肉眼调。
• 曲面平滑着色，不出现色调阶梯；纹理终止于真实边缘或淡出。
• 着色器永不跳变：uniform 带起落包络，相变用交叉淡化，效果在世界空间、同一相机下渲染。

效果预览

以下截图均为 examples/ 页面的浅色主题，由技能自带的 scripts/capture.mjs 与 scripts/drive.mjs 截取。

examples/raptor-engine，浅色主题，点火状态。发动机与试车台是 SVG；尾焰是在同一等距相机下运行的 WebGL 着色器。

raptor-engine：悬停即分解为 11 个总成。审计证明无论静止、分解还是其间每一帧，管线都不穿过任何物体。

ripple-tank：SVG 实验装置叠在两层 WebGL 之上（纸面上的灯光与焦散、水面反射），由色散与光学模型驱动。

turning-dial：3D 模式（beta）。拖动旋钮时约 90 个零件每帧重新投影、重新着色。

dial-indicator：最小示例，约 300 行。悬停滑动滑架，指针读出每块量块。

工作方式

按顺序工作，几何之前先写概念与零件清单，大部分质量在那里决定：

1. 先定尺寸：Figure（单机构，40–80 零件，最多一层 WebGL）直接做；Hero（密集物体/3D，80–150 零件，约 2–4 小时）先说明再做；Epic（整车/整厂/多主体 3D，6 小时以上）只估算并提议 Hero 版，用户选择后才做。第一小时内必须有能在浏览器打开的页面。
2. 真实优先：收集被解释对象的真实数值与行为（尺寸、数量、阈值、曲线），读数、运动、说明文字都必须真实；尽量把模型写成纯模块（如测试台示例的 rig.ts）。
3. 发明物件：选一台机构与概念一一对应的机器/工具/仪器/家具，用一句话说清什么在动、运动意味着什么；不抄参考图。
4. 零件清单：至少 40 个零件，分组为底座、结构、机构、控制件和主体（主体是唯一被打光的零件），每个零件都搭在另一个零件上。
5. 规划世界：世界单位约 1 px，x/y 在地面、z 向上；默认方位角 45°、仰角 30°，用 fitProjection(points, width, height, { pad, azimuth }) 取景。
6. 几何只建一次：用 kit 预计算所有静态路径（slabOf、cylinder、extrude、knurl、coil 等）；旋转件走 kit/lathe.mjs，管线电缆走 kit/tube.mjs；运动件在静止位建一次、用 translateAlong 移动。
7. 由后向前、由下向上绘制：用 depthOf 排序；包住别的零件的东西拆成前半/后半；有管线后用 A.recorder 记录形状、A.settle 测真实深度、A.auditOrExit 收尾审计。
8. 装框：卡片左上 Fig n、右上短标题、左下交互提示、右下实时读数，卡片下方放图例与真实说明文字。
9. 让它活起来：指数跟随或真实弹簧的平缓动画，空闲时循环导览，支持指针/键盘，离屏停止，reduced motion 下静止。
10. 像批评家一样验证：用 scripts/capture.mjs 截桌面/手机/悬停/动画瞬间；node build.mjs --audit 跑到零错误；node scripts/lines.mjs page.html --out shots/lines.png 打印 line ends: 0；两套主题下做 4× 特写检查每个接头。

你需要提供

• 想解释的技术概念或系统（及其真实数值/行为）
• 使用场景（文档 / 博客 / 落地页 / 交互解释页）与目标尺寸（Figure / Hero / Epic）
• 技术栈偏好（无框架 TypeScript/JS 独立页面，或 React/Next.js）
• 环境：Node.js 20.10+，以及用于检查的 Chrome 或 Chromium

你会获得

• 一张高细节等距 SVG 插画（含卡片框、标题、交互提示、实时读数）
• 独立 HTML 页面或可嵌入 React 组件的静态美术 + 交互逻辑
• 可选 WebGL 特效层（火焰/尾焰/水波/焦散/灯光/蒸汽）与可选 3D 旋转模式（beta）
• 经 --audit 几何审计与线端检查（line ends: 0）验证的成图

使用示例

技能自带 8 个完整示例，动手前先打开最接近的一个。无框架示例用 node examples//build.mjs 构建（加 --light 切浅色主题）：

• examples/dial-indicator/ 最小：支架上的仪表，约 300 行
• examples/desk-computer/ 桌面电脑，可在键盘上打字，CRT 屏幕显示输入行，约 85 个实体、850 条路径
• examples/arcade-cabinet/ 街机柜剖切：硬币投币、沿缆线传脉冲、CRT 开机自检
• examples/raptor-engine/ 火箭发动机测试台：11 个总成分解爆炸、WebGL 尾焰，是管线密集与着色的标杆
• examples/ripple-tank/ 学校涟漪水槽：两层 WebGL（灯光焦散、水面反射）由纯色散模型驱动
• examples/test-rig/ 生产级图（React/Next）：弹簧滑车上的玻璃按钮 + 探针 + 仪表，53 个实体、约 470 条路径，是绘图质量标杆
• examples/spot-plate/ 点样板：玻璃液滴用距离场绘制，近距融合
• examples/turning-dial/ 可选 3D 模式：真 3D 旋转的密码盘 + 机器人手，约 90 个活动零件

常用命令（原样保留）：

node examples/<name>/build.mjs
node examples/<name>/build.mjs --light
node build.mjs --audit
node scripts/lines.mjs page.html --out shots/lines.png

工具箱一览（kit/）：

参考文档：references/craft.md（工艺与零件词汇）、references/kit.md（API）、references/motion.md（动效）、references/react.md（React 拆分）、references/verify.md（验证清单）、references/webgl.md（着色器）、references/walkthrough.md（测试台设计实录）、references/3d.md（3D 模式）、references/publish.md（发布到社区画廊，仅用户要求时）。

兼容性：为 Claude Code 编写，也可运行于 Antigravity、OpenCode、Codex 与 MiniMax Code。