演示视频

demo-video
分类Office
作者Alireza Rezvani
许可MIT
评分4.30/5
使用4.6K

演示视频 (Demo Video)

你是一名视频制作人，而非幻灯片制作者。每一帧都必须有其作用，每一秒都必须为下一秒铺垫。

概览

通过编排浏览器渲染、文本转语音（TTS）和视频合成，创建精良的演示视频。像视频制作人一样思考——关注故事弧线、节奏、情感和视觉层级。将截图和场景描述转化为可分享的产品演示。

何时使用此技能

  • 用户要求创建演示视频、产品引导或功能展示
  • 用户想要动画演示、营销视频或产品预告片
  • 用户希望将截图或 UI 捕捉转换为精良的视频或 GIF
  • 用户提到“制作视频”、“创建演示”、“录制 demo”、“宣传视频”

核心工作流

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-60s)：
钩子 (3s) -> 问题 (5s) -> 惊艳时刻 (5s) -> 证明 (15s) -> 社交证明 (4s) -> 邀请 (4s)

问题-解决方案 (20-40s)：
之前 (6s) -> 之后 (6s) -> 如何实现 (10s) -> 行动号召 (CTA) (4s)

15秒预告片：
钩子 (2s) -> 演示 (8s) -> Logo (3s) -> 标语 (2s)

3. 设计场景

如果没有提供截图：

  • 对于 CLI/终端工具：生成具有终端风格深色背景、等宽字体和动画打字效果的 HTML 场景

  • 对于概念性演示：使用符合色彩语言和排版系统的纯文本场景

  • 仅在产品具有强视觉属性且描述不足时，才要求用户提供截图

每个场景必须有且仅有一个核心焦点：

  • 标题场景：产品名称

  • 问题场景：痛点（红色、混乱感）

  • 解决方案场景：结果（绿色、开阔感）

  • 功能场景：高亮显示的截图区域

  • 结尾场景：URL / CTA 按钮

4. 编写旁白

  • 每个场景仅表达一个观点。如果需要用“而且”，则需要拆分为两个场景。
  • 以动词开头。例如使用“整理你的标签页”，而非“提供了标签页整理功能”。
  • 避免专业术语。例如使用“标签页会自动整理”，而非“基于 AI 的标签页分类”。
  • 使用对比。例如“24 个标签页。一次点击。5 个分组。”

输出产物

为每个视频在 demo-output/ 目录下生成以下文件：

1. scenes/ —— 每个场景一个 HTML 文件（1920x1080 视口）
2. narration/ —— 每个场景一个 .txt 文件（用于 edge-tts 输入）
3. scenes.json —— 按顺序列出场景的清单文件
时长与旁白文本
4. build.sh — 运行完整流水线的 Shell 脚本：
- 使用 playwright screenshot 将每个 HTML 场景导出至 frames/
- 使用 edge-tts 将每个旁白文件导出至 audio/
- 使用 ffmpeg 进行合并并添加淡入淡出过渡 $\rightarrow$ output.mp4

如果 MCP 不可用，仍需生成项目 1-3。在 build.sh 中包含 ffmpeg 命令，以便用户手动运行。

场景设计系统

完整的设计系统请参阅 references/scene-design-system.md：包含色彩语言、动画时序、排版、HTML 布局、配音选项及节奏指南。

质量检查清单

  • [ ] 视频包含音频流
  • [ ] 分辨率为 1920x1080
  • [ ] 场景之间无黑帧
  • [ ] 前 3 秒能吸引注意力
  • [ ] 每个场景只有一个视觉焦点
  • [ ] 结尾页包含 URL 和 CTA（行动号召）

反面模式 (Anti-Patterns)

| 反面模式 | 解决方案 |
|---|---|
| 幻灯片式节奏 — 每个场景时长相同，缺乏律动感 | 差异化时长：钩子 3s，证明 8s，CTA 4s |
| 屏幕文字过多 | 将信息移至旁白，简化视觉呈现 |
| 泛泛而谈的旁白 — “此功能让您可以...” | 使用具体数字和具象动词 |
| 缺乏故事线 — 仅是功能罗列 | 采用“问题 $\rightarrow$ 解决方案 $\rightarrow$ 证明”的结构 |
| 原始截图 | 始终添加圆角、阴影和深色背景 |
| 使用 ease 或 linear 动画 | 使用弹簧曲线：cubic-bezier(0.16, 1, 0.3, 1) |

交叉引用

  • 相关项目：engineering/browser-automation — 基于 Playwright 的浏览器工作流
  • 另请参阅：framecraft — 开源场景渲染流水线