Remotion + Claude Code：用自然语言创作视频的革命性突破

当你只需用一句话描述需求，AI就能在几分钟内为你生成一个完整的视频项目时，传统的视频制作流程正在经历前所未有的变革。

引言：视频制作的新纪元

2026年1月，Remotion团队发布了一个改变游戏规则的功能------Agent Skills。这项创新将AI编程助手（如Claude Code、Cursor、Codex）转化为专业的视频生产工具，让"自然语言驱动视频创作"成为现实。

开发者只需向Claude Code描述想要的效果，几分钟后就能得到一个可渲染的完整视频项目。

这不是科幻。这是现实。

什么是Remotion？为什么它如此特别？

Remotion = React for Video

Remotion是一个革命性的框架，它将视频创作从传统的GUI时间线编辑器转变为代码驱动的程序化生成。开发者可以使用TypeScript/React编写组件，描述每一帧应该显示什么内容，然后由Remotion将这些帧渲染为MP4视频文件。

这种方法的核心理念在于：

• 精确性：每一帧都可以精确控制，像素级的完美呈现
• 可编辑性：代码即文档，修改即回溯
• 可扩展性：从一个模板可以生成数千个变体版本
• 自动化友好：这正是AI助手大展身手的舞台

Claude Code + Remotion Skill：魔法是如何发生的？

1. 安装配置：一步到位

创建新项目时：

# 创建一个remotion脚手架项目
bun create video my-video-project

系统会询问是否自动加载Remotion Skill配置，确认即可完成集成。

# 安装依赖
cd my-video-project
bun install

运行

bun run dev

此时会调起浏览器，显示一块空白画布

如果需要手动安装Skills，Remotion官方维护的Agent Skills提供了完整的最佳实践规范。安装也极为简单：

# 在终端执行这行命令即可完成部署
npx skills add remotion-dev/skills

2. Skill的核心规则：为什么CSS动画在这里不适用？

Remotion Skill的核心在于它教会了AI助手视频渲染的特殊规则，这些规则与传统Web开发截然不同：

关键规则一：禁止CSS动画

// ❌ 错误：CSS transitions 或 animations 在视频渲染中会失效
// ❌ 错误：Tailwind animation class names 在视频渲染中会失效

// ✅ 正确：使用 Remotion 的帧驱动动画系统
import { useCurrentFrame, Easing, interpolate } from "remotion";

export const FadeIn = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {
    extrapolateRight: "clamp",
    extrapolateLeft: "clamp",
    easing: Easing.bezier(0.16, 1, 0.3, 1),
  });

  return <div style={{ opacity }}>Hello World!</div>;
};

为什么？ 因为视频渲染需要确定性------每一帧的输出必须可预测、可复现。CSS动画依赖浏览器的实时渲染引擎，无法保证帧级精确性。

关键规则二：Sequence的时间控制

import { Sequence, AbsoluteFill } from "remotion";

const Main = () => {
  const { fps } = useVideoConfig();

  return (
    <AbsoluteFill>
      {/* 背景：从头开始，持续整个视频 */}
      <Sequence>
        <Background />
      </Sequence>

      {/* 标题：第1秒开始，持续2秒 */}
      <Sequence from={1 * fps} durationInFrames={2 * fps} layout="none">
        <Title />
      </Sequence>

      {/* 副标题：第3秒开始，持续2秒 */}
      <Sequence from={3 * fps} durationInFrames={2 * fps} layout="none">
        <Subtitle />
      </Sequence>
    </AbsoluteFill>
  );
};

关键规则三：资源的正确引用方式

// 图片资源必须放在 public/ 目录
import { Img, staticFile } from "remotion";

export const MyComposition = () => {
  return (
    <Img
      src={staticFile("logo.png")}
      style={{ width: 100, height: 100 }}
    />
  );
};

// 视频资源使用 @remotion/media 包
import { Video } from "@remotion/media";

export const MyComposition = () => {
  return <Video src={staticFile("video.mp4")} />;
};

// 音频资源同样来自 @remotion/media
import { Audio } from "@remotion/media";

export const MyComposition = () => {
  return <Audio src={staticFile("audio.mp3")} />;
};

3. 视频元数据的定义与动态计算

视频的宽度、高度、帧率、时长等核心参数在 src/Root.tsx 中定义：

import { Composition, CalculateMetadataFunction } from "remotion";
import { MyComposition, MyCompositionProps } from "./MyComposition";

// 静态定义
export const RemotionRoot = () => {
  return (
    <Composition
      id="MyComposition"
      component={MyComposition}
      durationInFrames={100}  // 100帧
      fps={30}               // 每秒30帧
      width={1080}           // 宽度
      height={1080}          // 高度
    />
  );
};

// 动态计算：从API获取视频信息并调整参数
const calculateMetadata: CalculateMetadataFunction<MyCompositionProps> =
  async ({ props, abortSignal }) => {
    const data = await fetch(`https://api.example.com/video/${props.videoId}`, {
      signal: abortSignal,
    }).then((res) => res.json());

    return {
      durationInFrames: Math.ceil(data.duration * 30),
      props: { ...props, videoUrl: data.url },
      width: 1080,
      height: 1080,
    };
  };

export const RemotionRoot = () => {
  return (
    <Composition
      id="MyComposition"
      component={MyComposition}
      fps={30}
      width={1080}
      height={1080}
      defaultProps={{ videoId: "abc123" }}
      calculateMetadata={calculateMetadata}
    />
  );
};

