用途
demo-video 用于制作精良的演示视频，通过编排浏览器渲染、文本转语音和视频合成三种能力，把截图和场景描述变成可分享的产品演示。它的定位是视频制作人而非幻灯片制作者——每一帧都有任务，每一秒都要争取下一段观看。
适用场景
以下情况可触发该技能：
- 用户要求创建演示视频、产品走查或功能展示
- 用户想要动画演示、营销视频或产品预告
- 用户想把截图或 UI 抓图变成精良的视频或 GIF
- 用户说“make a video”“create a demo”“record a demo”“promo video”
核心工作流
1. 选择渲染模式
开始前先确认可用工具：
- playwright MCP 是否可用？用于自动截图。回退方案：让用户手动截图 HTML 文件。
- edge-tts 是否可用？用于旁白音频。回退方案：输出旁白文本文件，供用户自行录音或使用其他 TTS 工具。
- ffmpeg 是否可用？用于合成。回退方案：输出单独的帧图像与音频文件，并附上用户可手动运行的 ffmpeg 命令。
若三者都不可用，则产出 HTML 场景文件 + scenes.json 清单 + 旁白脚本，用户可手动合成或使用任意视频编辑器。
模式分为两种：
- MCP 编排：HTML → playwright 截图 → edge-tts 音频 → ffmpeg 合成。适用于 playwright + edge-tts + ffmpeg 三个 MCP 均已连接时。
- 手动：编写 HTML 场景文件，提供 ffmpeg 命令供用户运行。适用于 MCP 不可用时。
2. 选择故事结构
- 经典演示（30-60 秒）：钩子（3 秒）→ 问题（5 秒）→ 魔法时刻（5 秒）→ 证据（15 秒）→ 社会认同（4 秒）→ 邀请（4 秒）
- 问题-解决方案（20-40 秒）：之前（6 秒）→ 之后（6 秒）→ 方法（10 秒）→ CTA（4 秒）
- 15 秒预告：钩子（2 秒）→ 演示（8 秒）→ Logo（3 秒）→ 标语（2 秒）
3. 设计场景
若未提供截图：
- 面向 CLI/终端工具：生成终端风格 HTML 场景，深色背景、等宽字体、打字动画效果
- 面向概念类演示：使用文字为主的场景，配合色彩语言与排版系统
- 仅当产品为视觉型且描述不足时，才向用户索取截图
每个场景只能有一个主要焦点：标题场景聚焦产品名；问题场景聚焦痛点（红色、混乱）；解决方案场景聚焦结果（绿色、宽松）；功能场景聚焦高亮截图区域；结尾场景聚焦 URL / CTA 按钮。
4. 撰写旁白
每个场景只表达一个想法；若需要用到“和”就说明应拆成两个场景。以动词开头，例如用“整理你的标签页”而非“标签页整理功能已提供”。避免术语，例如用“你的标签页自动整理”而非“AI 驱动的标签页分类”。使用对比，例如“24 个标签页。一键。5 个分组。”
输出产物
每个视频在 demo-output/ 目录中产出以下文件：
- scenes/ —— 每个场景一个 HTML 文件（1920x1080 视口）
- narration/ —— 每个场景一个 .txt 文件（供 edge-tts 输入）
- scenes.json —— 按顺序列出场景的清单，含时长与旁白文本
- build.sh —— 运行完整流水线的 shell 脚本：playwright 逐一截图 HTML 场景 → frames/；edge-tts 逐一处理旁白文件 → audio/；ffmpeg 带交叉淡入淡出拼接 → output.mp4
若 MCP 不可用，仍产出前三项，并在 build.sh 中附上供用户手动运行的 ffmpeg 命令。
场景设计系统
完整设计系统见 references/scene-design-system.md，涵盖色彩语言、动画时序、排版、HTML 布局、语音选项与节奏指南。
质量检查清单
- 视频含音频流
- 分辨率为 1920x1080
- 场景之间无黑帧
- 前 3 秒抓住注意力
- 每个场景有一个焦点
- 结尾卡片包含 URL 和 CTA
反模式与修正
- 幻灯片式节奏（每个场景时长相同、无节律）→ 变化时长：钩子 3 秒、证据 8 秒、CTA 4 秒
- 屏幕文字墙 → 将信息移到旁白，简化视觉
- 泛泛旁白（“This feature lets you...”）→ 使用具体数字与动词
- 无故事弧（仅罗列功能）→ 采用问题 → 解决方案 → 证据结构
- 原始截图 → 始终添加圆角、阴影、深色背景
- 使用 ease 或 linear 动画 → 使用弹簧曲线 cubic-bezier(0.16, 1, 0.3, 1)
交叉引用
相关：engineering/browser-automation，用于基于 playwright 的浏览器工作流。另见：framecraft，开源场景渲染流水线。