成品：先看这台机器
✦直接在这一页里操作。默认自动跑 28 秒四幕，手动拖任意滑块就会停下交给你控制。
左上角三条方程不是贴图，每一帧都在算：转子位置、屏幕读数、过热时的红橙辐射，全部从同一个 state 里取。这是文章里最硬的一条规矩——零件与读数共用一个物理模型，不是各画各的。
28 秒里发生了什么
✦文章给 Machine-Skill 定的自动电影运镜，四幕循环。可以点成品下方的幕号直接跳过去。
影棚环视
软箱光下的完整机身：钛合金外壳、散热筋、两端轴承盖。先让人看清这是一台什么机器。
动态剖切
局部裁剪只作用于外壳、定子套筒与螺母；切开后内部滚柱与丝杠保持完整咬合，继续自转公转。
爆炸 + X-Ray
每个子装配体绑真实装配轴：端盖沿 ±Z 退开、滚柱径向舒展，配合外壳玻璃化，看动力传递路径。
过载破坏
推过 14.0 kN 额定值到 134%，摩擦生热飙到约 280°C、效率跌到约 42%，触发热抱死与螺纹屈曲告警。
第四幕的读数不是写死的动画：把载荷滑块往右拉，温度按一阶惯性爬升、效率随温度和超载下滑、推力跟着掉，滚柱和绕组一起亮起热辐射。本页实测停在 19.6 kN / 278 °C / 43%，与原文的 19.6 kN / 280 °C / 42% 基本对上。
这台机器用的是哪个 skill
✦文章里同时介绍了两个开源 Agent Skill，本页对应的是专攻 3D 硬件的 Machine-Skill。
AirsupHQ / machine-skill
Agent Skills · SKILL.md单文件 HTMLThree.js一句话描述任何一台真实机器，Agent 按 Research → Build → Solve → Film 四步，输出一个完全自包含、无需打包的 .html：影棚级 3D 数字孪生，带工程 PBR 材质、实时剖切、装配轴爆炸、X-Ray、过载破坏求解，以及 28 秒四幕自动运镜。
查尺寸与方程
先把真实几何、材料与驱动方程研究清楚，不是凭手感建模。
影棚建模
Three.js 物理材质还原钛壳、紫铜绕组、黄铜保持架，绑好装配轴。
实时求解
纯函数 stepPhysics(state, dt) 每帧推进，零件、读数、热辐射同源。
四幕运镜
环视 → 剖切 → 爆炸透视 → 过载，28 秒自动循环。
npx skills add AirsupHQ/machine-skill -g
npx skills add wheresryan22/anatomy -g/machine-skill Build a 3D interactive simulation of a planetary roller screw actuator
(8 threaded rollers, copper stator windings, titanium housing) with live cutaway plane,
coaxial/radial exploded view, and thermal seizure overload mode.原文的安装命令是 npx skills add AirsupHQ/machine-skill -g；支持 Claude Code、Antigravity、OpenCode、Codex。文章也提醒：skill 对 Claude Code 以外的 Agent 兼容性一般，官方 Demo 效果最好。
那 Anatomy 呢？六维摆一起看
✦按文章第 04 节的横向对比整理。两个都是 SKILL.md 标准，分工不重叠。
| 维度 | wheresryan22 / anatomy | AirsupHQ / machine-skill |
|---|---|---|
| 一句话 | 把抽象概念做成桌面上的等轴测精密仪器 | 把真实硬件做成影棚里的 3D 数字孪生 |
| 渲染架构 | 原生 SVG 为主，必要时用「SVG + WebGL + SVG」三明治图层画尾焰与马赫环，共用同一相机矩阵 | Three.js 单文件 HTML，MeshStandard / MeshPhysical 的 PBR 材质 |
| 零件与遮挡 | 40–240+ 个实心零件，四阶明暗着色；画家算法，弹簧必须拆成前后半圈，配 kit/audit.mjs 几何审计 | 按真实装配层级建模，每个子装配体绑 explodeAxis / explodeOffset，局部裁剪平面只切外壳与定子 |
| 交互重点 | 按键改状态、状态驱动零件与角落读数同源；适合讲机制 | 360° 环视、CT 式剖切、爆炸、X-Ray、Break-It 过载；适合看结构与失效 |
| 交付形态 | 独立 HTML / 单文件 .svg / React·Next.js 组件，零第三方运行时 | 完全自包含的单文件 .html，双击浏览器即开、无需构建 |
| 什么时候用 | 技术博客、产品文档、解释限流 / 索引 / 擒纵这类抽象算法 | 硬核机械传动、内部剖面、极限失效工况的三维演示 |
原文那句口诀很省事：解释软件算法与抽象原理，召唤 /anatomy；拆解复杂硬件与三维传动，召唤 /machine-skill。 这一页选了后者，因为要回答的是「切开以后里头还在不在转」。
原始素材，拿走就能复现
✦实验室每篇都把输入摊开：成品、提示词、参数、方程，四份都能下载。
边界：哪些是 skill 做的，哪些不是
✦这一栏是实验室的规矩，比成品更重要。
先说最要紧的一句
- 本页成品不是运行官方 Machine-Skill 生成的。 我没有执行
npx skills add，也没有调用/machine-skill。它是按文章公开的四步规范、用原生 Canvas 2D 软渲染手工复现的同题材教学演示。 - 没有 Three.js，也没有 PBR。 用透视投影 + Lambert 漫反射 + Blinn-Phong 高光近似 + 画家算法排序，材质只是颜色，不是 MeshStandardMaterial / MeshPhysicalMaterial，也没有真实 Ti-6Al-4V 材料属性或 CAD 几何。
- 物理是教学模型，不是工程验算。 温度用一阶惯性热平衡逼近，效率是经验曲线，参数调到与文章数值对齐。没有有限元、接触力学、润滑模型，不能用来判断任何真实执行器的强度、寿命或失效载荷。
- 四幕是浏览器里实时跑的，没有导出 28 秒视频；也没有做官方画廊里那种 PBR 贴图、尾焰着色器或音频。
- 文章里的官方 Demo 由作者用 Gemini 4 Argon 生成，作者明说对 Claude Code 以外的 Agent 兼容性一般、效果偏弱；本页没有复现官方 Demo，也没有复现其截图。
- 安装命令、官方提示词、11.5k+ Stars 等数字均转述自原文，本页未执行、未验证。
- ✓ 真的做到了：单文件
twin.html零外部请求、双击可开；剖切 / 爆炸 / X-Ray / 过载 / 四幕运镜全部可交互；三条方程每帧由stepPhysics(state, dt)推进；零件与读数共用同一状态。
把边界写清楚，是因为这两个 skill 最容易被误读成「AI 会画 3D 图了」。文章说得很准：大模型一个像素都没吐，看到的是 Agent 写的代码在浏览器里实时算出来的。本页同理——每一个面、每一道高光，都是 JS 在画布上现算的。
来源与延伸
✦底本与两个上游仓库，都能点开核对。
本页整理改写自公众号「BeforeAGI」原创文章《告别「方框加箭头」：用 Anatomy 与 Machine-Skill，把一句话变成可交互的精密机械与 3D 数字孪生》（2026-10-16，广东）。两个上游项目均遵循开放的 Agent Skills（SKILL.md）格式；原文明确提到 Anatomy 为 MIT 开源，machine-skill 的许可证本页未核对。