remotion-video-factory · 图解动画 + AI 配音技术讲解视频工厂 Skill

remotion-video-factory · 图解动画 + AI 配音技术讲解视频工厂

给一个主题，产出 MP4：画面 100% 由 Remotion + React/SVG 代码绘制（精确、可参数化、改数据自动重排），配音由 TTS 生成并按实测时长驱动时间线（旁白永不被画面切走；默认 edge-tts 神经音色，--engine clone 可切换自定义克隆音色，人声更真实），三层音频混音，确定性渲染，双版本交付。

与其他视频 skill 的边界

| 内容特征 | 用哪个 | |---|---| | 图解/数据/结构是主角（矩阵、连线、图表、公式、流程） | 本 skill | | 口播稿为主、要 12 套风格快切、卡拉 OK 逐词字幕 | voice-to-video | | 行业大会演讲视频（HTML PPT + 数字人 + 口型） | talk-video-studio | | 复刻真实产品页面（截图 + 2.5D 运镜）/ 真人出镜 | 本 skill 不适合 |

模板按 1920×1080 横屏设计；竖屏需改 Composition 尺寸并自行重排布局。

铁律（每次都要遵守）

视觉从代码生长：一切图形用 React/SVG 组件绘制，参数来自数据；禁止截图当动画、禁止 AI 视频模型生成画面（公式必乱码、连线必漂移）。
一段旁白 = 一个场景；场景时长 = max(visualMin, 配音实测帧数 + tail(默认40f))，由 build-timeline.mjs 自动重建时间线——改稿/换语速不手调任何一镜，画面出点（fade(frame, D)）自动跟随。
确定性渲染：禁 Date.now() / Math.random() / 网络/环境变量依赖；伪随机一律 mulberry32(seed)。同样输入必须渲出同样的帧——这是可回归、可迭代的前提。
三层音频独立可验证：VO（主）+ BGM（bgm inputProp 开关，产出无 BGM 版供后期自配乐）+ SFX 钉帧表（from: SHOTS.x.from + offset 相对帧表达式，时间线平移自动跟随）。
每镜头完成即 QA 静帧（npx remotion still --frame=...），不攒到最后；全片渲完再抽帧回看关键镜头 + ffprobe/volumedetect 验收音轨。
src/timeline.ts 与 src/types.ts 由脚本生成，勿手改；手改数据只碰 VOICEOVER_ZH.md、build/scenes.json、DESIGN.md 三处。

八步流水线

0 环境自检     node scripts/check-env.mjs        （Node/ffmpeg/ffprobe/Python/edge-tts）
1 简报         写 DESIGN.md 头部：主题/观众/时长/风格/渠道
2 旁白+分镜    VOICEOVER_ZH.md（一段=一场景，单段≤120字）
               + DESIGN.md 分镜表（id/画面/动画模式/visualMin/SFX 计划）
3 搭工程       Copy-Item -Recurse assets\template-project → my-video
               npm install && npx tsc --noEmit     （模板自带静音占位，开箱可渲）
4 配音         python scripts\tts.py --script VOICEOVER_ZH.md --out . --voice yunyang
               → public/vo/sceneN.mp3 + build/durations.json（ffprobe 实测）
               要真实人声：加 --engine clone --ref-audio 参考音频 --ref-text 逐字稿
               （voice_id 自动存档复用；详见 workflow.md §4）
5 时间线       手写 build/scenes.json（id + visualMin）
               node scripts/build-timeline.mjs → timeline.ts + types.ts + SRT
6 场景实现     src/Video.tsx 每场景一个组件；逐镜头仍帧 QA
7 声音设计     SFX 钉帧表 + BGM；规则见 references/sound-design.md
8 渲染交付     node scripts/render.mjs --mode both --concurrency 8
               → final.mp4 + final-nobgm.mp4 + subtitles.srt + out/qa 静帧

每步的操作细节、产出与已知坑：先读 references/workflow.md 再动手。

文件地图

SKILL.md                        本入口
references/workflow.md          八步流程细节与坑（执行前必读）
references/animation-vocabulary.md   8 种动画模式 + 代码（矩阵点亮/连线生长/数字滚动/弹簧卡片…）
references/sound-design.md      三层音频 + 钉帧规则 + 混音验收
scripts/check-env.mjs           环境一键自检（跨平台）
scripts/tts.py                  旁白 → 分段配音 + durations.json（edge-tts / --engine clone 克隆音色双引擎；增量缓存/限流重试）
scripts/build-timeline.mjs      durations + scenes.json → timeline.ts + types.ts + SRT
scripts/render.mjs              单次渲染 + FFmpeg 派生双版本
scripts/selftest.mjs            回归自测（解析/校验/时间线/字幕，无需网络）
assets/template-project/        可直接拷贝的 Remotion 工程骨架（lib/theme/primitives/audio）
examples/case-study-long-context.md   实战复盘：《1M 上下文的秘密》125s 成片

改稿成本对照（向用户报告时按此说明）

改旁白 → 重跑 §4（tts.py）+ §5（build-timeline.mjs）+ 重渲；场景时长自动重建
改画面 → 改 Video.tsx 组件 + 逐镜 QA + 重渲
换 BGM → 换 public/bgm/bgm.mp3 + 重渲（画面不必重渲，见 render.mjs --force 语义）

交付物（每次必须齐）

final.mp4（带 BGM）+ final-nobgm.mp4（后期自配乐用）+ build/subtitles.srt（逐句字幕）+ out/qa/ 静帧；并向用户报告：成片路径、时长、两版差异、改稿/改画面各自重跑哪步。

Agent Skills: remotion-video-factory · 图解动画 + AI 配音技术讲解视频工厂

Install this agent skill to your local

Skill Files