# teardown 實測：把機器做成可拆解 3D 模擬

> teardown 是給 Claude Code 用的開源 Skill，能把引擎、起落架、連桿機構做成可以拆開看的離線 3D 網頁，還能錄成 60 fps 影片配音效。MK 實際 clone 核對 repo 裡的真實數字，整理安裝前置、用法、限制與適合誰。

- 作者：Michael Kuo（https://mk-ai-notes.pages.dev/about/）
- 發布日期：2026-11-02（2026-11-02T20:05:00+08:00）
- 原文網址：https://mk-ai-notes.pages.dev/posts/skill-teardown/
- 分類：GitHub 飆星與 Skill 實測（https://mk-ai-notes.pages.dev/category/github/）
- 系列：MK 熱門 Skill 實測 第 5 篇／共 11 篇（https://mk-ai-notes.pages.dev/series/mk-skill-lab/）
- 標籤：Claude Code、Skill、3D、three.js、機械、教學影片
- 閱讀時間：約 8 分鐘（約 1811 字）
- 參考來源：https://github.com/elvarofficial/teardown

![teardown 實測：把機器做成可拆解 3D 模擬](https://mk-ai-notes.pages.dev/og/skill-teardown.png)

---

想搞懂 V8 引擎或飛機起落架怎麼動，光看文字永遠隔了一層？**teardown 讓 Claude Code 把一台機器做成可以拆開、會自己導覽的 3D 網頁，還能直接錄成影片。** 我把 repo 抓下來翻了一遍，還拿計算機把範例裡的齒輪、連桿數字對過一輪，下面跟大家分享。

## teardown 是什麼？

teardown 是一個 Claude Code Skill，作者 elvarofficial，MIT 授權，2026-10-30 才剛上線。

![teardown 的 GitHub 首頁，可以看到 docs、sfx、sims 資料夾與 MIT 授權](https://mk-ai-notes.pages.dev/img/skill-teardown/github-repo.jpg)
圖說：teardown 的 GitHub 首頁。來源：[elvarofficial/teardown](https://github.com/elvarofficial/teardown)，截圖於 2026-11-02。

它要解決的問題很直白：**AI 講機械原理只能給你文字，零件之間怎麼互動，你得自己腦補。**

裝了之後，你用白話說「做一個能拆開的四行程機車引擎模擬器」，Claude 就會照 `SKILL.md` 裡的做法：

- 做出**一頁不用連網的 HTML**：機器在中間運轉，旁邊的面板顯示真實數字。
- 每個子系統一顆按鈕，按下去就把**正在出力的那個零件**切開或透視給你看。
- 放著不動時，網頁會**自己帶著游標導覽**；你一點，它就把控制權交還給你。
- 同一份程式還能**一格一格錄成 60 fps 影片**，配上用 Python 合成、對準節拍的音效。

![官方示範：機器蜜蜂模擬器的兩個畫面，中間是 3D 模型，四周是數據面板](https://mk-ai-notes.pages.dev/img/skill-teardown/official-bee-frames.jpg)
圖說：README 裡的機器蜜蜂示範，從動畫中取兩格。圖片來源：teardown 官方 README（授權 MIT）。

| 項目 | 數字 | 來源（查證日期 2026-11-02） |
| --- | --- | --- |
| GitHub 星數 | 963 | [GitHub API](https://api.github.com/repos/elvarofficial/teardown) |
| 授權 | MIT | [LICENSE](https://github.com/elvarofficial/teardown/blob/main/LICENSE) |
| 建立日期 | 2026-10-30 | [GitHub API](https://api.github.com/repos/elvarofficial/teardown) |
| 最後提交 | 2026-10-31 | [commits](https://github.com/elvarofficial/teardown/commits/main) |

底層的執行框架、逐格錄影、音效引擎和檢查規則，是作者從 [whaleyxbt/claude-motion](https://github.com/whaleyxbt/claude-motion)（MIT）延伸來的；錄音素材則是 Freesound 上的 CC0 音效。

![官方示範：機器蠍子模擬器](https://mk-ai-notes.pages.dev/img/skill-teardown/official-scorpion.jpg)
圖說：README 的機器蠍子示範。圖片來源：teardown 官方 README（授權 MIT）。

![官方示範：機器章魚模擬器](https://mk-ai-notes.pages.dev/img/skill-teardown/official-octopus.jpg)
圖說：README 的機器章魚示範。圖片來源：teardown 官方 README（授權 MIT）。

這三個漂亮的動圖是作者用 teardown 做的展示品，不在 repo 的範例資料夾裡。真正附原始碼、可以自己建置的範例是 V8 引擎、塞斯納起落架和仿生獸三個。

## 實測：它說的「真實數字」是真的嗎？

這個 Skill 最大的賣點是「真實尺寸、同一個來源」：面板上每個數字，跟零件怎麼動，都來自同一個函式。所以我乾脆把三個範例的參數挖出來，自己手算一遍。

![整理圖：teardown repo 結構，以及塞斯納起落架齒輪、V8 點火順序、仿生獸連桿的數字核對](https://mk-ai-notes.pages.dev/img/skill-teardown/teardown-repo-check.png)
圖說：我從原始碼抄出來的參數和手算結果。來源：MK 實測，2026-11-02。

1. **塞斯納 337 起落架**（`cessna-shared/gear.js`）：32 齒、模數 4 mm 的小齒輪，節圓直徑 128 mm，轉半圈是 π × 128 ÷ 2 ≈ 201.06 mm，程式裡寫的齒條行程剛好是 0.201 m。對得上！
2. **十字曲軸 V8**（`v8-shared/kin.js`）：缸徑 101.6 mm，點火順序 1-8-4-3-6-5-7-2，跟 `SKILL.md` 寫的一樣。
3. **Theo Jansen 仿生獸**（`strandbeest-shared/jansen.js`）：用 Jansen 那組有名的連桿長度，用「兩個圓的交點」一個一個解出關節位置，整支檔案 67 行，跟 `SKILL.md` 說的「67 行連桿求解器」一致。

老實說，這次我先沒有把範例建成網頁、也沒錄影片，只做了原始碼和數字的核對。想親眼看 3D 效果的人，照下面的步驟裝好，跑一行 `node sims/build.mjs v8-live` 就能打開。

## 怎麼安裝？

先準備好：

- **Node.js 20 以上**。
- 要錄影片的話要有 **ffmpeg**，要配音效的話要有 **Python 3**（只用標準函式庫）。

![README 的安裝與使用段落：npx skills add、npm install、三個範例的建置指令](https://mk-ai-notes.pages.dev/img/skill-teardown/readme-install-use.png)
圖說：README 的安裝與使用說明。來源：[teardown README](https://github.com/elvarofficial/teardown#install)。

影片裡我說「一行指令就能裝好」，這裡更正一下：實際上是兩步。

第一步，安裝 Skill：

```bash
npx skills add elvarofficial/teardown -g -a claude-code
```

第二步，到裝好的資料夾裡跑一次：

```bash
npm install && npx playwright install chromium
```

第二步會下載一個 Chromium 瀏覽器（錄影用），檔案不小，第一次要等一下。

## 怎麼用？

直接用白話問 Claude Code，README 給的例子：

```text
> Build me a simulator of a 4-stroke motorcycle engine I can take apart.
> How does a mechanical watch keep time? Show me as a simulator.
> Make a teardown of a hydraulic excavator arm and record a 20-second video of it.
```

用中文問也行，例如「做一個能拆開看的液壓挖土機手臂模擬器，錄 20 秒影片」。

![README 的檔案說明表：SKILL.md、sims/kit、三個範例、build.mjs、capture.mjs、sfx](https://mk-ai-notes.pages.dev/img/skill-teardown/readme-whats-inside.png)
圖說：repo 裡每個檔案負責什麼。來源：[teardown README「What is inside」](https://github.com/elvarofficial/teardown#what-is-inside)。

每個範例都拆成三個資料夾：`-shared` 是機器本體，`-live` 是可以操作的網頁，`-film` 是錄影用的導覽腳本。要做自己的機器，複製最接近的那個來改最快。

## 用之前要知道的事

- **一定要給參考資料**：`SKILL.md` 第一條規則就是「從參考出發，不要憑想像」。只丟一句話，做出來的機器會很普通；給照片、剖面圖、規格，才會像真的。
- **很吃顯示卡**：作者提醒，獨顯跑得到 60 fps 的頁面，在筆電內顯可能只剩 15 fps，所以範例內建了降畫質的分級。
- **錄影不是即時**：`capture.mjs` 是一格一格算圖再壓成影片，機器越複雜越久。
- **會花不少額度**：Claude 看不到影片，所以 Skill 要它一張張看截圖拼貼、反覆修正，來回很多次。

## MK 觀點：適合誰、不適合誰

**適合：**

- 機械、物理、工程科系的老師，想做互動教材或短影片。
- 做科普的創作者，想要「把機器拆開給你看」的畫面。
- 熟 three.js 的前端工程師，可以把它當成一套結構很乾淨的範本。

**不適合：**

- 用沒有獨顯的舊筆電，或不想裝 Node.js、Chromium 的人。
- 想「一句話就生出精準模型」的人，沒有參考圖和尺寸，品質會打折。
- 需要算受力、流體的工程模擬，它是視覺化教學工具，不是 CAE 軟體。

我的看法：概念真的很酷，範例的數字也經得起我拿計算機驗；但想做出自己的機器，還是得準備資料、耐心來回修。

## 常見問題

**Q：teardown 可以做任何機器嗎？**
理論上可以，但品質看參考資料。Skill 明確要求先找照片、剖面圖和真實尺寸，憑一句話做的機器會很普通。

**Q：做好的網頁能放到自己的網站嗎？**
可以。輸出是單一 HTML，three.js 和字型都包在裡面；Skill 也建議單頁控制在 1 MB 內，社群分享時才抓得到預覽卡。

**Q：錄影片一定要顯示卡嗎？**
不一定，但很建議。錄影工具會顯示它用到哪張 GPU，如果是軟體算圖，速度會慢很多。

**Q：可以商用嗎？**
程式是 MIT 授權，可以商用；附的音效素材是 CC0。你自己做的機器，要注意參考圖片本身的版權。

## 延伸閱讀

- 同系列：[answer-me-with-html 實測：答案變網頁](https://mk-ai-notes.pages.dev/posts/skill-answer-me-with-html/)
- 同系列：[founder-skill 實測：AI 幫你審創業點子](https://mk-ai-notes.pages.dev/posts/skill-founder-skill/)
- 同系列：[anatomy 實測](https://mk-ai-notes.pages.dev/posts/skill-anatomy/)
- 背景知識：[AI 怎麼同時看圖、聽聲音？](https://mk-ai-notes.pages.dev/posts/ep08-multimodal/)

引用本文請附原文網址：https://mk-ai-notes.pages.dev/posts/skill-teardown/（作者：Michael Kuo）