Applicable Scenarios
- Product feature demo videos (requires screen recording)
- Company/product introduction short films (graphic and text display)
- Product promotional videos (hybrid type)
- Output format: MP4 (1920x1080, 30fps)
Video Type Selection
Before starting production, first determine the video type:
| Type | Code | Applicable Scenarios | Core Materials |
|---|---|---|---|
| Screen Recording Demo Type | demo |
Software feature demos, operation tutorials | Playwright screen recording |
| Graphic and Text Display Type | slideshow |
Company introduction, product history, concept promotion | Images + text animation |
| Hybrid Type | mixed |
Product promotional videos | Screen recording + images + animation |
Type Determination Process
用户需求分析
│
├─ 需要展示软件操作？ ──→ demo 或 mixed
│
├─ 纯图文概念展示？ ──→ slideshow
│
└─ 两者都需要？ ──→ mixed
Workflow
General Workflow
┌─────────────────────────────────────────────────────────────┐
│ Phase 1: 需求分析与分镜设计 │
│ ├── 确定视频类型 (demo/slideshow/mixed) │
│ ├── 分析目标受众和核心信息 │
│ ├── 设计视频结构和时间线 │
│ ├── 编写分镜脚本和配音文案 │
│ └── 【必须】等待用户确认分镜脚本 │
├─────────────────────────────────────────────────────────────┤
│ Phase 2: 素材准备 │
│ ├── [demo] 执行 Playwright 录屏，记录时间线 │
│ ├── [slideshow] 收集图片素材 (见 asset-collection skill) │
│ ├── [mixed] 录屏 + 图片收集 │
│ └── 素材格式转换和优化 │
├─────────────────────────────────────────────────────────────┤
│ Phase 3: 配音生成 │
│ ├── 根据分镜计算配音时间线 │
│ ├── 生成各段配音音频 (edge-tts) │
│ ├── 【新增】验证配音时长和同步性 │
│ ├── 合并配音到单个音轨 (FFmpeg adelay) │
│ └── 检测并处理配音空白间隙 │
├─────────────────────────────────────────────────────────────┤
│ Phase 4: 视频合成 │
│ ├── 创建 Remotion 项目和场景组件 │
│ ├── [demo] 使用 Video 组件嵌入录屏 │
│ ├── [slideshow] 使用 Img + 动画组件 │
│ ├── 渲染最终视频 │
│ └── 音量标准化后期处理 │
├─────────────────────────────────────────────────────────────┤
│ Phase 5: 验收交付 │
│ ├── 打开视频供用户审查 │
│ ├── 根据反馈调整 │
│ └── 最终交付 │
└─────────────────────────────────────────────────────────────┘
Key Principles
1. Storyboard first, confirm before producing
Absolutely ProhibitedStart production directly! Must:
- First create a detailed storyboard script
- Including: timeline, visual descriptions, material requirements, voiceover text
- Start production only after explicit user confirmation
2. Material quality first
| Material Type | Minimum Requirement | Recommended Specification |
|---|---|---|
| Background image | 1920×1080 | 2560×1440+ |
| Logo | 400×400 PNG | SVG vector |
| Portrait photos | 800×800 | 1200×1200+ |
| Screen recording video | 1920×1080 30fps | Same as left |
3. Voiceover verification mechanism
After generating voiceover, must verify:
- Each voiceover segment duration ≤ scene duration
- Adjacent voiceover segments do not overlap
- Total voiceover duration ≤ video duration
- Blank gaps < 3 seconds
4. Visual effect enhancement
- Use spring animations to add liveliness
- Add glow/shadow effects to enhance layering
- Background images use 0.2-0.4 opacity
- Add stroke or shadow to text to improve readability
Video Structure Template
Standard Graphic and Text Display Type (60-120 seconds)
00:00-00:08 片头
- Logo 动画 (spring 缩放 + 发光)
- 主标题 + 副标题 (淡入)
配音: "[主题]简介"
00:08-00:XX 内容场景 (根据需要重复)
- 年份/关键词大字
- 背景图 (低透明度)
- 核心信息文字
配音: 对应内容解说
XX:XX-结束 片尾
- Logo + 发光脉动
- 总结文字
- 数据展示 (可选)
配音: 总结语
Standard Screen Recording Demo Type (90-180 seconds)
00:00-00:10 片头
- Logo + 产品名
- 一句话定位
配音: "欢迎使用..."
00:10-00:18 功能亮点
- 功能卡片展示
配音: 功能概述
00:18-XX:XX 核心演示
- 完整录屏
- 各功能点配音同步
配音: 根据录屏时间线
XX:XX-结束 片尾
- Logo + 口号
- 行动号召
配音: "立即开始使用"
Tech Stack
| Requirement | Recommended Solution | Alternative Solution |
|---|---|---|
| Video composition | Remotion | FFmpeg pure command line |
| Browser screen recording | Playwright | Puppeteer |
| Chinese voiceover | edge-tts (free) | Azure TTS (paid) |
| Audio processing | FFmpeg | - |
| Image materials | Unsplash/Pexels | Pixabay |
File Structure Specification
project/
├── public/
│ ├── images/ # 图片素材
│ │ ├── logos/
│ │ ├── backgrounds/
│ │ └── photos/
│ ├── recordings/ # 录屏文件 (demo 类型)
│ │ ├── full_demo.mp4
│ │ └── timeline.json
│ └── audio/
│ ├── segments/ # 配音片段
│ ├── synced_voiceover.mp3
│ └── voiceover_metadata.json
├── src/
│ ├── index.ts
│ ├── Root.tsx
│ ├── MainVideo.tsx
│ ├── scenes/ # 场景组件
│ └── components/ # 可复用组件
├── scripts/
│ ├── collect_assets.sh # 素材收集
│ ├── record_demo.js # 录屏脚本
│ └── generate_voiceover.py
└── out/
└── final.mp4
Related Skills
/storyboard- Storyboard script design/asset-collection- Material collection (graphics, text, video)/recording- Browser screen recording (demo videos)/voiceover- Voiceover generation and verification/compositing- Video composition and rendering