general-video

media-use：在取得音訊/圖片之前，請先呼叫 /media-use 從 HeyGen 目錄解析 BGM/SFX/圖片。先執行 --adopt 以註冊現有資產。請參閱 /media-use 技能。

general-video — 一般影片工作流程

在開始建構前先確認路線。 這是用於自訂組合創作的備用方案。如果輸入內容明顯符合某個專門工作流程，請優先使用：行銷產品 → /product-launch-video；一般網站 → /website-to-video；主題解說 → /faceless-explainer；GitHub PR → /pr-to-video；現有素材 → /embedded-captions · /graphic-overlays；短無旁白動態圖形 → /motion-graphics；Remotion 移植 → /remotion-to-hyperframes。不適用範圍：即時/渲染時資料、對已完成影片進行 NLE 風格的剪輯，或產生 HyperFrames 無法捕捉的素材。不確定？請先閱讀 /hyperframes。

只建構被要求的內容。 標題卡就是標題卡 — 不是標題卡加上三個輔助場景、背景音樂和字幕。如果額外的場景或元素確實能改善作品，請_提議_它們；不要默默加入。對於小型編輯（修正顏色、調整一個持續時間、加入一個元素），跳過規劃步驟，直接進行建構。

方法

探索 — 僅限開放式請求

對於模糊、探索性的請求（「為我們的品牌做些東西」、「一個酷炫的開場」）— 在選擇顏色之前先了解意圖：

• 觀眾 — 誰會觀看？開發者/高階主管/一般消費者？
• 平台 — 在哪裡播放？社群媒體（15秒）/網站主視覺/產品展示/內部使用？
• 優先級 — 最重要的是什麼？動畫品質/內容準確性/品牌忠實度/速度？
• 變化 — 一個最佳版本，還是 2-3 個有意義的不同選項（不同的節奏、能量或結構 — 而不僅僅是顏色互換）？

對於具體請求（「加入一個標題卡」、「修正場景 3 的時間點」），跳過探索。

步驟 1 — 設計系統 → hyperframes-creative

首先建立視覺識別。如果專案有設計規格，請閱讀它（優先順序 frame.md → design.md → DESIGN.md；將其視為品牌真理 — 確切的顏色、字型、限制）。

如果沒有規格，你必須在選擇任何顏色或字型之前，同時閱讀 hyperframes-creative/references/house-style.md 和 hyperframes-creative/references/video-composition.md。 house-style.md 提供了「解讀提示/產生真實內容」的開場、懶惰預設列表和圖層配方；video-composition.md 提供了影片媒介的密度/比例/前景細節（資料條、註冊標記、等寬字型元資料、「8-10 個元素，其中兩個使用者沒要求的」），這些區分了「製作完成」與「生成」。只讀其中一個是最常見的遺漏 — video-composition.md 正是代理程式會跳過的那個，而它正是防止輸出扁平、置中、像網頁一樣的關鍵。不要自行發明色板並跳過這些；進入 hyperframes-creative 是強制性的，不是可選分支。從那裡，也根據需要提取一個命名的風格/情緒 → references/visual-styles.md，或互動式選擇器 → references/design-picker.md。規格/風格定義的是品牌，而不是組合規則。

找到切入點（模糊簡報，無規格）： 在選擇顏色之前，寫一句話 — 這個名字/詞彙/主題喚起了什麼，以及什麼視覺_世界_（隱喻、場景、樂器、主題）表達了它？例如，一個網路安全工具 → 保險庫門/周界掃描線/鎖芯；一個冥想應用程式 → 潮汐、呼吸、緩慢的光暈。閱讀主題的_意義_，而不僅僅是它的文字；選擇一個具體的切入點，而不是字面上的重新造型。這是單場景作品（正確地跳過提示擴展）中提示擴展（步驟 2）的廉價替代品 — 也是設計概念與通用標誌加漸層背景之間的區別。

<HARD-GATE>
在撰寫任何組合 HTML 之前，確認你已具備全部四項：

1. 一個視覺識別，基於規格或 house-style.md — 不是當場發明的。（使用了 #333、#3b82f6 或 Roboto？你跳過了。）
2. 一個一句話的概念切入點（「找到切入點」步驟），適用於任何超越瑣碎編輯的內容 — 不是提示詞的字面重新造型。
3. 一個來自嵌入列表的字型配對（hyperframes-creative/references/typography.md → 「可嵌入的字型」），有目的地選擇 — 不是預設使用 Inter/Helvetica Neue/system-ui，也絕不使用未嵌入的顯示字型，並期望它能渲染（未捆綁的名稱只有在本地自動捕捉時才能嵌入 — 而雲端渲染無法捕捉它們）。
4. 一個來自 video-composition.md 的前景/密度計劃 — 錨定到邊緣、8-10 個元素、前景元資料、背景紋理規則。（在扁平顏色上置中堆疊，少於約 6 個元素且沒有邊緣錨定的細節？你跳過了 — 那就是通用的特徵。）
   </HARD-GATE>

