Remotion 项目推广视频工作流

为完成的项目自动生成一条 4K 推广视频：写脚本 → 准备素材 → TTS → Remotion 合成 → BGM 混音。

这套工作流的核心目标是把重复劳动交给机器，人只负责定方向和验收。风格、模板、素材管道、标注组件都已封装好，新项目只需替换内容即可。

前置要求

• Node.js >= 18
• edge-tts（TTS 后端，免费）
• ffmpeg / ffprobe
• Python 3（运行素材脚本）

项目结构

text
remotion-promo-workspace/
├── remotion-promo/               # Git 仓库
│   ├── src/remotion/
│   │   ├── Root.tsx              # 注册 Composition
│   │   ├── ProjectPromoVideo.tsx # 示例视频画面编排
│   │   ├── themes/obsidian-promo.ts  # 默认视觉风格
│   │   ├── components/           # 可复用组件 + 标注组件
│   │   └── hooks/useMediaManifest.ts
│   ├── scripts/
│   │   ├── prepare_podcast.py    # podcast.md → podcast.txt
│   │   └── populate_media.py     # 扫描素材生成 media_manifest.json
│   ├── videos/                   # 每个视频一个子目录
│   │   └── project-promo/        # 可运行示例
│   │       ├── podcast.md        # 带注释的脚本源文件
│   │       ├── podcast.txt       # 生成后用于 TTS 的干净脚本
│   │       ├── media/            # 截图/录屏/产品图
│   │       ├── media_manifest.json
│   │       ├── podcast_audio.wav # 生成（被 .gitignore 忽略）
│   │       ├── podcast_audio.srt
│   │       └── timing.json
│   ├── package.json
│   ├── tsconfig.json
│   └── AGENTS.md                 # 项目规范 + Agent 工作流
├── assets/                       # 不进 Git
│   ├── releases/                 # 最终发布视频
│   └── bgm/                      # 自定义背景音乐
└── docs/                         # 不进 Git
    └── superpowers/              # 计划、规格、讨论记录

默认视觉风格：obsidian-promo

当前默认风格是一套清新、轻量的绿色系模板：

• 背景：极浅薄荷绿 #F0F7F2
• 主色：品牌绿 #65B687
• 强调色：#4CAF7A
• 文字：深黑 #1A1A1A 标题 + 灰色 #666666 副标题
• 卡片：白色 + 淡绿阴影
• 字幕：白色填充 + 绿色描边
• 进度条：底部绿色 pill 形状

新增视频如不特别指定，默认继承 obsidian-promo。想换风格时，在 Root.tsx 对应 Composition 的 defaultProps 里覆盖颜色/字号字段即可。

新建视频启动协议（Agent 必须先执行）

当用户说"帮我做个推广视频"时，不要直接写代码或生成 TTS，按以下顺序执行并持续提问：

1. 索要并查看所有素材

   • 截图、录屏、产品图、Lottie、参考视频/链接
   • 放进 videos/{name}/media/
   • 如果用户没给素材，先问："有没有产品截图、演示录屏或参考视频可以给我？"

2. 确认视频目标

   • 目标平台：B站/小红书/抖音/YouTube？
   • 视频方向：横屏 16:9 还是竖屏 9:16？（默认先做 16:9）
   • 目标时长：30s / 60s / 90s？
   • 核心卖点：最想突出的 1–3 个点是什么？
   • 目标观众：谁在看？他们的痛点是什么？
   • 风格偏好：默认 obsidian-promo，还是要换风格？
   • 口播风格：正式/轻松/快节奏？
   • BGM：有没有指定音乐？没有就用默认流程后期混音。

3. 按模板输出脚本草案

   • 在 videos/{name}/podcast.md 中写脚本（可带注释/说明）。
   • 结构参考：hero → pain-point / overview → solution / features → demo → summary → outro。
   • 脚本写完后先给用户确认，不要直接生成 TTS。

4. 确认素材与画面编排

   • 根据脚本 section，给出素材命名建议：hero-xxx.png、demo-xxx.mp4 等。
   • 确认是否需要在截图/录屏上加标注（箭头、圆圈、鼠标路径）。

5. 用户确认后再进入生产流程

   • prepare_podcast.py
   • populate_media.py
   • generate_tts.py
   • 注册 Composition、Studio 预览、渲染

原则：假设用户说不清楚效果，必须持续提问直到脚本和素材方案被确认。

详细工作流

hljs bash
# 1. 进入仓库
cd remotion-promo-workspace/remotion-promo

# 2. 写脚本（带注释）
# videos/{name}/podcast.md

# 3. 生成干净脚本
python3 scripts/prepare_podcast.py --video-dir videos/{name}

# 4. 准备素材并生成清单
# 把截图/录屏按 {section}-{desc}.{ext} 命名放进 videos/{name}/media/
python3 scripts/populate_media.py --video-dir videos/{name}

# 5. 生成 TTS
# 将 $SKILL_DIR 指向你的 video-podcast-maker skill 路径
export SKILL_DIR=/path/to/video-podcast-maker
python3 "$SKILL_DIR/scripts/generate_tts.py" \
  --input videos/{name}/podcast.txt \
  --output-dir videos/{name}

# 6. 复制/注册 Composition
# cp src/remotion/ProjectPromoVideo.tsx src/remotion/{PascalCase}Video.tsx
# 在 src/remotion/Root.tsx 中新增 <Composition id="{PascalCase}" ... />

# 7. Studio 预览
npx remotion studio src/remotion/index.ts --public-dir videos/{name}/

# 8. 渲染
npx remotion render src/remotion/index.ts {PascalCase} \
  videos/{name}/output.mp4 \
  --public-dir videos/{name}/ --video-bitrate 16M

# 9. BGM 混音（ FFmpeg 流程）
# 10. 发布到 assets/releases/{project}-promo-v{x.y.z}.mp4

素材命名规则

populate_media.py 根据文件名前缀自动归类：

同个 section 下：

• 单张图片 → 全幅展示
• 多张图片 → 自动拼成网格
• 视频 → 自动剪辑：比 section 长则截断，比 section 短则循环

如需精确裁剪视频，修改 media_manifest.json 中对应 asset 的 trim.start / trim.end（单位：秒）。

在素材上做标注

src/remotion/components/Annotations.tsx 提供红箭头、圆形高亮、鼠标指针，适合在截图/录屏上强调重点：

hljs tsx
import { AnnotationLayer, Arrow, CircleHighlight, Cursor } from "./components";

<AnnotationLayer width={1920} height={1080}>
  <Arrow
    from={{ x: 0.5, y: 0.4 }}
    to={{ x: 0.7, y: 0.6 }}
    delay={15}
    layerWidth={1920}
    layerHeight={1080}
  />
  <CircleHighlight x={0.72} y={0.62} size={120} delay={30} layerWidth={1920} layerHeight={1080} />
</AnnotationLayer>

坐标均为相对值 0–1，组件会根据 layerWidth / layerHeight 自动换算。

输出规格

注意事项

• podcast.md 里可以用 # 标题 和 <!-- 注释 --> 写说明，prepare_podcast.py 会过滤掉它们。
• 字体 @remotion/google-fonts/NotoSansSC 首次渲染需联网从 Google Fonts 下载，后续浏览器会缓存。
• 背景音优先放在 assets/bgm/，渲染前复制到对应视频的 videos/{name}/bgm.mp3。
• .gitignore 已排除 videos/*/output.mp4、videos/*/video_with_bgm.mp4、videos/*/podcast_audio.wav 等大文件。

参考

• 项目规范：remotion-promo/AGENTS.md