motion-graphics

外掛安裝： 在執行安裝或更新命令之前，請遵循外掛執行規則（當此技能位於 HyperFrames 外掛內部時）。獨立安裝則保留下列更新指示。

首先，保持此技能為最新狀態——請在執行前與使用者確認： npx hyperframes skills update motion-graphics。如果所有內容都是最新的，則快速執行無操作（no-op）；否則會重新整理此技能及其依賴的核心領域技能。

Figma 來源：如果要從 figma.com URL 建立 Logo/資產/動畫，請先執行 /figma——包括資產匯出、品牌令牌以及 Motion→GSAP 轉換（如果圖形是 Figma Motion 匯入），然後基於其輸出進行建置。請勿直接透過原始 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/<專案名稱>/（在第0步中建立）；以下所有路徑都是相對於此目錄。

階段	執行方式	主要成品	詳細流程
init	Bash	hyperframes.json	步驟0
plan	子代理 — 決定是否搜尋？ + 分類 + 資產策略	shot-plan.json（草稿：類別、asset_needs 查詢、簡報）	agents/director.md（第1部分）
source ◇	Bash — 媒體使用解析（如果 asset_needs 為空則跳過）	assets/ + assets/index.md	phases/source/guide.md
design	子代理 — 圍繞已解析資產設計鏡頭	shot-plan.json（最終版：區塊 + 佈局 + 動態 + 位置）	agents/director.md（第2部分）
build	子代理 — 重複使用優先的組合	compositions/index.html	agents/builder.md
verify	Bash — lint、check、證明快照；失敗時修復	snapshots/contact-sheet.jpg	步驟5
approve	詢問預覽或渲染；等待回答	明確的渲染批准	步驟6
render	Bash — hyperframes render（MP4，或使用 --format webm/mov 用於疊加）	renders/video.mp4 或透明疊加	步驟6

◇ 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 標誌 / 品牌鎖定（使用者 Logo）	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/<專案名稱>/。<專案名稱>：使用使用者提供的目錄名稱，否則從意圖中取一個簡短的 kebab-case 名稱（<主題>-motion）。不是工作區的基礎名稱或時間戳。

僅當 $PROJECT_DIR/hyperframes.json 不存在時：

PROJECT_DIR="${MOTION_GRAPHICS_DIR:-videos/<專案名稱>}"
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）。它必須：

1. 決定：是否需要搜尋？（第一個分支）

• 否 → 選擇一個表單類別（kinetic-type / stat / charts / logo-reveal / lower-thirds）；內容由使用者提供；asset_needs: []。
• 是 → 將一個搜尋計畫輸出到 asset_needs[]（新聞 / 網頁 / 推文 / 圖片；兩極查詢）。具體的搜尋驅動類別（webpage / news / tweet / asset-fusion）由步驟2中返回的內容類型確認，並在步驟3中最終確定。

2. 寫入一個草稿 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 — 設計（子代理：導演第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 lint .)
(cd "$PROJECT_DIR" && npx hyperframes check .)
(cd "$PROJECT_DIR" && npx hyperframes snapshot --at <證明時間點>)

選擇能顯示開啟狀態、標誌性動作和最終停頓的證明時間點。在繼續之前檢查生成的聯絡人或快照表。如果 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 流程：分析 → 搜尋 → 審查 → 組合）。確保每個動畫都基於實際可用的真實內容。
• 類別正規化： 所有類別最終都會產生一個 shot-plan.json，供建置器消費，從而允許跨類別共用建置邏輯。
• 無旁白： 此技能專為純視覺動態圖形設計；旁白內容應使用 /hyperframes 路由。