然后创建所需的入口文件：

• src/Root.tsx — 主合成注册表
• src/index.ts — 带有 registerRoot(Root) 的 Remotion 入口点
• remotion.config.ts — Remotion 配置
• tsconfig.json — TypeScript 配置

替代方案（交互式——在自动化环境中可能阻塞）：

mkdir -p remotion_video && cd remotion_video
npx create-video@latest --blank
npm install

注意：npx create-video 可能会提示输入项目名称、包管理器等。在 CLI/自动化上下文中，请使用上述非交互式方法以避免阻塞。

现有项目：

cd remotion_video
npm install  # 确保依赖项已安装

项目结构：

your-workspace/
├── remotion_video/           # 视频项目根目录
│   ├── src/
│   │   ├── Root.tsx          # 主合成注册表
│   │   └── YourVideo/        # 视频特定组件
│   │       ├── index.tsx
│   │       ├── scenes/
│   │       └── components/
│   ├── public/               # 静态资源
│   └── package.json
└── ... (其他工作空间文件)

快速开始

1. 设置项目 → 如有需要，创建 remotion_video 目录
2. 收集需求 → 确认主题、受众、时长
3. 撰写脚本 → 完成具有故事弧线和节奏的叙事
4. 创建故事板 → 将脚本分解为带有动画规格的视觉场景
5. 设计视觉 → 应用风格指南，创建 SVG 组件
6. 实现动画 → 在 Remotion 中编写场景代码
7. 质量保证 → 自动检查、自动修复、自动启动预览

⚠️ 上下文恢复协议

每次对话轮次都可能发生上下文丢失（压缩、新会话）。在进行任何工作之前：

1. 检查 remotion_video/PROGRESS.md 是否存在
   • 如果存在 → 完整阅读以确定当前阶段和最后完成的步骤
   • 如果不存在 → 这是一个新项目，进入第 1 阶段
2. 阅读 PROGRESS.md 中引用的支持文件（仅当该阶段标记为完成时）：
   • remotion_video/script.md（如果第 1.5+ 阶段已完成）
   • remotion_video/storyboard.md（如果第 2+ 阶段已完成）
   • src/<Composition>/constants.ts（如果第 3+ 阶段已完成——包含 COLORS、SCENES、NARRATION、AUDIO_SEGMENTS）
3. 验证 "已创建文件" 部分中列出的文件是否实际存在于磁盘上
4. 恢复 当前阶段第一个未勾选的项目

跳过此协议会导致重复工作或文件损坏。请始终首先运行它。

进度跟踪——强制协议

⚠️ 此协议不可协商。跳过更新会导致上下文丢失和重复工作。

使用 progress-template.md 维护 remotion_video/PROGRESS.md。在第 1 阶段开始时创建它。在决策表中记录决策，并将每个创建的文件添加到"已创建文件"中。

检查点规则

每次完成 PROGRESS.md 中的一个复选框项目后，你必须立即：

1. 将项目标记为 [x] 并添加简要说明
2. 更新"当前状态"部分（当前阶段 + 当前步骤）
3. 然后——并且只有在那之后——继续下一个项目

请勿批量处理多个项目。完成一个项目 → 一次更新 → 下一个项目。

阶段转换门控

在开始任何新阶段之前，你必须：

1. 阅读 PROGRESS.md 并验证前一阶段的所有项目都是 [x]
2. 将"当前阶段"更新为新阶段
3. 如果任何之前的项目未勾选，请先完成它

工作流程

第 1 阶段：需求收集

⚠️ 首先：完成前提条件部分（安装 remotion-best-practices 技能并阅读它）。然后从 progress-template.md 创建 remotion_video/PROGRESS.md 并填写项目信息。

开始前，向用户确认以下基本细节：

• 主题：要解释什么概念/主题？
• 受众：谁在看？（儿童/成人，初学者/专家）
• 语言：中文/英文/其他？
• 时长：短（1-3分钟）、中（3-5分钟）还是长（5-10分钟）？
• 关键点：观众必须学到什么？

详细的提问模板，请参阅 requirements-guide.md。

第 1.5 阶段：脚本撰写

