mkt-full-video-with-11-hyperframe-heygen-16-9
端到端編排器：腳本 → 最終 MP4 16:9 (1920×1080) podcast 主題演講。
輸出為一個 1920×1080 的 MP4 檔案，格式為「談話頭像 + 投影片」— HeyGen 頭像位於右側的浮動圓角框內（帶有 Claude 橙色品牌邊框），左側為現代 AI / Claude 編輯風格的內容投影片，並在投影片需要全螢幕強調時有畫中畫（PIP）縮小效果。所有組合皆自動內建以下模式 — 無需手動編輯。
自動內建模式（第三階段輸出）
每個由編排器生成的影片都會自動包含：
-
每個場景的組合 HTML — 由並行 LLM 子代理（每個場景一個子代理，在一則訊息中同時展開）創作，而非使用 Python 模板：
- 輸出：
compositions/scene-1.html…compositions/scene-N.html（每個場景一個檔案，唯一檔名，適用於任意 N） - 每個子代理會讀取其場景區塊（來自
visual-plan.json）和參考文件（references/composition-patterns.md、slide-design-tokens.md、infographic-prompt-template.md），然後從頭創作 HTML/CSS/GSAP — 為該場景的特定隱喻選擇合適的模式，不限於 5 個固定原型 - 為何使用 LLM 而非 Python：HyperFrames 擁有無數的視覺思考模式（前後對比、中樞輻射、雙時鐘比較、三層比較、滾動膠帶、英雄球體規格三重奏、終端模擬、禮物盒……）。Python 生成器只會 5 個固定原型 → 很無聊，無法適應場景特定的隱喻，例如「浪費時間的滾動膠帶」或「正確工具的車輛」。每個場景由 LLM 創作，足以實現設計意圖。
- 品牌標誌自動附加：編排器會將品牌背景（
claude/chatgpt/gemini/claude-code）傳給子代理，子代理在assets/logos/中參考標誌，並在模式需要時嵌入到組合中（光球、工具徽章藥丸、失敗行圖示）
- 輸出：
-
「混合鉤子」視覺縮放策略 應用於
.avatar-breathing（第三階段步驟 3e，透過generate_root_index.py實現）：- HOOK（鉤子）場景：在場景持續時間內緩慢從 1.0 增加至 1.10（營造戲劇性）
- HOOK→BODY（鉤子到主體）：瞬間重置回 1.10 → 1.0（釋放張力）
- BODY（主體）場景：在 PIP-IN（畫中畫進入）事件時產生 1.06 的節拍衝擊（創造節奏）
- CTA（行動呼籲）場景：溫和地從 1.0 推到 1.04（結尾）
- 取代了平板的「呼吸式彈跳」— 每個場景原型都有自己獨特的縮放動態
-
奶油色紙張 B-Roll 畫中畫切換層（分工架構 — 重要）：
- HTML 組合（投影片掛載層）承載 資料 / 層級字母 / 項目 / 徽章 / 標題 / 品牌標誌 — 永遠顯示
<img class="broll-image">奶油色紙張編輯插圖負責承載 隱喻 / 情感 — 以完整 1920×1080 舞台顯示，在其場景的畫中畫視窗期間淡入，其餘時間淡出- 每個層級負責傳達一半不同的訊息（HTML = "WHAT（什麼）"，圖片 = "WHY/FEELS（為什麼/感覺）"）
- 關鍵： 圖片僅存在於根層級（
index.html中的<img id="broll-N">）。組合 HTML 不得嵌入<div class="image-slot">— 這會將 16:9 圖片塞進小框 → 很難看。組合只是純資料層。 - 圖片來源：規劃技能會寫入
prompts.md→ 使用者透過 AI33/Nano Banana Pro 或mkt-broll-image生成1.png-N.png - 完整 1920×1080 舞台，
object-fit: contain，奶油色#F0EEE6信箱模式會無縫融合
-
頭像框品牌色邊框（第三階段步驟 3e，透過
generate_root_index.py實現）：- 預設拆分狀態：Claude 橙色
#d97757，3px 實線 + 6px 光暈 + 80px 外發光（溫暖的品牌框，不使用白色邊框） - PIP（畫中畫）狀態：紫色
#a78bfa，3px 實線 + 6px 光暈 + 60px 發光（頭像縮小時的重點提示） - 可依品牌覆蓋：如果使用者選擇
chatgpt/gemini/claude-code品牌重點，生成器會使用對應的重點色
- 預設拆分狀態：Claude 橙色
-
字幕覆蓋層（當
compositions/captions.html存在時預設開啟）：- 底部中央藥丸形，位於
bottom: 100px，使用 Inter 600 38px 白色字體，搭配深紫羅蘭色邊框藥丸背景 - 逐句淡入淡出（0.18 秒），每個段落結束時強制
tl.set清除 - 由
generate_captions.py從固定的 Jinja 模板和每個影片的captions.json（或 Whisper 分段作為後備）生成 - 由
generate_root_index.py自動掛載，z-index 為 28；可使用--no-captions停用 - 詳見下方第三階段步驟 3e 的步驟 2
- 底部中央藥丸形，位於
-
YouTube 訂閱下三分之一，顯示在最後 3 秒（預設開啟）：
- 組合
yt-lower-third.html掛載在data-start = total_duration - 3.0s - 滑入動畫 + 訂閱按鈕按下 + 已訂閱狀態切換
- z-index 60（在所有圖層之上），
pointer-events: none - 頻道名稱 + 訂閱者數量已寫入
compositions/yt-lower-third.html（如果使用者想重新命名，可以編輯） - 停用：
generate_root_index.py --no-yt-lower-third。自訂持續時間：--yt-lower-third-duration 4.5
- 組合
所有 6 種模式皆自動內建 — 編排器無需額外步驟。使用者只需渲染 1.png-N.png（第三階段步驟 3.5），分工效果才會完全顯現。如果跳過圖片生成，影片仍能透過純 HTML 組合（圖片圖層透明度為 0）正常播放。
與 9:16 同系列技能的差異
mkt-full-video-with-11-hyperframe-heygen (9:16) | -16-9（此技能） | |
|---|---|---|
| 比例 | 1080×1920 直立 | 1920×1080 橫向 |
| 佈局 | 頭像全螢幕 + 字幕條 + B-Roll 切換 | 左側投影片面板 (1200) + 右側頭像浮動框 (540×880) |
| 字幕掛載 | 有（TikTok 風格的逐字顯示） | 預設無字幕（投影片在視覺上傳達訊息） |
| PIP（畫中畫）機制 | 無 | SPLIT（拆分）↔ PIP（畫中畫）轉場 — 投影片擴展至 1920，頭像縮小至 320×420 角落 |
| 頭像動態 | 靜態全螢幕 | 呼吸式彈跳 + 場景起始推入 |
| 投影片風格 | 基於變體的模型（文章堆疊、AI 視窗、應用卡片……） | LLM 創作的每個場景組合 + 現代 AI 調色盤 + 根層級的奶油色紙張 B-Roll |
| 組合創作 | Python 模板 | N 個並行 LLM 子代理（每個場景一個） |
| 渲染用途 | TikTok/Reels/Shorts | Podcast 主題演講 / YouTube 知識型 / LinkedIn |
| HeyGen 渲染 | 720×1280 直立 | 仍是 720×1280 直立（透過 object-position: center 25% 裁切到橫向頭像框 — 不是 1280×720！） |
為所有橫向知識型影片選擇此技能。為所有直立短影音選擇同系列技能。
何時使用
- 使用者有越南文腳本（60–150 秒），希望製作橫向 podcast 主題演講形式的知識型影片
- 使用者希望輸出帶有「Claude AI / Anthropic 編輯」風格：深色投影片背景、霓虹發光層級字母、玻璃卡片、根層級的奶油色紙張資訊圖表
- 主題為知識分享 / 案例研究 / 前後對比 / 工具比較 / 5 個以上提示的清單 — 適合投影片驅動，支援任意 N 個場景（3、5、7、10……）
- 發布頻道：橫向 YouTube、LinkedIn 影片、Podcast 剪輯、嵌入網站
- 使用者已有 MP3 + source.mp4，想重新規劃第三階段 → 編排器跳過第一、二階段，直接進入第三階段
不要在以下情況使用此技能：
- 使用者需要 TikTok/Reels/Shorts 直立影片 → 使用同系列的 9:16 技能
- 腳本 > 5000 字元 → 先進行語義分割
- 主題為純視覺重內容（蒙太奇、音樂錄影帶）— 此技能最佳化用於談話頭像 + 投影片
管線概覽
腳本（越南文，≤ 5000 字元）
│
▼
[階段 0.5 簡歷偵測 — 如果 voiceover.mp3 + source.mp4 已存在 → 跳過第一、二階段]
│
▼
階段 1 ── mkt-elevenlabs-tts-to-mp3 ─────► voiceover.mp3
│ │
│ 檢查點 #1 — 使用者聆聽 + 檢查 MP3
│ │
│ ▼ (OK)
階段 2 ── heygen-mp3-to-mp4 ─────────────► source.mp4（720×1280 直立，唇形同步）
│ （不渲染 1280×720）
│
▼
階段 3a ── 轉錄 (Whisper) → voiceover.srt + transcript.json
階段 3b ── plan_visuals.py → visual-plan.json + prompts.md
（規劃技能：mkt-plan-short-video-edit-16-9）
檢查點 #2 — 使用者檢查計畫
│
▼（LLM 根據每個場景的隱喻/層級字母/項目自訂 visual-plan.json）
│
階段 3c ── apply_plan_to_scenes.py → scenes.json（編輯器相容）
階段 3d ── 🔥 展開 N 個並行 LLM 子代理（每個場景一個）🔥
→ compositions/scene-1.html … scene-N.html
（每個子代理：讀取 visual-plan 場景區塊 + 參考文件 → 從頭創作 HTML/CSS/GSAP）
階段 3e ── scaffold_project.py（sfx/ + logos/ + avatar.jpg + yt-lower-third.html）
generate_root_index.py → index.html（1920×1080，掛載 scene-N.html、broll 圖層、PIP、音效、品牌標記、Claude 橙色頭像邊框）
階段 3f ── lint + 預覽（Studio @ http://localhost:3002）
（可選階段 3.5：透過 AI33/Nano 生成 1.png-N.png 奶油色紙張圖片）
│
▼
使用者檢查預覽 Studio → "render" → npx hyperframes render → out.mp4 1920×1080
檢查點：
- #1 MP3 語音 — 編排器閘門（如果是簡歷模式則跳過）。
- #2 視覺計畫 — 階段 3b 閘門（如果
auto_scenes=true則可跳過）。 - 渲染閘門 — 使用者在 Studio 中確認後才渲染。
輸入
| 輸入 | 必要 | 格式 / 範例 |
|---|---|---|
| 主題 (Topic) | 是 | 簡短標題（"Claude AI 的優點", "5 個節省 Claude Token 的技巧"） |
| 品牌強調 (Brand emphasis) | 是 | claude / chatgpt / gemini / claude-code / generic — 決定重點色調色盤 + 標誌 + 頭像邊框顏色 |
| 腳本文本 (Script text) | 是（簡歷模式除外） | .txt/.md 檔案或行內文字。越南文。≤ 5000 字元 |
| 輸出縮寫 (Output slug) | 否 | 從主題自動衍生。小寫 ASCII，使用連字號。 |
| 場景數量 (Number of scenes) | 否 | 預設 5（鉤子 / 問題 / 解決方案 / 回顧 / 行動呼籲）。可依長度設為 3–10。5 個以上提示的清單 OK — 為每個提示、1 個鉤子和 1 個行動呼籲各展開 1 個子代理。 |
| 頭像外觀 (Avatar look) | 否 | 從 HEYGEN_AVATAR_LOOKS 環境變數中取 1 個 ID。如果未選擇則隨機。 |
| 資訊圖表模式 (Infographic mode) | 否 | now（立即透過 mkt-broll-image 生成圖片）/ scaffold（僅寫入 prompts.md，使用者稍後手動生成）/ none。預設為 scaffold。 |
auto_scenes | 否 | 預設為 false。設為 true 可跳過場景大綱檢查點。 |
start_at | 否 | phase_1（預設）/ phase_2 / phase_3。簡歷模式進入點。 |
skip_phase_1 / skip_phase_2 | 否 | 簡歷模式的布林快捷方式（可替代 start_at=phase_3）。 |
工作區佈局
workspace/content/YYYY-MM-DD/<slug>/
├── script.txt # 階段 0 — 使用者提供的純文字
├── script-tagged.txt # 階段 1a — 腳本 + ElevenLabs v3 音訊標籤 ([excited], [sigh]…)
├── voiceover.mp3 # 階段 1b
├── voiceover.srt # 階段 3a (Whisper)
├── voiceover_segments.json # 階段 3a（字詞層級區段）
├── source.mp4 # 階段 2（720×1280 直立 — 不要渲染橫向）
├── transcript.json # 階段 3a（whisper 字詞）
├── transcript-cleaned.json # 階段 3a（手動修正錯字）
├── scenes-outline.json # 階段 3b — 檢查點前的大綱
├── visual-plan.json # 階段 3b — 完整的機器可讀計畫（規劃器輸出）
├── scenes.json # 階段 3c — 編輯器相容的視覺計畫扁平化版本
├── prompts.md # 階段 3b — 奶油色紙張編輯提示（每個場景一個）
├── 1.png 2.png ... N.png # 階段 3.5 — 奶油資訊圖表圖片（每個場景一個），根層級 B-Roll 圖層
├── captions.json # 階段 3e（可選）— 由編排器策劃的 [{text,start,end},...]；如果缺少，則回退到 voiceover_segments.json
├── compositions/
│ ├── scene-1.html # 階段 3d — LLM 創作，1200×1080 原生橫向
│ ├── scene-2.html # 每個場景一個檔案，無論 N 為何
│ ├── ...
│ ├── scene-N.html
│ ├── captions.html # 階段 3e — 從 captions.html.j2 + captions.json（或 Whisper 區段）生成
│ └── yt-lower-third.html # 階段 3e — 從技能資產自動複製
├── assets/
│ └── logos/ # 階段 3e — 自動複製（claude.png, chatgpt.png, gemini.jpg, claude-code.png）
├── sfx/ # 階段 3e — 6 個預設音效
└── index.html # 階段 3e — 根組合 1920×1080
YYYY-MM-DD = 今天日期（UTC+7）。
工作流程
步驟 0 — 設定 + 簡歷偵測
- 驗證
len(script_text) <= 5000（如果是簡歷模式且無腳本輸入則跳過）。超過 → 停止。 - 如果缺少 slug，則從主題衍生。
- 建立
workspace/content/YYYY-MM-DD/<slug>/。儲存script.txt（如果是簡歷模式且腳本已存在則跳過）。 - 選擇品牌重點色調色盤（參見
references/slide-design-tokens.md）。 - 簡歷偵測 — 檢查
voiceover.mp3和source.mp4是否存在。如果兩者都存在則跳過第一、二階段並將start_at設為phase_3。 - 詢問使用者
Number of scenes（如果未提供）。 - 詢問品牌強調（如果未提供）。
步驟 1 — 語音合成（如果未跳過）
- 如果
voiceover.mp3不存在：執行mkt-elevenlabs-tts-to-mp3，傳遞script.txt（階段 1a：script-tagged.txt；階段 1b：voiceover.mp3）。 - 檢查點 #1 — [等等，我需要播放 MP3 給你聽。聽完後，請回覆 "OK" 或 "RETAKE"（重新錄製）。如果 RETAKE，請提供修正後的腳本或標籤。]
步驟 2 — 頭像影片生成（如果未跳過）
- 如果
source.mp4不存在：執行heygen-mp3-to-mp4，傳遞voiceover.mp3→ 生成source.mp4（720×1280 直立 — 重要：要求 HeyGen 不要渲染 1280×720 橫向！）。 - 此步驟無使用者檢查點 — HeyGen 渲染通常足夠好。如果出現奇怪的口型不同步錯誤，使用者可以要求重試。
步驟 3a — 轉錄
- 在
voiceover.mp3上執行 Whisper →voiceover.srt+transcript.json。 - 建立
transcript-cleaned.json（將常見品牌名稱的錯誤拼寫修正為正確的商業大小寫，例如 "Claude", "Anthropic", "HeyGen", "ElevenLabs"）。
步驟 3b — 規劃
- 在
transcript-cleaned.json上執行規劃器（mkt-plan-short-video-edit-16-9）→visual-plan.json+prompts.md。 - 檢查點 #2 — [讀取
visual-plan.json給使用者聽（JSON 格式，每個場景一個區塊）：- 對於每個場景區塊，顯示
name+metaphor+tier_letter+items+tool_badge。 - 詢問：「這個視覺計畫好嗎？你要為任何場景更改隱喻、層級字母或項目嗎？還是我們進入第三階段？」]
- 對於每個場景區塊，顯示
- 根據使用者回饋自訂
visual-plan.json。如果是清單，展開以包含所有提示場景 + 維持鉤子 + 行動呼籲。
步驟 3c — 轉換
- 執行
apply_plan_to_scenes.py（從visual-plan.json讀取 → 寫入scenes.json）。
步驟 3d — 🔥 展開 LLM 組合 🔥
- FAN_OUT 每個場景一個 LLM 子代理：
- 每個子代理收到：
visual-plan.json中該場景的區塊- 參考文件內容：
references/composition-patterns.md（模式定義）references/slide-design-tokens.md（品牌設計權杖）references/infographic-prompt-template.md（資訊圖表提示結構）
- 品牌強調（
claude/chatgpt/gemini/claude-code/generic） - 簡短指示：「你是一個 HTML/CSS/GSAP 動畫專家。為場景 {num} 創作一個 1200×1080 的組合，名稱為 '{name}'，隱喻為 '{metaphor}'。調色盤來自設計權杖。如果模式需要，請在
assets/logos/中找到正確的品牌標誌並內嵌。輸出名為compositions/scene-{num}.html的檔案，不要包在 Markdown 程式碼區塊內。直接寫入磁碟。」
- 每個子代理寫入
compositions/scene-{num}.html
- 每個子代理收到：
- 收集生成的檔案列表。
步驟 3e — 建立專案
- 執行
scaffold_project.py：- 將
sfx/複製到工作區（6 個預設音效） - 將
logos/複製到assets/logos/（根據品牌強調） - 從
source.mp4提取第一幀作為avatar.jpg - 將
yt-lower-third.html複製到compositions/
- 將
- 執行
generate_captions.py：- 從
voiceover_segments.json生成captions.json，時間戳轉換為秒。 - 從 Jinja 模板（
constants/captions.html.j2）生成compositions/captions.html。使用--no-captions跳過。
- 從
- 執行
generate_root_index.py：- 生成
index.html(1920×1080) - 掛載所有
compositions/scene-{num}.html作為序列場景 - 為根層級奶油 B-Roll 圖片（
1.png-N.png）新增<img>標籤，如果不存在則透明度設為opacity: 0 - 掛載 PIP 機制（場景轉換時
.avatar的 SPLIT↔PIP 寬度變換 +.avatar-breathing的縮放） - 根據品牌強調掛載品牌標記（如果
claude則 Clippy，如果其他則文字標誌） - 將
.avatar-frame邊框顏色設為品牌強調的匹配色（Claude 橙色、ChatGPT 綠色、Gemini 藍色、Claude Code 紫色） - 掛載字幕（如果生成）
- 掛載
yt-lower-third.html在data-start = total_duration - 3.0s - 設定 SFX 觸發（場景進入 / PIP 事件）
- 生成
步驟 3f — 預覽 + 迭代
- 執行 lint 檢查（
npx hyperframes lint或手動 HTML 驗證）。 - 啟動 Studio：
cd workspace/content/YYYY-MM-DD/<slug>/ && npx hyperframes studio --port 3002。 - 提供使用者預覽連結。等待
OK或REVISE。如果REVISE，更新特定場景 HTML 或根索引。
步驟 3.5 — 奶油紙張圖片（可選）
- 如果
infographic_mode為now：執行mkt-broll-image，傳遞prompts.md→ 生成1.png-N.png。 - 如果
infographic_mode為scaffold：通知使用者prompts.md已準備好。等待使用者手動透過 AI33/Nano Banana Pro 生成1.png-N.png。 - 更新
index.html以將對應#broll-{num}的opacity設為1（或讓使用者操作）。
步驟 4 — 渲染
- 當使用者說「render」時：執行
cd workspace/content/YYYY-MM-DD/<slug>/ && npx hyperframes render --output out.mp4。 - 輸出：
workspace/content/YYYY-MM-DD/<slug>/out.mp4（1920×1080）。 - 向使用者總結輸出檔案路徑。
參考文件
references/composition-patterns.md
HyperFrames 場景的視覺思考模式庫。每個場景都匹配一個隱喻。
- before-after（前後對比）：雙欄並排。左 = 之前（灰色/紅色調），右 = 之後（綠色/亮色調）。GSAP 從中間分割揭示。
- hub-and-spokes（中樞輻射）：中央圓形（核心概念）→ 向外輻射的子節點（項目）。GSAP 從中心縮放。
- two-clock-comparison（雙時鐘比較）：兩個並排的時鐘/時間軸。GSAP 獨立動畫指針。
- three-tier-comparison（三層比較）：三張並排卡片，標題 + 3 個項目要點。GSAP 從底部淡入。
- scroll-tape（滾動膠帶）：水準滾動的項目（如收據/膠帶）。GSAP 滾動到中間顯示每個項目。
- hero-orb-spec-trio（英雄球體規格三重奏）：中央發光球體（隱喻）+ 左右兩側各一個規格藥丸。GSAP 球體脈動。
- terminal-mock（終端模擬）：偽終端（黑色背景，綠色文字）。GSAP 打字機效果在指令後。
- gift-box（禮物盒）：中央禮物盒，打開時顯示內容。GSAP 盒蓋滑動 + 內容縮放。
- fail-row（失敗行）：一行紅色 X 標記 + 一個綠色勾（成功）。GSAP 逐個顯露，最後一個成功。
- stagger-cards（交錯卡片）：卡片從底部交錯進入。GSAP
stagger: 0.15。
每個模式都使用來自 slide-design-tokens.md 的品牌特定 CSS 變數。
references/slide-design-tokens.md
:root {
--brand-primary: #d97757; /* Claude 橙色 */
--brand-secondary: #a78bfa; /* Claude 紫色 */
--brand-accent: #f59e0b; /* Claude 琥珀色 */
--slide-bg: #1c1917; /* 石板深色（所有投影片背景） */
--slide-text: #fafaf9; /* 石板 50（主要文字） */
--slide-text-secondary: #a8a29e; /* 石板 400（次要文字） */
--card-bg: #292524; /* 石板 800（卡片背景） */
--card-border: #44403c; /* 石板 700（卡片邊框） */
--tier-letter-glow: #d97757; /* 與品牌主要相同（層級字母光暈） */
--tool-badge-bg: #d97757; /* 藥丸背景 */
--tool-badge-text: #1c1917; /* 藥丸文字 */
--broll-fallback: #F0EEE6; /* 奶油色信箱模式背景 */
}
references/infographic-prompt-template.md
為場景 {num}（{name}，隱喻：{metaphor}）建構一個奶油色紙張繪圖提示。輸出僅為提示文字，無 Markdown。
"柔和、極簡的墨水繪圖，奶油色紙張背景（#F0EEE6），精緻的棕色墨水線條，描繪 {metaphor}。風格讓人聯想到 Christoph Niemann 的編輯插圖。單個焦點物體居中，帶有微妙的陰影和污漬紋理。無文字。無鮮豔顏色。"