一句話結論
teardown 把「問一個機器怎麼運作」變成「拿到一頁可以拆的 3D 模擬器」。 你在 Claude Code 裡說「做一台可以拆的四行程機車引擎」，它產出的是一個完全離線的單檔 HTML：機器在中間運轉，四周面板讀著同一組真實數字，按鈕會打開「正在工作的那個零件」，沒人碰它的時候頁面自己導覽，最後還能逐格錄成 60fps 影片、配一段跟著同一條時間軸的程序化配樂。
但這個專案真正值錢的不是 demo，而是它寫在 SKILL.md 裡的規則：必須從參考圖開始、所有儀表讀同一組數字、單一輸入驅動全部動作、以及「你無法看影片，只能看圖」的審查流程。這些規則任何做 AI 生成 3D 內容的人都用得上。
它是什麼
| 項目 | 內容 |
|---|---|
| 定位 | Claude Code skill（不是獨立 App，靠 Claude Code 讀 SKILL.md 執行） |
| 星數／分支 | ★1,186／181 forks／5 open issues（2026-11-01 查詢） |
| 授權／語言 | MIT／JavaScript |
| 建立時間 | 2026-10-30，最後推送 2026-10-31（非常新） |
| 檔案數 | 73 個（sims/ 40、sfx/ 20、根目錄 10、docs/ 3） |
| 安裝 | npx skills add elvarofficial/teardown -g -a claude-code |
| 環境需求 | Node 20+；影片要 ffmpeg、配樂要 Python 3（只用標準庫）；另需 npx playwright install chromium |
| 產出 | 單檔 HTML 約 800 KB（three.js 與字型全部內嵌）＋ 60fps mp4 ＋ −14 LUFS 配樂 |
用法就是講白話：
「做一台可以拆的四行程機車引擎給我。」 「機械錶是怎麼計時的？做成模擬器給我看。」 「做一台液壓挖土機臂的拆解，順便錄 20 秒影片。」
三個內建範例：具體到可以驗算
repo 直接附了三台完整機器，而且每一台都寫明「靠什麼驅動」與「可以偷什麼」：
| 範例 | 機器 | 靠什麼驅動 | 值得學的地方 |
|---|---|---|---|
v8-* | 十字曲軸 V8，汽缸有玻璃內襯 | 曲軸角度；點火順序 1-8-4-3-6-5-7-2，另有缸內壓力模型畫出示功圖 | 三種剖切模式（玻璃／剖面／實體）、把點火順序做成立缸選擇器、與曲軸同步的即時圖表 |
cessna-* | Cessna 337 主起落架收放 | 行程 0..1：201 mm 齒條帶動 32 齒、模數 4 mm 的小齒輪，剛好轉 180° | 用「一個自由度」擺出整套機構、飛行階段寫成時間的函數、模型底下有一條會滾動的跑道 |
strandbeest-* | Theo Jansen 的 Strandbeest，20 隻腳共用一根曲軸 | 風：曲軸轉速由風積分而來，每個關節用 Jansen 的 11 段連桿長度做圓交集求解 | 67 行寫完的精確連桿求解器、實例化管件、腳尖軌跡、20 隻腳的接觸時序圖 |
這三個範例就是「教學素材該長什麼樣」的示範：不是動畫，而是每個數字都能對得起來的機構。
一台機器怎麼被拆成 7 個檔案
專案規定每台機器一個資料夾，並按「工作性質」切檔（三個範例完全遵守）：
| 檔案 | 負責什麼 |
|---|---|
kin.js／gear.js／jansen.js | 數學。真實單位、真實尺寸，一個輸入（曲軸角／行程／風）推導出所有姿態與讀數。這裡不准出現 three.js |
engine.js／beast.js | 幾何。用程式建出車削件、管件、實例化連桿；update(input) 負責擺姿態 |
stage.js | 攝影棚。燈光、陰影、後處理（GTAO、bloom）；frame(state, cam) 畫一格 |
console.js | 面板。固定 1600×900 的 CSS 版面：儀表、圖表、開關、帶引線的標註 |
film.js | 影片腳本。SCRIPT 記錄導演的運鏡（視角、隔離、剖切、油門），render(t) 是時間的純函數 |
live.js | 互動。按鈕、滑桿、環繞、縮放；沒人操作時播放 film.js 當自動導覽，任何點擊／拖曳／滾輪就交還控制權，安靜 25 秒後再收回 |
score.py | 配樂。讀同一份時間軸生成聲音 |
「數學不准碰 three.js」這條界線是關鍵：機構算對了，畫面才可能對；反過來永遠不會成功。
七條規則，決定它像不像真的
SKILL.md 的「Rules that decide whether it works」，每一條都是踩過的結果：
| # | 規則 | 為什麼 |
|---|---|---|
| 1 | 從參考開始，不要憑想像 | 一張照片、手冊剖視圖、真實影片。憑一句話發明的機器每次都會做得「很通用」 |
| 2 | 真實數字、單一來源 | 所有儀表、圖表、標籤都讀同一個擺姿態的函數，畫面上不可能與動作矛盾。還要手算一項抽查：Cessna 那個 32 齒 × 4 mm 模數＝128 mm 節圓直徑，圓周一半正好是 201 mm 行程 |
| 3 | 一個輸入驅動全部 | 全部由曲軸角／行程／風推導，不手工 keyframe → 影片、互動頁、配樂永遠不會走鐘 |
| 4 | 正在工作的零件要打開 | 隔離、剖切、X 光。「能鑽進去的鏡頭」勝過十次環繞 |
| 5 | 淺色攝影棚、單一強調色 | 淺底在社群動態牆上才看得清；強調色只標「現在正在變的東西」 |
| 6 | 鏡頭要為機構而選 | 平面連桿正面看會塌成一張網，3/4 側面才看得懂每隻腳 |
| 7 | 碰撞用數字修，不要用鏡頭藏 | 零件穿模就在參數裡縮放或位移，不要靠運鏡遮掉 |
第 2 條那個「手算一項」的習慣，是這個專案最專業的地方——AI 生成的模型最怕「看起來對」，所以它要求至少一個數字能用紙筆驗證。
Review loop：你看不到影片，只能看圖
這是全文最值得帶走的一段工程方法。SKILL.md 直接寫：「You cannot watch the video; you can look at frames.」 在宣告完成前，一定要讀過當次渲染的檢查表：
| 步驟 | 做什麼 |
|---|---|
| 1 | --stills beats：每個時間軸節拍後 0.3 秒出一張圖，標上 t= |
| 2 | 拿這份 checklist 逐格讀 |
| 3 | 放大：轉場用 --stills every:0.2 --from A --to B，單格用 --still T |
| 4 | 修、重建、回到步驟 1；直到整整一輪都挑不出問題才停 |
| 5 | 最後再跑 sheet.mjs 讀一遍最終 mp4 的接觸表——那才是編碼器真正寫進去的東西 |
Checklist 有五大類：機構（每一處該接觸的都接觸、沒有東西互穿、面板數字與姿態一致）、構圖（每格一個焦點、重要元素離邊 60 px、標籤不遮住它標的零件）、字（不裁切、關鍵讀數在手機寬度可讀）、3D（bloom 會吃掉細節、近白表面會爆、粗糙度 ≥0.45）、時間（每種狀態停留夠讀：短句 1 秒＋超過三個字每字加 0.25 秒）。
三個現實限制：效能、體積、顯卡
| 限制 | 內容 | 解法 |
|---|---|---|
| 不能在桌機顯卡上測就好 | 桌機 60fps 的頁面，在筆電內顯上可能掉到 15fps | 內建品質分級（關 AO、降 pixel ratio、縮 shadow map、面板隔格重繪）；先找最貴的 shader——一個在每個頂點算 5 次的位移，比所有分級加起來還貴 |
| 首帧不能卡 | 著色器編譯會讓頁面凍住 | kit/warm.js 在第一帧前平行編譯所有 program |
| 頁面必須壓在 1 MB 內 | X／Slack 這類連結預覽會讀 HTML，15 MB 的頁面它們直接放棄 | 大的模型另外放檔案：build.json 裡指定 heavy.glb → light.glb |
五個已經踩過的 three.js 坑
這段是硬貨，任何做 three.js 的人都會遇到：
| 坑 | 現象 | 修法 |
|---|---|---|
smoothstep(a, b, x) 且 a > b | Windows（ANGLE/D3D）回傳 0 | 改寫成 1.0 - smoothstep(b, a, x) |
貼地的 ShadowMaterial／貼花 | 在後處理 render target 裡過不了深度測試 | 給 polygonOffset |
| 用鏡射貼圖鋪在地面的 quad | 被當成背面剔除 | 用 DoubleSide |
| 一個 NaN 像素 | 透過 bloom 整個畫面變黑 | shader 裡每個 pow() 的底數都要 clamp |
| GTAO ＋剖切模型 | 切掉那一半變成淡影鬼影 | gtao.normalMaterial 要套同一組 clipping plane |
聲音：不是配音，是「在對的時間響」
sfx/ 用純 Python 合成所有音效（48 kHz、可重現），而且直接讀影片的時間軸——所以聲音不可能跑掉。母帶自動處理到 −14 LUFS、真峰值 ≤ −2 dBFS。設計原則是「強調、不旁白」：連續運轉的地方保持安靜，畫面有轉折才給一個音。
「品味，有數字」
另一個少見的地方：它把主觀審美寫成可檢查的數字。
- 進場緩動
cubic-bezier(0.16, 1, 0.3, 1)；退場cubic-bezier(0.6, 0, 0.9, 0.35)、長度是進場的一半；狀態間切換cubic-bezier(0.65, 0, 0.35, 1)；線性只用在連續運動 - 機器要佔畫面的 60–70%；1080 畫布上標籤不小於 34 px
- 強調色只有一個，而且它代表「現在正在工作的零件」
- 沒有東西完全靜止：至少留一個元素在動
五個該保留懷疑的地方
| 疑點 | 說明 |
|---|---|
| 誕生才兩天 | 建立 2026-10-30、最後推送 10-31；星數衝很快，但沒有任何長期驗證 |
| 未實跑 | 本文未安裝、未生成任何機器，所有描述取自 repo 檔案與 SKILL.md 原文 |
| 產出品質高度依賴參考圖 | 規則第 1 條自己就說了：憑一句話發明的機器「每次都很通用」。想要好結果，你得先找照片或剖視圖 |
| 它不自己會動 | 這是 Claude Code 的 skill，不是一鍵工具；要 Claude Code、要 Node 20+、要 playwright、影片還要 ffmpeg |
| 上游是另一個專案 | runtime、逐格擷取、音效引擎與審查規則來自 whaleyxbt/claude-motion（★791、MIT），teardown 是在它上面長出來的 |
誰適合、誰先不用碰
適合
- 做技術教學／產品說明的人：需要「一頁就能講清楚一台機器」的素材
- three.js 開發者：那 7 條規則、5 個坑、review loop 可以直接搬進自己的專案
- 已經在用 Claude Code 的人：這是把 skill 從「改程式」推到「生成互動教材」的例子
先不用碰
- 只想要現成動畫素材的人：它產出的是模擬器，不是影片素材庫
- 沒有 Node 環境或不熟 Claude Code 的人：安裝鏈有三段（skill、npm、playwright）
站內延伸閱讀
- Claude Skills 最佳實務 2026：官方 7 條新規範 — 想自己寫一個類似 skill 的話，先看官方對 skill 結構的要求
- Motion Library 動態收藏：327 個網頁動效範例 — 同樣是「動態與說明」的素材庫，但那是提示詞導向，這篇是機構正確性導向
本文為獨立評測與整理，不含聯盟連結、未受任何廠商贊助。專案數據取自 GitHub 公開資料與 repo 內檔案（2026-11-01 查證）；本文未安裝或執行該 skill。