步驟 2 — 提示擴展 → hyperframes-creative

對每個多場景組合執行（單場景作品和瑣碎編輯跳過）。根據設計規格和 house style 將請求基礎化，形成一個一致的中間產物，讓下游工作以相同方式讀取。請參閱 hyperframes-creative/references/prompt-expansion.md。

步驟 3 — 規劃

在撰寫 HTML 之前，先從高層次思考：

1. 什麼 — 觀眾體驗：敘事弧、關鍵時刻、情感節拍。
2. 結構 — 多少個組合、子組合 vs 內聯、哪些軌道承載影片/音訊/疊加層/字幕。關於單一檔案 vs 模組化子組合的選擇，請參閱 hyperframes-core/references/composition-patterns.md § 兩種架構（經驗法則：≥3 個硬場景切換，或任何重複使用的場景 → 模組化；一個短的單場景作品保持一個檔案）。
3. 節奏 — 在實作之前命名模式（例如 fast-fast-SLOW-SHADER-hold）；請參閱 hyperframes-creative/references/beat-direction.md。
4. 時間點 — 哪些剪輯驅動持續時間、轉場落在哪裡、節奏。
5. 佈局 — 先建立最終狀態（見下文）。
6. 動畫 — 然後透過 hyperframes-animation 加入動畫。

先佈局再動畫

將每個元素放置在其最顯眼的時刻所在的位置 — 完全進入、正確放置、尚未退出。先將其寫成靜態 HTML + CSS。還不要使用 GSAP。

為什麼： 如果你將元素放置在它們的動畫起始狀態（畫面外、縮放為 0、透明度 0）並補間到你_認為_它們會落地的位置，你是在猜測最終佈局 — 重疊在渲染之前都是看不見的。先建立最終狀態，你就能在加入動畫之前看到並修正佈局問題。

1. 為每個場景識別主要影格 — 最多元素同時可見的時刻。那就是你要建立的佈局。
2. 為該影格撰寫靜態 CSS。內容容器必須用內邊距填滿場景，而不是使用絕對偏移：

.scene-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 120px 160px; /* 內邊距定位內容；填滿任何場景大小 */
  gap: 24px;
  box-sizing: border-box;
}

永遠不要在內容容器上使用 position: absolute; top: Npx — 當內容比空間高時它會溢出。將絕對定位保留給裝飾性元素。

⚠ 上面的 width/height: 100% 只有在每個祖先元素都有明確高度時才有效。 根元素 <div data-composition-id> 和它與 .scene-content 之間的任何包裝元素都必須設定大小（根元素上為 position: relative; width: 1920px; height: 1080px — 請參閱 hyperframes-core → 「根元素必須設定大小」）。跳過這個，flex 容器會收縮到約 0，內容堆疊到左上角，第一個字元在 x=0 處被裁剪 — 而 lint/inspect 仍然報告 0 個問題。而且始終保留 .scene-content 上的 padding（≥80px）：它是標題安全邊距。永遠不要用單純的 gap 取代它。

3. 加入進入動畫 — 使用 gsap.from() 從畫面外/不可見動畫到 CSS 位置（在子組合中偏好使用 gsap.fromTo()，這樣起始狀態是明確的；請參閱 hyperframes-core/references/sub-compositions.md）。CSS 位置是基準事實；補間是到達它的過程。
4. 退出由轉場處理 — 根據 hyperframes-animation/transitions/ 中的場景轉場規則，只有最終場景會將元素動畫移出；場景之間，轉場本身就是退出。

跨時間的共享空間： 如果元素 A 在元素 B 進入同一區域之前退出，兩者仍然需要為它們各自的主要影格設定正確的 CSS 位置 — 時間軸排序防止它們共存，而佈局步驟會捕捉意外的重疊。分層光暈/陰影和 z 軸堆疊深度是_有意的_重疊；這個步驟是關於捕捉_無意的_碰撞（兩個標題疊在一起、內容溢出畫面）。

建構 — 委派給領域技能

這將技能的全部表面（請參閱 description）映射到其參考資料 — 非詳盡；當意圖未列出時，透過 hyperframes-creative（外觀/概念）、hyperframes-animation（動畫）、hyperframes-core（合約）、hyperframes-media（音訊/字幕）路由。第一行是附加的 — 閱讀它以及你的意圖行，而不是只讀其中一個。

