Skill：Vibe Video Factory（Gemini × Antigravity × Remotion）

用“节拍 + 参数化 + 代码渲染”批量生产氛围向短视频

目标：把“vibe video（氛围做视频）”固化成可复现 SOP + 工程骨架：一次做出风格，后续只换 JSON 就能批量出片。

1) 概览

这个 skill 的本质：先用音乐建立“节拍网格”，再用 Remotion 把每个镜头写成可复用组件， 所有文案/数据/配色/节奏点都来自 JSON 参数；Gemini 产 storyboard 与代码草案，Antigravity 负责代理式迭代与工程落地。

节拍对齐：切点 = vibe 骨架 参数化：一套代码出 N 条 动效语言：只用 1–2 套 easing/spring 工程化：scene 组件化 + config 驱动

2) 输入 / 输出

输入（你提供）

  • 视频规格：比例（9:16 / 16:9）、分辨率、FPS、时长范围
  • BGM：音频文件（mp3/wav）+ BPM（可选）
  • 数据：数字、标签、Top3 列表、标题/署名/Logo
  • 风格 token：字体、配色、质感（grain/blur/vignette）

输出（你得到）

  • 镜头表（Storyboard / Shotlist）
  • Remotion 工程（Scene 组件 + Root 时间轴）
  • 配置 JSON（default + variants）
  • 成片：MP4（可批量渲染）
适用场景
年度总结 / 数据战报 / 产品发布小片 / 社区增长可视化 / 个人作品集片头
不适用
强真人叙事、复杂镜头合成（更适合 AE/PR 或三维流程）

3) SOP（端到端）

Step A｜定“氛围规格”（10 分钟）

  • 比例/分辨率/FPS（建议 1080×1920 或 1920×1080，30fps）
  • 风格 token：字体（中英各 1）、配色（背景/主色/高亮/灰）
  • 质感：grain（噪点）、轻微 blur、暗角（二选一或组合，但固定强度）
  • 动效语言：统一 spring 或统一 ease（不要混太多）

Step B｜音乐 → 节拍网格（vibe 的骨架）

  • 选 BGM（决定节奏与气质）
  • 拿到 BPM（或手动打点），确定：每 4/8 拍切镜头
  • 输出 beat markers（秒或帧）作为“镜头切点表”

Step C｜让 Gemini 产“镜头表 + 配置 JSON”

  • 输入：主题/口吻、数据、资产、节拍规则
  • 输出 1：Shotlist（每个 scene 的起止时刻、文案、动效）
  • 输出 2：config JSON（所有内容参数化）

Step D｜Remotion 落地（工程化关键）

  • 一个 scene = 一个 React 组件
  • Root 用 <Sequence> 拼时间轴
  • 所有文案/数字/颜色来自 JSON props（便于批量）
  • 可选：根据音频时长自动设置 composition duration（避免手改）

Step E｜迭代与出片（Antigravity 代理循环）

  • 代理把工程跑起来（安装依赖、启动预览、修报错）
  • 你只给“观感反馈”：切点提前/延后多少帧、弹性大/小、层级更强等
  • 固化动效语言后：只换 JSON → 批量渲染

4) Prompt Pack（直接复制用）

把下面 prompt 分别喂给 Gemini（或你的模型），即可产 storyboard/配置/代码草案。

复制你是短视频 motion 设计师 + Remotion 工程师。
我要做一个“vibe video（氛围向数据短片）”，请输出：
1) Shotlist：每个 scene 的起止时间（秒）、镜头内容、动效描述（入场/强调/退场）、与节拍对齐说明
2) Config JSON：把所有文字、数字、颜色、节奏规则参数化
3) Scene 组件清单：Intro/Stats/TopList/Outro 每个组件的 props 结构

输入信息：
- 画面比例：{9:16 或 16:9}
- 分辨率：{1080x1920}
- FPS：{30}
- BGM：{文件名}，BPM：{120}，切点规则：每 {8} 拍切镜头
- 风格 token：字体（中/英）={...}；配色={bg:#..., primary:#..., muted:#...}；质感={grain, blur, vignette}；动效={统一 spring 或统一 easeOut}
- 数据：
  标题={...}
  署名/handle={...}
  Stats=[{label,value},...]
  Top3=[...]
输出需克制、现代、层级清晰，所有切点必须对齐节拍。
复制你是代码审查员。请根据我提供的 Remotion scene 代码，检查：
- 动效语言是否一致（easing/spring 参数是否混乱）
- 是否存在硬编码（文字/数字/颜色应来自 JSON props）
- 是否存在时长不对齐节拍（scene duration 是否是 cutEveryBeats 的整数倍）
并给出逐条可执行修改建议（含具体参数与文件位置）。

5) 工程骨架（推荐目录）

复制vibe-video/
  public/
    audio/bgm.mp3
    fonts/YourFont.woff2
    images/logo.png
    images/screenshot.png
  src/
    Root.tsx
    compositions/
      VibeVideo.tsx
    scenes/
      Intro.tsx
      StatCards.tsx
      TopList.tsx
      Outro.tsx
    motion/
      beat.ts
      easing.ts
      style.ts
    data/
      config.default.json
      config.variant-001.json
      config.variant-002.json
  scripts/
    render-batch.mjs

