Remotion 视频导演是做什么的？

一个交互式技能，引导用户从“我需要一个视频”到渲染出带音乐的 MP4，融合专家研讨、场景设计和经过实战检验的 Remotion 模式。

何时使用

当用户出现以下情况时触发此技能：

想要使用 Remotion 创建视频
需要产品演示、发布视频、周期性内容模板、营销视频或叙事介绍
说“我需要一个视频”、“为...制作视频”、“创建一个 Remotion 视频”、“代码即视频”
想要帮助思考制作什么视频或如何构建它
有一个 Remotion 项目并希望获得专家评审

与官方 Remotion 技能的关系

官方的 remotion-dev/skills 包教给 Claude Remotion API（37 个规则文件涵盖动画、音频、字幕、转场等）。本技能处理其之上的创意和策略层：

官方技能：“如何使用 interpolate()？”（技术参考）
视频导演：“我应该制作什么视频以及它应该如何呈现？”（创意过程）

如果已安装官方 Remotion 技能，则利用它获取 API 级别的详细信息。如果未安装，本技能中的 references/remotion-patterns.md 和 references/component-library.md 提供了足够的 Remotion 知识来构建生产级视频。

四阶段工作流

阶段 1：战略框架

目标：通过对话了解用户需求，然后汇集专家观点。

关键：此阶段是交互式的。一次只问一个问题并等待回答。不要一次性抛出所有问题或在没有用户输入的情况下自动继续。

步骤 1 - 发现（对话式）

从一个开放性问题开始：

“这个视频是做什么用的？告诉我你的想法，谁会看，你希望他们看完后做什么。”

等待用户的回答。然后根据缺失的信息提出有针对性的后续问题：

如果受众不明确：“具体谁会看这个视频？（客户、团队、投资者、社交媒体？）”
如果期望的行动不明确：“看完后，希望观众做什么？（注册、理解某事、分享？）”
如果没有提到限制条件：“我应该知道哪些限制？时长、品牌颜色、现有素材、截止日期？”
如果他们提到产品：“你能分享产品/界面的截图吗？”

在理解目的、受众、期望行动和限制条件之前，不要继续。

步骤 2 - 创意方向

展示创意方向选项并让用户选择：

风格	感觉	最适合
极简/乔布斯	黑色背景，戏剧性停顿，每帧一个想法，Impact 字体	产品发布，重大想法，主题演讲
数据丰富/彭博社	深海军蓝背景，动态图表，密集但有序	会议回顾，报告，仪表板
温暖/叙事	暖色调，个人引述，衬线装饰	课程介绍，团队故事，社区
终端/黑客	深色代码主题，打字机效果，全程等宽字体	技术演示，开发者工具，工程
自定义	用户描述或提供参考截图/视频	任何具体需求

“哪种风格方向适合你的视频？或者分享你看过的喜欢的视频截图。”

等待回答。

阅读 references/video-archetypes.md 获取所选方向的完整规格（颜色、字体、动画风格、时序规则）。

步骤 3 - 参考输入（可选）

“你有任何参考视频、截图或想要我模仿的视觉风格吗？（如果没有，请跳过）”

如果用户提供了参考，分析它们：调色板、排版、动画速度、布局密度、整体情绪。将这些融入创意简报中。

等待回答或跳过确认。

步骤 4 - 专家小组召集

根据选择的原型（来自 references/video-archetypes.md）和创意方向，从 references/expert-definitions.md 中召集一个 3-4 人的专家小组。

生成专家观点 - 为每位专家生成 2-3 句话：

一条具体建议
一个需要注意的风险

保持简洁。以简短的圆桌讨论形式呈现。只强调专家们意见不一致的地方（标记出用户需要做出的决定）。

步骤 5 - 创意简报

综合成一个结构化的简报：

## 创意简报

**目的**：[一句话]
**受众**：[谁，他们关心什么]
**核心信息**：[观众应记住的**一件事**]
**期望行动**：[观众接下来应该做什么]
**时长**：[秒]（[帧] 帧，30fps）
**创意方向**：[所选风格 - 极简/乔布斯，彭博社等]
**情感弧线**：[例如：好奇 -> 证明 -> 信心 -> 行动]

## 音频策略
- 音乐：[环境/欢快/戏剧性/稀疏] 来自 Pixabay
- 旁白：[是/否]
- 音乐情绪：[与创意方向匹配的描述]

## 场景序列
| # | 场景 | 时长 | 目的 |
|---|------|----------|---------|
| 1 | ...   | Xs       | ...     |

