跳到主要内容
AI教程

使用 Claude Code 和 Machine Skill 构建逼真的交互式机械模拟

了解如何为 Claude Code 安装 Machine Skill，通过自然语言提示生成交互式 three.js 机械模拟，并录制确定性影片或静态图像。本指南涵盖安装设置、使用方法、物理驱动功能、录制选项、项目结构和实用提示词技巧。

AI我搜编辑部阅读约 10 分钟
使用 Claude Code 和 Machine Skill 构建逼真的交互式机械模拟

Machine Skill 的功能

Machine Skill 是一个用于 Claude Code 的开源 Agent Skill。你只需用一行描述一台机器，Claude 就会先研究真实设备，然后在单个 HTML 文件中生成逼真的交互式 3D 模拟。

生成的页面可以呈现机构、发动机、仪器和工业设备。它们使用程序化 three.js 几何体、真实比例、命名组件、材质、交互模式，以及适用于该机器的小型物理求解器。你可以在浏览器中打开生成的 HTML 文件，检查各个部件、改变运行条件、剖开设备，或让它在计算出的故障条件下损坏。

该项目还包含一个录制器，可从生成的页面制作可重复的影片、截图和社交媒体格式内容。

主要功能

  • 逼真的机器构造：模型包含真实尺寸、命名部件、实体组件、叶片、齿轮、螺栓、管道和其他程序化几何体。
  • 物理驱动的行为：Brayton 循环、火箭喷管、泵特性曲线、扭转振子、Darcy 和 Kienzle 等模型会驱动运动及显示数值。
  • 交互式呈现：页面支持拖动、暂停、实时标签、慢动作、爆炸视图、X 射线视图，以及带实体剖切面的剖切视图。
  • 工作室级渲染：运行时提供材质、灯光、阴影、环境光遮蔽、泛光、热辉光和演示环境。
  • 确定性影片：影片模式允许录制器逐帧推进模拟，从而让重复录制的结果保持一致。
  • 无需构建步骤：生成的页面是独立 HTML 文件，使用内置运行时和固定版本的 three.js 0.170 CDN 依赖。

要求

要构建机器，请安装 Claude Code，或使用其他支持 Agent Skills 的宿主环境。要运行生成的页面，请使用支持 WebGL 2 的浏览器，例如当前版本的桌面版 Chrome、Safari、Firefox 或 Edge。

要生成截图和影片，还需要 Node 18 或更高版本、Playwright、Chromium 和 ffmpeg。

npm i -D playwright
npx playwright install chromium

请通过操作系统的软件包管理器安装 ffmpeg。手机可以运行较轻量的页面，但复杂模拟在配备独立 GPU 的较新电脑上性能最佳。

安装 Machine Skill

推荐使用 skills CLI 安装，并将该仓库作为 Claude Code skill 安装。

npx skills add AirsupHQ/machine-skill -g -a claude-code

全局安装会将 skill 放置在 ~/.claude/skills/machine。若只想将它安装到当前项目，请省略全局和 Agent 选项：

npx skills add AirsupHQ/machine-skill

项目级安装会将 skill 放置在 .claude/skills/machine。你也可以直接克隆仓库：

git clone https://github.com/AirsupHQ/machine-skill.git ~/.claude/skills/machine

# 或安装到单个项目
git clone https://github.com/AirsupHQ/machine-skill.git .claude/skills/machine

Claude Code 通常会在运行中的会话里检测新 skill。如果会话开始时 skills 目录尚不存在，请运行 /reload-skills。

生成你的第一台机器

安装完成后，打开 Claude Code，使用 /machine 命令并附上具体描述。

/machine a mechanical watch movement, the escapement ticking

Claude 会创建一个类似 watch.html 的 HTML 页面。在支持 WebGL 2 的浏览器中打开该文件，并与模拟进行交互。根据生成的机器类型，你可以拖动视图、检查标签、爆炸显示装配体、剖开设备，或触发其建模的故障行为。

其他有效提示包括：

  • /machine a hydroelectric Francis turbine
  • /machine a Swiss lever escapement, slowed down so I can see the impulse
  • /machine the gearbox of a 5 MW wind turbine, cut open
  • /machine a steam locomotive's valve gear, and give me a 30 second video for X

编写更好的机器提示

当提示提供足够的工程背景，使 Claude 能够研究目标对象并选择有用的运行点时，Machine Skill 的效果最佳。

  1. 说出真实机器的名称。例如，“一台类似 787 上所用发动机的涡扇发动机”比“喷气发动机”提供的方向更明确。
  2. 指定运动和故障行为。说明哪些部件应当运动、哪些部件应当损坏，例如要求 Claude 提高发动机转速，直到气门发生气门浮动。
  3. 描述使用场景。告诉 Claude 输出用于嵌入式页面、社交视频还是静态图片。对于视频，请包含目标宽高比或时长。