⚠️ 检查点规则生效：完成此阶段的每个复选框项目后，立即更新 PROGRESS.md。请勿批量更新。

在设计故事板之前撰写完整的叙事脚本。此阶段纯粹关注讲故事——说什么以及如何说好——而不必担心视觉规格、帧数或动画参数。

重要：撰写完整的旁白文本——将要说的每一个字。请勿撰写摘要、要点或占位符。脚本是最终的口语内容。

脚本必须包括：

1. 核心信息——单行摘要，学习目标
2. 叙事策略——应用 script-and-narration.md 中的技术：
   • 切入点（问题 / 场景 / 挑战 / 故事）
   • 贯穿整个视频的核心隐喻
   • 知识脚手架顺序（什么依赖于什么）
   • 情感曲线（好奇 → 理解 → 惊叹 → 满足）
3. 完整旁白文本——每个章节的逐字完整脚本：
   • 包含强调标记（粗体表示强调，_斜体_表示柔和语气）
   • 用 [.]（短）、[..]（中）、[...]（长）、[PAUSE] 或 [BEAT]（戏剧性）标记停顿——参见 script-and-narration.md 第 3 部分了解时长语义
   • 在每个章节后添加视觉意图（1-2 句话描述观众应该看到什么——足够第 2 阶段设计场景，但无需动画规格）
4. 节奏说明——在哪里加速、减速和暂停
5. 自我审查——在呈现给用户之前，运行 script-and-narration.md 中的检查清单

质量门控：将完整脚本呈现给用户以获得批准。在用户明确批准叙事之前，请勿进入第 2 阶段。

为什么先写脚本：

• 将"讲什么"与"如何展示"分开——两种不同的创造性活动
• 当 LLM 不同时计算帧范围时，能产生更好的叙事
• 纯文本迭代成本低；带有动画规格的故事板修改成本高
• 用户可以轻松审查"故事好吗？"而无需涉足技术细节

输出：将批准的脚本保存为 remotion_video/script.md

有关视频结构模板、叙事技巧、写作技巧和 TTS 说明，请参阅 script-and-narration.md。

第 2 阶段：故事板设计

⚠️ 检查点规则生效：完成此阶段的每个复选框项目后，立即更新 PROGRESS.md。请勿批量更新。

将批准的脚本转换为可用于生产的故事板。脚本提供说什么；故事板定义如何展示它。

输入：完成的脚本（在第 1.5 阶段批准）

任务：

1. 将脚本章节分解为视觉场景（5-15 个场景）
2. 将脚本中的旁白文本分配给每个场景
3. 为每个场景设计视觉层（背景 / 中景 / 前景 / UI）
4. 添加帧级动画规格（spring、easing、timing）
5. 定义视觉-旁白同步点
6. 规划资产清单（SVG 组件、颜色、排版）

认知负荷远低于从头开始创建一切——叙事已经确定，因此您只需专注于视觉执行。

输出：将完成的故事板保存为 remotion_video/storyboard.md，用于设计可追溯性和迭代参考。

模板请参阅 storyboard-template.md。字幕格式和 TTS 说明请参阅 script-and-narration.md 第 4 部分。

第 3 阶段：视觉设计

⚠️ 检查点规则生效：完成此阶段的每个复选框项目后，立即更新 PROGRESS.md。请勿批量更新。

应用 Kurzgesagt/回形针风格。具体步骤：

1. 选择调色板 — 从 design-tokens.ts 第 1 节中选择或创建与主题匹配的自定义调色板
2. 创建 constants.ts — 按照 design-tokens.ts 第 3 节定义 COLORS、TYPOGRAPHY、SCENES、NARRATION 和预估的 AUDIO_SEGMENTS
3. 设置字体 — 使用 Remotion 的 @remotion/google-fonts 中的 loadFont()（参考 design-tokens.ts 第 2 节）
4. 创建共享 SVG 组件 — 构建可重用的视觉元素（图标、插图、装饰元素），遵循 svg-components.md
5. 设计场景布局 — 规划每个场景的视觉层（背景 / 中景 / 前景 / UI），遵循 visual-principles.md

风格原则：