当然这篇文章不是教你怎么写Remotion代码的，这样就太Low了！将这些复杂且费时间的事情交给AI就好。

实战工作流：从想法到视频的完整路径

Step 1：环境准备

# 创建新项目
npx create-video@latest --yes --blank --no-tailwind my-video

# 进入项目目录
cd my-video

# 安装Remotion Skill
npx skills add remotion-dev/skills

Step 2：启动Claude Code

# 启动Claude Code CLI
claude

Step 3：自然语言描述需求

向Claude Code输入你的想法：

我想制作一个15秒的产品宣传视频：
- 前3秒：公司logo淡入效果
- 第4-8秒：产品名称和三个核心特性依次出现
- 第9-12秒：产品截图从左侧滑入
- 最后3秒：购买按钮和网站链接

配色方案：深蓝色背景，白色文字，金色强调色
风格：简洁现代，动画流畅

Step 4：Claude Code生成代码

Claude Code会：

1. 分析你的需求结构
2. 生成符合Remotion规范的TypeScript组件
3. 配置正确的动画时序（使用 useCurrentFrame() + interpolate()）
4. 设置视频元数据（fps、分辨率、时长）
5. 正确引用资源文件路径

Step 5：预览与调试

# 启动Remotion Studio进行实时预览
npx remotion studio

# 可选：渲染单帧进行快速检查
npx remotion still MyComposition --scale=0.25 --frame=30

Step 6：渲染最终视频

# 本地渲染
npx remotion render MyComposition out/video.mp4

为什么这个组合如此强大？

1. 知识传递的自动化

传统视频制作需要学习：

• 视频编辑软件的操作界面
• 时间线概念
• 关键帧动画原理
• 资源管理规范

Remotion Skill将这些专业知识编码为AI可理解的规范。Claude Code通过Skill文件学习到：

• 为什么CSS动画不能用
• 如何正确使用帧驱动动画系统
• Sequence的时间控制模式
• 资源文件的正确引用方式

知识不再需要手动传授，AI自动继承了专业经验。

2. 自然语言作为接口

传统流程：

想法 → 手动操作软件 → 时间线编辑 → 渲染 → 导出

新流程：

想法 → 自然语言描述 → Claude Code生成代码 → 自动渲染

中间的技术门槛消失了。你只需要表达意图，技术执行由AI完成。

3. 版本控制与团队协作

视频项目现在是代码项目：

• Git版本控制：每个修改都有历史记录
• 代码审查：团队可以Review视频变更
• 模板复用：一个项目可以生成无限变体
• CI/CD集成：视频渲染可以自动化

4. 参数化的强大能力

// Zod schema定义参数规范
import { z } from "zod";

export const myCompositionSchema = z.object({
  productName: z.string(),
  features: z.array(z.string()),
  primaryColor: z.string(),
  duration: z.number(),
});

// 一个模板，无限变体
const variants = [
  { productName: "Product A", features: ["Fast", "Secure", "Easy"] },
  { productName: "Product B", features: ["Light", "Smart", "Green"] },
  // ...可以生成100个不同版本
];

批量生成营销视频？自动化社交媒体内容？现在都可以用代码实现。

进阶应用：Skill的扩展能力

Remotion Skill不仅覆盖基础动画，还提供了30+专业领域的规则文档：

领域	规则文档	功能覆盖
字幕	subtitles.md	字幕样式、时间同步
音频可视化	audio-visualization.md	波形、频谱、节奏响应
3D内容	3d.md	Three.js集成、React Three Fiber
地图	maplibre.md	路线动画、飞越效果
字体	google-fonts.md / local-fonts.md	字体加载方案
转场	transitions.md	场景切换效果
文字动画	text-animations.md	排版与动效模式
AI配音	voiceover.md	ElevenLabs TTS集成
淡入淡出	transitions.md	光泄漏叠加效果
GIF同步	gifs.md	GIF与时间轴同步

每个领域都有独立的专业知识文档。当Claude Code需要处理特定任务时，会自动加载相关规则。

实际案例：几分钟内完成的视频项目

根据Medium上的实践报告：

"Plain English prompts to Claude yielded a finished clip in minutes."

这不是夸张。以下是一个实际的时间对比：

任务	传统方式	Claude Code + Remotion
学习视频编辑软件基础	数周	0分钟（AI已掌握）
制作一个产品宣传视频	数小时	数分钟
批量生成10个变体版本	数天	数分钟（代码参数化）
团队协作修改视频	反复导出导入	Git协作流程

时间压缩率达到90%以上。

未来展望：视频生产的工业化

Remotion + Claude Code的组合标志着：

1. 视频制作的工业化转型：从手工艺到自动化流水线
2. 创作者门槛的降低：技术能力不再限制创意表达
3. 批量生产的可行性：规模化视频内容成为可能
4. 版本管理的标准化：视频项目享受代码级别的协作支持

当AI助手可以理解Remotion的专业规则时，视频创作的边界被重新定义。你不再是视频编辑的操作者，而是视频创意的设计师------技术实现交给AI，你专注于内容本身。

结语

Remotion + Claude Code不仅是技术组合，更是创作范式的革新。它向世界证明：

当专业知识被编码为AI可理解的规则时，自然语言就能成为最强大的创作工具。

这不是未来。这是2026年的现实。

---

Sources:

• Remotion + Claude Code Is AMAZING For Creating Videos
• Remotion Agent Skills Official Documentation
• GitHub: Remotion Skill Specification
• Deploy Remotion Studio on VPS
• Making Videos with Code: Complete Guide
• Remotion Official Website
• Prompting videos with coding agents