用Remotion + Claude Code从零做一个AI视频

用Remotion + Claude Code从零做一个AI视频

2026/03/248 分钟
分类：技术分享
标签：#AI#视频#工具#教程#人工智能#前端#编程
notion image
黑粉科技 — 让普通人也能驾驭 AI。掌握 AI 的人，将成为各个领域的王者。
⚙️
这是一篇精确到代码行的实战指南。不是概念科普，不是工具列表——而是一套完整的「提示词 → React代码 → MP4视频」管线。读完并跟着操作，你就能用自然语言描述生成专业级的动态视频。

为什么是Remotion，而不是其他AI视频工具？

Veo、Sora等AI视频工具擅长「无中生有」——你描述一个场景，它生成一段实拍风格的视频。但它们有三个根本问题：输出不可控、不可复现、不可参数化。
Remotion走的是另一条路：视频 = React组件 + 时间轴。你写的每一行JSX、每一个CSS属性，都会被逐帧渲染成真实的MP4视频。同样的代码、同样的参数，永远产出完全一样的结果。
而2026年初 Remotion发布的Agent Skills，让这整个流程发生了质变：你不再需要手写代码，而是用自然语言提示词告诉Claude Code你想要什么，它来生成正确的Remotion代码，你在Studio中实时预览，满意后一键渲染成MP4。
这就是本文要讲的完整管线：提示词 → 预览 → 调整 → 渲染。

第一部分：环境搭建

1.1 前置条件

确保你的机器上有以下工具：
Node.js 16+（推荐 Node 20 LTS）、npm 或 bun、一个代码编辑器（VS Code推荐）、Claude Code（命令行工具）

1.2 初始化Remotion项目

# 方法一：用npm
bun create video
# 或
npm init video

cd my-video
npm start
# 浏览器打开 localhost:3000 即可RemotionStudio预览
创建完成后，项目结构如下：
my-video/
├── src/
│   ├── Root.tsx          # 注册所有Composition
│   ├── Composition.tsx   # 主视频组件
│   └── index.ts          # 入口文件
├── public/               # 静态资源（图片、音频、字体）
├── package.json
└── remotion.config.ts

1.3 安装Agent Skills（核心步骤）

这是让Claude Code「理解」Remotion的关键一步：
npx skills add remotion-dev/skills
运行后，你会看到项目中出现：
.claude/skills/remotion-best-practices/
├── SKILL.md              # 主入口文件
└── rules/
    ├── animations.md     # 动画最佳实践
    ├── audio.md          # 音频处理规则
    ├── compositions.md   # Composition结构规范
    ├── fonts.md          # 字体加载
    ├── subtitles.md      # 字幕处理
    └── 3d.md             # Three.js集成
Agent Skills本质是一组Markdown规则文件。Claude Code启动时会自动扫描并加载这些规则，从此它就能用正确的Remotion API模式生成代码，而不是用通用的Web动画方式来凑合。
⚠️
没有Agent Skills的Claude Code会怎样？ 它会试图用CSS transitions和setTimeout做动画——这些在浏览器里能跑，但在Remotion的逐帧渲染中会完全崩溃。安装Skills后，Claude会改用interpolate()、spring()和基于帧的时间控制，这才是Remotion的正确姿势。

第二部分：Remotion核心概念速览

在写提示词之前，你需要理解Remotion的四个核心抽象。即使你让Claude写代码，理解这些概念会让你的提示词质量暴增。

2.1 Composition——视频的「画布」

每个视频是一个<Composition>，定义了宽高、帧率、总时长和渲染的React组件：
<Composition
  id="MyVideo"
  component={MyVideoComponent}
  width={1920}
  height={1080}
  fps={30}
  durationInFrames={300}  // 300帧 ÷ 30fps = 10秒
/>
关键点：Remotion中的时间单位是「帧」而不是「秒」。扂30fps时，1秒=30帧，3秒=90帧。

2.2 useCurrentFrame()——时间的唯一真相

这是Remotion最重要的Hook。它返回当前帧号（从0开始），所有动画都必须基于这个值来驱动：
import { useCurrentFrame } from 'remotion';

const frame = useCurrentFrame();  // 第0帧返回0，第30帧返回30...
const opacity = Math.min(1, frame / 30);  // 前1秒淡入
🚨
切记：所有动画必须由useCurrentFrame()驱动。Remotion渲染时会随机跳到任意帧号拍截图，如果你用CSS transition或setTimeout，每一帧的状态都是不确定的，会导致画面闪烁和跳帧。

2.3 interpolate()——万能映射函数

将一个数值范围映射到另一个数值范围。这是Remotion动画的基石：
import { interpolate, useCurrentFrame } from 'remotion';