约定（强烈建议）

  • Root 只负责时间轴：把 Sequence 排好
  • Scene 只关心一个镜头：纯 props 驱动，不读外部全局
  • motion 层统一动效：所有 easing/spring 在一处定义

初始化命令（参考）

Remotion 官方脚手架通常用 create-video 创建工程；具体命令以官方文档为准。

复制npx create-video@latest

官方入口（放在 HTML 里）：Remotion Getting Started

6) 配置 Schema（JSON）

所有内容都应来自 JSON，这样你才能“换数据=换视频”。

复制{
  "meta": { "title": "Dify 2025", "handle": "@langgenius" },
  "palette": { "bg": "#070A12", "primary": "#7C3AED", "muted": "#A1A1AA" },
  "style": { "grain": 0.18, "blur": 0.6, "vignette": 0.25 },
  "timing": { "fps": 30, "bpm": 120, "cutEveryBeats": 8 },
  "stats": [
    { "label": "Stars", "value": 36688 },
    { "label": "Forks", "value": 5704 },
    { "label": "Repos", "value": 8 }
  ],
  "top": ["Shipping weekly", "Docs improved", "Community growth"],
  "assets": { "logo": "/images/logo.png", "audio": "/audio/bgm.mp3" }
}

节拍换算（建议写在 motion/beat.ts）

  • 每拍秒数：60 / bpm
  • 每拍帧数：(60 / bpm) * fps
  • 每镜头帧数：cutEveryBeats * framesPerBeat

7) Scene 模板（动效语言示例）

统一入场：opacity + y + blur 统一强调：scale/letterSpacing 微幅变化 不要混太多 easing/spring

Intro（0–1s）

  • 标题 + Logo + handle
  • 入场：轻微上浮 + 渐显
  • 退场：淡出即可（保持克制）

Stats（1–6s）

  • 大数字 counter（从 0 或从 70% 递增）
  • 强调点：主色高亮一个 key 指标
  • 每组 stats 按节拍切换

TopList（6–12s）

  • Top3 列表逐条入场（stagger）
  • 每条入场间隔固定（例如 6–10 帧）
  • 背景保持稳定，避免花哨

Outro（最后 1–2s）

  • 署名 + 小 CTA（如 “See you in 2026”）
  • 结尾可加轻微暗角/噪点收束
  • 最后一拍留空一点更高级

8) 渲染与批量出片

单条渲染（参考）

Remotion 常见渲染方式是用 CLI render 指定 composition 与输出文件；具体 flags 以你安装版本文档为准。

复制# 示例（根据你的版本可能是 --props 或 --input-props）
npx remotion render VibeVideo out.mp4 --props='{"configPath":"src/data/config.variant-001.json"}'

批量渲染策略

  • 把每条视频的差异放进 config.variant-xxx.json
  • 脚本遍历 variants，依次调用 render
  • 输出命名：out/{title}-{handle}-{variant}.mp4
复制variants:
  - config.variant-001.json
  - config.variant-002.json
  - config.variant-003.json

render loop:
  for each variant:
    remotion render ... --props {configPath: variant}

官方文档入口（建议收藏）

9) 质检清单（上线前必过）

节奏（vibe 关键）

  • 所有切点对齐节拍（4/8 拍）
  • 镜头时长是统一网格（避免忽长忽短）
  • 关键数字出现时，BGM 同时有强调（鼓点/和弦变化）

视觉（统一性）

  • 字体/字号层级固定：标题 / 数字 / 标签 / 注释
  • 色彩不漂：背景稳定，主色只做强调
  • 动效不杂：入场/强调/退场只用 1–2 套语言

工程（可批量）

  • 无硬编码：内容来自 JSON
  • Scene 纯函数化：props → 画面
  • 渲染脚本可重复，输出命名稳定

交付（成片）

  • 码率/音量正常，避免爆音
  • 无黑边/裁切错误（尤其 9:16）
  • 首帧/末帧干净（留 1–2 帧呼吸）

10) 常见坑（对症下药）

  • 看起来“散”：通常是没做节拍网格 + 字体层级不统一（先固定 token）
  • 动画“廉价”：easing 太多、幅度太大（统一动效语言，幅度减半）
  • 时长对不上音乐：镜头时长没对齐 beats（用 beat→frames 统一换算）
  • 越改越乱：没有把 motion 参数集中（把 easing/spring 收拢到 motion/）

11) 扩展玩法（进阶）

  • 做“主题包”：一套 palette + typography + motion preset = 一个风格
  • 做“数据源插件”：从 API/CSV 拉数据，生成 variants JSON
  • 做“镜头生成器”：给 stats 数组自动排版（自适应列数/字号）
  • 做“节拍自动切镜”：从音频打点（或手工标注）生成 markers 文件

使用方式：把本页保存为 skill-vibe-video.html 打开即可；你也可以把它放进团队知识库当作 SOP 文档。
备注：具体 Remotion CLI flags 在不同版本可能略有差异，建议以官方文档为准并在你的项目中固化为脚本。