demo-video-master 是做什麼的？
一個指令，將功能描述 + 網址變成電影級產品展示影片。
結合四個工具為單一自動化管道：
| 階段 | 工具 | 用途 |
|---|---|---|
| 擷取 | agent-browser | 擷取真實網頁截圖與滾動記錄 |
| 設計 | video-shotcraft | 5-7 個電影級運鏡、PageCam 關鍵影格、字幕、音效 |
| 渲染 | Remotion | React → mp4 |
| 配音 | ElevenLabs | 每個場景的語音旁白 |
| 合併 | ffmpeg | 語音 + 影片 → final.mp4 |
觸發方式
下列任一指令均可啟動此技能：
demo-video: <功能描述> <網址>
make a demo video for <網址> — <功能描述>
完整流程（開始前請閱讀）
完整的逐步代理指令請見 pipeline.md。
快速摘要：
- 擷取 — 執行
scripts/capture.mjs <網址> <slug>→ PNG 圖片存放於public/textures/<slug>/ - 設計 — 以擷取的圖片呼叫
video-shotcraft自動模式；輸出shotlist.json與各場景的 TSX 檔案 - 並行處理：
- 3a 語音旁白 — 背景執行
scripts/elevenlabs-vo.mjs <slug> - 3b 渲染 —
npx remotion render src/Root.tsx <CompositionId> out/<slug>.mp4
- 3a 語音旁白 — 背景執行
- 合併 —
scripts/merge.sh <slug>— ffmpeg 將語音鑲入渲染後的影片 - 提交與預覽 — 提交至
examples/<slug>/，開啟 QuickLook 預覽
設定（一次性）
# 1. 安裝此技能
git clone https://github.com/yash0208/demo-video-master ~/.claude/skills/demo-video-master
# 2. 安裝 agent-browser (vercel-labs/agent-browser)
npm install -g agent-browser
agent-browser install # 下載 Chrome 一次
# 3. 安裝前置技能
git clone https://github.com/vincentwei1021/video-shotcraft ~/.claude/skills/video-shotcraft
git clone https://github.com/yash0208/remotion-best-practices ~/.claude/skills/remotion-best-practices
# 4. 安裝 ffmpeg
brew install ffmpeg # macOS；Linux 使用 apt install ffmpeg
# 5. 將環境變數範本複製到你的影片專案
cp ~/.claude/skills/demo-video-master/.env.example _video/.env.local
# 填入 ELEVENLABS_API_KEY 與 ELEVEN_VOICE_ID
規則（務必遵守）
- 僅使用截圖 — 必須透過 agent-browser 取得真實頁面擷取；不得合成 UI
- 遮蔽 PII — 在任何擷取進入渲染之前，替換真實使用者資料
- 確定性渲染 — 在 Remotion 場景中不得使用
Math.random()/Date.now()；所有隨機性須基於 index 種子 - 並行處理語音與渲染 — 務必同時執行 ElevenLabs 與 Remotion 以節省時間
- 僅限外部資訊圖表 — 動態元素疊加於截圖之上；不得對截圖進行 translateZ 卡片浮起、邊框圓環等操作
環境變數
ELEVENLABS_API_KEY=你的金鑰
ELEVEN_VOICE_ID=你的語音ID # 預設：Adam (pNInz6obpgDQGcFmaJgB)