motion-graphics — 分派入口
在步驟 0 之前確認路由。 此技能製作簡短、設計導向、無旁白的動態圖形（以動態為訊息；約 10 秒以內，無配音）。更長、多場景或帶旁白的處理 →
/general-video；網站旁白影片 →/general-video；主題解說 →/faceless-explainer；產品宣傳 →/product-launch-video；現有影片加字幕 →/embedded-captions。超出範圍：即時/渲染時資料，或無法擷取的影片。不確定是動態優先還是旁白優先？先閱讀/hyperframes。
一個簡短的設計導向動態圖形。資產優先：在設計鏡頭之前先決定資產策略並取得真實素材，然後圍繞你擁有的素材設計鏡頭，再透過重複使用目錄功能來組合。所有成品都放在 PROJECT_DIR = videos/<project-name>/（在步驟 0 建立）；以下所有路徑都相對於此。
| 階段 | 執行方式 | 主要產出物 | 詳細流程 |
|---|---|---|---|
| init | Bash | hyperframes.json | 步驟 0 |
| plan | subagent — 決定是否搜尋？ + 分類 + 資產策略 | shot-plan.json（草稿：類別、asset_needs 查詢、簡報） | agents/director.md（第 1 部分） |
| source ◇ | Bash — media-use 解析（若 asset_needs 為空則跳過） | assets/ + assets/index.md | phases/source/guide.md |
| design | subagent — 圍繞解析後的資產設計鏡頭 | shot-plan.json（最終版：區塊 + 佈局 + 動態 + 位置） | agents/director.md（第 2 部分） |
| build | subagent — 重用優先的組合 | compositions/index.html | agents/builder.md |
| render | Bash — hyperframes render（MP4，或 --format webm/mov 用於疊加） | renders/video.mp4 | 步驟 5 |
| verify | Bash — lint / inspect → 失敗時由修復 subagent 處理 | （原地修復） | agents/finalize.md |
◇ source 僅在所選類別宣告需要資產時執行。純程式碼/文字類別（例如 kinetic-type、大多數 charts/stat）的 asset_needs: [] 會直接從規劃跳過到設計。
類別 — 依搜尋決定分類
plan 的第一個決定是：需要搜尋嗎？ 這個分支將類別分為兩組；然後選出具體類別 — 對於搜尋驅動的類別，依搜尋回傳的內容類型。每個類別是一個 categories/<id>/module.md（其規劃 + 建置規則）；共享的動態詞彙表位於 references/motion-vocabulary.md（→ hyperframes-animation 規則/藍圖 + 註冊區塊）。
形式類別 — 無需搜尋，由使用者提供內容：
| 類別 | 意圖 | 依賴 |
|---|---|---|
kinetic-type | 重點台詞/引言/標題，動態優先的文字 | caption-* 區塊 + 動畫規則 |
stat | 單一主要數字/計數 + 環形 | apple-money-count / rules/{counting-dynamic-scale, stat-bars-and-fills} |
charts | 長條/折線/圓餅/競賽/百分比，來自資料 | data-chart 區塊 |
logo-reveal | 商標動畫/品牌鎖定畫面（使用者商標） | logo-outro / rules/svg-path-draw |
lower-thirds | 名稱/職稱條、註解、社交媒體疊加 | caption-* + 註冊疊加區塊 |
搜尋驅動類別 — 先搜尋，再依內容類型進行動畫（RWA 路徑）：
| 回傳內容 | 類別 | 動畫 |
|---|---|---|
| 網頁/連結 | webpage | 網頁/UI 動畫（滾動、揭露、游標、註解） |
| 新聞文章 | news | 標題揭露 + 來源卡片 + 關鍵事實註解 |
| 推文 | tweet | 動畫推文卡片 |
| 圖片/實體 | asset-fusion | 資產的幾何形狀 變成 圖表（RWA 劇情融合） |
建置順序：一次一個，覆蓋優先（粗略即可）。kinetic-type 從原型移植；其餘依此類推。
先決條件
macOS Apple Silicon 或 Linux x64。系統工具：brew install node ffmpeg。執行一次 npx hyperframes doctor。macOS GPU 渲染：export PRODUCER_BROWSER_GPU_MODE=hardware。
選用金鑰（若未設定則使用本地備用）— 僅在需要透過 media-use 來源/產生資產的類別需要：
| 金鑰 | 用途 | 備用方案 |
|---|---|---|
GEMINI_API_KEY / GOOGLE_API_KEY | 圖片產生（media-use 解析） | 跳過產生 / 僅搜尋 |
| (asset_scout / 搜尋提供者) | webpage/news/tweet + asset-fusion 真實資產搜尋 | 類別降級為無資產 |
流程
步驟 0 — 初始化
當前工作目錄為代理人工作區根目錄；將所有成品寫入 PROJECT_DIR = videos/<project-name>/。<project-name>：使用使用者提供的目錄，否則使用來自意圖的短 kebab-case 名稱（<subject>-motion）。不要使用工作區基底名稱或時間戳。
僅在 $PROJECT_DIR/hyperframes.json 不存在時：
PROJECT_DIR="${MOTION_GRAPHICS_DIR:-videos/<project-name>}"
mkdir -p "$(dirname "$PROJECT_DIR")"
npx hyperframes init "$PROJECT_DIR" --non-interactive --example=blank
init 會根據 GitHub 上的最新版本檢查已安裝的技能，並在有任何技能過期時更新全域集合。
限制： 切勿在工作區根目錄執行 hyperframes init；切勿在 PROJECT_DIR 內巢狀建立另一個 hyperframes/；每個 Bash 指令（主代理人 + 子代理人）都必須是 (cd "$PROJECT_DIR" && ...) 子外殼 — 絕不能是裸 cd。
步驟 1 — 規劃（子代理人：導演第 1 部分）
分派一個子代理人。提示 = 完整的 agents/director.md + ## Dispatch context（SKILL_DIR / PROJECT_DIR / 使用者請求 / Schema: <SKILL_DIR>/references/shot-plan-ir.md）。它必須：
- 決定：這需要搜尋嗎？（第一個分支）
- 否 → 選擇一個形式類別（kinetic-type / stat / charts / logo-reveal / lower-thirds）；內容由使用者提供；
asset_needs: []。 - 是 → 將搜尋計畫輸出到
asset_needs[]（新聞/網頁/推文/圖片；雙極查詢）。具體的搜尋驅動類別（webpage / news / tweet / asset-fusion）由步驟 2 回傳的內容類型確認，並在步驟 3 最終確定。
- 否 → 選擇一個形式類別（kinetic-type / stat / charts / logo-reveal / lower-thirds）；內容由使用者提供；
- 寫入草稿
shot-plan.json（信封 + 所選形式類別 或 搜尋意圖 +asset_needs+ 一段鏡頭簡報）。結構：references/shot-plan-ir.md。
驗證：[ -s "$PROJECT_DIR/shot-plan.json" ] && echo ok || echo missing。
步驟 2 — 來源 ◇（Bash：media-use，條件式）
如果 shot-plan.json.asset_needs 非空，則解析資產（搜尋/產生/擷取 → 凍結的專案局部路徑 + 分類帳）。請參閱 phases/source/guide.md（包裝 media-use resolve；搜尋驅動類別使用新聞/網頁/推文/圖片搜尋）。如果 asset_needs 為空，則跳到步驟 3。
# 說明 — 請參閱 phases/source/guide.md
(cd "$PROJECT_DIR" && node <SKILL_DIR>/phases/source/resolve.mjs --plan ./shot-plan.json --out ./assets)
優雅降級：如果搜尋/提供者不可用，類別會回退到無資產（在 context.log 中註記）。
步驟 3 — 設計（子代理人：導演第 2 部分）
分派一個子代理人（提示 = agents/director.md 第 2 部分 + 分派上下文，包含已解析的 assets/index.md（如果步驟 2 已執行）+ catalog-map.md）。它會圍繞可用的資產設計鏡頭：選擇目錄區塊 + hyperframes-animation 規則/藍圖、佈局、動態、節拍，以及（對於 asset-fusion）element_positions + 滴管調色盤。最終確定 shot-plan.json（content.block + content.customize + 各類別內容）。
步驟 4 — 建置（子代理人：建置者，重用優先）
分派一個子代理人。提示 = 完整的 agents/builder.md + 分派上下文（shot-plan.json、catalog-map.md、該類別的 module.md、references/motion-vocabulary.md、references/builder-contract.md）。重用優先：npx hyperframes add <block> + 就地自訂；僅手動編寫間隙 + 資產融合機制。輸出 compositions/index.html，遵循 HF 契約（暫停的 GSAP 時間軸在 window.__timelines 上、class="clip" + 穩定的 ID、tl.seek(0)、確定性）。
步驟 5 — 渲染（Bash）
(cd "$PROJECT_DIR" && npx hyperframes render . --skill=motion-graphics -q draft -o ./renders/video.mp4)
# 透明疊加變體：--format webm（或 mov）
步驟 6 — 驗證（Bash → 失敗時由修復子代理人處理）
(cd "$PROJECT_DIR" && npx hyperframes lint . && npx hyperframes inspect .)
exit 0 → 完成。對於 lint/inspect 錯誤，分派修復子代理人（agents/finalize.md：快照 QA + 一次原地修復傳遞 + 重新渲染）。在修復中絕不更改固定的持續時間。
報告 + 選用預覽
報告最終輸出（renders/video.mp4，或 .webm / .mov 疊加變體） + 持續時間。在執行期間不要開啟預覽。 僅應要求提供，在渲染之後啟動，以便提供最終檔案：
(cd "$PROJECT_DIR" && npx hyperframes preview) # Studio UI；或使用 `npx hyperframes play` 取得可分享連結
旗標位於 hyperframes-cli 技能中（references/preview-render.md）。
恢復表
| 狀態 | 從哪裡繼續 |
|---|---|
沒有 shot-plan.json | 步驟 1（規劃） |
shot-plan.json 有 asset_needs，沒有 assets/ | 步驟 2（來源） |
shot-plan.json 最終版，沒有 compositions/index.html | 步驟 3/4（設計+建置） |
compositions/index.html 存在，沒有 renders/video.mp4 | 步驟 5（渲染）+ 步驟 6 |
renders/video.mp4 存在 | 報告 + 停止 |
設計備註（維護者 — 執行時不會讀取此處）
- 資產優先的理由： 來源前置，並告知鏡頭設計（RWA 流程：分析 → 搜尋 → 審查 → 組合）。搜尋驅動類別（
webpage/news/tweet）和asset-fusion都依賴 media-use 搜尋（新聞/網頁/推文/圖片），這是 media-use 記錄在案的 RWA 血統。 - 重用優先： 生態系統內的 LLM 生成模板類比是「組合目錄區塊 +
hyperframes-animation規則」。HF 的暫停 GSAP 時間軸 ≙ Remotion 的useCurrentFrame。 - 類別模組契約： 一個
categories/<id>/module.md（規劃 + 建置），共享references/motion-vocabulary.md（+ 選用評估）。新增一個類別 = 放置資料夾 + 在agents/director.md中註冊其分類器行 + 在catalog-map.md中註冊其行；階段流程保持不變。 - 目錄結構：
videos/<project-name>/ hyperframes.json context.log shot-plan.json # IR（導演輸出） assets/ assets/index.md # media-use 輸出（如果已來源） compositions/index.html # 建置者輸出 renders/video.mp4 - 註冊： 在
hyperframes路由器中 — 新增「設計導向的短動態圖形」意圖 + 工作流程描述；從/general-video中劃出 motion-graphics 觸發條件；新增反向「請勿使用」邊緣。請參閱motion-graphics-genre.md§5-7。