产品介绍视频生成技能

适用场景

• 产品功能演示视频（需要录屏）

• 公司/产品介绍短片（图文展示）

• 产品宣传片（混合类型）

• 输出格式：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

• 视频合成与渲染