我让 AI 写了一段代码,它吐出了一支 MP4

当视频不再是”拖时间轴拖出来的”，而是”代码跑出来的”，世界变了。

一、先讲个真实的尴尬

去年年底，我接到一个任务：给团队做 30 个产品介绍短视频，每个视频内容大同小异，只是公司名、Logo、数据不一样。

按照传统做法，我打开了剪映。

第 1 个视频，认认真真做，1 个半小时。 第 2 个视频，复制工程文件，改素材，40 分钟。 第 3 个视频，改到一半发现某个动效要重做，又是 30 分钟。 …… 做到第 8 个的时候，我开始怀疑人生。

后来一个做前端的朋友扔给我一个链接：

“你试试 Remotion，视频是代码生成的，改一个变量，30 个视频全变。“

我点进去看了一眼，世界塌了——原来视频还能这么做。

二、Remotion 是什么？一句话讲明白

Remotion = 视频界的 React。

你写 React 组件，它把每一帧渲染成网页画面，然后用浏览器（Chromium）一帧一帧”截屏”，最后用 FFmpeg 把这些截屏合成 MP4。

简单理解就是这样：

你的 React 代码  →  浏览器渲染成画面  →  逐帧截屏  →  FFmpeg 合成视频

所以 Remotion 不是在”剪”视频，是在”生成”视频。

这一字之差，意味着整个视频生产模式被重写了：

最经典的代码长这样：

import { useCurrentFrame, interpolate } from 'remotion';

export const MyVideo = () => {
  const frame = useCurrentFrame();
  // 第 0 帧到第 30 帧（也就是 1 秒），透明度从 0 渐变到 1
  const opacity = interpolate(frame, [0, 30], [0, 1]);

  return (
<div style={{ opacity, fontSize: 80, color: 'white' }}>
      Hello, Remotion!
    </div>
  );
};

10 行代码，一个完美的”文字 1 秒淡入”效果就完成了。这要是在 AE 里，得调好几个关键帧。

三、它的杀手锏：批量个性化

Remotion 真正的恐怖之处，不是”做一个酷炫视频”，而是**”一套模板，批量产出几万个不同的视频”**。

举几个真实例子：

🎁 Spotify Wrapped 年终回顾 每年 12 月，Spotify 给 5 亿用户发各自的年度听歌报告——每个人收到的视频里，名字、歌曲、播放时长、喜好风格全都不一样。Remotion 这类技术就是这种规模化的底层支撑。

📊 GitHub Unwrapped Remotion 官方的招牌案例：你输入 GitHub 用户名，它生成一段属于你的”年度编程总结”视频——你今年提了多少 commit、用了什么语言、贡献了哪些项目，全自动渲染成动画。

📈 数据可视化短视频 那种”全球十大科技公司市值 1980-2024″的柱状图赛跑视频，传统做法要 AE 手动 K 帧 K 一周。用 Remotion，一份 JSON 数据丢进去，一晚上跑完几十个不同主题的版本。

📰 财经/资讯日更视频账号 有人用 Remotion + 数据 API 做了完全自动化的”每日股市快报”账号——晚上 8 点拉数据，自动生成视频，9 点发布。一个人维护一个百万粉账号。

四、问题来了：可我不会 React 啊

一直到 2025 年，Remotion 都还有一个尴尬的门槛：

你得会写 React。

对程序员来说，这不是事儿。但对设计师、运营、产品、自媒体作者来说——这就是天堑。

直到 2025 年下半年，AI 编程助手成熟了。

当 Claude Code、Codex、Cursor 这些工具能直接读懂你的需求、写出能跑的代码时——

Remotion 的”会写 React”门槛，瞬间降到了”会说人话”。

五、Claude Code × Remotion：实战演示

来看一个完整流程。我要做一支抖音竖屏数据可视化短视频——展示 2015-2024 全球十大科技公司市值变化的柱状图赛跑。

第 1 步：装环境（一次性，3 分钟）

# 创建 Remotion 项目（需要 Node.js 20+）
npm init video
# 模板选 Blank，让 AI 从零搭建

