Talking-Head B-Roll：依你說的話自動畫出動態圖形

談話頭部 B-roll

使用者的錄影已經很好：話語和表達都已經是最終版本。單獨的談話頭部觀看起來很無趣，因此影片的任務是，針對每一段語音，決定畫面要顯示什麼。語音從不中斷；只有畫面會改變。

錄影從不剪輯、移動、裁切或縮放。你所製作的一切都是疊加在其上方的圖層：在說話者應該顯示的地方透明，在圖形覆蓋他們的地方不透明。scripts/render.mjs 將該圖層疊加在錄影上，並保留其聲音。

一次完成：不要詢問錄影或常識默認值能回答的問題，並在交付時列出你所選擇的內容。在包含錄影的資料夾中工作，並從那裡執行腳本；輸出檔案會放在那裡。以下，<skill> 是此技能的資料夾（包含此檔案的資料夾）。

1. 轉錄

node <skill>/scripts/transcribe.mjs talk.mp4            # → transcript.json，並列印每行及其開始和結束時間

它會列印影片的尺寸、幀率和長度（它們會進入頁面），以及按句子結尾分割的轉錄稿，每個單詞的時間記錄在 transcript.json 中。在決定任何事情之前，請先閱讀整個轉錄稿。它會在安裝了本地 whisper.cpp 時使用它，否則使用 ELEVENLABS_API_KEY；如果兩者都沒有，它會列印如何設定其中一個。停頓來自音訊本身，因此句子之間的間隙是說話者實際停止的地方；句子內部的時間在幾分之一秒內。轉錄稿可能會誤聽一個數字：如果某個數字與所說的其餘內容不一致，請將其從螢幕上移除，並在交付時說明。

2. 規劃：三種處理方式

A. 說話者。 僅有影片，沒有任何覆蓋內容。當人物是重點時使用：開場白、個人意見或故事、情感節拍、行動呼籲、結尾語。

B. 覆蓋層。 影片保持可見；透明的動態圖層位於頂部：關鍵字或短語、計數的數字、圖示、箭頭、標誌、逐一建立的簡短清單。當一行話語中有一個具體的事物值得觀看，同時說話者仍然值得觀看時使用。將覆蓋層保持在邊緣以及頂部或底部三分之一處，這樣它們就不會遮住說話者的臉。一次只顯示一個想法；當話語轉移時，它就會消失。

C. 覆蓋。 不透明的全幀動態場景在說話者繼續說話時隱藏他們。當話語更適合用畫面而非臉部來展示時使用：數字和比較、過程或步驟序列、某物如何運作、產品或介面、任何包含三個或更多部分的事物。動態應該解釋話語，而不是裝飾它。

將轉錄稿按句子或子句結尾分割成行。為每行指定 A、B 或 C，並附上一句理由，並說明 B 或 C 顯示的內容。然後檢查節奏：

• 以 A 開場，讓觀眾見到人物；以 A 結尾。
• 任何一段 A 的長度不要超過約 8 秒；用 B 或 C 中斷它。
• 一段 C 的長度約為 3-8 秒；在 C 段落之間返回說話者，這樣影片就不會變成帶有旁白的幻燈片秀。
• 僅在行邊界處更改處理方式，絕不在單詞中間。將覆蓋層的進入時間對齊到它們所說明的單詞。
• 優先選擇更少、更清晰的處理方式，而不是每行都更改。

完全燒錄的隱藏式字幕不屬於此範圍：僅在使用者要求時才添加。B 覆蓋層的文字是幾個關鍵詞，而不是正在說出的句子。

螢幕上的文字使用說話者實際說出的詞語，或來自轉錄稿或用戶材料的數字和名稱。不要虛構數字、聲明或引用。

3. 建立頁面

將 <skill>/templates/b-roll.html 複製到錄影旁邊，命名為 page.html，並設定：

