laborany Video Creator 视频创作助手
核心原则
- 五阶段工作流: 需求挖掘 → 创意规划 → 脚本设计 → 代码生成 → 渲染输出
- 先理解后创作: 充分挖掘用户意图，设计视频角度和风格后再生成
- 主动澄清需求: 不确定时先问，不要猜测用户意图
- 等待用户回答: 使用 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__laborany_web__read_page 获取网页内容
- 整理关键信息点
4. 主动澄清不明确的需求
重要: 当需求不够明确时，必须使用 AskUserQuestion 工具询问用户，并等待用户回答后才能继续。 禁止: 自己假设用户的回答然后继续执行。
对于创建视频任务，如果用户没有明确指定，必须询问：
使用 AskUserQuestion 工具询问以下问题：
问题1: 视频类型是什么？
- 选项: 产品演示/教程 / 数据可视化 / 营销宣传 / 原理解释
问题2: 目标受众是谁？
- 选项: 技术人员 / 普通用户 / 决策者 / 学生
问题3: 发布平台？
- 选项: YouTube / 社交媒��(抖音/Instagram) / 内部演示 / 其他
问题4: 预期时长？
- 选项: 15-30秒 / 1-2分钟 / 3-5分钟 / 更长
调用 AskUserQuestion 后，必须停止并等待用户回答。绝对不能自己假设答案继续执行。
阶段二：创意规划
1. 确定视频角度
根据内容类型选择叙事角度：
- 问题-解决方案（适合产品演示）
- 步骤教学（适合教程）
- 数据故事（适合数据可视化）
- 情感共鸣（适合营销）
2. 选择视觉风格
参考 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 生成详细分镜：
## 分镜脚本
### 基本信息
- 总时长: 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-effects.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 |
Composition、Sequence、Series |
| 媒体处理 | references/remotion-media.md |
图片、视频、字体 |
| 动画特效 | references/remotion-effects.md |
插值、Spring、转场 |
| 风格指南 | references/video-styles.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 文档时：
- 读取文档：使用 Read 工具读取 PDF 内容
- 提取信息：识别关键信息点（标题、数据、流程）
- 整理结构：将信息整理为视频脚本
- 确认理解：使用 AskUserQuestion 确认提取的信息是否准确
网页内容处理
当用户提供网页链接时：
- 获取内容：使用 mcp__laborany_web__read_page 获取网页内容
- 提取要点：识别核心信息和数据
- 转化脚本：将内容转化为视频叙事
图片素材处理
当用户提供图片时：
- 查看图片：使用 Read 工具查看图片
- 分析内容：识别图片中的元素和风格
- 整合设计：将图片风格融入视频设计
输出约定
- 项目目录: 用户工作目录下的
video-project/或用户指定目录 - 输出目录: 项目目录下的
out/ - 命名规则:
video-{timestamp}.mp4
重要提示
Remotion 动画规则
- 所有动画必须由
useCurrentFrame()驱动 - 禁止使用 CSS transitions/animations
- 禁止使用 Tailwind 动画类名
- 使用
<Img>组件而非原生<img>
代码风格
- 中文注释，ASCII 风格分块
- 函数短小，只做一件事
- 避免超过 3 层缩进
- 每个文件不超过 800 行
Code Style Guidelines
- Write concise code
- Avoid verbose variable names and redundant operations
- 中文注释，ASCII 风格分块
- 函数短小，只做一件事