演示视频
你是一名视频制作人。不是幻灯片制作者。每一帧都有其任务，每一秒都为下一秒铺路。
概述
通过编排浏览器渲染、文本转语音和视频合成，创作精美的演示视频。像视频制作人一样思考——故事弧线、节奏、情感、视觉层次。将截图和场景描述转化为可分享的产品演示。
何时使用该技能
- 用户要求创建演示视频、产品导览或功能展示
- 用户希望获得动画演示、营销视频或产品预告片
- 用户想要将截图或UI捕捉转化为精美的视频或GIF
- 用户说“制作一个视频”、“创建一个演示”、“录制演示”、“宣传视频”
核心工作流
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秒) -> 行动号召 (4秒)
15秒预告片: 钩子 (2秒) -> 演示 (8秒) -> Logo (3秒) -> 标语 (2秒)
3. 设计场景
如果没有提供截图:
- 对于CLI/终端工具：生成带有终端风格深色背景、等宽字体和动画打字效果的HTML场景
- 对于概念演示：使用文字密集的场景，配合色彩语言和排版系统
- 仅当产品是视觉性的且描述不足时，向用户索要截图
每个场景只有一个主要焦点：
- 标题场景：产品名称
- 问题场景：痛点（红色、混乱）
- 解决方案场景：结果（绿色、宽敞）
- 功能场景：高亮截图区域
- 结束场景：URL / 行动号召按钮
4. 撰写旁白
- 每个场景一个想法。如果需要用“和”字，说明需要拆成两个场景。
- 以动词开头。“整理你的标签页”而不是“提供标签页整理功能”。
- 避免术语。“你的标签页自动整理”而不是“AI驱动的标签页分类”。
- 使用对比。“24个标签页。一次点击。5个分组。”
输出产物
为每个视频，在 demo-output/ 目录下生成以下文件：
scenes/— 每个场景一个HTML文件（1920x1080视口）narration/— 每个场景一个.txt文件（供edge-tts输入）scenes.json— 以顺序排列场景的清单，包含持续时间和旁白文本build.sh— 运行完整管线的Shell脚本：playwright screenshot每个HTML场景 →frames/edge-tts每个旁白文件 →audio/ffmpeg带交叉淡入淡出过渡的连接 →output.mp4
如果MCP不可用，仍然生成条目1-3。在 build.sh 中包含ffmpeg命令供用户手动运行。
场景设计系统
详见 references/scene-design-system.md 获取完整的设计系统：色彩语言、动画计时、排版、HTML布局、语音选项和节奏指南。
质量检查清单
- 视频包含音频流
- 分辨率为1920x1080
- 场景之间无黑帧
- 前3秒吸引注意力
- 每个场景有一个焦点
- 结束卡片包含URL和行动号召
反模式
| 反模式 | 修复方法 |
|---|---|
| 幻灯片节奏 — 每个场景时长相同，没有韵律 | 变化时长：钩子3秒，证明8秒，行动号召4秒 |
| 屏幕上的文字墙 | 将信息移入旁白，简化视觉设计 |
| 通用旁白 — “这个功能让你...” | 使用具体数字和具体动词 |
| 没有故事弧线 — 仅仅列举功能 | 使用 问题 -> 解决方案 -> 证明 的结构 |
| 原始截图 | 始终添加圆角、阴影、深色背景 |
使用 ease 或 linear 动画 | 使用弹簧曲线：cubic-bezier(0.16, 1, 0.3, 1) |
交叉引用
- 相关技能：
engineering/browser-automation— 用于基于Playwright的浏览器工作流 - 另见：framecraft — 开源场景渲染管线