## 数据模型（如适用）
[什么被参数化 vs 硬编码 - 可重用模板结构]

## 视觉风格
- 主题：[创意方向名称]
- 背景：[颜色]
- 颜色：[主色，强调色，辅助色]
- 排版：[标题字体，正文字体，等宽字体]
- 动画感觉：[轻快/柔和/戏剧性/打字机]

“这是创意简报。在着手设计场景之前想要调整什么吗？”

等待确认或调整。

阶段 2：场景设计

目标：将简报转化为详细的逐场景脚本。

步骤 6 - 场景设计

对于序列中的每个场景，指定：

内容：确切的文本、数据、视觉效果
组件：使用哪些可重用组件（来自 references/component-library.md）
动画：进入/退出动画，以帧为单位的时序
转场：所有场景之间的交叉溶解（8-12 帧）

阅读 references/remotion-patterns.md 了解关键的 Remotion 约束和高级样式模式。

场景聚焦规则：每个场景必须服务于一个与核心信息相关的想法。如果一个场景与核心信息无关，删掉它。更少的聚焦场景总是比许多分散的场景更好。

帧预算：规划整个时间线：

const TIMING = {
  scene1: { start: 0, dur: 6 },   // 吸引
  scene2: { start: 6, dur: 10 },  // ...
  // 总数必须匹配 composition 的 durationInFrames / fps
};

步骤 7 - 数据架构

如果视频是数据驱动的（周期性报告，多变量营销）：

设计在不同渲染之间变化的配置对象
确定哪些保持不变（视觉模板） vs 哪些变化（内容）
向用户展示配置形状并确认

示例模式（来自 WeeklyIntro）：

const weekData = {
  weekLabel: "3月3日 - 3月9日",
  heroNumber: 312,
  heroLabel: "新增注册",
  // ... 每周变化的字段
};

步骤 8 - 用户确认

呈现完整的脚本。

“准备好构建了，还是想要调整什么？”

等待确认。

阶段 3：构建

目标：创建 Remotion 项目并渲染第一个版本。

关键：永远不要运行任何启动交互式 CLI 向导或提示输入的命令。这包括 npx create-video、npx remotion init、npm init 或没有参数的裸 npx remotion render。始终手动创建文件并显式地将所有参数传递给 CLI 命令。

步骤 9 - 脚手架项目

手动创建 Remotion 项目结构（不要使用脚手架向导 - 请参阅阶段 3 标题）：

<project>/
├── src/
│   ├── Root.tsx
│   ├── Video.tsx           # 或 <VideoName>.tsx
│   ├── theme/
│   │   ├── colors.ts
│   │   ├── fonts.ts
│   │   └── springs.ts
│   ├── scenes/
│   │   ├── Scene1Hook.tsx
│   │   └── ...
│   ├── components/
│   │   ├── FadeIn.tsx
│   │   └── ...
│   └── data/
│       └── config.ts       # 如果数据驱动
├── public/
│   ├── music.mp3           # 背景音乐
│   └── illustrations/      # 如果使用背景图片
├── package.json
├── tsconfig.json
└── remotion.config.ts

安装依赖：pnpm install

步骤 10 - 构建场景

按照阶段 2 的脚本构建每个场景组件。使用来自 references/component-library.md 的组件。

关键构建规则（来自 references/remotion-patterns.md）：

所有动画通过 useCurrentFrame() + interpolate()/spring() - 绝不使用 CSS 过渡
始终夹紧插值：{ extrapolateLeft: "clamp", extrapolateRight: "clamp" }
useCurrentFrame() 相对于最近的 <Sequence>，非全局时间线
每个场景之间交叉溶解（8-12 帧包络；例外：终端/黑客风格适合硬切）
每个元素必须动画进入 - 永远不要在切换时静态出现

高级样式规则（来自 references/remotion-patterns.md）：

字体多样性：混合标题字体 + 正文字体 + 等宽字体（不要到处都用 Inter）
极端大小对比：标题 72-96pt，正文 20-24pt
重要问题/标题垂直居中
每个正文幻灯片最多 15-20 个词，标题幻灯片 7 个词（乔布斯风格）
文本保持在帧的上 85% 区域
最小 24px 字体以保证可读性
边距 80-120px

步骤 11 - 音频集成

阅读 references/music-and-audio.md 获取完整的音频指南。

