Remotion 视频制作
基于 Remotion 的可编程视频制作技能。根据文本指令自动生成视频，大规模产出风格一致、符合品牌调性的视频内容。
何时使用本技能
- 自动化视频生成：从文本指令生成视频
- 品牌视频制作：高产量、风格一致的视频
- 可编程内容：融合旁白、视觉效果和动画
- 营销内容：产品介绍、上手引导、宣传视频
操作说明
步骤 1：定义视频规格
video_spec:
audience: [目标观众]
goal: [视频目标]
duration: [总时长 - 30秒, 60秒, 90秒]
aspect_ratio: "16:9" | "1:1" | "9:16"
tone: "快速" | "平静" | "电影感"
voice:
style: [旁白风格]
language: [语言]
步骤 2：规划场景
场景结构模板：
## 场景规划
### 场景 1：钩子（0:00 - 0:05）
- **视觉**：产品 Logo 淡入
- **音频**：欢快的背景音乐
- **文本**："改变你的工作流程"
- **转场**：淡出 → 场景 2
### 场景 2：问题（0:05 - 0:15）
- **视觉**：问题状态插图
- **音频**：旁白开始
- **文本**：关键信息叠加
- **转场**：向左滑动
### 场景 3：解决方案（0:15 - 0:30）
...
步骤 3：准备资产
# 资产清单
assets/
├── logos/
│ ├── logo-main.svg
│ └── logo-white.svg
├── screenshots/
│ ├── dashboard.png
│ └── feature-1.png
├── audio/
│ ├── bgm.mp3
│ └── narration.mp3
└── fonts/
└── brand-font.woff2
资产准备规则：
- Logo：SVG 或高清 PNG
- 截图：统一调整为目标宽高比
- 音频：MP3 或 WAV；统一音量
- 字体：Web 字体或本地字体文件
步骤 4：实现 Remotion 组件
// src/Video.tsx
import { Composition } from 'remotion';
import { IntroScene } from './scenes/IntroScene';
import { ProblemScene } from './scenes/ProblemScene';
import { SolutionScene } from './scenes/SolutionScene';
import { CTAScene } from './scenes/CTAScene';
export const RemotionVideo: React.FC = () => {
return (
<>
<Composition
id="ProductIntro"
component={ProductIntro}
durationInFrames={1800} // 60秒 30fps
fps={30}
width={1920}
height={1080}
/>
</>
);
};
// 场景组件示例
const IntroScene: React.FC<{ frame: number }> = ({ frame }) => {
const opacity = interpolate(frame, [0, 30], [0, 1]);
return (
<AbsoluteFill style={{ opacity }}>
<Logo />
<Title>改变你的工作流程</Title>
</AbsoluteFill>
);
};
步骤 5：渲染与质量检查
# 1. 预览渲染（低质量）
npx remotion preview src/Video.tsx
# 2. 质量检查项
- [ ] 时间控制
- [ ] 音频同步
- [ ] 文字可读性
- [ ] 转场流畅
# 3. 最终渲染
npx remotion render src/Video.tsx ProductIntro out/video.mp4
示例
示例 1：产品介绍视频
提示词：
创建一个60秒的产品介绍视频，包含6个场景，
欢快风格，16:9 输出。最后包含行动号召。
预期输出：
## 场景分解
1. 钩子（0:00-0:05）：Logo + 标语
2. 问题（0:05-0:15）：痛点可视化
3. 解决方案（0:15-0:30）：产品演示
4. 功能（0:30-0:45）：核心优势（3项）
5. 社交证明（0:45-0:55）：用户评价/数据
6. 行动号召（0:55-1:00）：行动号召 + 联系方式
## Remotion 结构
- src/scenes/HookScene.tsx
- src/scenes/ProblemScene.tsx
- src/scenes/SolutionScene.tsx
- src/scenes/FeaturesScene.tsx
- src/scenes/SocialProofScene.tsx
- src/scenes/CTAScene.tsx
示例 2：上手引导
提示词：
生成一个45秒的上手引导视频，使用截图，
带有标注，格式为 9:16 适配移动端。
预期输出：
- 5步场景规划
- 资产列表（截图、标注箭头）
- 文本叠加与转场
- 应用移动端安全边距
最佳实践
- 短场景：每个场景控制在 5-10 秒内清晰表达
- 统一的排版：定义统一的字号层级
- 音频同步：将旁白提示与视觉对齐
- 模板复用：保存可复用的组件
- 安全区域：为移动宽高比预留边距
常见陷阱
- 文字过多：限制每场文字数量
- 忽略移动安全区域：检查 9:16 输出边缘
- 跳过质量检查直接渲染：务必先在预览中验证
故障排除
问题：音画不同步
原因：帧时间不匹配 解决方案：重新计算帧数并对齐时间戳
问题：渲染慢或失败
原因：资产过大或效果过多 解决方案：压缩资产并简化动画
问题：文字不可读
原因：字体太小或对比度不足 解决方案：使用至少 24px 字体和高对比度颜色
输出格式
## 视频制作报告
### 规格
- 时长：60秒
- 宽高比：16:9
- FPS：30
### 场景规划
| 场景 | 时长 | 视觉 | 音频 | 转场 |
|------|------|------|------|------|
| 钩子 | 0:00-0:05 | Logo 淡入 | 背景音乐开始 | 淡出 |
| ... | ... | ... | ... | ... |
### 资产
- [ ] logo.svg
- [ ] 截图（3张）
- [ ] bgm.mp3
- [ ] narration.mp3
### 渲染检查清单
- [ ] 预览质量检查通过
- [ ] 音频同步已验证
- [ ] 安全区域已检查
- [ ] 最终渲染完成
多代理工作流程
验证与回顾
- 第1轮（编排器）：规格完整性、场景覆盖
- 第2轮（分析师）：叙事一致性、节奏审查
- 第3轮（执行器）：验证渲染就绪检查清单
代理角色
| 代理 | 角色 |
|---|---|
| Claude | 场景规划、脚本撰写 |
| Gemini | 资产分析、优化建议 |
| Codex | 生成 Remotion 代码、执行渲染 |
元数据
版本
- 当前版本：1.0.0
- 最后更新：2026-01-21
- 兼容平台：Claude, ChatGPT, Gemini, Codex
相关技能
标签
#视频 #remotion #动画 #叙事 #自动化 #react