product-video

name	product-video
description	产品介绍视频自动化生成。当用户需要创建产品演示视频、公司介绍短片、宣传片时使用。支持录屏演示型、图文展示型、混合型三种视频类型。
argument-hint	["产品名称或主题"]

产品介绍视频生成技能

适用场景

• 产品功能演示视频（需要录屏）
• 公司/产品介绍短片（图文展示）
• 产品宣传片（混合类型）
• 输出格式：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. 分镜先行，确认再做

绝对禁止直接开始制作！必须：

1. 先制定详细分镜脚本
2. 包含：时间线、画面描述、素材需求、配音文字
3. 用户明确确认后才开始制作

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 - 视频合成与渲染