“想添加背景音乐吗？我建议浏览 pixabay.com/music/ 寻找与 [选定的创意方向] 风格匹配的免版税曲目。分享下载链接或文件，我会用适当的音量曲线集成它。”

等待用户响应。

如果用户提供音乐：

下载/保存到 public/music.mp3
添加 <Audio> 组件，带淡入/淡出音量曲线
在数据密集的场景中降低音乐音量（0.30 -> 0.15）
如果音轨比视频长，使用 startFrom 播放结尾部分

如果用户想要旁白：

根据场景内容生成解说脚本（约 3 词/秒）
用户录制或使用 ElevenLabs
与音乐闪避集成（旁白期间音乐降至 0.10-0.12）

如果用户跳过音频：使用 --muted 标志渲染。

步骤 12 - 渲染和预览

关键：始终传递入口点文件以避免交互式提示。 永远不要运行裸 npx remotion render - 它可能会启动交互式组合选择器。始终显式指定入口文件和组合 ID：

# 渲染最终 MP4 - 始终指定入口点 + 组合 ID
npx remotion render src/Root.tsx <CompositionId> out/<name>.mp4 --codec=h264 --crf=18

# 如果没有音频：
npx remotion render src/Root.tsx <CompositionId> out/<name>.mp4 --codec=h264 --crf=18 --muted

打开视频供用户审查。

阶段 4：审查

目标：通过专家评审和用户反馈完善视频，直到可以发布。

步骤 13 - 多专家评审

用户看过视频后，运行来自 references/expert-definitions.md 的评审协议。

生成评分卡（参见 references/expert-definitions.md 获取完整模板）：

| 维度                      | 优先级 | 评分 |
|---------------------------|--------|------|
| 吸引力清晰度（前 3-5 秒）   | 关键   | ?/5  |
| 核心信息传达              | 关键   | ?/5  |
| 节奏/动态性               | 高     | ?/5  |
| 视觉可读性                | 高     | ?/5  |
| 目标行动清晰度            | 高     | ?/5  |
| 受众适配度                | 中     | ?/5  |

添加 2-3 个类型特定的维度（例如，极简/乔布斯风格的“视觉高级感”，添加音乐后的“视听和谐度”，数据报告的“配置可重用性”）。

每位专家从自己的角度进行评审，包括摄影师对视觉构成的评审和音乐总监对音频的评审（如果添加了音乐）。综合为：

优势 - 哪些做得好
改进 - 具体的、可操作的更改
结论 - 按原样发布，需要再改一轮，或需要重大返工

询问用户要应用哪些改进。

步骤 14 - 用户审查与迭代

专家评审发现技术问题，但只有用户知道视频是否感觉正确。

“现在你看了视频和专家评审 - 你的看法是什么？

哪些场景效果好？

哪些场景需要更改？（如果可能，截取特定帧的截图）

有任何文本、时序或视觉问题吗？

缺少什么或应该删掉什么？”

等待用户的反馈。

当用户提供反馈时：

确认他们喜欢的内容（强化方向）
列出你将根据他们的笔记进行的具体更改
进行更改 - 编辑场景组件，调整时序，修正文本
重新渲染并呈现更新后的视频
再次询问：“好些了吗？还有别的要调整吗？”

重复此循环直到用户满意。典型的视频需要 1-3 轮改进。

常见的反馈模式及处理方法：

“太快了” → 将场景持续时间增加 30-50%，增加更多戏剧性停顿
“文本太多” → 拆分场景，每帧减少到 7 个词（乔布斯风格）
“感觉不够高级” → 切换到极简/乔布斯方向，增加空白空间
“音乐不匹配” → 尝试不同的 Pixabay 曲目，调整音量曲线
“语气不对” → 重新审视创意方向，调整调色板 and 动画速度
“场景 X 令人困惑” → 简化成一个想法，增加视觉层次

适应指南

当用户已有 Remotion 项目时

跳过阶段 1-2 的脚手架。专注于审查现有代码，提出改进建议，或添加新的场景/组合。

当用户想要快速视频时（无需讨论）

压缩阶段 1，一个问题完成：询问视频类型 + 创意方向。挑选前 2 位专家，生成一个简要脚本。快速进入构建阶段。仍然询问音乐。

当用户只想要概念（无需代码）时

完整运行阶段 1-2。输出创意简报和脚本作为文档。跳过阶段 3。

当用户想要多变量视频时

使用增长营销原型。设计变量矩阵（每个变量变化什么）。构建一个基础视频，然后展示如何进行参数化...

Remotion 视频导演