cd 你的项目
npm install
npm start  # 浏览器自动打开 http://localhost:3000，就是 Remotion Studio

第 2 步：装 Agent Skills（关键！）

这是 Remotion 官方为 AI 编程助手准备的”教科书”——一组 .md 规则文件，让 AI 写出来的代码符合 Remotion 最佳实践，而不是瞎写。

npx skills add remotion-dev/skills

官方目前提供了 38+ 个 skill，覆盖动画、3D、字幕、音频、图表、转场……按需安装。

第 3 步：开口说话

另开一个终端，启动 Claude Code：

claude

然后把这段 prompt 丢进去：

使用 Remotion best practices skill。

创建一个竖屏柱状图赛跑视频：

• • 1080×1920，30fps，30 秒
• • 数据：2015-2024 全球十大科技公司市值（万亿美元），用合理的示例数据
• • 顶部显示当前年份（180px 大字，渐变色，平滑过渡）
• • 中部 10 根柱子按数值排序，排名变化时用 spring 动画交换位置
• • 数值用 tabular-nums + count-up 动画，避免抖动
• • 安全区：顶部 220px、底部 380px（避开抖音 UI）
• • 完成后启动 Studio 让我预览

第 4 步：等几分钟

Claude Code 会自动完成：

✅ 读取你装的 Skills，了解 Remotion 的语法规则 ✅ 设计 10 年数据结构（含合理的真实趋势） ✅ 写完整的 React 组件代码 ✅ 实现插值动画、排序逻辑、数值平滑过渡 ✅ 注册 Composition、配置渲染参数 ✅ 启动 Studio，告诉你哪几个时间点最值得检查

整个过程不到 10 分钟。

第 5 步：边看边改

预览到 NVIDIA 那段觉得太快？继续在对话框里说：

NVIDIA 在 2023→2024 那段暴涨太快了，把过渡时间从 0.5 秒延长到 1.2 秒。

柱子的颜色对比度不够，每个公司用各自的品牌色而不是统一蓝色。

加一个底部进度条，显示当前在整个时间轴的位置。

代码自动改，Studio 自动热更新。视频成了一个可以”跟 AI 聊”出来的东西。

第 6 步：渲染最终视频

npx remotion render src/index.ts BarChartRace out/race.mp4

一支可以直接发抖音的 30 秒竖屏视频，做完了。

六、Codex 怎么样？

OpenAI 的 Codex CLI 同样能用。流程几乎一样：

# 装 Codex CLI
npm install -g @openai/codex

# 在 Remotion 项目里启动
codex

Remotion 的 Skills 文件是框架无关的——它就是一组 .md 规则文档，Claude Code、Codex、Cursor、Gemini CLI 都能读。

实测下来：

• • Claude Code：复杂动画逻辑写得最稳，对 interpolate、spring 这些 hook 的理解最准确
• • Codex：速度快，简单视频出活快，但复杂插值偶尔会写错
• • Cursor：在 Studio 实时预览的体感最好，因为 IDE 集成度高

我的实战建议：复杂数据驱动视频用 Claude Code，快速原型/简单视频用 Codex，长期项目用 Cursor。

七、能做什么？这些场景已经在跑

我整理了几个目前真实跑通、有人在做的场景：

🎬 自媒体内容工厂 科技博主把博客文章丢给 Claude Code → 自动生成配解说+字幕+动画的 60 秒短视频 → 一键多平台分发。一篇文章变成 5 个平台的内容。

📊 实时数据视频号 财经类账号每天定时拉股市/汇率数据，Remotion 自动渲染成”今日盘面回顾”，凌晨 6 点发布。一个人 = 一个内容工厂。

🚀 产品发布物料 每次产品上新，Claude Code 读 changelog → 写 Remotion 代码 → 渲染 30 秒发布视频。从写 release notes 到拿到成片，比手动发个 Twitter 还快。

📚 教育解说视频 “用 Kurzgesagt 的风格做一个 60 秒讲清楚什么是 LLM 的视频”——这种 prompt 现在真能跑出能看的成品。质量未必比专业团队，但成本是 0。

