视频创作助手

Video Creator 视频创作助手

核心原则

1. 五阶段工作流: 需求挖掘 → 创意规划 → 脚本设计 → 代码生成 → 渲染输出
2. 先理解后创作: 充分挖掘用户意图，设计视频角度和风格后再生成
3. 主动澄清需求: 不确定时先问，不要猜测用户意图
4. 等待用户回答: 使用 AskUserQuestion 后必须停止等待，绝对禁止自己假设答案继续执行

---

技术方案

Remotion + React

使用 Remotion 框架生成专业级视频：

• 可导出 MP4/WebM 视频文件
• 支持复杂动画、转场、数据可视化
• 专业级视频质量

依赖要求

| 依赖 | 版本 | 必需 | 安装方式 | |------|------|------|----------| | Node.js | 18+ | 是 | https://nodejs.org | | ffmpeg | 最新 | 是 | winget install ffmpeg | | Chrome | 最新 | 否 | 推荐安装 |

---

五阶段工作流

┌──────────────┐     ┌──────────────┐     ┌──────────────┐
│   阶段一     │     │   阶段二     │     │   阶段三     │
│  需求挖掘    │────▶│  创意规划    │────▶│  脚本设计    │
│             │     │             │     │             │
│ • 理解意图   │     │ • 视频角度   │     │ • 详细分镜   │
│ • 收集素材   │     │ • 演示风格   │     │ • 时间线     │
│ • 澄清需求   │     │ • 视频长度   │     │ • 动画规划   │
└──────────────┘     └──────────────┘     └──────────────┘
                                                │
┌──────────────┐     ┌──────────────┐           │
│   阶段五     │     │   阶段四     │           │
│  渲染输出    │◀────│  代码生成    │◀──────────┘
│             │     │             │
│ • 执行渲染   │     │ • React 代码 │
│ • 迭代修改   │     │ • 组件组装   │
│ • 导出视频   │     │ • 样式配置   │
└──────────────┘     └──────────────┘

---

阶段一：需求挖掘

在开始任何操作前，必须：

1. 检查依赖

首先运行依赖检查脚本：

python scripts/check_deps.py

如果缺少依赖，指导用户安装后再继续。

2. 识别视频类型

• 产品演示 / 教程
• 数据可视化
• 营销宣传 / 社交媒体
• 原理解释 / 科普内容

3. 收集素材

• 读取用户提供的文档 (PDF/DOCX/MD)
• 分析用户上传的图片
• 使用 mcp__laboranyweb_read_page 获取网页内容
• 整理关键信息点

4. 主动澄清不明确的需求

> 重要: 当需求不够明确时，必须使用 AskUserQuestion 工具询问用户，并等待用户回答后才能继续。 > 禁止: 自己假设用户的回答然后继续执行。

对于创建视频任务，如果用户没有明确指定，必须询问：

使用 AskUserQuestion 工具询问以下问题：

问题1: 视频类型是什么？
- 选项: 产品演示/教程 / 数据可视化 / 营销宣传 / 原理解释

问题2: 目标受众是谁？
- 选项: 技术人员 / 普通用户 / 决策者 / 学生

问题3: 发布平台？
- 选项: YouTube / 社交媒��(抖音/Instagram) / 内部演示 / 其他

问题4: 预期时长？
- 选项: 15-30秒 / 1-2分钟 / 3-5分钟 / 更长

调用 AskUserQuestion 后，必须停止并等待用户回答。绝对不能自己假设答案继续执行。

---

阶段二：创意规划

1. 确定视频角度

根据内容类型选择叙事角度：

• 问题-解决方案（适合产品演示）
• 步骤教学（适合教程）
• 数据故事（适合数据可视化）
• 情感共鸣（适合营销）

2. 选择视觉风格

参考 [references/video-styles.md](references/video-styles.md)：

• 极简现代 (Minimal)
• 科技感 (Tech)
• 商务专业 (Corporate)
• 活泼多彩 (Playful)

3. 确定视频参数

| 平台 | 分辨率 | 帧率 | 推荐时长 | |------|--------|------|----------| | YouTube 横屏 | 1920×1080 | 30fps | 1-5分钟 | | YouTube Shorts | 1080×1920 | 30fps | 30-60秒 | | Instagram Reels | 1080×1920 | 30fps | 15-30秒 | | TikTok | 1080×1920 | 30fps | 15-60秒 |

4. 等待用户确认

使用 AskUserQuestion 工具询问：

问题: 以上创意方向是否符合您的预期？
- 选项: 确认，开始设计分镜 / 调整视频角度 / 调整视觉风格 / 调整视频参数

等待用户回答后再继续。

---

阶段三：脚本设计

1. 生成分镜脚本

参考 [references/storyboard-guide.md](references/storyboard-guide.md) 生成详细分镜：

## 分镜脚本

### 基本信息
- 总时长: XX 秒
- 分辨率: 1920×1080
- 帧率: 30fps
- 风格: [选定风格]

---

### 场景 1: 开场 (0:00 - 0:05)
- 画面: Logo 居中显示
- 动画: ScaleIn + FadeIn
- 背景: 品牌主色

### 场景 2: [场景名称] (0:05 - 0:XX)
- 画面: [描述]
- 动画: [动画类型]
- 文字: [文案]
- 备注: [其他说明]

...

2. 等待用户确认

使用 AskUserQuestion 工具询问：

