educational-video-creator

教育视频创作工具

使用 Remotion 创作具有 Kurzgesagt/回形针视觉风格的专业教育视频。

前提条件

此技能需要 remotion-best-practices 才能进行 Remotion 技术实现。

检查并安装（必须在阶段 1 之前完成）：

# Check if already installed, install if not
npx skills list 2>/dev/null | grep remotion-best-practices || npx skills add https://github.com/remotion-dev/skills --skill remotion-best-practices

安装后，阅读 remotion-best-practices 技能，将 Remotion API 详情加载到上下文中。这至关重要——否则，阶段 4 的代码会错误地使用 Remotion API。

外部依赖（阶段 4.5 生成音频时需要）：

# ffmpeg (provides ffprobe for audio duration measurement)
brew install ffmpeg        # macOS
# apt install ffmpeg       # Linux

# edge-tts (Python TTS engine for narration generation)
pip install edge-tts

项目设置

此技能会在当前工作区内的专用 remotion_video 子目录中创建视频。

首次设置（推荐——非交互式）：

# Create video project directory
mkdir -p remotion_video
cd remotion_video

# Initialize without interactive prompts
npm init -y
npm install remotion @remotion/cli @remotion/google-fonts @remotion/transitions react react-dom
npm install -D typescript @types/react

# Create minimal project structure
mkdir -p src public/audio/narration

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

• 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 可能会提示输入项目名称、包管理器等信息。在命令行/自动化场景中，请使用上方的非交互式方法，以避免阻塞。

现有项目：

cd remotion_video
npm install  # Ensure dependencies are installed

项目结构：

your-workspace/
├── remotion_video/           # Video project root
│   ├── src/
│   │   ├── Root.tsx          # Main composition registry
│   │   └── YourVideo/        # Video-specific components
│   │       ├── index.tsx
│   │       ├── scenes/
│   │       └── components/
│   ├── public/               # Static assets
│   └── package.json
└── ... (other workspace files)

快速开始

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. 验证“Files Created”部分列出的文件确实存在于磁盘上
4. 恢复当前阶段中第一个未勾选的项目

跳过此协议会导致重复工作或文件损坏。务必先执行此协议。

进度跟踪——强制协议

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

使用 progress-template.md 维护 remotion_video/PROGRESS.md。在阶段 1 开始时创建该文件。在 Decisions 表中记录决策，并将每个创建的文件添加到“Files Created”中。

检查点规则

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

1. 将该项目标记为 [x] 并添加简短备注
2. 更新“Current State”部分（Current Phase + Current Step）
3. 然后——且仅在此之后——继续下一个项目

不要一次性批量处理多个项目。完成一个项目 → 更新一次 → 继续下一个项目。

阶段转换关卡

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

1. 阅读 PROGRESS.md 并确认上一阶段的所有项目均已标记为 [x]
2. 将“Current Phase”更新为新阶段
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. 添加帧级动画规范（弹簧、缓动、时序）
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 的 loadFont()（来自 @remotion/google-fonts；参考 design-tokens.ts 第 2 节）
4. 创建共享 SVG 组件 — 按照 svg-components.md 构建可复用的视觉元素（图标、插图、装饰元素）
5. 设计场景布局 — 按照 visual-principles.md 规划每个场景的视觉图层（背景 / 中景 / 前景 / UI）

风格原则：

• 扁平化设计，搭配微妙的渐变
• 大胆、饱和的调色板
• 带圆角（rx/ry）的几何形状
• 清晰的无衬线字体排印

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

阶段 4：动画制作

⚠️ 检查点规则已启用：完成本阶段的每个复选框项目后，立即更新 PROGRESS.md。不要批量更新。在“Files Created”中记录关键文件路径。

使用 Remotion 实现场景：

1. 为视觉元素创建 SVG 组件
2. 使用 useCurrentFrame() 实现所有动画
3. 应用恰当的缓动（自然运动使用弹簧效果）
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 能更新时序，而无需修改任何场景文件 Visual-narration alignment rules (prevents animation-subtitle desync):
• 每个与旁白内容对应的视觉元素（图标出现、箭头展开、图表绘制等），其 startFrame 必须从 AUDIO_SEGMENTS 对应段的 startFrame 派生，不能凭"视觉节奏"硬编码
• 正确模式：const liftArrowStart = AUDIO_SEGMENTS.forces[0].startFrame;（升力箭头在旁白说"升力"时出现）
• 错误模式：const liftArrowStart = 30;（凭感觉写的帧数，和旁白无关）
• 纯装饰性动画（背景粒子、环境氛围）不受此约束，可以自由定时
• Phase 4 使用估算 AUDIO_SEGMENTS；Phase 4.5 rebuild-timeline 更新真实时间后，因为代码引用的是变量而非硬编码数字，视觉动画会自动同步
• 参考 animation-guide.md "Narration-Synced Animation" 章节的实现模式