🎁 个性化营销 SaaS 公司给每个新注册用户发一段视频：”欢迎 XXX，你刚才设置的工作流将每周帮你节省 X 小时”——批量渲染，一对一定制。转化率比纯文字邮件高 3-5 倍。

📈 GitHub/数据年度回顾 仿照 GitHub Unwrapped、Spotify Wrapped——你给我一个 API，我给你一段年度回顾视频。这是 Remotion 的祖传强项。

八、小心这几个坑

我自己踩过的，给你提前避一下：

❌ 坑 1：不装 Skills 直接 vibe coding 不装 Skills，Claude 写出来的代码 80% 能跑，但经常有”不符合 Remotion 范式”的低级错误（比如用 setTimeout 做动画——seek-driven 渲染下根本不动）。装 Skills 后准确率飙到 95%+。

❌ 坑 2：Prompt 里不写具体数字 “做一个有点慢的淡入” → AI 给你一个 0.3 秒的淡入。 “做一个 1.2 秒的淡入” → AI 给你一个精确的 1.2 秒淡入。 Remotion 是数字游戏，prompt 也要是数字游戏。

❌ 坑 3：一上来就要复杂动画 正确姿势：先让 AI 出布局 → 看效果 → 再加动画 → 再调颜色和字体。 错误姿势：一段超长 prompt 把所有需求堆给 AI。复杂视频一次成型的概率，等于中彩票。

❌ 坑 4：忘了授权问题 Remotion 个人、非营利、3 人以下团队完全免费。但4 人以上的公司需要付费：Creators 授权 100/月）。 你做着玩、做自媒体、小团队，免费随便用。公司要批量化生产前，先看一眼 LICENSE 页面。

❌ 坑 5：以为 AI 万能 AI 现在还做不了的：精细的角色动画、复杂的镜头运镜、要”灵魂”的创意脚本。 AI 现在能做得很好的：模板化、数据驱动、规则明确的视频。 别让 AI 取代创意，让 AI 替你干苦力。

九、为什么是现在？

Remotion 2021 年就开源了，为什么直到 2026 年才爆火？

因为只有现在，三个齿轮才咬合到一起：

   ┌──────────────────────┐
   │  Remotion（视频框架）             │
   │  解决"视频代码化"                │
   └─────────┬────────────┘
                 │
                 ▼
   ┌──────────────────────┐
   │   AI Coding Agent                │
   │  解决"代码自动写"                │
   └─────────┬────────────┘
                │
                ▼
   ┌──────────────────────┐
   │    Agent Skills               │
   │  解决"AI 写得对"                │
   └──────────────────────┘

视频 → 代码 → AI 自动写 → AI 写得专业。

链路通了，于是出现了一个新职业雏形：

“视频工程师”——不剪视频，写视频。

十、最后一句话

Remotion 的口号是 “Make videos programmatically”——用编程的方式制作视频。

但 2026 年的真相是：

现在你不需要会编程，也能”用编程的方式”制作视频了。

你只需要会说人话。

剩下的事，AI 会处理。

🛠️ 想动手试试？

最小可用步骤（10 分钟体验）：

# 1. 装 Node.js 20+（如果没有）

# 2. 创建项目
npm init video         # 模板选 Blank

# 3. 装 AI Skills
cd 你的项目名
npx skills add remotion-dev/skills

# 4. 启动 Studio
npm start

# 5. 另开终端，启动 Claude Code 或 Codex
claude                 # 或 codex

# 6. 把你想做的视频用人话描述出来，丢进去

📎 资源链接

• • Remotion 官网：https://www.remotion.dev
• • Remotion GitHub：https://github.com/remotion-dev/remotion
• • 官方 AI 文档：https://www.remotion.dev/docs/ai
• • Agent Skills：https://github.com/remotion-dev/skills
• • 模板展示：https://www.remotion.dev/templates
• • Claude Code：https://claude.com/claude-code
• • Codex CLI：https://github.com/openai/codex

如果这篇文章让你想动手试试，欢迎把你做出来的第一支 AI 视频丢评论区。视频不再是技术活，是表达活。