專業動態圖形設計 (V2 架構) 是做什麼的？
打造清晰、確定性強、如出自資深技術動態總監之手的工作室級動態圖形影片。此技能強制執行嚴格的「反廉價感」視覺標準、數學物理定律、多引擎路由，以及一條完整的 10 階段製作管線。
何時啟用此技能
- 產生程式化影片程式碼（Remotion / React、HTML/CSS/SVG + GSAP 或 HTML5 Canvas）。
- 製作影片類別：社群 Reels/Shorts (
9:16)、品牌宣傳片 (16:9/1:1)、SaaS 產品發表影片、UI 微演示、電影級動態文字或技術解說影片。 - 重構那些看起來像「AI 廉價動畫」的內容（模糊的污漬、霓虹網格光暈、通用的漸層、未固定的 CSS 淡入、機械化的線性緩動）。
- 在撰寫程式碼之前，規劃影格精準的分鏡表、數學計時與音效同步設計。
模型執行規則 (Sonnet & Haiku 優化)
- 份數勝於形容詞：將所有美學意圖直接轉譯為精確的數值代碼（影格數量、彈簧的
stiffness/damping、cubic-bezier 曲線、8px 網格增量以及十六進位/OKLCH 色彩）。絕不使用模糊的形容詞來描述視覺品質。 - 確定性影格數學：每個動畫必須嚴格由
frame變數或明確的時間軸progress(0.0 到 1.0) 驅動。絕不使用未設種子的Math.random()、setTimeout或在渲染過程中會失去同步的未固定 CSSinfinite關鍵影格。 - 僅使用 GPU 安全屬性：對
transform(translate3d、scale、rotate)、opacity、clip-path或 SVGstroke-dashoffset進行動畫處理。絕不逐影格動畫化width、height、top、left或高成本的filter: blur()。 - React Hooks 衛生規則：在 Remotion 中，
spring()是一個純計算函數。絕不在數學輔助函數前加上use前綴（例如，使用getStaggerSpringProgress()，而非useStaggerSpring()），以避免在.map()迴圈內違反 React Hooks 規則。
多引擎路由矩陣
在產生專案程式碼前，依據 多引擎選擇指南 評估需求：
- 引擎 A：Remotion (React)：最適合複雜的 UI 模型、SaaS 發表、模組化多場景影片、資料驅動的 Reels 以及影格精準的 CLI 渲染。
- 引擎 B：HTML/CSS/SVG + GSAP：最適合動態文字、編輯品牌宣言、SVG 標誌描邊動畫以及輕量級瀏覽器播放。請參閱 GSAP 模式。
- 引擎 C：HTML5 Canvas：最適合程序化圖形、粒子網絡、數學動畫和生成式視覺效果。
10 階段影片製作管線
每個專案請依序遵循以下階段：
階段 1：解讀需求
識別目標平台、長寬比、時長 ($t$)、FPS、核心訊息、視覺風格以及可用素材。僅提出必要的缺失問題（最多 4 點）。若細節未指定，則套用工作室預設值：
- 長寬比：桌面/網頁為
16:9(1920x1080)；社群為9:16(1080x1920)。 - 影格率：UI 和社群為
60fps；編輯和說明性質為30fps；電影級文字為24fps。
階段 2：分類路由
將需求對應至 分類腳本 中的 6 種分類藍圖之一：
- 分類 A：社群 Reels、TikToks 與 Shorts (
9:16，60fps，12 秒–30 秒) - 分類 B：品牌宣傳與宣言 (
16:9/1:1，30fps，20 秒–45 秒) - 分類 C：SaaS 產品發表影片 (
16:9，60fps，45 秒–90 秒) - 分類 D：功能亮點 / UI 微演示 (
1:1/4:5，60fps，10 秒–25 秒) - 分類 E：電影級動態文字 (
16:9/9:16，24/30fps，15 秒–45 秒) - 分類 F：解說與教育影片 (
16:9，30/60fps，45 秒–120 秒)。詳細內容請見 解說腳本。
階段 3：素材發現與驗證
收集真實的品牌素材（標誌、UI 截圖、字型、調色盤）。
- 保持真實品牌標誌完整，不扭曲其長寬比。
- 當提供真實截圖時，絕不用偽造的佔位 UI 取代真實的產品截圖。
- 使用
scripts/check-assets驗證素材路徑。
階段 4：分鏡規劃與數學計時
建立一個明確的時間軸表格，根據秒數和 FPS 計算影格數： $$\text{frame} = \text{round}(t \times fps)$$ 定義各場景的開始/結束時間、視覺描述、攝影機過場和音效提示。確保場景時長符合總目標時長，且無意外重疊。
階段 5：集中式設計系統 (BRAND_CONFIG)
在撰寫場景 JSX/HTML 之前，先建立設計代幣：
- 色彩：從 反廉價感規則 中選擇一個精選系統（Swiss 技術暗色、編輯暖色紙張、或 Kinetic Mono）。
- 字體：遵循 字體指南（顯示用字體設定負字距
-0.04em+ 等寬中繼資料設定正字距+0.08em+tabular-nums）。 - 幾何：強制執行同心圓角數學：$R_{inner} = \max(0, R_{outer} - Padding)$。
階段 6：模組化生產程式碼
根據 templates/ 中所選引擎的起始範本，生成乾淨、模組化的程式碼：
templates/remotion-starter/：包含config.ts、motion.ts和元件的模組化 Remotion 組合。templates/gsap-starter/：影格確定性的 GSAP 時間軸設定。templates/canvas-starter/：程序化 2D 畫布繪圖迴圈。 使用scripts/validate-project驗證結構。
階段 7：音訊與音效設計
依據 音訊設計指南 加入音效層：
- 在語音旁白段落期間，將背景音樂的音量降低 12–16dB。
- 將過場「颼」聲對齊在視覺中點前 2 影格；將撞擊「砰」聲對齊到精確的視覺接觸影格。
- 確保所有音樂皆為免版稅 / 已獲得商業使用授權。
階段 8：渲染與編碼
使用高品質的確定性設定進行渲染：
# Remotion 高品質網頁 MP4 (H.264，CRF 18，YUV420P)
npx remotion render src/index.ts MainComposition out/video.mp4 --codec=h264 --crf=18
階段 9：視覺品質保證
執行 影片品質檢查清單：
- 在時長的 25%、50%、75% 和 100% 處渲染靜態預覽影格 (
npx remotion still ... --frame=N)。 - 檢查文字裁切、8px 網格對齊、對比度以及安全區域（
9:16頂部 220px / 底部 340px）。 - 使用
scripts/inspect-output out/video.mp4驗證最終影片輸出。
階段 10：交付與交接
提供：
- 渲染後的影片輸出檔（或確切的可重現渲染指令）。
- 符合範本架構的乾淨原始碼專案。
- 在
public/中整理好參考素材。 - 運行說明與驗證日誌。
強制性品質閘門
在結束任何動態圖形任務之前，請確認：
- 沒有通用的
filter: blur()污漬或紫色到藍色的 AI 漸層。 - 沒有違反 React Hooks 規則（使用像
getStaggerSpringProgress這樣的純輔助函數）。 - 所有動畫都由
frame或標準化的progress確定性地驅動。 -
node scripts/validate-project.js <project-dir>以退出碼 0 結束。 -
node scripts/check-assets.js <project-dir>以退出碼 0 結束。 - 透過
node scripts/inspect-output.js <output-path>驗證渲染輸出。