示範影片
產生 Full HD MP4 格式，展示專案的即時網站或應用程式：真實的螢幕錄製、使用者語言的語音旁白、內嵌字幕、背景音樂以及可供分享的連結。一切都在容器中執行，使用 agent-browser、ffmpeg 和專案的 AI 代理器（費用計入專案額度）。典型結果：1–3 分鐘，10–20 MB，約 1–2 小時的代理器工作時間。所有工作檔案都存放在 video/ 目錄中（build/ 和 out/ 不會被 git 追蹤）。
使用時機
- 「製作一個展示系統運作方式的影片」，宣傳、廣告、客戶展示
- 為提案、發行說明或登陸頁面製作逐步解說
- 不適用於使用者自行錄製的場合：此時應改為在
docs/demo/script.md中為他們撰寫拍攝腳本（包含場景、動作、要說的話）
流程（每個步驟皆可續傳：重新執行時會跳過已完成的輸出）
| 步驟 | 指令 | 輸出 |
|---|---|---|
| 0. 設定 | bash .claude/skills/demo-video/setup.sh | ffmpeg、字幕字體、video/ 資料夾 |
| 1. 腳本 | 撰寫 video/vo/narrator.json 和 video/scenes.mjs（從 examples/ 開始） | 計畫 |
| 2. 語音旁白 | node .claude/skills/demo-video/tts.mjs video/vo/narrator.json video/build/vo | s01.wav… + s01.txt（旁白內容） |
| 3. 錄製 | source .claude/skills/demo-video/rec-lib.sh 然後 take_start、mark、take_stop | video/build/rec/<take>.mp4 + .marks |
| 4. 卡片 | card_take <name> "file://$PWD/video/cards/<name>.html?…" <seconds> | video/build/rec/card-<name>.mp4 |
| 5. 音效 | node .claude/skills/demo-video/sfx.mjs | video/build/sfx/chime.wav、click.wav |
| 6. 編輯 | node .claude/skills/demo-video/compose.mjs video/scenes.mjs | video/out/<name>.mp4（若未指定音樂則自動生成） |
| 7. 品質審核 | node .claude/skills/demo-video/listen.mjs video/out/<name>.mp4 "<問題>" 和畫面截圖 | 修正後，重新執行步驟 6 |
| 8. 發佈 | node .claude/skills/demo-video/publish.mjs video/out/<name>.mp4 --cover 16 | 專案儲存空間中的金鑰 + 封面 JPG |
（若使用 npx skills add 安裝，路徑為 .agents/skills/demo-video/。）
如何製作出好影片
先寫腳本。 10–15 行旁白，每行一個概念，8–15 個字，使用使用者的語言。只陳述事實：切勿宣稱無法在專案本身資料中驗證的數字、客戶或獎項。將品牌名稱和縮寫放入 pronounce 中，確保發音正確。每行對應一個場景。
語音。 代理器沒有 TTS 模型；tts.mjs 使用 Live 模型（gemini-3.8-live）逐字朗讀每行內容，透過比較模型自身的轉錄稿與腳本（80% 單詞匹配率）保留三次嘗試中最佳的一次，並為每行產生一個 WAV 檔案。可選語音角色：Kore、Charon、Puck、Fenrir、Aoede。旁白使用一種語音；「客戶」角色使用另一種。執行後檢查 s*.txt，對任何不符的行重新產生（刪除其 wav 檔案後重新執行）。
錄製。 從乾淨狀態開始：全新的瀏覽器上下文、空的購物車、無已儲存的表單草稿（agent-browser eval 'sessionStorage.clear()' 並對應用程式使用的 localStorage 鍵執行相同操作），錄製前先登入，避免在鏡頭前輸入密碼。使用 typeslow 輸入文字，在每次編輯會剪輯的點擊前呼叫 mark <label>，使用 wait_gone "<搜尋文字>" 等待 AI 回應，切勿滾動正在展示的元素使其移出畫面。透過元素參考（如 snapshot 產生的 @e12）點擊，而非使用標籤文字。take_start 將視口設為 1600×900（預設為 1280×720，對 1080p 來說太小）；每個場景錄製一次。當產品有語音代理器時，透過其自有 API（examples/voice-exchange.mjs）錄製真實對話，並以卡片形式播放，而非偽造。
卡片。 examples/cards/ 包含片頭（動畫數字、標誌、膠囊）、語音通話卡片和片尾。複製到 video/cards/，將顏色、標誌和文字改為品牌風格。在 URL 中傳遞時間參數（?t1=<s>），使動畫能與語音同步。
編輯（scenes.mjs）。 每個場景由錄製片段 [take, in, out, speed, zoom?] 加上音訊 ['vo:s01', at] 組成。將等待過程加速 2–5 倍，對有小型文字的面板進行 zoom 放大，每個新區段加入 chapter 標籤，當底部字幕會遮蓋正在展示的 UI 時使用 cap: 'left'，在成功瞬間（如加入購物車、下單完成）加入 sfx 提示音。編輯結果會按場景快取；僅重新渲染有變更的場景。
音訊。 背景音樂由 compose.mjs 合成（無版權風險），並在語音時自動降低音量；若使用者想使用自己的音樂，可在 scenes.mjs 中設定 music: 'path/to/track.mp3'。輸出音訊會標準化至 −16 LUFS。
交件前進行品質審核。 listen.mjs 將混音發送給 Gemini：詢問發音清晰度、發音錯誤的詞彙、音樂與語音平衡、雜音和長時間靜音。然後為每個場景截取一張全解析度畫面（ffmpeg -ss <t> -i out.mp4 -frames:v 1 f.png）並檢視：字幕是否與 UI 重疊、文字是否被截斷、螢幕狀態是否錯誤。修正後，重新執行步驟 6。
交付。 刪除錄製過程中建立的測試訂單/資料，執行 agent-browser close --all，提交 video/ 目錄中的工具和腳本（不包含 build/、out/）。提供連結、本地路徑、影片內容簡要說明，以及在錄製過程中修復的任何產品問題（完整錄製一個流程通常會發現真實的錯誤；修復它們，因為它們會影響真實使用者）。
發佈
publish.mjs 將影片上傳到專案儲存空間，並設定正確的內容類型（一般儲存上傳會將影片視為下載），然後輸出公開 URL：若在 openkbs.json 中設定了 "storage": { "cloudfront": "media" }，則檔案會位於 <site>/media/<key>（需先執行 openkbs deploy 設定該路徑）。如果沒有 CDN 上的儲存空間，則將檔案放在 site/ 目錄下並部署，或分享 openkbs storage download。--cover <seconds> 參數還會上傳一張 JPG 畫面作為縮圖。
需求
- Studio 容器：
ffmpeg（setup 會安裝）、agent-browser、代理器 JWT 位於~/.openkbs/projectJWT。若在 Studio 外部，則需設定OPENKBS_API_KEY。 - 字幕字體由
setup.sh下載至video/build/fonts（Golos Text、Fira Sans Extra Condensed：支援拉丁字母 + 西里爾字母，OFL 授權）。