建構…	首先閱讀（按順序）
始終 — 每個非瑣碎的作品，除了下面你的意圖行之外	hyperframes-creative/references/house-style.md + references/video-composition.md（也在步驟 1 / HARD-GATE 中門控；「製作完成，而非生成」的前景細節）
動態排版 / 文字為主	hyperframes-animation/techniques.md（動態文字）+ adapters/gsap-easing-and-stagger.md + rules/kinetic-beat-slam.md
標題卡 / 下方三分之一 / 疊加層 / 子母畫面 / 文字在主題後方	hyperframes-creative/references/composition-patterns.md +（對於置中/設定大小的影格）hyperframes-core → 「根元素必須設定大小」
標誌 / 品牌標記揭示	hyperframes-animation/rules/svg-path-draw.md（繪製）+ rules/3d-text-depth-layers.md + rules/scale-swap-transition.md
資料 / 統計 / 數字	hyperframes-animation/rules/counting-dynamic-scale.md + rules/stat-bars-and-fills.md + hyperframes-creative/references/data-in-motion.md
產品 / 應用程式 / UI 展示	hyperframes-animation/rules/3d-page-scroll.md + rules/cursor-click-ripple.md + rules/press-release-spring.md
音訊反應 / 音樂驅動	hyperframes-creative/references/audio-reactive.md（預先提取頻段；映射到動畫）
旁白 / 配音 / 音樂 / 音效 / 字幕	hyperframes-media → 共享音訊引擎 scripts/audio.mjs（一次呼叫 = TTS + BGM + SFX → audio_meta.json）；透過 hyperframes-core 進行字幕創作和資產放置。請參閱下方的音訊。
多場景 / 轉場	hyperframes-animation/transitions/overview.md 然後 transitions/catalog.md（看完概述還不夠 — GSAP 配方在目錄中）
模組化 / 子組合	hyperframes-core/references/composition-patterns.md + references/sub-compositions.md

音訊：單一引擎（TTS · BGM · SFX）

僅當作品需要時才使用（根據「只建構被要求的內容」— 標題卡上不要有背景音樂）。不要自行製作 TTS 或外包複製：撰寫一個中性的 audio_request.json 並呼叫 hyperframes-media 中的共享引擎。它會根據一個開關自動降級 — 有 HeyGen 憑證 → HeyGen TTS + 音樂/SFX 檢索；無憑證 → ElevenLabs/Kokoro TTS、Lyria/MusicGen BGM 生成，以及捆綁的 SFX 庫。完整的標誌列表 + 請求/元資料結構：hyperframes-media/scripts/audio.mjs 的標頭註解。

// audio_request.json — 每個旁白片段一行；`id` 是你的（將 audio_meta 連接回來）
{
  "lines": [
    { "id": "s1", "text": "你的開場白。", "sfx": ["whoosh"] },
    { "id": "s2", "text": "下一個節拍。" },
  ],
  "bgm": { "query": "calm cinematic underscore" }, // 省略 "mode" → 自動（有 HeyGen 則檢索，否則生成）；"none" 則停用
}

# <MEDIA_DIR> = 已安裝的 hyperframes-media 技能目錄（與此技能同層）
node <MEDIA_DIR>/scripts/audio.mjs --request ./audio_request.json --hyperframes . --out ./audio_meta.json

然後讀取 audio_meta.json：將每個 voices[].path +（bgm.path、sfx[]）掛載為 <audio> 軌道，並使用 voices[].words 作為字幕，全部依照 hyperframes-core（音訊軌道 + 字幕創作）。如果 BGM 走了生成路徑（bgm_pending: true），在最終渲染之前執行 hyperframes-media/scripts/wait-bgm.mjs。

輸出檢查清單 → hyperframes-cli

• [ ] npx hyperframes lint 和 npx hyperframes validate 通過（根據結果阻斷）
• [ ] 如果存在規格（frame.md / design.md），則驗證設計遵循 — 檢查清單在 hyperframes-creative/references/design-adherence.md 中
• [ ] npx hyperframes inspect 通過，或每個溢出都已被有意標記
• [ ] 對比度警告已處理；對於多場景作品，檢閱動畫地圖（hyperframes-animation/scripts/animation-map.mjs）
• [ ] 提供預覽；僅在明確要求時才渲染為 MP4
• [ ] 僅在交接時展示預覽（它是穩定、最終的預覽）；不要在建構過程中彈出 — 建構階段的快照是無頭的