首先，保持此技能的更新 — 自動執行，無需提問：
npx hyperframes skills update motion-graphics。當一切為最新狀態時，這是一個快速的空操作；否則，它會在你依賴此技能及其依賴的核心領域技能之前，刷新它們。
figma 來源：如果要建構的標誌/資產/動畫來自 figma.com 網址，請先執行
/figma— 包含資產匯出、品牌標記，以及如果該圖形是 Figma Motion 匯入，則進行 Motion→GSAP 轉換 — 然後根據其輸出進行建構。請勿直接使用原始 MCP 工具驅動 Figma：這會跳過 SVG 淨化、.media/manifest.jsonl來源追蹤以及品牌標記var()綁定，因此後續的品牌變更將無法傳播，除非完整重新匯入。
motion-graphics — 調度入口
前門是
/hyperframes。 此技能用於製作短篇、設計主導、無旁白的動態圖形（動態即是訊息；約 10 秒以內，無畫外音）。任何更長、有旁白或多場景的內容 — 或不確定時 → 先閱讀/hyperframes：意圖層負責所有路由決策。
此工作流程本質上為自主設計 — 最多一個澄清問題（agents/director.md），然後在建構後直接進行驗證，無需中間審查。意圖層（/hyperframes → references/intent-interview.md）會直接路由至此，無需詢問執行形狀的問題；對於如此簡短的片段，故事板和配套會話幾乎沒有幫助。渲染仍由使用者控制：在檢查和校樣快照通過後，詢問來自 ../hyperframes-core/references/brief-contract.md 的標準問題「先預覽，還是渲染？」。當 BRIEF.md 存在時，請在導演提問之前先閱讀它。
一個短篇、設計主導的動態圖形。資產優先：在設計鏡頭之前，先決定資產策略並取得實際素材，然後圍繞你所擁有的資產設計鏡頭，最後透過重複使用目錄功能進行組合。所有成品都放在 PROJECT_DIR = videos/<project-name>/（在第 0 步建立）；以下所有路徑都是相對於此目錄。
| 階段 | 執行方式 | 主要成品 | 詳細流程 |
|---|---|---|---|
| 初始化 | Bash | hyperframes.json | 第 0 步 |
| 規劃 | 子代理 — 決定是否搜尋？ + 分類 + 資產策略 | shot-plan.json（草稿：類別、asset_needs 查詢、簡報） | agents/director.md（第 1 部分） |
| 來源 ◇ | Bash — media-use 解析（若 asset_needs 為空則跳過） | assets/ + assets/index.md | phases/source/guide.md |
| 設計 | 子代理 — 圍繞已解析資產進行鏡頭設計 | shot-plan.json（最終版：區塊 + 佈局 + 動態 + 位置） | agents/director.md（第 2 部分） |
| 建構 | 子代理 — 優先重複使用進行組合 | compositions/index.html | agents/builder.md |
| 驗證 | Bash — lint、check、校樣快照；失敗時修復 | snapshots/contact-sheet.jpg | 第 5 步 |
| 核准 | 詢問預覽或渲染；等待回答 | 明確的渲染核准 | 第 6 步 |
| 渲染 | Bash — hyperframes render（MP4，或 --format webm/mov 用於疊加） | renders/video.mp4 或透明疊加 | 第 6 步 |
◇ 來源 僅在選擇的類別宣告有資產時執行。純程式碼/文字類別（例如 kinetic-type、大多數 charts/stat）的 asset_needs: []，並會直接從規劃跳到設計。
類別 — 由搜尋決策區分
規劃 的第一個決策是：這需要搜尋嗎？ 這個分支將類別分為兩組；然後選出具體類別 — 對於搜尋驅動的類別，根據搜尋結果的內容類型來選擇。每個類別都是一個 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-* + 註冊表疊加區塊 |
maps | 地理動態 — 高亮區域、連接地點、縮放到某位置（向量圖層或烘焙底圖圖層） | us-map / world-map 系列 + bake-basemap.mjs |
搜尋驅動類別 — 先搜尋，再根據內容類型製作動畫（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 --skill=motion-graphics
init 會檢查已安裝的技能是否與 GitHub 上的最新版本一致，並在發現過期時更新全域技能集。
限制： 永遠不要在 workspace 根目錄執行 hyperframes init；永遠不要在 PROJECT_DIR 內嵌套另一個 hyperframes/；每個 Bash 命令（主代理 + 子代理）都必須在 (cd "$PROJECT_DIR" && ...) 的子 shell 中執行 — 絕不使用裸 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> + 就地自訂；僅手動撰寫間隙 + asset-fusion 的擴充功能。輸出 compositions/index.html，需符合 HF 契約（GSAP 時間軸暫停在 window.__timelines、class="clip" + 穩定 ID、tl.seek(0)、確定性）。
第 5 步 — 驗證（Bash → 失敗時啟動修復子代理）
(cd "$PROJECT_DIR" && npx hyperframes lint .)
(cd "$PROJECT_DIR" && npx hyperframes check .)
(cd "$PROJECT_DIR" && npx hyperframes snapshot --at <proof-times>)
選擇能顯示初始狀態、標誌性動作和最終停留的校樣時間點。在繼續之前檢查生成的聯繫表或快照。當 lint、check 或快照失敗時，調度修復子代理（agents/finalize.md）進行一次就地修復，然後重新執行失敗的閘門。絕不能僅僅為了隱藏缺陷而改變固定的持續時間。
第 6 步 — 核准與渲染（Bash）
詢問一個問題：「先預覽，還是渲染？」如果使用者選擇預覽，則打開 Studio 並在修訂後返回同一個核准閘門：
(cd "$PROJECT_DIR" && npx hyperframes preview)
僅在收到明確的渲染答案後才進行渲染：
(cd "$PROJECT_DIR" && npx hyperframes render . --skill=motion-graphics -q high -o ./renders/video.mp4)
# 透明疊加變體：--format webm（或 mov）
驗證輸出的檔案存在、非空且具有預期的持續時間。最終交接時需指明成品名稱、實際持續時間、合成或影格 ID、校樣時間點，以及已檢查的聯繫表或快照。標誌存在於 /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 存在，但無校樣快照 | 第 5 步（驗證） |
| 檢查和校樣快照通過，但無核准的渲染 | 第 6 步（核准） |
| 核准的渲染已存在 | 驗證輸出，然後報告 |
設計備註（維護者 — 執行時不會讀取此部分）
- 資產優先的依據： 資源取得被前置，並為鏡頭設計提供資訊（RWA 流程：分析 → 搜尋 → 審查 → 組合）。搜尋驅動的類別（
webpage/news/tweet）和asset-fusion都依賴 media-use 搜尋（新聞/網頁/推文/圖片），這是 media-use 文件記錄的 RWA 沿革。 - 重複使用優先： 生態系統中類似 LLM 生成模板的方案是「撰寫...