Aryanban/remotion-video-director

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/ 寻找与所选 [创意方向] 风格匹配的免版税曲目。分享下载链接或文件，我将以适当的音量曲线进行集成。”

等待用户响应。

如果用户提供音乐：

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

如果用户想要旁白：

1. 根据场景内容生成解说脚本（约每秒 3 个单词）
2. 用户录音或使用 ElevenLabs
3. 集成音乐闪避（旁白期间音乐降至 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 个特定于类型的维度（例如，极简/乔布斯风格中的“高级视觉感”，如果添加了音乐则增加“视听和谐度”，数据报告则增加“配置可重用性”）。

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

1. 优势 - 运行良好的部分
2. 改进点 - 具体、可执行的更改
3. 裁决 - 保持原样交付、需要再次完善、或需要重大重做

询问用户应用哪些改进。

步骤 14 - 用户审阅与迭代

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

“现在你已经看过视频和专家审阅了——你的看法是什么？

1. 哪些场景运行良好？
2. 哪些场景需要更改？（如果可能，请截取特定帧）
3. 有无文本、时长或视觉问题？
4. 有什么缺失或应该删除的吗？”

等待用户的反馈。

当用户提供反馈时：

1. 认可他们喜欢的内容（加强方向）
2. 列出你将根据他们的意见进行的具体更改
3. 进行更改 - 编辑场景组件、调整时长、修正文本
4. 重新渲染并呈现更新后的视频
5. 再次询问：“更好了吗？还有其他需要调整的吗？”

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

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

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

---

适配指南

当用户已有 Remotion 项目时

跳过阶段 1-2 的搭建。专注于审阅现有代码、提出改进建议或添加新的场景/组成。

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

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

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

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

当用户想要多变量的视频时

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