const frame = useCurrentFrame();

// 前20帧：透明度0→1，之后保持为1
const opacity = interpolate(
  frame,
  [0, 20],           // 输入范围（帧号）
  [0, 1],            // 输出范围（透明度）
  { extrapolateRight: 'clamp' }  // 超出范围后锁定为1
);

// 多段插值：淡入 → 保持 → 淡出
const opacity2 = interpolate(
  frame,
  [0, 20, 80, 100],  // 四个关键帧
  [0, 1,  1,  0]     // 对应透明度
);

2.4 spring()——物理动画引擎

比interpolate的线性插值更自然。默认从0到1，带有微小的回弹超调：
import { spring, useCurrentFrame, useVideoConfig } from 'remotion';

const frame = useCurrentFrame();
const { fps } = useVideoConfig();

const scale = spring({
  frame,
  fps,
  config: {
    mass: 1,        // 质量，越小越快
    damping: 10,    // 阻尼，越大越不弹
    stiffness: 100, // 刚度，越大越「脏」
  },
});

// 用spring值驱动位移
const x = interpolate(scale, [0, 1], [0, 200]);

2.5 Sequence——场景编排

<Sequence>用于时间偏移，让子组件在指定时刻开始：
import { Sequence } from 'remotion';

// 场景1：第0-90帧（3秒）
<Sequence from={0} durationInFrames={90}>
  <Scene1 />
</Sequence>

// 场景2：第90-180帧（接上3秒）
<Sequence from={90} durationInFrames={90}>
  <Scene2 />
</Sequence>
关键：Sequence内部的useCurrentFrame()是相对的——Scene2中的frame 0实际是全局的frame 90。

第三部分：提示词框架——如何跟Claude Code对话

现在进入核心环节。安装好Agent Skills后，你在项目目录下启动Claude Code，然后用提示词生成视频。

3.1 基础提示词结构

一个有效的Remotion提示词应包含以下要素：
创建一个[X秒]的视频。

场景描述：[...详细描述每个场景的内容]
动画风格：[干净/进攻/柔和/赛博朋克...]
色调：[主色+辅色+背景色]
分辨率：[1920x1080 / 1080x1920竖屏]
帧率：[30fps]

3.2 第一层：快速原型提示词

适合快速验证效果，5分钟出片：
💬
创建一个5秒的视频。深蓝色背景（#0F1923），白色文字“欢迎来到黑粉科技”从中间淡入，保持两秒，然后向左滑出。使用spring动画使过渡流畅自然。

3.3 第二层：多场景结构化提示词

适合有明确分镜的视频：
💬
创建一个15秒的产品介绍视频，1920x1080，30fps。
场景1（0-3秒）：Logo从粒子中凝聚成型，带spring回弹效果。背景深色，logo发光。
场景2（3-9秒）：依次展示三个功能特点，每个占时约2秒。图标从左侧滑入，文字从右侧淡入。使用stagger动画（每个延迟10帧）。
场景3（9-15秒）：CTA“立即体验”按钮动画出现，带周期性脉冲光晕效果。底部显示hyphentech.top。
配色方案：背景#0F1923，主色#13C2C2（cyan），强调#FFB300（amber）。
字体：Noto Sans SC。

3.4 第三层：带技术约束的专业提示词

当你对Remotion API有了理解后，可以直接在提示词中指定技术细节：
💬
创建一个10秒的YouTube频道片头，30fps，1920x1080。
技术要求：
  • 使用AbsoluteFill作为每个场景的容器
  • 用Sequence组件编排三个场景
  • 所有动画用spring()而不是线性插值，damping:12，stiffness:100
  • 将配色方案抽成CSS变量（--bg, --cyan, --amber）
  • Logo图片从public/logo.png加载，用staticFile()引用
  • 导出为独立组件，便于复用
场景设计：
场景1：暗场中，网格背景淡入，logo带scale spring动画出现。
场景2：终端风格的打字机动画，逐字显示频道名称。
场景3：所有元素汇聚，显示最终logo+口号+网址。

第四部分：完整工作流实战

4.1 提示词 → 预览 → 迭代循环

实际工作流如下：
步骤1：在项目根目录启动Claude Code，输入提示词。Claude会生成/修改.tsx文件。
步骤2：在已运行的Remotion Studio（localhost:3000）中实时查看效果。得益于React Fast Refresh，代码保存后预览自动更新。
步骤3：不满意？继续对Claude说「这里改一下」：
💬
场景2的打字机速度太快了，每个字符的间隔改为4帧。另外加一个闪烁的光标效果。
💬
💬

4.2 资源管理

分享到：

相关文章

返回首页