问题: 分镜脚本是否符合您的预期？
- 选项: 确认，开始生成代码 / 调整场景内容 / 调整时间分配 / 添加更多场景

等待用户回答后再继续。

---

阶段四：代码生成

1. 初始化项目

如果是新项目，运行初始化脚本：

python scripts/init_project.py ./video-project

2. 生成 React 组件

参考以下文档：

• [references/remotion-core.md](references/remotion-core.md) - 核心概念
• [references/remotion-effects.md](references/remotion-effects.md) - 动画特效
• [references/remotion-media.md](references/remotion-media.md) - 媒体处理

3. 使用预制组件

可用的预制组件（位于 assets/components/）：

| 组件 | 路径 | 用途 | |------|------|------| | FadeIn | animations/FadeIn.tsx | 淡入动画 | | SlideIn | animations/SlideIn.tsx | 滑入动画 | | ScaleIn | animations/ScaleIn.tsx | 缩放动画 | | Typewriter | animations/Typewriter.tsx | 打字机效果 | | BarChart | charts/BarChart.tsx | 柱状图 | | LineChart | charts/LineChart.tsx | 折线图 | | Counter | charts/Counter.tsx | 数字计数器 | | TitleSlide | layouts/TitleSlide.tsx | 标题页 | | ContentSlide | layouts/ContentSlide.tsx | 内容页 | | FadeTransition | transitions/FadeTransition.tsx | 淡入淡出转场 | | SlideTransition | transitions/SlideTransition.tsx | 滑动转场 |

4. 代码结构

video-project/
├── src/
│   ├── Root.tsx              # Composition 定义
│   ├── index.ts              # 入口文件
│   └── compositions/
│       └── Main.tsx          # 主视频组件
├── public/                   # 静态资源
│   ├── images/
│   └── fonts/
└── out/                      # 输出目录

---

阶段五：渲染输出

1. 预览视频

python scripts/preview_video.py ./video-project

或在项目目录中：

npm start

2. 渲染视频

python scripts/render_video.py -p ./video-project -o out/video.mp4

可选参数：

• -c, --composition: Composition ID（默认 Main）
• -o, --output: 输出文件路径
• --codec: 编码器（h264/h265/vp8/vp9/prores）
• -q, --quality: 质量 1-100（默认 80）

3. 告知用户

视频已渲染完成！

文件位置: [输出路径]
分辨率: 1920×1080
时长: XX 秒
文件大小: XX MB

如需修改，请告诉我需要调整的部分。

4. 迭代修改

使用 AskUserQuestion 工具询问：

问题: 接下来您想？
- 选项: 修改某个场景 / 调整动画效果 / 更换配色 / 确认完成

等待用户回答后再继续。

---

参考文档

| 文档 | 路径 | 内容 | |------|------|------| | 核心概念 | [references/remotion-core.md](references/remotion-core.md) | Composition、Sequence、Series | | 媒体处理 | [references/remotion-media.md](references/remotion-media.md) | 图片、视频、字体 | | 动画特效 | [references/remotion-effects.md](references/remotion-effects.md) | 插值、Spring、转场 | | 风格指南 | [references/video-styles.md](references/video-styles.md) | 视觉风格、配色、节奏 | | 分镜指南 | [references/storyboard-guide.md](references/storyboard-guide.md) | 分镜脚本模板 |

---

辅助脚本

| 脚本 | 路径 | 用途 | |------|------|------| | 依赖检查 | scripts/check_deps.py | 检查 Node.js、ffmpeg | | 项目初始化 | scripts/init_project.py | 创建新项目 | | 预览视频 | scripts/preview_video.py | 启动 Remotion Studio | | 渲染视频 | scripts/render_video.py | 导出 MP4 |

---

素材处理

PDF 文档处理

当用户提供 PDF 文档时：

1. 读取文档：使用 Read 工具读取 PDF 内容
2. 提取信息：识别关键信息点（标题、数据、流程）
3. 整理结构：将信息整理为视频脚本
4. 确认理解：使用 AskUserQuestion 确认提取的信息是否准确

网页内容处理

当用户提供网页链接时：

1. 获取内容：使用 mcp__laboranyweb_read_page 获取网页内容
2. 提取要点：识别核心信息和数据
3. 转化脚本：将内容转化为视频叙事

图片素材处理

当用户提供图片时：

1. 查看图片：使用 Read 工具查看图片
2. 分析内容：识别图片中的元素和风格
3. 整合设计：将图片风格融入视频设计

---

输出约定

• 项目目录: 用户工作目录下的 video-project/ 或用户指定目录
• 输出目录: 项目目录下的 out/
• 命名规则: video-{timestamp}.mp4

---

重要提示

Remotion 动画规则

1. 所有动画必须由 useCurrentFrame() 驱动
2. 禁止使用 CSS transitions/animations
3. 禁止使用 Tailwind 动画类名
4. 使用 ` 组件而非原生 `

代码风格

• 中文注释，ASCII 风格分块
• 函数短小，只做一件事
• 避免超过 3 层缩进
• 每个文件不超过 800 行

---

Code Style Guidelines

• Write concise code
• Avoid verbose variable names and redundant operations
• 中文注释，ASCII 风格分块
• 函数短小，只做一件事

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: laborany
• Source: laborany/laborany
• License: MIT
• Homepage: https://laborany.github.io

Install and usage instructions live in the source repository linked above.