• VIDEO、W × H（影片的形狀：1920 × 1080，或垂直的 1080 × 1920；4K 檔案可以保留 1920 × 1080 的頁面）、FPS、DURATION，來自 transcribe.mjs 列印的內容。
• FACE：說話者頭部的位置（包括頭髮，並在其周圍留一些空間），以畫面的分數表示。node <skill>/scripts/render.mjs page.html face --stills 2s,20s --face 會顯示帶有方框的錄影；調整直到它在每個靜止畫面中都容納頭部。
• SCENES：每個 B 或 C 段落一個條目，{ from, to, kind: 'overlay' | 'cover', draw }，時間取自 transcript.json 中的單詞時間。不在場景中的一切都是 A。兩個場景可以相接（一個的 to 是下一個的 from）；它們之間的說話者的一小段會被視為閃爍。
• 每個場景一個 draw(t, s)，根據該行話語的內容編寫。模板中的兩個（關鍵字卡片和計數數字）展示了結構，而不是外觀。s.in 和 s.out 給出進入和退出時間；s.now 是影片中的時間，用於將顯示時間對齊到它所顯示的單詞。

表面預設為 LIGHT。僅在 (a) 使用者或品牌明確要求，或 (b) 主題本質上存在於暗色表面（終端機/程式碼、夜空、電影院）時，才使用暗色。霓虹燈在黑色背景上是每個 AI 影片的陳詞濫調預設；未經提示選擇它是設計上的失敗。

字型：每個字體系列一個 Google Fonts <link>，包含你使用的字重，並且你在 FONTS 中列出你繪製的每個字型，這樣就不會使用後備字型渲染（渲染需要網路存取來載入它們）。

4. 檢查它

node <skill>/scripts/render.mjs page.html --check                 # 對照轉錄稿和像素的規劃
node <skill>/scripts/render.mjs page.html film.jpg --sheet 1      # 整部影片，每秒一幀，疊加在錄影上
node <skill>/scripts/render.mjs page.html shot --stills 12s,20s   # 全幀，用於閱讀文字和間距

--check 必須通過：每個覆蓋場景在進入後完全隱藏說話者，沒有覆蓋層到達 FACE 區域，每個場景在單詞之間開始和結束，沒有在場景之外繪製任何東西，沒有文字跑出畫框或與其他文字重疊。當文字位於畫面邊緣的 3% 以內（某些播放器會裁切的地方）時，它會發出警告。它還會列印時間線，其中包含每個段落所說的內容，並就節奏發出警告（長時間只有說話者、覆蓋場景短於 3 秒或長於 8 秒、覆蓋場景連續出現、沒有以說話者開場或結尾）；如果你有理由，警告可以成立，因此請說明。

它無法判斷圖形是否說明了其行話語的內容、文字是否清晰、或者文字是否跑出卡片或跨越圖表線條：查看時間線以了解流程，並查看每個場景的靜止畫面以了解文字。修正並再次查看，直到它成立。

5. 渲染並交付

node <skill>/scripts/render.mjs page.html film.mp4        # 完成的影片：錄影、其上的 b-roll、原始音訊
node <skill>/scripts/render.mjs page.html b-roll.mov      # 僅帶有 Alpha 通道的 b-roll：ProRes 4444，用於 Premiere Pro、Resolve、Final Cut
node <skill>/scripts/render.mjs page.html b-roll.webm     # 相同格式，VP9 帶 Alpha 通道：體積小，用於瀏覽器和 OBS

交付 film.mp4、頁面（在瀏覽器中開啟以播放帶有音訊的影片並瀏覽場景），以及一個簡短的表格形式的規劃：時間、所說的內容、處理方式、螢幕上的內容。當使用者在 Premiere Pro、DaVinci Resolve 或 Final Cut 中編輯時（.mov；ProRes 體積大，1080p 下約 5 MB/秒），也提供 Alpha 圖層：它位於錄影上方的軌道上，從 0 開始。說明你選擇了哪些他們沒有要求的內容。

需求：Node 18+、在工作資料夾或其上層資料夾中執行 npm i playwright-core（或在技能自己的資料夾或其上層資料夾中）、ffmpeg、Chrome（或 npx playwright install chromium），以及用於轉錄稿的 whisper.cpp 或 ElevenLabs 金鑰。