SaaS 發佈影片：創意總監
每部影片都應該為其產品量身打造：擁有自己的概念、結構、外觀和轉場。此技能是一套導演 + 工具箱，而非模板。絕不要退回到單一風格。
需求
Node 18+、FFmpeg 已加入 PATH、npx [email protected]。HyperFrames 技能 hyperframes-creative、hyperframes-animation 和 hyperframes-registry（安裝：npx [email protected] init <any-dir>；更新：npx [email protected] skills update）。僅在音樂分析時需要 Python + pip install librosa。
參考影片？ 如果使用者發送了要複製的影片（「像這樣」），請遵循 references/REFERENCE.md：在步驟 1 之後立即執行 scripts/analyze-reference.mjs 並寫入 reference.md。它會影響提案、腳本、建置檢查和音樂。
工作流程（4 個檢查點需要使用者確認）
-
設置並了解產品。 執行
node <skill>/scripts/new-project.mjs <dir>。然後從最可用的來源了解產品：- 程式碼： 讀取元件、路由、主題和文案；寫入
brand.json（references/BRAND.md）並執行scripts/brand.mjs。 - 連結：
node <skill>/scripts/from-link.mjs <url> <dir>寫入brand.json和brand-kit.md；驗證標誌和顏色。 - 截圖： 要求提供標誌、顏色和關鍵畫面。
列出實際功能、目標受眾和語氣。
- 程式碼： 讀取元件、路由、主題和文案；寫入
-
檢查點：提案 3 個方向。 使用 references/PITCH.md。結合 references/DIRECTIONS.md 中的風格（4 個家族 × 3 種外觀）與 references/NARRATIVES.md 中的結構。三個方向必須不同（至少 2 個家族），並且每個方向都要有渲染的關鍵幀。使用者選擇或混合；將決定儲存到
direction.md。如果有參考影片，方向 A 是該參考影片的指定還原度，並且每個靜態幀都會與它所回應的參考幀並排顯示。 -
檢查點：腳本。 為所選方向建立節拍表（場景、畫面內容、文案、動態、轉場、音效），加上精確的 UI 操作。獲得批准後，詢問所需的應用程式內截圖（references/UI-REBUILD.md）。
-
檢查點：圖片（僅在方向需要時才進行）。撰寫提示並等待檔案；切勿自行生成或偽造它們（references/IMAGES.md）。
-
建置。
- 每個場景一個子合成。
- 對於每個場景，讀取其 HyperFrames 藍圖，並在手工建置之前先搜尋註冊表（
npx [email protected] catalog <words> --json）。 - 產品場景從
reference/ui-rig.html開始。使用lib/fx.js處理動畫，使用lib/three-stage.js處理 3D。 - 循環進行 lint → 快照 → 修正，直到每個影格都看起來不錯，然後製作草稿渲染（references/WORKFLOW.md）。如果有參考影片，使用
analyze-reference.mjs --compare檢查草稿。
-
檢查點：音樂。 寫入
music-plan.json，執行scripts/music-plan.mjs，並告訴使用者在 ElevenLabs 生成 2-4 個錄音。使用analyze-track.py --drop對齊它們，使用mix-variations.mjs混合，然後讓使用者挑選（references/MUSIC.md）。 -
交付。 裝載音軌，以
-q delivery渲染，然後執行scripts/finalize.mjs（−14 LUFS 母帶 + 小於 100 MB 的上傳版本）。
規則
- 僅限實際功能、真實 UI、示範資料。 切勿發明畫面；要求提供它們。
- 每部影片一個招牌手法和 2-3 個轉場（或參考影片自己的那一套），並一致地使用。每個文字行都必須停留足夠長的時間以便閱讀。
- 場景中僅使用品牌變數（
var(--brand-primary)、var(--font-display)）；絕不要硬編碼品牌色碼或字體名稱。 - 參考是文法，不是內容。 複製其節奏、轉場、字體和顏色角色；絕不要複製其素材、標誌、名稱、文案或音樂。
- 沒有預設風格。 如果草稿開始偏向通用的「暗色漸層 + 傾斜視窗 + 文字卡片」，請停止並重新閱讀
direction.md。 - 在開始建置之前，請先閱讀 references/GOTCHAS.md。它列出了 HyperFrames 中會消耗渲染資源的陷阱。
檔案
| 路徑 | 說明 |
|---|---|
toolkit/fx.js | 動畫助手：打字效果、串流文字、甩鏡、遮罩揭示、游標、數字翻轉、路徑繪製/跟隨 |
toolkit/three-stage.js | Three.js 筆電 / 手機 / 浮動面板舞台，具備關鍵幀攝影機和螢幕切換 |
toolkit/ui-rig.html | UI 重建腳手架（平面 / 傾斜 / 正面攝影機），複製到每個專案的 reference/ 中 |
toolkit/skeleton/ | 空的根目錄 index.html（品牌標記、importmap、fx） |
examples/ | 技術示範，每個家族一個：new-project.mjs <dir> --examples 會掛載它們。研究，切勿複製。 |
scripts/ | new-project、from-link、brand、analyze-reference、fetch-sfx、music-plan、analyze-track.py、mix-variations、finalize |