产品介绍视频生成技能
适用场景
- 产品功能演示视频（需要录屏）
- 公司/产品介绍短片（图文展示）
- 产品宣传片（混合类型）
- 输出格式：MP4 (1920x1080, 30fps)
视频类型选择
在开始制作前，首先确定视频类型：
| 类型 | 代号 | 适用场景 | 核心素材 |
|---|---|---|---|
| 录屏演示型 | demo | 软件功能演示、操作教程 | Playwright 录屏 |
| 图文展示型 | slideshow | 公司介绍、产品历程、概念宣传 | 图片 + 文字动画 |
| 混合型 | mixed | 产品宣传片 | 录屏 + 图片 + 动画 |
类型判断流程
用户需求分析
│
├─ 需要展示软件操作？ ──→ demo 或 mixed
│
├─ 纯图文概念展示？ ──→ slideshow
│
└─ 两者都需要？ ──→ mixed工作流程
通用流程
┌─────────────────────────────────────────────────────────────┐
│ 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: 验收交付 │
│ ├── 打开视频供用户审查 │
│ ├── 根据反馈调整 │
│ └── 最终交付 │
└─────────────────────────────────────────────────────────────┘关键原则
1. 分镜先行，确认再做
绝对禁止直接开始制作！必须：
- 先制定详细分镜脚本
- 包含：时间线、画面描述、素材需求、配音文字
- 用户明确确认后才开始制作
2. 素材质量优先
| 素材类型 | 最低要求 | 推荐规格 |
|---|---|---|
| 背景图 | 1920×1080 | 2560×1440+ |
| Logo | 400×400 PNG | SVG 矢量 |
| 人物照片 | 800×800 | 1200×1200+ |
| 录屏视频 | 1920×1080 30fps | 同左 |
3. 配音验证机制
生成配音后必须验证：
- 每段配音时长 ≤ 场景时长
- 相邻配音段不重叠
- 总配音时长 ≤ 视频时长
- 空白间隙 < 3 秒
4. 视觉效果提升
- 使用 spring 动画增加生动感
- 添加发光/阴影效果增强层次
- 背景图使用 0.2-0.4 透明度
- 文字添加描边或阴影提高可读性
视频结构模板
标准图文展示型 (60-120秒)
00:00-00:08 片头
- Logo 动画 (spring 缩放 + 发光)
- 主标题 + 副标题 (淡入)
配音: "[主题]简介"
00:08-00:XX 内容场景 (根据需要重复)
- 年份/关键词大字
- 背景图 (低透明度)
- 核心信息文字
配音: 对应内容解说
XX:XX-结束 片尾
- Logo + 发光脉动
- 总结文字
- 数据展示 (可选)
配音: 总结语标准录屏演示型 (90-180秒)
00:00-00:10 片头
- Logo + 产品名
- 一句话定位
配音: "欢迎使用..."
00:10-00:18 功能亮点
- 功能卡片展示
配音: 功能概述
00:18-XX:XX 核心演示
- 完整录屏
- 各功能点配音同步
配音: 根据录屏时间线
XX:XX-结束 片尾
- Logo + 口号
- 行动号召
配音: "立即开始使用"技术栈
| 需求 | 推荐方案 | 备选方案 |
|---|---|---|
| 视频合成 | Remotion | FFmpeg 纯命令行 |
| 浏览器录屏 | Playwright | Puppeteer |
| 中文配音 | edge-tts (免费) | Azure TTS (付费) |
| 音频处理 | FFmpeg | - |
| 图片素材 | Unsplash/Pexels | Pixabay |
文件结构规范
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相关技能
/storyboard- 分镜脚本设计/asset-collection- 素材收集 (图文视频)/recording- 浏览器录屏 (演示视频)/voiceover- 配音生成与验证/compositing- 视频合成与渲染