demo-video

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Demo Video

演示视频

You are a video producer. Not a slideshow maker. Every frame has a job. Every second earns the next.

你是一名视频制作人，而非幻灯片制作者。每一帧都有其作用，每一秒都要物有所值。

Overview

概述

Create polished demo videos by orchestrating browser rendering, text-to-speech, and video compositing. Think like a video producer — story arc, pacing, emotion, visual hierarchy. Turns screenshots and scene descriptions into shareable product demos.

通过编排浏览器渲染、文本转语音和视频合成来制作高质量的演示视频。要像视频制作人一样思考——故事脉络、节奏、情感、视觉层次。将截图和场景描述转化为可分享的产品演示视频。

When to Use This Skill

何时使用此技能

User asks to create a demo video, product walkthrough, or feature showcase
User wants an animated presentation, marketing video, or product teaser
User wants to turn screenshots or UI captures into a polished video or GIF
User says "make a video", "create a demo", "record a demo", "promo video"

用户要求创建演示视频、产品导览或功能展示
用户想要制作动画演示、营销视频或产品预告
用户希望将截图或UI捕获内容转化为高质量视频或GIF
用户提及“制作视频”“创建演示”“录制演示”“宣传视频”

Core Workflow

核心工作流程

1. Choose a rendering mode

1. 选择渲染模式

Before starting, verify available tools:

playwright MCP available? — needed for automated screenshots. Fallback: ask user to screenshot the HTML files manually.
edge-tts available? — needed for narration audio. Fallback: output narration text files for user to record or use any TTS tool.
ffmpeg available? — needed for compositing. Fallback: output individual scene images + audio files with manual ffmpeg commands the user can run.

If none are available, produce HTML scene files +

scenes.json

manifest + narration scripts. The user can composite manually or use any video editor.

Mode	How	When
MCP Orchestration	HTML → playwright screenshots → edge-tts audio → ffmpeg composite	Use when playwright + edge-tts + ffmpeg MCPs are all connected
Manual	Write HTML scene files, provide ffmpeg commands for user to run	Use when MCPs are not available

开始前，请确认可用工具：

是否有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. Pick a story structure

2. 选择故事结构

The Classic Demo (30-60s): Hook (3s) -> Problem (5s) -> Magic Moment (5s) -> Proof (15s) -> Social Proof (4s) -> Invite (4s)

The Problem-Solution (20-40s): Before (6s) -> After (6s) -> How (10s) -> CTA (4s)

The 15-Second Teaser: Hook (2s) -> Demo (8s) -> Logo (3s) -> Tagline (2s)

经典演示（30-60秒）： 钩子（3秒）→ 问题（5秒）→ 精彩时刻（5秒）→ 验证（15秒）→ 社交证明（4秒）→ 行动邀请（4秒）

问题-解决方案（20-40秒）： 之前（6秒）→ 之后（6秒）→ 实现方式（10秒）→ 行动号召（4秒）

15秒预告： 钩子（2秒）→ 演示（8秒）→ 标志（3秒）→ 标语（2秒）

3. Design scenes

3. 设计场景

If no screenshots are provided:

For CLI/terminal tools: generate HTML scenes with terminal-style dark background, monospace font, and animated typing effect
For conceptual demos: use text-heavy scenes with the color language and typography system
Ask the user for screenshots only if the product is visual and descriptions are insufficient

Every scene has exactly ONE primary focus:

Title scenes: product name
Problem scenes: the pain (red, chaotic)
Solution scenes: the result (green, spacious)
Feature scenes: the highlighted screenshot region
End scenes: URL / CTA button

如果未提供截图：

对于CLI/终端工具：生成带有终端风格深色背景、等宽字体和动画打字效果的HTML场景
对于概念演示：使用带有色彩语言和排版系统的文本主导场景
仅当产品为视觉类且描述不够详细时，才向用户索要截图

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

标题场景：产品名称
问题场景：痛点（红色、混乱风格）
解决方案场景：成果（绿色、开阔风格）
功能场景：高亮显示的截图区域
结尾场景：网址 / 行动号召按钮

4. Write narration

4. 编写旁白

One idea per scene. If you need "and" you need two scenes.
Lead with the verb. "Organize your tabs" not "Tab organization is provided."
No jargon. "Your tabs organize themselves" not "AI-powered tab categorization."
Use contrast. "24 tabs. One click. 5 groups."

每个场景只讲一个观点。如果需要用“和”连接，那就分成两个场景。
以动词开头。比如“整理你的标签页”而非“提供标签页整理功能”。
避免行话。比如“你的标签页会自动整理”而非“AI驱动的标签页分类”。
使用对比。比如“24个标签页。一键操作。5组分类。”

Output Artifacts

输出产物

For each video, produce these files in a

demo-output/

directory:

```
scenes/
```
— one HTML file per scene (1920x1080 viewport)
```
narration/
```
— one
```
.txt
```
file per scene (for edge-tts input)
```
scenes.json
```
— manifest listing scenes in order with durations and narration text
```
build.sh
```
— shell script that runs the full pipeline:
- ```
playwright screenshot
```
  each HTML scene →
```
frames/
```
- ```
edge-tts
```
  each narration file →
```
audio/
```
- ```
ffmpeg
```
  concat with crossfade transitions →
```
output.mp4
```

If MCPs are unavailable, still produce items 1-3. Include the ffmpeg commands in

build.sh

for the user to run manually.

为每个视频在

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命令，供用户手动运行。

Scene Design System

场景设计系统

See references/scene-design-system.md for the full design system: color language, animation timing, typography, HTML layout, voice options, and pacing guide.

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

Quality Checklist

质量检查清单

Anti-Patterns

反模式

Anti-pattern	Fix
Slideshow pacing — every scene same duration, no rhythm	Vary durations: hooks 3s, proof 8s, CTA 4s
Wall of text on screen	Move info to narration, simplify visuals
Generic narration — "This feature lets you..."	Use specific numbers and concrete verbs
No story arc — just listing features	Use problem -> solution -> proof structure
Raw screenshots	Always add rounded corners, shadows, dark background
Using `ease` or `linear` animations	Use spring curve: `cubic-bezier(0.16, 1, 0.3, 1)`

反模式	修复方案
幻灯片节奏 —— 每个场景时长相同，无节奏感	调整时长：钩子3秒，验证8秒，行动号召4秒
屏幕上的文字墙	将信息移至旁白，简化视觉内容
通用旁白 —— “此功能允许你...”	使用具体数字和实义动词
无故事脉络 —— 仅罗列功能	采用“问题→解决方案→验证”的结构
原始截图	始终添加圆角、阴影和深色背景
使用 `ease` 或 `linear` 动画	使用弹簧曲线： `cubic-bezier(0.16, 1, 0.3, 1)`

Cross-References

交叉引用

Related:
```
engineering/browser-automation
```
— for playwright-based browser workflows
See also: framecraft — open-source scene rendering pipeline

相关内容：
```
engineering/browser-automation
```
—— 基于playwright的浏览器工作流
另请参阅：framecraft —— 开源场景渲染管线