生成的物理模型是一个诚实的小型模型，而不是 CFD 或 FEA。每个页面都会说明它计算的内容及其简化之处，因此应将这些数值视为用于教育和说明的结果，而不是经过认证的工程结果。

录制影片

使用仓库中的 record.mjs 脚本，将生成的页面渲染为视频文件。

node ~/.claude/skills/machine/scripts/record.mjs watch.html out/watch.mp4 --music freepd:Classical/Easy_Lemon

如果使用克隆的仓库，请使用本地脚本路径：

node scripts/record.mjs examples/turbofan.html out/turbofan.mp4 --music freepd:Classical/Easy_Lemon

通过设置输出尺寸，你可以为信息流创建竖屏视频：

node scripts/record.mjs examples/turbofan.html out/turbofan-feed.mp4 --w 1080 --h 1350

要导出选定的静帧而不是视频，请提供输出目录和帧编号：

node scripts/record.mjs examples/turbofan.html out/stills --stills 3,9,14,19

录制器支持其他渲染控制。使用 --ss 1.5 进行超采样，使用 --blur 2 添加运动模糊，使用 --fps 60 处理快速运动。音乐可以是本地文件、URL，或来自 FreePD 的 freepd:<Category>/<Name> 音轨。

生成的页面可以通过诸如 ?film=1&shot=main 的查询参数运行在确定性影片模式下。在此模式中，时间只会在录制器推进时前进，因此每一帧都会完整渲染，并且重复录制的结果保持一致。

检查渲染输出

Machine Skill 包含用于防护无头渲染失败的机制。录制器会检查截图中是否存在纯洋红色帧，而 pinkscan.mjs 可以扫描已完成的视频。

node scripts/pinkscan.mjs out/*.mp4

如果检测到粉色帧，该命令会以非零状态退出，因此可以用于自动化工作流。

探索代码仓库

  • SKILL.md 定义了质量标准、研究与建模工作流、评审轮次、影片制作流程以及屏幕文字风格。
  • kit/lab-kit.js 是内联到生成页面中的运行时。它包含工作室、后期处理、材质、几何辅助工具、标签、效果、交互模式和影片时间线。
  • kit/template.html 是手动创建机器时使用的起始页面模板。
  • references/solvers.md 包含燃气轮机、火箭、活塞发动机、泵、转子和电机等机器的物理配方与真实常数。
  • scripts/ 包含截图、录制、粉色帧检查以及内联运行时的工具。
  • examples/ 包含独立的 HTML 演示，包括涡扇发动机、火箭发动机、工艺泵和压缩机。
  • film/launch.html 是用于启动影片的导演页面。

了解交互式剖切

剖切系统使用封闭实体和裁剪平面。当平面切开实体时，运行时会检测剖切表面，并以带有加工外观和细微剖面线的实体剖面面进行渲染。由于剖面深度设置正确，剖切可以遮挡其他几何体，而无需单独的封口网格。

这使剖切位置能够扫过模型，同时保持令人信服的金属或材料剖面。相同的运行时还支持半剖和四分之一剖、X 射线展示、爆炸装配、标签、流动轨迹、羽流、火花和刚性碎片。

将工作流适配到其他代理宿主

Machine Skill 以标准 Agent Skill 的形式打包。在 Claude.ai 或 Claude 桌面应用中，你可以将技能文件夹压缩，然后在“设置”、“功能”和“技能”下上传。对于 Claude Agent SDK 或 API，将该文件夹挂载为技能目录。其他兼容 Agent Skills 的工具可以直接指向 SKILL.md。

如果你不使用代理，可以复制 kit/template.html，然后手动填写其中的各个部分。生成的页面仍是可在浏览器中运行的普通 HTML 文件。

了解限制

  • 该技能适用于机器、机械装置、发动机、仪器和设备。人物、景观和地图并不是理想的使用场景。
  • 几何体是程序化生成的 three.js 内容。其目标是实现准确的比例和零件数量，而不是制造公差或 CAD 导出精度。
  • 物理模型刻意保持小巧透明。它们会与公开数据进行核对，但不能替代 CFD、FEA 或经认证的工程分析。
  • 复杂页面可能包含大约 600,000 个三角形，在启用阴影、环境光遮蔽和泛光时，可能需要较新的笔记本电脑 GPU 才能保持流畅运行。

结语

Machine Skill 可以将简洁的工程提示转化为可探索的浏览器仿真，提供真实比例、计算行为和适合展示的渲染效果。使用 skills CLI 安装它，描述具有明确运动和故障要求的具体机器，然后打开生成的 HTML 页面。准备发布时，使用确定性录制器从同一仿真中生成视频或静帧。