告别 Premiere！用 Claude Code 写代码生成视频的完整教程

发表于 更新于 分类于 阅读次数： 本文字数： 4.5k 阅读时长 ≈ 4 分钟

cover

你有没有遇到过这种情况：产品做好了，代码跑通了，但需要一个 30 秒的演示视频——结果在 Premiere 里拖了一下午，最后做出来的东西还不如 PPT 动画。

或者更扎心的：老板让你做一个产品发布视频，你对着 After Effects 的界面发呆，心想”我是写代码的，不是做视频的”。

现在有一个新选择：用 Claude Code 写代码生成视频。

不是 Sora 那种 AI 生成实拍画面，而是用 React 组件定义每一帧动画，让 Claude Code 帮你写代码，然后渲染成 MP4。效果是什么？专业级的动态图形（Motion Graphics）——产品演示、数据可视化、YouTube 开场动画、社交媒体短视频。

这背后的工具组合是 Remotion + Claude Code Skills。2026 年 1 月 20 日发布后，演示视频在 X 上 48 小时内获得 600 万播放。8 周后，skills.sh 上的安装量突破 15 万次，成为排名第五的技能，也是非平台公司开发的第一名。

今天这篇文章，我从原理讲到实战，手把手教你用这套组合做视频。

Remotion 是什么：React 写视频

先搞清楚 Remotion 到底是什么。

一句话：Remotion 是一个用 React 写视频的框架。 你不是在时间线上拖素材，而是用代码描述每一帧画面该长什么样。

传统视频编辑：打开 Premiere → 导入素材 → 拖到时间线 → 加特效 → 导出。

Remotion 的方式：写一个 React 组件 → 用 useCurrentFrame() 获取当前帧号 → 根据帧号计算动画状态 → 渲染成 MP4。

1
2
3
4
5
6
7
8
9
10
const MyVideo = () => {
  const frame = useCurrentFrame();
  const opacity = Math.min(1, frame / 30); // 前30帧淡入

  return (
    <div style={{ opacity }}>
      <h1>Hello, Remotion!</h1>
    </div>
  );
};

这段代码就是一个 1 秒的淡入动画（30fps）。视频 = 时间的函数。

Remotion 的核心优势：

  • 可复现：同样的代码，同样的输出。可以用变量控制一切。
  • 可自动化：从 API 拉数据，动态生成视频。100 个城市的天气报告？写一次代码，循环 100 次。
  • 可 AI 化：代码可以让 AI 写。这就是 Claude Code Skills 发挥作用的地方。

Remotion 不是新项目。它从 2020 年就开始了，GitHub 25,300 Star，npm 周下载量 16.9 万。创始人 Jonny Burger 来自苏黎世，是一个小而精的团队。

Skills 是什么：给 Claude Code 装”专业知识”

接下来的关键问题：Claude Code 本来就能写 React 代码，为什么还需要 Remotion Skills？

答案很简单：没有 Skills，Claude 写的 Remotion 代码经常跑不了。

Remotion 有自己的 API 规范——interpolate() 的参数顺序、spring() 的用法、Sequence 的嵌套规则、音频同步的计时方式。这些细节 Claude 的通用训练数据覆盖得不全。结果就是：代码看着对，但渲染出来动画错位、音画不同步、甚至直接报错。

Remotion Skills 就是一套”专业知识包”。 它包含 28+ 个模块化的规则文件，覆盖：

类别 规则文件 内容
动画 animations.md、transitions.md 插值、弹簧物理、缓动曲线
文字 text-animations.md、fonts.md 文字动画、字体加载
音频 audio.md、sfx.md、voiceover.md 音频同步、配音
字幕 subtitles.md、captions.md 字幕时间轴、展示样式
媒体 videos.md、images.md、3d.md 视频嵌套、图片、Three.js 3D
结构 compositions.md、parameters.md 组合结构、参数化视频

关键设计：这些规则是按需加载的。 你让 Claude 做字幕视频，它只加载字幕相关的规则。做 3D 动画，加载 Three.js 规则。这样既保证了专业性，又不浪费 Token。

安装一条命令：

1
npx skills add remotion-dev/skills

装完之后，Claude Code 就”学会了”Remotion 的正确用法。从”会写 React”变成了”会写能跑的 Remotion”。

从零开始：完整实战流程

现在进入实战。从创建项目到渲染出 MP4，一步步来。

第 1 步：创建 Remotion 项目

1
2
3
4
5
6
7
# 创建新项目
npx create-video@latest

# 选择配置：
# Template → Blank（让 Claude 从零构建）
# TailwindCSS → Yes（样式更方便）
# Agent Skills → Yes（自动安装技能）

第 2 步：启动 Studio 预览

1
2
3
cd my-video
npm install
npm run dev

浏览器自动打开 http://localhost:3000，这是 Remotion Studio——一个实时预览界面。你可以看到视频的每一帧，拖动进度条检查动画效果。

第 3 步：用 Claude Code 生成视频

在项目目录下启动 Claude Code：

1
claude

然后直接用自然语言描述你想要的视频：

“创建一个 5 秒的 YouTube 开场动画。1920x1080，30fps。前 2 秒是频道名称 ‘TechLab’ 从底部飞入并放大，配合弹簧动画效果。第 3-4 秒显示频道口号 ‘Code. Create. Ship.’ 逐字淡入。最后 1 秒全部元素缩小消失。背景使用深蓝到紫色渐变。”

