demo-video-master 是做什么的？
一个命令将功能描述 + URL 转化为电影级产品演示视频。
将四个工具整合到单个自动化流水线中：
| 阶段 | 工具 | 作用 |
|---|---|---|
| 捕获 | agent-browser | 实时 URL 的截图 + 滚动录制 |
| 设计 | video-shotcraft | 5–7 个电影镜头、PageCam 关键帧、字幕、音效 |
| 渲染 | Remotion | React → mp4 |
| 配音 | ElevenLabs | 逐场景画外音旁白 |
| 合并 | ffmpeg | 旁白 + 视频 → final.mp4 |
触发
以下任一方式激活此技能：
demo-video: <功能描述> <url>
make a demo video for <url> — <功能描述>
完整流水线（开始前请阅读）
完整的逐步代理说明请参见 pipeline.md。
快速概要：
- 捕获 — 运行
scripts/capture.mjs <url> <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()；所有随机性从索引播种 - 并行配音与渲染 — 始终同时运行 ElevenLabs 和 Remotion 以节省时间
- 仅外部信息图 — 动画元素位于截图之上；不要在截图上进行 translateZ 卡片抬起或边框环绘制
环境变量
ELEVENLABS_API_KEY=你的密钥
ELEVEN_VOICE_ID=你的语音ID # 默认：Adam (pNInz6obpgDQGcFmaJgB)