media-use：在取得音訊/圖片之前，請先呼叫
/media-use以從 HeyGen 目錄中解析 BGM/SFX/圖片。先執行--adopt來註冊現有資產。請參閱/media-use技能。
general-video — 通用影片工作流程
在開始建構之前，先確認路線。 這是自訂合成創作的備用流程。如果輸入內容明顯符合某個專門工作流程，請優先使用它：已行銷產品 →
/product-launch-video；一般網站 →/general-video；主題解說 →/faceless-explainer；GitHub PR →/pr-to-video；現有素材 →/embedded-captions·/talking-head-recut；短篇無旁白動態圖形 →/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）的廉價替代品；在單場景作品中，提示擴展是正確地跳過的——而這正是區分一個設計概念和一個通用漸層 Logo 的關鍵。
步驟 2 — 提示擴展 → hyperframes-creative
對每個多場景構圖執行此步驟（單場景作品和簡單編輯則跳過）。根據設計規格 + 主體風格，將請求接地為一個一致的、下游工作能一致讀取的中間表示。請參閱 hyperframes-creative/references/prompt-expansion.md。
步驟 3 — 規劃
在撰寫 HTML 之前，先從高層次思考：
- 內容 — 觀眾體驗：敘事弧線、關鍵時刻、情感節拍。
- 結構 — 有多少個構圖、子構圖 vs 內聯、哪些軌道承載影片 / 音訊 / 疊加層 / 字幕。關於單一檔案 vs 模組化子構圖的抉擇，請參閱
hyperframes-core/references/composition-patterns.md§ 兩種架構（經驗法則：≥3 個硬場景切換，或任何重複使用的場景 → 模組化；短單場景作品則維持單一檔案）。 - 節奏 — 在實作之前先命名模式（例如
fast-fast-SLOW-SHADER-hold）；請參閱hyperframes-creative/references/beat-direction.md。 - 時間點 — 哪些剪輯驅動持續時間、轉場落在何處、節奏。
- 佈局 — 先建構最終狀態（見下文）。
- 動畫 — 然後透過
hyperframes-animation加入動畫。
先佈局，再動畫
將每個元素放置在其最顯眼的時刻——完全進入、正確定位、尚未開始退出。先將其寫成靜態 HTML + CSS。暫時不要使用 GSAP。
為什麼： 如果你將元素定位在它們的動畫起始狀態（螢幕外、縮放到 0、透明度 0），然後補間到你_認為_它們應該抵達的位置，你就是在猜測最終佈局——重疊區域在渲染之前一直保持不可見。先建構最終狀態，你就可以在加入動畫之前發現並修正佈局問題。
- 為每個場景識別主角影格——大多數元素同時可見的時刻。這就是你要建構的佈局。
- 為該影格撰寫靜態 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取代它。
- 加入進場動畫——從螢幕外/不可見，動畫過渡到 CSS 位置，使用
gsap.from()（在子構圖中，偏好使用gsap.fromTo()以明確指定起始狀態；請參閱hyperframes-core/references/sub-compositions.md）。CSS 位置是基本事實；補間動畫是到達該位置的過程。 - 退場由轉場處理——根據
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 |
| 標題卡 / 下方三分之一 / 疊加層 / PiP / 文字在主題背後 | hyperframes-creative/references/composition-patterns.md + （用於置中/有尺寸的影格） hyperframes-core → 「根元素必須設定尺寸」 |
| Logo / 品牌標誌揭示 | 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（預先提取頻段；映射到動畫） |
| 旁白 / 語音旁白 / 音樂 / SFX / 字幕 | 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
- [ ]
…