• 带有微妙渐变的扁平设计
• 大胆、饱和的调色板
• 带有圆角（rx/ry）的几何形状
• 简洁的无衬线字体排版

完整的视觉标准请参阅 style-guide.md。构图和布局请参阅 visual-principles.md。

第 4 阶段：动画制作

⚠️ 检查点规则生效：完成此阶段的每个复选框项目后，立即更新 PROGRESS.md。请勿批量更新。在"已创建文件"中记录关键文件路径。

使用 Remotion 实现场景：

1. 为视觉元素创建 SVG 组件
2. 对所有动画使用 useCurrentFrame()
3. 应用适当的缓动（spring 用于自然运动）
4. 添加场景过渡

字幕和旁白规则（对第 4.5 阶段兼容性至关重要）：

• 所有旁白文本必须存储在 constants.ts 的 NARRATION 对象中——切勿在场景 TSX 文件中硬编码文本
• 在 constants.ts 中创建预估的 AUDIO_SEGMENTS 和近似时间。第 4.5 阶段将用基于音频的实际时间覆盖它
• 字幕组件必须引用 AUDIO_SEGMENTS.sceneKey——切勿使用带有硬编码帧号的内联段数组
• AUDIO_SEGMENTS 中的 startFrame/endFrame 必须使用场景本地帧号（每个场景从 SCENE_PAD=15 开始），不是全局帧号。因为 AudioLayer 和 SubtitleSequence 都在场景的 <Sequence> 内部运行，useCurrentFrame() 返回的是本地帧号。如果使用全局帧号，后续场景的字幕会延迟或完全不显示
• 这确保了第 4.5 阶段的 rebuild-timeline.ts --write 可以在不修改任何场景文件的情况下更新时间

视觉-旁白对齐规则（防止动画-字幕不同步）：

• 每个与旁白内容对应的视觉元素（图标出现、箭头展开、图表绘制等），其 startFrame 必须从 AUDIO_SEGMENTS 对应段的 startFrame 派生，不能凭"视觉节奏"硬编码
• 正确模式：const liftArrowStart = AUDIO_SEGMENTS.forces[0].startFrame;（升力箭头在旁白说"升力"时出现）
• 错误模式：const liftArrowStart = 30;（凭感觉写的帧数，和旁白无关）
• 纯装饰性动画（背景粒子、环境氛围）不受此约束，可以自由定时
• 第 4 阶段使用估算 AUDIO_SEGMENTS；第 4.5 阶段 rebuild-timeline 更新真实时间后，因为代码引用的是变量而非硬编码数字，视觉动画会自动同步
• 参考 animation-guide.md "Narration-Synced Animation" 章节的实现模式

元素尺寸规则（防止"缩略图综合症"——大画布上的微小元素）：

• 参考 visual-principles.md "Content Area Utilization" 确保内容填充画布（核心内容 ≥ 安全区 60%）
• 组件默认尺寸参考 svg-components.md（图标 ≥96px，流程节点 ≥160px 高，标签 ≥40px）
• 图表/流程图应占据内容区域大部分面积，避免在 1920×1080 画布上缩成缩略图

背景规则（防止过渡期间的透明/棋盘格帧）：

• 主合成必须有一个持久的 <AbsoluteFill> 背景层（使用 COLORS.background），位于所有场景之后，并且从不参与过渡
• 每个场景组件必须也有自己的纯色背景作为第一个子元素
• 在 fade() 过渡期间，两个场景的透明度都会降低——如果没有持久背景，透明帧在预览中会显示为棋盘格图案，在渲染中显示为黑色
• 实现模式请参阅 animation-guide.md "Preventing Transparent Frames"

视觉丰富度规则（防止类似 PPT 的输出）：

• 每个场景必须有至少一个非文字的视觉主体元素（SVG 插画、图表、动画图形等）。纯文字标签 + 方块不是合格的视觉内容
• 流程图/因果链必须用图标或插画配合文字，不能只用纯色方块装文字。参考 svg-components.md "Illustrated Flow Node" 模式
• 每个场景应有环境氛围层（粒子、光晕、纹理等），参考 style-guide.md Ambient Effects 章节
• SVG 插画应体现 Kurzgesagt 风格：圆角几何形状（rx/ry）、扁平化但有层次（多 path 叠加）、柔和渐变（linearGradient/radialGradient）、适当描边
• 参考 visual-principles.md "Show, Don't Tell" 原则：能用图示表达的概念不要用文字方块
• 参考 scene-template.tsx 中 ForceDiagramScene 的 SVG 飞机插画作为具象插画的最低质量标准