Claude Code 会自动读取已安装的 Remotion Skills 规则，生成正确的代码。保存后，Remotion Studio 实时热更新——你立刻就能在浏览器里看到效果。

不满意？继续对话调整：

“弹簧动画弹性太大了，减小一些。频道口号的字体换成 Inter Bold。”

这个 “提示 → 预览 → 调整 → 再预览” 的循环，就是 Remotion + Claude Code 的核心工作流。

第 4 步：渲染导出

预览满意后，渲染成视频文件：

1
npx remotion render MyComposition --codec h264 out/my-video.mp4

常用编码格式：

编码 格式 适用场景
h264 MP4 YouTube、社交媒体（默认）
h265 MP4 需要更高压缩率
vp9 WebM 网页嵌入
prores MOV 交给视频编辑软件做后期

一个 5 秒的视频，本地渲染通常只需要几秒到一分钟。

Prompting 技巧：让 Claude 生成更好的视频

用 Claude Code 生成视频，提示词的质量直接决定输出质量。几个实战总结的技巧：

第一，先声明视频规格。 分辨率、帧率、时长——这三个参数永远写在最前面。不要让 Claude 猜。

第二，用具体数字代替模糊描述。 “80px 字号”比”大字”好。”1 秒内淡入”比”慢慢出现”好。”从屏幕底部 Y=1080 移动到 Y=300”比”从下面飞上来”好。

第三，用时间段划分场景。 “0-2 秒是开场，3-5 秒是主体，6-7 秒是结尾”——这种描述方式会引导 Claude 正确使用 Sequence 组件来控制时间线。

第四，增量构建。 不要试图一次性描述一个 30 秒的复杂视频。先做基础布局，再加动画，再调颜色和字体。每一步都在 Studio 里预览确认。

15 万次安装背后：谁在用，怎么用

Remotion Skills 在 skills.sh 上的数据很有意思。

安装量分布（截至 2026 年 3 月）：

  • Claude Code：~108K
  • Gemini CLI：~108K
  • Cursor：~93K
  • OpenCode：~92K
  • Codex：~92K
  • Antigravity：~74.8K

六大 AI 编码工具几乎平均分布。这说明对”用 AI 写视频代码”的需求是跨平台的，不是某个工具的独有现象。

真实用户怎么说：

一位开发者用 Remotion + Claude Code 为 Polymarket 做了一个产品视频，只用了 4-5 个提示词，30 分钟完成。

另一位独立开发者在 Reddit 分享：他因为请不起视频制作团队，产品发布推迟了好几个月。直到他发现了 Remotion + Claude Code，一个周末就做完了所有演示视频。他的原话是：**”The reels are getting thousands of views.”**

还有一位评测者给出了精准定位：**”一个视频——用传统工具更快。一百个视频——用 Remotion 更快。”** 这句话道出了 Remotion 的真正优势：当你需要批量化、模板化、数据驱动的视频产出时，代码比时间线强太多了。

适合谁，不适合谁

说了这么多好处，公平起见也聊聊局限。

适合：

  • 需要产品演示视频的开发者（不想学 Premiere）
  • 需要批量生成视频的团队（100 个版本的广告、多语言字幕）
  • 需要数据可视化动画的分析师（季度报告、Dashboard 录屏）
  • 需要 YouTube/社交媒体内容的技术博主

不适合：

  • 不会 React 的人（Skills 能帮 Claude 写对代码，但你需要能看懂代码来调试）
  • 需要实拍画面的场景（婚礼视频、纪录片、品牌大片——这不是 Remotion 的领域）
  • 一次性的简单视频（做一个 10 秒的 GIF，用 Canva 可能更快）

一句话判断：如果你的视频需求是”重复的、模板化的、数据驱动的”，Remotion + Claude Code 是最佳选择。如果是”一次性的、创意驱动的”，传统工具更合适。

成本对比：省了多少钱

传统视频制作的行业均价是每分钟 4,500 美元。AI 辅助的代码生成视频把成本降到了大约每分钟 400 美元——91% 的成本缩减。

制作时间呢？传统流程一个 60 秒视频平均需要 13 天。Remotion + Claude Code 的工作流，熟练之后大约 27 分钟。

Remotion 本身对 3 人以下团队免费。Claude Code 的订阅费用是你主要的开支。对于独立开发者来说，这几乎是零边际成本的视频产能。

写在最后

视频一直是程序员的弱项。不是不想做，是工具链不对——Premiere 和 After Effects 是为专业视频编辑设计的，不是为写代码的人设计的。

Remotion 改变了这个局面。它把视频变成了 React 组件，把动画变成了状态函数，把时间线变成了代码逻辑。而 Claude Code Skills 又进一步降低了门槛——你甚至不需要从零学 Remotion 的 API，直接用自然语言描述你想要什么就行。

视频 = 代码 + 时间。 当你接受了这个等式，很多之前觉得”做不了”的事情突然变得可以做了。

下次老板让你做产品演示视频的时候，不用再打开 Premiere 发呆了。打开 Claude Code，告诉它你想要什么——30 分钟后，MP4 就躺在你的 out/ 目录里了。

你用 Claude Code 做过视频吗？有没有试过 Remotion？如果让你用代码做一个 30 秒的视频，你会做什么内容？欢迎在评论区分享你的想法和作品。