Communitygithub.com

codepawl/machine-anatomy

构建一个关于真实机器或发明的交互式等距“解剖图”,所有说明文字均需绑定来源,支持多种配色主题和渲染风格,物理上合理的运动、爆炸视图,以及带有柔和音效的 30 秒短片。

machine-anatomy 是什么?

Machine Anatomy 是一个用于创建交互式等距解剖图的技能,适用于真实机器或发明(如灯泡、密码机、蒸汽机、晶体管等)。它帮助用户从纯测试模型构建完整的交互式页面,支持多种渲染风格(线条、抖动、半色调、阴影、像素)和配色主题,并提供物理上合理的运动、爆炸视图以及可录制的 30 秒短片(16:9、9:16 或方形)。技能要求严格遵循基于真实来源的事实标注,并通过 lint 检查、模型测试、视觉审计和录制验证来保证质量和准确性。它适合用于“解剖 <机器>”、“<机器> 工作原理图示”、等距讲解、爆炸视图视频等场景,适合希望在开发者工具(如 Claude Code)中快速生成专业机器解剖内容的用户。

兼容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/codepawl/3d-builds/tree/main/works/2026-10-11-machine-anatomy/src

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

Machine Anatomy

一个共享套件:新机器只编写其模型、布局和绘图、实时钩子及其事实。 套件拥有页面、主题和样式、缩放框架、爆炸视图、真理检查、 录制器、音效和检查功能。示例位于 examples/edison-light-bulb/;请复制其结构。

1. 一次性提问,然后构建

在任何代码之前,使用主机的提问工具(Claude Code 中的 AskUserQuestion)在一轮内向用户提出所有引入问题,每个问题都带有推荐的默认值,跳过他们已说过的内容。然后继续,无需进一步的门控。问题、默认值以及每个答案如何映射到配置:references/intake.md。

2. 研究,然后生成事实

阅读真实来源(专利、制造商的论文、博物馆页面、百科全书)。编写 reference/notes.md,包含 URL 和引用,然后编写 facts.json:每个事实一条记录,包含 text、source、quote 或 note,以及 status(verified 或 inferred)。规则以及 lint 强制实施的内容:references/truth-control.md。 从来源中列出机器的所有功能及其设置到 functions 中。

然后收集至少 3 张该机器及其设置的真实照片或图纸到 reference/images/ 中,并附带 sources.json,并在绘制前打开每张图片;每个组件都要注明其绘制所依据的图片。 Lint 强制执行此操作,而 record 会生成 shots/reference-compare.png 以进行检查:references/reference-images.md。

3. 构建机器文件夹

node cli.mjs new <folder> --title "..." 从 Edison 示例中搭建脚手架。按以下顺序替换:

  1. model.mjs — 纯模型,无 DOM;所有行为和显示的所有数字。test-model.mjs 针对真实值或不变量对其进行测试。测试是强制性的。
  2. layout.mjs — 以世界单位表示的大小和计算出的曲线(路径遵循真实零件,从不使用弦)。
  3. figure.mjs — drawFigure(draw):将真实零件绘制为编号组件下的项目,使用套件的辅助函数;返回标签、defs、CSS、徽章锚点、步骤点和缩放目标。
  4. live.js — createMachineHooks(kit):状态、运动部件的绘制、控件、读数、动作。使用 kit.Motion 处理弹簧、惯性和关节:references/motion.md。
  5. machine.mjs — 带有移除轴和来源的组件,所有可见文本为 { text, facts },读数模板,控件,影片故事,声音角色。

在编写每个文件之前,请阅读示例的对应文件;不要读取已构建的 *.html 文件。

4. 外观

主题和渲染风格是独立的层:references/themes-and-styles.md。在 machine.mjs 中设置默认值(theme,style);任何页面切换使用 ?theme= 和 ?style=。

5. 影片和音效

默认影片是经批准的 30 秒格式(先正常工作,一次缩放诞生,一次有标签的慢速运行,带有对比时刻的正常运行,交错拆解,重新组装,最后正常工作):references/film.md。 音效是安静的近距离麦克风敲击声,没有哔哔声,没有限制器:references/sound.md。发布影片的说明文字规则:references/caption.md。

6. 命令和检查(交付前需要全部完成)

node cli.mjs lint   <folder>     # 文本绑定到事实、来源、最高级、来源信息
node cli.mjs test   <folder>     # 模型测试
node cli.mjs build  <folder> [--format 16:9,9:16,square]
node cli.mjs audit  <folder>     # 爆炸视图的绘制顺序和穿透
node cli.mjs verify <folder>     # 在无头 Chrome 中检查真实页面,每个主题和样式
node scripts/lines.mjs <folder>/<slug>-anatomy.html   # 纹理线条终止于某处
node cli.mjs record <folder> [--format 9:16] [--style dither] [--no-sound]
node cli.mjs remux  <folder>     # 仅对录制的帧进行音效更改
npm test                         # 套件单元测试

Playwright 不捆绑:npm install --no-save playwright,或设置 MACHINE_ANATOMY_PLAYWRIGHT 指向现有的 Playwright index.mjs。录制以低于正常优先级且不使用 GPU 运行。

然后自行打开 shots/<variant>/video-sheet.png、三张静态图、verify 截图和 shots/reference-compare.png;修复裁剪、重叠、不可读文本、游动图案以及与参考图像的每一项差异(除非是已声明的简化)。

所有者设定的规则(在存在检查时强制执行)

  • 任何事物都不能遮挡其他事物:record 和 verify 中的一次碰撞检查(references/film.md);仅声明物理上真实的重叠及其原因,在 film.overlapAllowed 中。
  • 在机器完整的真实设置中展示该机器(引入问题 10),附带来源和来源信息。
  • 主体在每个阶段至少占据帧高度的 25%,并且关键事件发生在屏幕上(minimum.subject,film.onScreen);运行的机器使用 hooks.camera() 控制相机。
  • 图案锁定在表面上且不游动;使用 scripts/swim.mjs 测量(references/themes-and-styles.md)。
  • 火焰、蒸汽、烟雾和发光来自 kit/effects.mjs,由模型驱动(references/motion.md)。
  • 每个工作零件要么显示为工作状态,要么有声明的原因;没有运动而没有绘制出的、主动的原因;压缩的时间显示在屏幕上(references/completeness-and-causality.md,lint 和 record)。

报告

页面、发布片段和影片的路径;lint、test、audit、verify 和 lines 计数;响度、真实峰值和影片频谱(说明无人听过);影片时间线;每个说明文字事实及其来源;哪些是简化、推断或未验证的。

致谢:基于 Anatomy by Ryan (github.com/wheresryan22/anatomy, MIT) 构建。参见 THIRD_PARTY_NOTICES.md。

相关技能