Anatomy：让 Claude 把一个技术概念画成可操作的机器

这条能力最近因为一段 Falcon 9 交互演示受到关注。视频画面里，左侧是带拆解视图的火箭模型，右侧同步显示部件名称、尺寸、质量、发动机和推进剂等说明；底部有暂停、倍速、反向和拆解控制。演示由 @slashui 发布，原帖引用了 @0xMovez 对 Anatomy 的介绍。

原帖视频 GIF：Anatomy 生成的 Falcon 9 交互式等轴测图，画面包含拆解控制、部件列表和实时说明面板。

01　它先设计一台能解释概念的机器。

Anatomy 的核心规则只有一句：让物体本身承担解释工作。输入“解释一个令牌桶限流器”时，skill 不先画几个方框和箭头，而是把机制映射成一个可观察的实体。官方示例里，缓存键被映射成只有所有销钉对齐才会转动的弹子锁；共享 GPU 上下文被映射成一台依次访问多个工位的龙门绘图机。

这一步决定了图形能否讲清楚机制。每个部件要有位置、形状和动作，读者通过“哪个部件在动、它推动了什么、读数怎么变化”理解算法或系统关系。图上的数字也由同一个模型驱动运动和读数，避免动画与说明各自编一套逻辑。

官方 SKILL.md 要求先收集真实的数量、阈值、曲线和行为，再写部件清单。一个 Figure 通常规划 40–80 个部件，较大的 Hero 规划 80–150 个部件。支撑板、导轨、弹簧、旋钮、管线和读数盘都服务于同一个机制。细节来自结构关系，空白区域不靠装饰填充。

02　SVG 负责结构，交互让结构开始工作。

SVG 是 Anatomy 的基础层。仓库提供等轴测相机、实体、圆柱、管线、线框、刻度和文字等绘图组件；生成结果可以是独立 HTML、单独 SVG，也可以接入 React 和 Next.js。模型先在静态位置建立几何，再把需要移动的部件放进明确的动画槽位。

交互层处理的是“读者如何检查机制”。官方示例支持拖动、按键减速、展开部件和实时读数。Falcon 9 演示里的拆解按钮，把火箭从整体切换到分部件观察；部件列表和右侧说明面板跟着当前视图变化。对教程、产品文档和技术博客来说，这比一张静态结构图多了一层操作证据。

原帖视频关键帧：画面显示 Falcon 9 的局部部件与“GRID FINS”说明，右侧同步给出数量、材料和尺寸。

它采用“从后向前绘制”的深度顺序，管线、弹簧和被遮挡部件按真实空间关系分层。对象一旦发生移动，绘图顺序也需要随位置变化；这正是普通 SVG 动画容易露出穿插和遮挡错误的地方。

03　WebGL 用来补足 SVG 难以表达的现象。

当解释对象包含火焰、尾气、水面反射、蒸汽、光照或焦散，Anatomy 可以在 SVG 结构中加入 WebGL 层。官方示例把 WebGL 画布夹在前后两层 SVG 之间，所有效果仍沿用同一套等轴测相机；关闭 WebGL 时，基础 SVG 仍能读懂结构。

这套分层方式把“物体是什么”和“现象如何发生”放在同一幅图里。发动机、支架和管线由 SVG 保持可检查的实体关系，火焰、冲击波和蒸汽由 shader 表现。光效因此服务于机制解释，页面也保留了没有 WebGL 时的基本信息。

04　3D 模式把“拆开看”推进到空间运动。

仓库还提供可选的 3D 模式。官方示例中的旋转拨盘包含金属部件、铰链、可抬起的手指和能够脱离主体的部件；这些对象会在每一帧重新投影和着色。帖子里“可以旋转、检查、探索”的说法，指向的就是这类交互式部件运动。

当前仓库把 3D 模式标为可选能力，README 也把它放在独立的 3D 章节中。使用者需要把它看作 Anatomy 的扩展路径：先让核心机制在 SVG 中成立，再决定某个部件是否真的需要深度旋转、铰接或脱离。整台复杂设备全部改成实时 3D，会增加几何、性能和验证成本。

05　它把几何审计也放进了生成流程。

Anatomy 的差异还在于验证脚本。仓库提供的审计工具会检查部件是否相互穿透，也会检查管线端点是否落在真实安装位置。

它还会检查弯管是否折叠，以及部件重叠时的绘制深度。浏览器脚本会驱动页面，截取慢动作和接触表，检查线段是否悬空。

这套工作流把交互图的验收对象收窄为部件关系。对于建筑可视化、产品说明和复杂系统教学，读者可以检查对象层级、动作来源和模型读数。修改后也能重新运行审计。

Anatomy 目前适合解释机制和关系。它可以把一个算法、系统或组件变成读者能操作的图形对象；当任务进入精确 CAD、BIM 构件交付或工程制造，还需要另外的几何标准、参数约束和专业软件链路。

SOURCES

Anatomy 官方网站与 GitHub 仓库。

X：@slashui 原帖与 @0xMovez 引用帖。

原帖视频：Falcon 9 交互式等轴测演示。