TellMotion — 點子 → 主題 → 動畫
一個可重複的流程，token 花費低廉。適用於任何適合 2D 的主題：圖表、流程、架構、演算法、時間軸、概念。（不適用於 3D 或實拍影片。）
此技能的結構：themes/（主題目錄） · tools/（Node，無依賴） · assets/base（Motion Canvas 範本，含場景配方） · assets/packs/（可選元件包） · scripts/new-project.sh · references/。
1. 簡要討論（一輪，只問缺少的資訊）
如果使用者已經提供了內容/結構，請不要再問。使用 AskUserQuestion（最多 4 個問題）來詢問缺少的資訊：
- 主題和內容（如果沒有：提出一個虛構的主題並告知使用者）。
- 長度/節奏（預設：平穩節奏，每個場景 20-60 秒）和 fps（預設預覽 30 / 渲染 60）。
- 設計 — 總是提供以下三個選項：
- 範本：使用目錄中的一個主題。執行
node tools/list-themes.mjs（精簡列表）並要求 ID；若要視覺化瀏覽，執行node tools/build-catalog.mjs <tmpdir>然後開啟gallery.html（使用node tools/serve.mjs <tmpdir>提供服務）。 - 自訂設計：撰寫 3 個對比鮮明的
theme.json提案（參見references/theme-format.md），渲染預覽圖並讓使用者選擇（步驟 2）。 - 自備設計：使用者提供品牌色彩/字型或 Figma 檔案 → 從中推導出一個
theme.json。
- 範本：使用目錄中的一個主題。執行
- 元件包：從主題推斷，除非不清楚否則不要問，只加入自訂場景會用到的：
cloud（架構）、algorithms（排序、樹狀結構）、charts（資料）、flowchart（流程）、timeline（歷史/路線圖）、code（程式設計、CLI）、typography（開場、引言、A vs B）、science（循環、圖層、波）、math（方程式、函數）、ui（產品展示、使用者流程）、maps（地點、旅程）。可自由組合；references/packs.md列出了所有元件。
2. 自訂設計（選擇範本時跳過）
- 在一個暫存資料夾中撰寫 3 個
theme.json提案（複製最接近的目錄主題並修改 token；使用不同風格，例如技術/活潑/編輯）。 - 對每個提案執行
node tools/validate.mjs <file>，然後執行node tools/build-catalog.mjs <out> --themes <folder>。 - 顯示預覽：在瀏覽器面板中開啟
<out>/gallery.html（serve.mjs）或發送 SVG。等待使用者選擇。 - 可選的高傳真路線（使用 Figma，僅在使用者想要且 Figma 連接器存在時）：
references/figma.md。 - 將選擇的主題儲存為
<project>/theme.custom.json（並提供將其貢獻到目錄的選項）。
3. 分鏡腳本（在製作任何動畫前需經使用者核准）
重寫動畫很昂貴；重寫場景列表則不然。僅在單一場景或使用者要求時跳過此步驟。
- 閱讀
references/storyboard.md和references/recipes.md，然後撰寫storyboard.json：每個場景一條記錄，包含其配方（或custom）、顯示內容、秒數和實際文字。 - 執行
node tools/storyboard.mjs validate <file>，然後執行node tools/storyboard.mjs preview <file> --theme <id|file> --out <tmpdir>。在瀏覽器面板中顯示頁面（serve.mjs），並在聊天中列出場景。 - 等待使用者核准。修改分鏡腳本，而不是程式碼，直到他們同意。之後停止預覽伺服器。
核准後，自動運作直到交付。
4. 專案
bash <skill>/scripts/new-project.sh <name> --theme <id|path.json> [--pack a,b|all] [--demos]
（--demos 會複製每個元件的示範場景：便於學習 API，之後可刪除示範。）
從應包含專案的資料夾執行此命令。每個主題一個專案；為新影片將場景加入該專案。它會複製範本、套用主題（src/theme.ts、src/fonts.ts）、安裝依賴項並在 .claude/launch.json 中註冊專案。稍後變更主題：執行 node <skill>/tools/apply-theme.mjs <theme> <project> 然後 npm install。
5. 場景
node tools/storyboard.mjs generate <file> <project> 會寫入每個場景和 src/project.ts。配方案例場景即為完成狀態。每個 custom 場景是一個帶有標題、字幕和長度的運行佔位符：撰寫其動畫，保留這些元素。對於自訂場景，請閱讀 references/motion-guide.md（核心 API、佈局配方、陷阱）和 references/packs.md（套件元件）。重新執行 generate 會保留您編輯過的場景。固定規則：
- 每個區塊一個場景，位於
src/scenes/，在src/project.ts中註冊（每個場景另有一個.meta檔案）。 - 使用
prepareScene(view, title)；先呼叫enter()最後呼叫leave()；透過sub.say(text)顯示字幕。 - 在 1920x1080 解析度下，文字 ≥ 28 px；字幕 ≤ 85 個字元；每種元素類型使用一個類別顏色 + 在
src/config.ts中的圖例（LEGEND）。 - 每個場景僅顯示必要的內容；使用
glow()標記活動元素並使用dim()淡化其餘部分。 - 可編輯的文字、時間和顏色作為每個場景頂部的常數（
EDITABLE TEXT註解）；全域速度在PACE中。 - 使用
connect(root, a, b)連接元件。請求和事件使用send(root, arrow.points, {shape: 'dot' | 'diamond', to: piece})傳送，因此形狀可用於區分它們，並且元件在到達時會做出反應。 - 絕不在場景中硬編碼顏色或字型：使用
config.ts中的C、S、FONT、fs()，以便主題可以互換。
6. 驗證（便宜）
- 在專案中執行
npm run typecheck，然後執行node tools/storyboard.mjs duration <project>：如果場景與核准的計畫相差太遠，修正它或告知使用者。 - 使用
preview_start（從.claude/launch.json取得專案名稱）、resize_window1700x950，然後點擊時間軸並在[215,0,800,330]上zoom；在一次browser_batch中批次處理多次點擊+縮放。在時間軸上scroll right以到達後續場景。 - 完成後：
resize_window預設為desktop，preview_stop。除非使用者要求，否則不要渲染 mp4。
7. 渲染（當使用者要求時）
在專案中執行 npm run render 會寫入 output/<name>/<name>.mp4 和 render.json（每個場景的持續時間、檔案大小），不會開啟編輯器。選項（在 npm run render -- 之後）：
--format mp4,webm,gif·--thumb或--thumb-at <seconds>·--fps <n>·--scale <n>。WebM 編碼速度慢（數分鐘）：僅在需要時才請求。--aspect 9:16,1:1：將影片置於主題背景的長條內（--pad-color可覆蓋）；它不會重新佈局場景，因此文字會縮小到約 56%。請告知使用者。--draft：30 fps，一半大小，輸出至output/<name>-draft/。用於審查。--info：每個場景的持續時間，不渲染任何內容。便宜：在檢查節奏時優先於渲染。--dry-run：根據渲染樣本估算每個檔案的尺寸範圍，不儲存任何內容。在大型渲染前或使用者擔心尺寸時使用。
需要 Chrome、Edge 或 Chromium（CHROME 可覆蓋路徑）。在此腳本存在之前建立的專案：執行 node <skill>/tools/render.mjs <project>。原始碼位於 tools/render.mjs。
8. 交付
列出場景（名稱 → 顯示內容）、如何執行（npm start）、如何渲染（npm run render）、如何變更節奏（PACE）、文字（每個場景的常數）、主題（apply-theme.mjs）。說明哪些部分未經驗證。如果工作區中有 CLAUDE.md，將新專案加入其中。
Token 節省技巧
- 不要重新讀取剛剛寫入的檔案；使用
Edit。 - 使用
list-themes.mjs而不是讀取主題 JSON 檔案；僅在自訂時讀取單一主題。 - 批次處理螢幕截圖/縮放；避免全頁截圖。
- 重複使用
assets/而不是重新生成元件。