teardown：让 Claude Code 把任何机器造成可拆解的 3D 交互网页

「这机器到底怎么工作的？」问 Claude Code 一句话，teardown（MIT，截至 2026-11-05 有 2,044 星）让 Agent 把答案做成一个可以拆开看的离线 HTML 页：机器在页面中央运转，四周每块面板都读取真实数值，点按钮展开正在做功的那个部件，没人碰它时页面会自己导览。仓库的示例是一套仿生机器——机械蜂、机械蝎、机械章鱼——每个都带动画演示。

核心功能

• 一句话成页：用大白话问「这东西怎么工作」，Agent 产出单个离线 HTML 文件，不依赖服务。
• 真实数值面板：页面面板读取机器的实际参数而不是装饰性数字。
• 部件级拆解：按钮展开到正在工作的部件层级，拆解顺序即讲解顺序。
• 自动导览：无人交互时页面自行演示，可录制成视频（需 ffmpeg 与 Python 3）。
• 标准 Skill 安装：npx skills add 一步装进 Claude Code，依赖 Node.js 20+ 与 Playwright/Chromium。

典型使用场景

• 产品与机械讲解：给无人机、机器人、设备的落地页做「可拆开看」的交互说明。
• 教学课件：复杂结构的自我导览页面比静态图直观一个量级。
• Agent 能力演示：作为「Agent 产出交互式工件」的示例项目。
• 售后与运维手册：把设备说明书变成「点哪个部件看哪个说明」的可点页面。

快速上手

npx skills add elvarofficial/teardown -g -a claude-code
cd ~/.claude/skills/teardown && npm install && npx playwright install chromium

之后在 Claude Code 里用大白话点名任何机器即可；要录导览视频需补 ffmpeg 与 Python 3。产出是单文件 HTML，双击即开，可以直接放进产品页或课件；仓库里的三台仿生机器各有完整示例，改参数就是改它们的面板数据。

小结

teardown 适合要给机械/硬件做交互讲解的开发者与教育者；纯软件架构（无「部件」可拆）的场景它帮不上。要点与边界：MIT、纯前端离线输出；产出的 3D 效果取决于 Agent 的一次性生成质量，复杂机器需要多轮对话打磨。它是「Agent 造交互工件」路线上的轻量代表——比起站内写过的 craft-anything 整站复刻引擎，teardown 把范围收窄到「一台机器的拆解页」，换来的是一句话可用。页面里的 3D 与面板全部为前端实时渲染，改完数据刷新即生效，放进文档站后随版本一起更新即可，不需要额外的构建步骤。