Element sizing rules (prevents "Thumbnail Syndrome" — tiny elements on a large canvas):

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

Background rules (prevents transparent/checkerboard frames during transitions):

• The main composition must have a persistent <AbsoluteFill> background layer (using COLORS.background) that sits behind all scenes and never participates in transitions
• Each scene component must also have its own solid background as the first child element
• During fade() transitions, both scenes have reduced opacity — without a persistent background, transparent frames appear as a checkerboard pattern in preview and black in renders
• See animation-guide.md "Preventing Transparent Frames" for the implementation pattern

Visual richness rules (prevents PPT-like output):

• 每个场景必须有至少一个 非文字的视觉主体元素（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 飞机插画作为具象插画的最低质量标准

Color rules (critical for Phase 5 style-scan compliance):

• All colors must be referenced via the COLORS object from constants.ts (e.g., COLORS.accent.rose) — never write hex values directly in TSX files
• The only exception is rgba() for opacity variations (e.g., rgba(0, 0, 0, 0.7) for subtitle backgrounds)
• This prevents the common issue where style-scan reports dozens of "color not in approved palette" warnings

See design-tokens.ts Section 3 for the complete constants.ts structure (COLORS, SCENES, NARRATION, AUDIO_SEGMENTS, font loading). See svg-components.md for component patterns. See animation-guide.md for timing and easing.

Phase 4.5: Audio Generation

⚠️ Checkpoint Rule active: After completing EACH checkbox item for this phase, immediately update PROGRESS.md. Do not batch updates.

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

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。

Phase 5: Quality Assurance

⚠️ Checkpoint Rule active: After completing EACH checkbox item for this phase, immediately update PROGRESS.md. Do not batch updates.

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

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）——如果源素材支持 4K，请使用 --scale 2
• 如果在调试渲染问题，请添加 --log verbose

输出文件位于 remotion_video/out/video.mp4。

视频结构

标准教育视频结构：

1. Hook (5-10s)      - Attention-grabbing question or statement
2. Intro (10-20s)    - Topic introduction
3. Content (main)    - Core explanation, broken into segments
4. Summary (10-20s)  - Key takeaways
5. Outro (5-10s)     - Call to action or closing

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

核心原则

内容清晰

• 每个场景只讲解一个概念
• 逐步提升复杂度
• 用视觉隐喻呈现抽象概念

视觉简洁

• 屏幕上的元素尽量精简
• 视觉层级清晰
• 全程保持风格一致

动画目的

• 每个动画都应有助于理解
• 避免装饰性动效
• 与旁白节奏同步

参考文件

文件	使用时机
requirements-guide.md	启动新的视频项目（阶段 1）
script-and-narration.md	视频结构、脚本编写、旁白、字幕/TTS（阶段 1.5 + 2）
storyboard-template.md	将脚本转换为视觉场景（阶段 2）
style-guide.md	设计视觉元素（阶段 3 + 4）
visual-principles.md	布局与构图决策（阶段 3 + 4）
animation-guide.md	实现动画（阶段 4）
svg-components.md	创建可复用组件（阶段 4）
audio-guide.md	TTS 生成、时间线重建、AudioLayer 集成的详细步骤（阶段 4.5）
quality-checklist.md	质量保证和样式检查规则（阶段 5）
design-tokens.ts	调色板、字体排版预设、constants.ts 模板（阶段 3）
progress-template.md	执行进度跟踪模板（全流程）
scene-template.tsx	场景组件模板（阶段 4）
subtitle-sequence-template.tsx	字幕序列组件模板（阶段 4）
common-icons.tsx	通用 SVG 图标组件（阶段 4）
generate-tts.ts	字幕提取和 TTS 音频生成脚本（阶段 4.5）
rebuild-timeline.ts	音频时长测量和时间线重建脚本（阶段 4.5）
style-scan.ts	代码样式扫描脚本（阶段 5）
render-keyframes.ts	关键帧批量截图脚本（阶段 5）
shared.ts	脚本共享函数（内部依赖，无需直接调用）