何时使用
在以下场景使用本技能：
- 从头开始创建一个新的 Remotion 视频
- 为一个内容资产生成视频简报变体
- 修改现有的 Remotion 合成
- 调试 Remotion 动画或渲染问题
- 处理任何 Remotion 特有的 API 或组件
视频创建流程
创建新的 Remotion 视频时，请遵循以下 8 个步骤。第 2 步会根据简报和冷受众优化从概念目录中挑选 3-5 个概念。第 4 步和第 5 步是审批关卡。在两者都获得批准之前，请不要编写代码。
有关包含模板和决策矩阵的完整流程文档，请阅读 references/video-creation-process.md。
第 0 步：品牌识别
在所有创意工作之前，先识别品牌。询问用户：“这个视频是为哪个品牌制作的？”
如果该品牌在下方有预设， 直接使用。无需再询问品牌相关问题。
如果品牌未列出， 让用户提供品牌网站 URL 或品牌指南。提取：背景色、主强调色、次强调色、文本颜色、字体族以及主题（浅色/深色）。如果没有指南，至少要求提供：主色、背景色和字体偏好。
第 1 步：创意简报
在任何创意工作之前收集并锁定以下信息：
目的：[这个视频存在的原因]
受众：[谁会观看]
核心信息：[一句话]
内容类型：[blog-post, case-study, webinar, podcast, lead-magnet, product-update, tool-launch, industry-report, event-recap, client-testimonial, playbook, template, ai-demo, custom-gpt]
渠道：[将在哪里分发]
CTA：[观众下一步应该做什么]
源素材：[要参考的文件、组件或 URL]
语调：[描述感觉的词语]
品牌：[第 0 步中的品牌名称]
第 2 步：概念选择（推荐 3-5 个概念）
锁定创意简报后，对其进行分析，为这个特定用例选择最佳视频概念。不要提交固定的变体集。从 references/concept-catalog.md 中的概念目录中提取。
该目录包含 18 个主要概念、8 个视觉风格修饰器和 5 种冷受众钩子模式。 在生成推荐之前请先阅读。
选择流程
-
根据简报对概念进行评分。 对于目录中的每个概念，评估：
- 概念的“最佳适用”是否与内容类型匹配？
- 核心信息能否在 15-30 秒内以此结构传达？
- 概念是否适用于目标时长和尺寸？
- 简报是否提供了此概念所需的数据/视觉效果？
-
应用冷受众过滤器。 对于每个评分过的概念，评估：
- 一个零背景知识的观众能否在最初 3 秒内理解其价值？
- 概念是否在开场节拍中创造了令人驻足观看的视觉运动？
- 概念是否避免需要有关品牌、产品或问题领域的先验知识？
- 如果概念自然地将结果或数据点前置（如指标计数器、动画信息图、前后对比），那么它对于冷受众来说，天生就比需要设置时间的叙事性概念更强。
-
选择一个钩子模式。 对于每个推荐的概念，从目录中为其搭配一个钩子模式：
- 有数据的内容 → 结果优先
- 产品发布和工具 → 模式打断
- 思想领导和教育 → 好奇心缺口
- 建立信任的内容 → 社会证明钩子
- 竞争和定价内容 → 损失厌恶
-
提供 3-5 个推荐概念 作为一页简报。每个简报包括：
- 概念名称（来自目录）和一句话描述
- 为什么适合此简报（1-2 句话，引用具体内容和受众）
- 推荐的钩子模式和开场节拍描述
- 逐场景表格（来自目录模板，针对此内容定制）
- 可选的视觉风格修饰器（如果它能增强概念）
-
对推荐进行排序。 标记最佳推荐并解释原因。
-
用户选择一个（或两个的混合体）。 在进入第 3 步之前锁定所选概念。
冷受众优化规则
这些规则适用于所有概念推荐，并在冲突时覆盖内容类型的默认值：
- 默认假设：冷受众。 除非简报明确说明受众是温暖的（再营销、现有用户、新闻通讯订阅者），否则假设零品牌认知。
- 冷受众的首个场景要求：
- 视觉模式打断（运动、颜色对比或尺度变化）
- 文本说明观众在不了解品牌的情况下也能识别的痛点或结果
- 场景 1 中不出现品牌标识（将品牌卡片留到场景 2 或更后）
- 冷受众的钩子模式限制： 使用 pattern-interrupt、result-first 或 loss-aversion。避免使用 curiosity-gap，除非统计数据/主张在无品牌背景下具有普遍相关性。
- 概念灵活性： 如果目录中没有概念能很好地满足冷受众的简报，创建一个混合体或调整现有概念。目录是一个起始库，而不是约束。
第 3 步：格式和规格
根据简报和所选变体，使用格式决策矩阵确定：
| 渠道 | 尺寸 | 时长 |
|---|---|---|
| LinkedIn/Instagram 信息流 | 1080x1080 | 15-30秒 |
| 网站/演示文稿 | 1920x1080 | 15-60秒 |
| Reels/TikTok/快拍 | 1080x1920 | 15-60秒 |
| 电子邮件 (GIF) | 600x600 或 800x450 | 5-10秒 |
默认 FPS：30。仅在需要流畅运动时使用 60。
尺寸：[宽度]x[高度]
时长：[X] 秒 ([X * fps] 帧)
FPS：30
合成 ID：[PascalCase]
循环：[是/否]
输出格式：[mp4, gif, webm]
选中的概念：[目录中的概念-id，或 hybrid]
第 4 步：场景分解（审批关卡）
在编写代码之前定义每个场景。使用所选变体的场景模板作为起始结构，然后针对特定内容进行定制。
提交场景表格以供审批。
场景表格格式：
| # | 名称 | 时间 | 文案 | 动画 | 目的 |
|---|---|---|---|---|---|
| 1 | 钩子 | 0-3秒 | 确切的文本 | 运动描述 | 为什么存在 |
时间指南：
| 时长 | 场景数量 | 平均每个场景 |
|---|---|---|
| 10秒 | 3-4 | 2.5-3.3秒 |
| 15秒 | 4-6 | 2.5-3.75秒 |
| 30秒 | 8-12 | 2.5-3.75秒 |
| 60秒 | 12-20 | 3-5秒 |
在继续之前锁定文案、时间和叙事结构。
第 5 步：视觉设计（审批关卡）
实施前锁定：
调色板（最低要求角色）：
- 背景色、主强调色、次强调色
- 文本主色、文本次色、文本三级色
- 边框/分割线
品牌主题预设（适用于已知品牌，跳过颜色问题）：
| 品牌 | 背景 | 主强调色 | 次强调色 | 文本主色 | 文本静音色 | 字体 | 主题 |
|---|---|---|---|---|---|---|---|
| FunnelEnvy | #FFFFFF / #1a1a2e (终端) | #3B82F6 (蓝色) | #8B5CF6 (紫色) | #000000 | #6B7280 | Inter, system | 浅色 |
| Reform | #FFFFFF / #1a1a2e (终端) | #48EC80 (绿色) | #EDE630 (黄色) | #000000 | #6B7280 | Inter, system | 浅色 |
| GrowthNode | #0f0a1a (所有场景) | #8B5CF6 (紫色) | #3B82F6 (蓝色) | #FFFFFF | #a1a1aa | Inter, system | 深色 |
| MIA | #F7F4FA / #1c1422 (深色) | #F1DE71 (黄色) | #7184F1 (紫色) | #1c1422 / #f7f4fa (深色) | rgba(28,20,34,0.62) | system-ui, -apple-system, Segoe UI | 浅色 |
MIA 强调色调色板：蓝色 #71C4F1，紫色 #7184F1，粉色 #F171C4，绿色 #71F19E
自定义品牌：如果品牌未在上面列出，根据第 0 步提供的品牌网站或指南定义颜色。填写相同的角色：背景色、主强调色、次强调色、文本主色、文本静音色、字体、主题。
排版：字体系列、字重层次、目标分辨率下的字号。
动画风格：弹簧（弹跳/平滑/轻快）、线性或基于缓动。选择一种主导风格。
真相来源：如果匹配现有设计，参考源文件。
第 6 步：架构决策
代理根据场景复杂度决定：
| 条件 | 方法 |
|---|---|
| 少于 15 个场景 | 单个文件 |
| 15 个以上场景或可重用部分 | 多文件，使用 scenes/ 目录 |
| 跨场景共享元素 | 具有不透明度包络的持久层 |
始终使用集中式时间常量（const T = { ... }）。
第 7 步：实施
根据已锁定的决策编写代码。所有动画必须遵循 Remotion 规则（请参阅下面的技术参考）。
第 8 步：输出文档
生成一份参考文档，涵盖：规格、选中的变体、预览/渲染命令、场景分解、调色板、时间配置、架构说明、迭代指南。
技术参考
阅读各个规则文件以获取 API 细节和代码示例。
核心动画和时间
- rules/animations.md - 动画基础。所有运动通过
useCurrentFrame()实现。无 CSS 过渡 - rules/timing.md -
interpolate()、spring()、缓动函数、弹簧配置 - rules/sequencing.md -
<Sequence>和<Series>用于时间、延迟和时长控制 - rules/trimming.md - 修剪开头（负值
from）和结尾（durationInFrames） - rules/transitions.md -
<TransitionSeries>包含淡入淡出、滑动、擦除、翻转、时钟擦除
媒体
- rules/assets.md - 用于
public文件夹资源的staticFile() - rules/videos.md -
<Video>包含修剪、音量、速度、循环、音调 - rules/audio.md -
<Audio>包含修剪、音量、速度、音调 - rules/images.md -
<Img>组件（确保渲染前加载） - rules/gifs.md -
<AnimatedImage>用于 GIF/APNG/AVIF/WebP - rules/fonts.md - 通过
@remotion/google-fonts使用 Google 字体，通过@remotion/fonts使用本地字体
文本和字幕
- rules/text-animations.md - 打字机效果、文字高亮模式
- rules/measuring-text.md -
measureText()、fitText()、fillTextBox() - rules/display-captions.md - TikTok 风格字幕、逐字高亮
- rules/import-srt-captions.md - 使用
parseSrt()解析.srt文件 - rules/transcribe-captions.md - Whisper.cpp、Whisper Web、OpenAI API
合成和元数据
- rules/compositions.md -
<Composition>、<Still>、<Folder>、defaultProps - rules/calculate-metadata.md - 动态时长、尺寸和属性
高级
- rules/3d.md - 使用 React Three Fiber 的
<ThreeCanvas> - rules/charts.md - 通过
useCurrentFrame()动画化的 SVG/D3.js 图表 - rules/lottie.md - 使用
@remotion/lottie的<Lottie>组件 - rules/tailwind.md - TailwindCSS（不使用
transition-*或animate-*类）
媒体工具（Mediabunny）
- rules/extract-frames.md - 在时间戳处提取视频帧
- rules/can-decode.md - 检查视频/音频的可解码性
- rules/get-video-duration.md - 视频时长（秒）
- rules/get-video-dimensions.md - 视频宽度和高度
- rules/get-audio-duration.md - 音频时长（秒）
布局
- rules/measuring-dom-nodes.md -
useCurrentScale()用于精确测量
参考资料
- references/concept-catalog.md - 概念目录，包含 18 个主要概念、8 个视觉风格修饰器、5 种冷受众钩子模式、选择标准和内容类型亲和度矩阵
- references/video-creation-process.md - 完整的流程文档，包含模板、决策矩阵和详细指南
硬性规则
这些规则适用于所有 Remotion 代码。违反将导致输出不正确。
- 所有动画由
useCurrentFrame()驱动。无 CSS 过渡，无 Tailwindanimate-*或transition-*类，无 React Three FiberuseFrame() - 使用 Remotion 组件（
<Img>、<Video>、<Audio>）而非原生 HTML 元素 - 使用
staticFile()处理public/文件夹中的所有资源 - 时间（秒）：乘以
useVideoConfig()中的fps以获得帧数 - 无第三方动画库驱动运动（禁用它们的动画，改用
useCurrentFrame()） - 每个概念必须不言自明。一个零上下文滚动的观众应能仅从视频中理解其价值。任何场景都不应依赖外部知识。文案必须独立承载完整信息。除非简报另有说明，否则始终假设冷受众。