外掛安裝： 在執行設定或更新命令前，若此技能位於 HyperFrames 外掛內，請遵循外掛執行規則。獨立安裝則保留下方的更新說明。
首先，保持此技能的最新狀態 — 先與使用者確認再執行：
npx hyperframes skills update motion-graphics。若一切已是最新，則快速無操作；否則它會先更新此技能及其依賴的核心領域技能，然後您再依賴它們。
figma 來源：如果要用來構建的標誌/素材/動畫來自 figma.com 的 URL，請先執行
/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/references/brief-contract.md 中的規範詢問「先預覽，還是直接渲染？」。如果 BRIEF.md 存在，請在導演提問前先閱讀它。
一個簡短的設計主導動態圖形。素材優先：在設計分鏡前，先決定素材策略並取得真實素材，然後根據你擁有的素材設計分鏡，接著透過重複使用目錄功能來進行組合。所有產出物都放在 PROJECT_DIR = videos/<project-name>/（在第 0 步建立）；以下所有路徑都是相對於此目錄。
| 階段 | 執行 | 主要產出物 | 詳細流程 |
|---|---|---|---|
| 初始化 | Bash | hyperframes.json | 第 0 步 |
| 策劃 | 子代理 — 決定是否搜尋？ + 分類 + 素材策略 | shot-plan.json（草稿：類別、asset_needs 查詢、摘要） | agents/director.md（第一部分） |
| 來源獲取 ◇ | Bash — 媒體使用解析（若 asset_needs 為空則跳過） | assets/ + assets/index.md | phases/source/guide.md |
| 設計 | 子代理 — 圍繞已解析的素材進行分鏡設計 | shot-plan.json（最終版：區塊 + 佈局 + 動畫 + 位置） | agents/director.md（第二部分） |
| 建構 | 子代理 — 以重複使用為優先的組合 | 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。
可選金鑰（若未設定則使用本地備用方案）— 僅在透過媒體使用功能獲取/產生素材的類別需要：
| 金鑰 | 用途 | 備用方案 |
|---|---|---|
GEMINI_API_KEY / GOOGLE_API_KEY | 圖片生成（媒體使用解析） | 跳過生成 / 僅搜尋 |
| (asset_scout / 搜尋提供者) | webpage/news/tweet + asset-fusion 真實素材搜尋 | 類別降級為無素材 |
流程
第 0 步 — 初始化
當前工作目錄為代理工作區根目錄；所有產出物都寫入 PROJECT_DIR = videos/<project-name>/。<project-name>：使用使用者提供的目錄名稱，否則從意圖中取一個簡短的 kebab-case 名稱（<主題>-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 上的最新版本，如果有任何技能過期，會更新全域組合。
限制： 永遠不要在 workpace root 執行 hyperframes init；永遠不要在 PROJECT_DIR 內巢狀另一個 hyperframes/ 目錄；每個 Bash 命令（主代理 + 子代理）都必須在 (cd "$PROJECT_DIR" && ...) 的子 shell 中執行 — 永遠不要使用裸 cd。
第 1 步 — 策劃（子代理：導演第一部分）
調度一個子代理。提示詞 = 完整的 agents/director.md + ## 調度上下文（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：媒體使用，條件執行）
如果 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 步 — 設計（子代理：導演第二部分）
調度一個子代理（提示詞 = agents/director.md 第二部分 + 調度上下文，包含已解析的 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 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 --background)
僅在獲得明確的渲染答案後才進行渲染：
(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 流程：分析 → 搜尋 → 審查 → c
…（原文已截斷）