颜色规则（对第 5 阶段样式扫描合规性至关重要）：

• 所有颜色必须通过 constants.ts 中的 COLORS 对象引用（例如，COLORS.accent.rose）——切勿在 TSX 文件中直接写入十六进制值
• 唯一的例外是用于不透明度变化的 rgba()（例如，字幕背景的 rgba(0, 0, 0, 0.7)）
• 这可以防止样式扫描报告数十个"颜色不在批准的调色板中"警告的常见问题

完整的 constants.ts 结构（COLORS、SCENES、NARRATION、AUDIO_SEGMENTS、字体加载）请参阅 design-tokens.ts 第 3 节。组件模式请参阅 svg-components.md。时间和缓动请参阅 animation-guide.md。

第 4.5 阶段：音频生成

⚠️ 检查点规则生效：完成此阶段的每个复选框项目后，立即更新 PROGRESS.md。请勿批量更新。

完成动画编码后，生成视频音频并同步时间线：

1. 生成 TTS 音频 — 用 generate-tts.ts 从 NARRATION 提取文本生成 mp3
2. 重建时间线 — 用 rebuild-timeline.ts --write 根据实际音频时长更新 constants.ts
3. 调整动画关键帧 — 按 newDuration / oldDuration 比例缩放
4. 添加背景音乐 — 免版税 BGM 到 public/audio/bgm.mp3
5. 创建 AudioLayer — 播放旁白 + BGM 的组件
6. 集成并验证 — AudioLayer 必须在 TransitionSeries 外部

详细步骤、命令参数、AudioLayer 模板见 audio-guide.md。

第 5 阶段：质量保证

⚠️ 检查点规则生效：完成此阶段的每个复选框项目后，立即更新 PROGRESS.md。请勿批量更新。

完成编码后，执行自动质量检查流程：

1. 代码扫描 → 检查样式合规性（字号、颜色、安全区域等）
2. 截图审查 → 渲染关键帧，视觉检查
3. 自动修复 → 根据检查报告修复问题，循环直到通过
4. 启动项目 → 所有检查通过后，自动启动 Remotion 预览

详细检查步骤和规则见 quality-checklist.md。

第 6 阶段：最终导出

预览看起来正确后，渲染最终视频：

cd remotion_video
npx remotion render src/index.ts <CompositionName> out/video.mp4

选项：

• --codec h264（默认）或 --codec h265 以获得更小的文件大小
• --quality 80 到 100（默认：80）
• --scale 1（1080p）——如果源资产支持，使用 --scale 2 进行 4K 渲染
• 如果调试渲染问题，添加 --log verbose

输出文件将在 remotion_video/out/video.mp4。

视频结构

标准教育视频结构：

1. 钩子（5-10秒）      - 吸引注意力的问题或陈述
2. 介绍（10-20秒）     - 主题介绍
3. 内容（主体）        - 核心解释，分解为多个片段
4. 总结（10-20秒）     - 关键要点
5. 结尾（5-10秒）      - 行动号召或结束语

详细结构模板请参阅 script-and-narration.md 第 1 部分。

关键原则

内容清晰度

• 每个场景一个概念
• 逐步构建复杂性
• 对抽象概念使用视觉隐喻

视觉简洁性

• 屏幕上元素最少
• 清晰的视觉层次结构
• 风格始终一致

动画目的

• 每个动画都服务于理解
• 避免装饰性运动
• 与旁白节奏同步

参考文件

每周安装次数

168

仓库

skindhu/skind-skills

GitHub 星标数

24

首次出现

2026年2月3日

安全审计

Gen Agent Trust HubFailSocketPassSnykWarn

安装于

opencode152

codex148

gemini-cli145

cursor140

github-copilot139

kimi-cli130