remotion-video-director

Remotion 视频导演

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

适用场景

在用户出现以下需求时启用此技能：

• 想用 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 - 创意简报

综合整理成一份结构化简报：

## Creative Brief

**Purpose**: [one sentence]
**Audience**: [who, what they care about]
**Core Message**: [the ONE thing viewers should remember]
**Desired Action**: [what viewers should do next]
**Duration**: [seconds] ([frames] frames at 30fps)
**Creative Direction**: [selected style - Minimal/Jobs, Bloomberg, etc.]
**Emotional Arc**: [e.g., curiosity -> proof -> confidence -> action]

## Audio Strategy
- Music: [ambient/upbeat/dramatic/sparse] from Pixabay
- Voice-over: [yes/no]
- Music mood: [description matching creative direction]

## Scene Sequence
| # | Scene | Duration | Purpose |
|---|-------|----------|---------|
| 1 | ...   | Xs       | ...     |

## Data Model (if applicable)
[What's parameterized vs hardcoded - the reusable template structure]

## Visual Style
- Theme: [creative direction name]
- Background: [color]
- Colors: [primary, accent, secondary]
- Typography: [heading font, body font, mono font]
- Animation feel: [snappy/gentle/dramatic/typewriter]

“这是创意简报。设计场景前，您想调整什么吗？”

等待用户确认或提出调整。

---

阶段 2：场景设计

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

步骤 6 - 场景设计

为序列中的每个场景指定：

• 内容：准确的文本、数据、视觉元素
• 组件：要使用的可复用组件（来自 references/component-library.md）
• 动画：入场/退场动画、帧数时长
• 转场：所有场景之间使用交叉溶解（8-12 帧）

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

场景聚焦规则：每个场景必须围绕一个与核心信息相关的想法。如果某个场景与核心信息无关，就删掉它。少而聚焦的场景永远胜过多而分散的场景。

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

const TIMING = {
  scene1: { start: 0, dur: 6 },   // Hook
  scene2: { start: 6, dur: 10 },  // ...
  // Total must match composition durationInFrames / fps
};

步骤 7 - 数据架构

如果视频由数据驱动（定期报告、多版本营销）：

• 设计一个会随渲染而变化的配置对象
• 明确哪些内容保持不变（视觉模板），哪些内容会变化（内容）
• 向用户展示配置结构并征求确认

示例模式（来自 WeeklyIntro）：

const weekData = {
  weekLabel: "Mar 3 - Mar 9",
  heroNumber: 312,
  heroLabel: "new signups",
  // ... fields that change weekly
};

步骤 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           # or <VideoName>.tsx
│   ├── theme/
│   │   ├── colors.ts
│   │   ├── fonts.ts
│   │   └── springs.ts
│   ├── scenes/
│   │   ├── Scene1Hook.tsx
│   │   └── ...
│   ├── components/
│   │   ├── FadeIn.tsx
│   │   └── ...
│   └── data/
│       └── config.ts       # if data-driven
├── public/
│   ├── music.mp3           # background music
│   └── illustrations/      # if using background images
├── 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 帧的过渡区间；Terminal/Hacker 风格适用硬切时例外）
• 每个元素都必须有入场动画——切换时绝不能静态出现

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

• 字体多样化：混合使用标题字体、正文字体和等宽字体（不要处处使用 Inter）
• 强烈的字号对比：标题 72-96pt，正文 20-24pt
• 将重要的问题/标题垂直居中
• 每张正文幻灯片最多 15-20 个词，标题幻灯片最多 7 个词（Jobs 风格）
• 将文本保持在画面上方 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：

# Render final MP4 - always specify entry point + composition ID
npx remotion render src/Root.tsx <CompositionId> out/<name>.mp4 --codec=h264 --crf=18

# If no audio:
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）：

| Dimension              | Priority | Score |
|------------------------|----------|-------|
| Hook clarity (first 3-5s) | Critical | ?/5   |
| Core message landed    | Critical | ?/5   |
| Pacing / dynamism      | High     | ?/5   |
| Visual readability     | High     | ?/5   |
| Target action clear    | High     | ?/5   |
| Audience fit           | Medium   | ?/5   |

添加 2-3 项类型特定的维度（例如，Minimal/Jobs 风格的“视觉高级感”、添加音乐时的“视听协调性”、数据报告的“配置可复用性”）。

每位专家都从各自的角度进行审阅，包括评估视觉构图的摄影指导，以及在添加音乐时评估音频的音乐总监。综合意见，形成：

1. 优势 - 哪些方面表现出色
2. 改进项 - 具体、可执行的修改建议
3. 结论 - 可直接交付、还需再完善一轮，或需要大幅返工

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

步骤 14 - 用户审阅与迭代

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

“现在你已经看过视频和专家审阅意见——你觉得怎么样？

1. 哪些场景效果不错？
2. 哪些场景需要修改？（如果可以，请截取具体帧的截图）
3. 有文字、节奏或视觉方面的问题吗？
4. 有什么内容遗漏了，或应该删掉吗？”

等待用户反馈。

用户提供反馈后：

1. 确认他们喜欢的部分（强化当前方向）
2. 列出你将根据他们的意见进行的具体修改
3. 进行修改 - 编辑场景组件、调整时长、修正文案
4. 重新渲染并展示更新后的视频
5. 再次询问：“这样更好吗？还有其他需要调整的吗？”

重复此流程，直到用户满意。通常视频需要 1-3 轮完善。

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

• “太快了” → 将场景时长增加 30-50%，加入更多富有戏剧性的停顿
• “文字太多了” → 拆分场景，每帧减少到 7 个词（Jobs 风格）
• “感觉不够高级” → 切换到 Minimal/Jobs 方向，增加留白
• “音乐不合适” → 尝试其他 Pixabay 曲目，调整音量曲线
• “调性不对” → 重新审视创意方向，调整调色板和动画速度
• “场景 X 让人困惑” → 简化为一个想法，强化视觉层次

---

适配指南

用户已有 Remotion 项目时

跳过阶段 1-2 的脚手架搭建。重点审查现有代码、提出改进建议，或添加新场景/合成。

用户想快速制作视频（不进行讨论）

将阶段 1 压缩为：用一个问题询问视频类型和创意方向。选出排名前 2 的专家，生成简短的场景方案。尽快开始制作。仍需询问音乐相关需求。

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

完整执行第 1–2 阶段。将创意简报和场景输出为文档。跳过第 3 阶段。

当用户想要多版本视频时

使用增长营销原型。设计版本矩阵（每个版本的变化内容）。制作一个基础视频，然后展示如何通过配置对象为 N 个版本设置参数。

当用户说“做得更高级”／“更贵一些”时

切换到极简／Jobs 创意方向：黑色背景、Impact 字体、强烈的字号对比、每帧只呈现一个想法、戏剧性的停顿（保持 60 帧以上）、留出大量负空间。添加背景音乐。

---

质量检查清单（完成前）

• 视频渲染无错误
• 文本之间没有重叠
• 画面底部 15% 区域没有文本
• 关键标题／问题垂直居中
• 每帧最多 15–20 个词（标题页最多 7 个词）
• 所有动画都使用基于帧的计时方式（不使用 CSS 过渡）
• 每个元素都有入场动画（不使用静态切换）
• 所有场景之间都使用交叉溶解
• 使用多种字体（不要始终只用 Inter）
• 音乐平滑淡入／淡出（如果有）
• 数据密集型场景中降低音乐音量（如果有）
• 时长符合创意简报
• 前 5 秒内清晰传达核心信息
• CTA 或结尾令人印象深刻
• 数据模型简洁且可复用（如果由数据驱动）
• 用户已审核并批准最终版本