用自然语言描述生成视频：基于 Remotion 与 Claude AI 的实战开发指南

在 AI 时代，视频创作的门槛正在被技术打破。你是否设想过，只需用日常语言描述你的想法，比如“为我生成一个 30 秒的产品介绍视频，要有动态标题和特性列表”，就能自动获得一段可渲染的、专业的视频代码？这不再是科幻场景，而是 Remotion 框架结合 Claude Code 等 AI 代理所带来的现实。Remotion 是一个基于 React 的开源视频框架，而 Remotion Agent Skills 则是一个为 AI 定制的“技能包”，它能让 AI 理解如何高效地生成 Remotion 代码。本文将通过一次完整的实战，带你体验如何用自然语言“编程”视频。

无论你是希望快速制作内容的产品经理、探索新工具的技术博主，还是对自动化视频生成感兴趣的开发者，这套工作流都可能为你打开一扇新的大门。

Remotion Skills：AI 驱动的视频创作革命

传统视频制作依赖 After Effects、Premiere 等软件，需要手动调整时间轴、关键帧和参数，学习成本高且迭代缓慢。Remotion 则提供了一种截然不同的思路：用 React 组件和代码来定义视频。每一帧都是通过程序计算出来的，这使得视频可以高度参数化、可复用。

而 Remotion Skills (正式名称为 Remotion Agent Skills) 则将 AI 引入了这个工作流。它本质上是一套预定义的规则和最佳实践，教导 Claude 等 AI 代理如何生成符合 Remotion 规范的代码。你不再需要逐行编写动画逻辑，只需用自然语言与 AI 对话。

为什么选择 Remotion Skills 来辅助创作？

• 极低的入门门槛：你无需精通 React 动画或 Remotion API，像聊天一样描述需求即可。
• 高效的实时迭代：AI 生成的代码可以立即在 Remotion Studio 中预览，不满意可以直接反馈，例如“标题字体太大，改小一点”，AI 能理解并修改代码。
• 产出专业可控：生成的代码支持复杂的动画、缓动函数、动态布局，最终可以导出为 MP4、GIF 等多种格式。
• 与现有 AI 工作流无缝集成：它专为 Claude、Cursor 等具备代码能力的 AI 代理设计，可以融入你已有的开发流程。

简单来说，安装 Skills 后，Claude 就“学会”了 Remotion 的开发规范，能够避开常见陷阱（如组件结构错误、性能问题），直接生成高质量、可运行的视频代码。

Remotion Skills 的完整架构流程

要更好地驾驭这个工具，理解其背后的协作架构很有帮助。整个过程可以看作一条智能流水线：

1. 用户输入层：你用自然语言描述视频需求。例如：“创建一个15秒的技术博客片头，包含标题动画、代码编辑器元素和播放按钮，风格为黑色主题配绿色代码高亮。”
2. AI 代理层 (如 Claude Code)：Claude 分析你的意图，将其转化为视频参数（时长、帧率、组件结构）。在此过程中，Claude 会调用 Remotion Skills 作为它的“知识库”，确保生成的代码符合最佳实践。
3. Skills 抽象层：这一层自动应用 Remotion 开发的各类规则，包括：
   • 时间轴配置：正确设置 duration（时长）、fps（帧率）。
   • 动画与缓动：使用 easing 函数（如 ease-in-out）让动画更平滑。
   • 组件层次结构：基于 React 构建合理的布局与组合（Composition）。
   • 视觉设计原则：遵循间距、排版、色彩搭配，保证视频美观。
4. Remotion 框架层：这是核心执行引擎，负责将 AI 生成的 React 代码渲染成连续的图像帧。它提供了 Sequence（序列）、interpolate（插值）、spring（弹簧动画）等强大的 API。
5. 视频输出层：最终，引擎将帧序列合成为 MP4、GIF 或图片序列，并支持服务器端渲染以提升生成速度。

这套架构将技术复杂性封装起来，让 AI 处理约80%的实现细节，使你能够更专注于创意本身。

环境准备：从零搭建开发环境

开始之前，请确保你的操作系统满足基本要求：安装 Node.js (v16 或更高版本) 和 npm。请注意，Remotion 对某些 Linux 发行版（如 Alpine）支持有限，需检查 glibc 版本。

详细步骤：

1. 安装 Node.js：从官网下载并安装 Node.js LTS 版本。安装后，在终端运行 node -v 验证。
2. 创建 Remotion 项目：
   • 打开终端，运行 npx create-video@latest。
   • 跟随交互式向导：输入项目名称（例如 my-video）。
   • 选择模板，新手推荐 “Hello World” 或 “Blank”。
   • 当询问 “Do you want to install the Remotion Agent Skills?” 时，输入 yes，这将自动安装 Skills 包。
   • 其余选项可按回车使用默认值。
3. 安装项目依赖：
   • 进入项目目录：cd my-video。
   • 运行 npm install 安装所有依赖包，包括 Remotion 核心库。
4. 启动 Claude Code：
   • 你需要一个 Claude（Anthropic）的付费订阅账户。
   • 根据官方指南安装 Claude CLI 或在你常用的 AI 工具中启用 Code 模式。
5. 启动 Remotion Studio (开发服务器)：
   • 在项目目录下运行 npm run dev。
   • 浏览器打开 http://localhost:3000 即可看到预览界面。
   • 如需停止服务器，在终端按 Ctrl+C。

完成以上步骤，一个集成了 AI Skills 的 Remotion 开发环境就准备好了，整个过程大约只需 10-15 分钟。

实战：创建产品展示视频

假设我们要为 “Remotion” 这个产品本身制作一个 45 秒的宣传视频。传统方式可能需要编写大量代码，而现在，我们只需与 AI 对话。

详细步骤：

1. 启动环境：

   • 进入项目目录：cd my-video。
   • 启动你常用的 AI 工具（如 Claude Desktop）并确保处于代码生成模式。
   • 在另一个终端窗口运行 npm run dev，保持开发服务器开启，并打开 http://localhost:3000。

2. 输入详细提示：
   向 Claude 提供一段结构清晰的自然语言描述。以下是一个高度详细的提示词示例：

使用 Remotion + Agent Skills 创建一个45秒的宣传介绍视频，主题是“用自然语言就能创作专业视频：Remotion Skills + Claude 的革命性功能”。

视频整体风格：现代、科技蓝紫渐变背景，干净的科技感UI界面，流畅的动画过渡，扁平化设计+微粒子效果，字体现代无衬线（建议使用Inter或类似字体），节奏明快但不匆忙，BGM轻电子未来感（如果支持添加音频提示可提及）。

视频结构严格分为以下5个场景，按顺序无缝过渡：

场景1（0-8秒）：开场震撼引入
- 画面：从黑屏淡入，出现大字标题“传统视频制作 vs AI新时代”，左侧展示传统Premiere/After Effects繁琐时间轴截图（模糊处理），右侧瞬间切换到一个人轻松打字的画面。
- 动画文字逐行出现：“过去：写代码、手动调动画、耗时几天”
- 然后爆破式出现大字：“现在：一句话，AI全自动生成！”
- 副标题淡入：“Remotion Skills 让Claude直接懂你，生成专业Remotion视频代码”

场景2（8-18秒）：核心卖点展示（最重要部分，用动态卡片或图标逐个弹出）
- 三个特性卡片依次从右侧滑入，带图标+简短文字+微动画：
  1. “自然语言创作” → 图标：对话气泡 + 键盘 → 文字：“说‘做一个30秒产品介绍视频’，AI自动写代码”
  2. “实时预览+迭代” → 图标：浏览器窗口 + 刷新箭头 → 文字：“localhost:3000 即时看到效果，继续聊天修改‘字体大一点’、‘加淡入’”
  3. “专业输出” → 图标：MP4文件 + 播放按钮 → 文字：“一键渲染高质量MP4/GIF，支持复杂动画、3D、Tailwind样式”
- 卡片下方小字总结：“基于React的Remotion框架 + 官方Agent Skills最佳实践”

场景3（18-28秒）：真实操作演示（快速剪辑感）
- 快速过场：终端输入 `npx create-video@latest` → 选择添加Skills → npm run dev → 打开浏览器 localhost:3000
- 切换到Claude对话界面：输入提示词示例（用代码框显示）：
  “创建一个30秒SaaS产品介绍视频：开场标题‘ProductX’动画 + 三个特性卡片（快速、安全、易用） + 结尾CTA‘立即试用’，蓝色科技风”
- 然后画面切换：Claude生成代码 → Remotion Studio实时预览视频播放（展示标题飞入、卡片逐个弹出、按钮闪烁）
- 文字叠加：“从想法到成品，只需几分钟聊天迭代”

场景4（28-38秒）：渲染与未来感
- 画面：点击“Render”按钮 → 进度条前进 → 输出MP4文件图标出现
- 文字飞入：“npx remotion render → 生产级MP4，仅需几分钟”
- 然后切到多个视频缩略图叠加淡出：产品Demo、技术讲解、社交媒体短视频等
- 大字强调：“适合产品演示、技术教程、营销视频、社交内容…任何人、零基础都能用！”

场景5（38-45秒）：结尾号召行动
- 画面：全屏大字“现在就试试Remotion Skills！”
- 下方出现网址：remotion.dev + “安装命令：npx skills add remotion-dev/skills”
- 最后淡出LOGO：Remotion + Claude Code + “用自然语言，创作无限可能”
- CTA文字闪烁：“立即创建你的第一个AI视频 → localhost:3000 等你来玩！”

额外要求：
- 所有文字使用中文（确保中文字体渲染正常，避免方块）
- 动画使用spring缓动或smooth easing，保持丝滑
- 颜色主调：深蓝#0f172a + 亮蓝#3b82f6 + 白色/浅灰文字
- 视频分辨率建议1920x1080，fps 30或60
- 如果支持参数化，请使用默认Composition名为IntroVideo或类似

请先生成完整的Remotion组件代码，然后我会在Remotion Studio中预览和微调。

*   Claude 会根据 Skills 的指导，生成一个或多个 `.tsx` 文件（例如 `IntroVideo.tsx`），并使用 Zod schema 来定义可配置的参数，如 `titleText`、`primaryColor` 等。

3. 预览与迭代：

   • 在浏览器的 Remotion Studio 界面左侧，选择新生成的 IntroVideo 组合。
   • 点击播放按钮进行预览。
   • 如果对效果不满意，直接给 Claude 反馈，例如：“标题字体太小，改成120px；特性卡片之间的间距增加到60px；在视频第10秒处为副标题添加一个淡入效果。”
   • Claude 会修改代码，你只需刷新浏览器即可看到更新后的效果。

4. 生成的代码示例（简化版）：
   Claude 生成的代码通常会遵循良好的结构和实践，以下是一个高度简化的示例，展示了参数定义和组件框架：

import { z } from "zod";
import { zColor } from "@remotion/zod-types";
import { AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig, Sequence } from "remotion";

export const introVideoSchema = z.object({
  titleText: z.string(),
  primaryColor: zColor(),
  // ... 其他参数
});

export const IntroVideo: React.FC<z.infer<typeof introVideoSchema>> = ({ titleText, primaryColor }) => {
  const frame = useCurrentFrame();
  const { fps, durationInFrames } = useVideoConfig();
  // 动画逻辑...
  return (
    <AbsoluteFill style={{ backgroundColor: primaryColor }}>
      {/* 场景1：开场标题 */}
      <Sequence from={0} durationInFrames={fps * 8}>
        {/* 标题动画组件 */}
      </Sequence>
      {/* 场景2：特性卡片 */}
      <Sequence from={fps * 8} durationInFrames={fps * 10}>
        {/* 卡片列表组件 */}
      </Sequence>
      {/* ... 其他场景 */}
    </AbsoluteFill>
  );
};

5. 从零到生成的全过程（另一个快速示例）：
   • 提示：“创建一个15秒技术博客片头视频。包含博客标题动画、代码编辑器元素、播放按钮。风格：程序员友好，黑色主题配绿色代码高亮。”
   • AI生成：Claude 创建 TechBlogIntro.tsx 文件。
   • 预览反馈：“标题动画太快了，延长到5秒；代码片段加入打字机效果；背景添加一个微弱的渐变光晕。”
   • 最终确认：AI 调整代码，刷新预览直至满意。

渲染和导出生产级视频

预览效果满意后，就可以将视频渲染导出为最终文件了。在浏览器中直接渲染可能较慢（取决于视频长度和复杂度），对于生产用途，建议使用命令行工具进行渲染，它支持多核并行，速度更快。

详细步骤：

1. 在 Remotion Studio 中渲染（适用于快速测试）：

   • 在 http://localhost:3000 预览界面，找到右下角的 “Render” 面板。
   • 选择你的组合（如 IntroVideo），点击 “Render Video”。
   • 设置输出格式（如 H.264 MP4）、帧范围等，开始渲染。

   

2. 使用命令行渲染（推荐，速度更快）：

   • 渲染 MP4：npx remotion render IntroVideo out/video.mp4 --codec=h264
   • 渲染 GIF：npx remotion render IntroVideo out/video.gif --codec=gif
   • 渲染图片序列：npx remotion still IntroVideo out/frame.png --sequence
   • 传入自定义属性：npx remotion render IntroVideo out/video.mp4 --props='{"titleText":"我的产品", "primaryColor":"#3b82f6"}'

命令行渲染会充分利用你的多核 CPU，大幅缩短渲染时间，适合生成高质量最终视频。

工具比较：Claude vs 其他 AI

在实际测试中，对中文的支持是一个关键考量点。以下是一些测试观察：

• Claude + 某些模型：在浏览器预览时中文显示正常，但渲染出的 MP4 文件中文字体可能变成方块。不过，在同一项目中，其他 AI 工具也能利用已安装的 Remotion Skills。
• 其他 AI 工具 + 模型A：MP4 和 GIF 渲染出的中文均为方块。
• 其他 AI 工具 + 模型B：MP4 和 GIF 渲染中文正常。

因此，推荐将 Claude + Remotion Skills 作为生成代码的首选，因为它对 Skills 的理解和运用最为精准。如果遇到最终视频的中文渲染问题，可以尝试结合其他已验证支持中文渲染的模型或工具来完成最后的导出步骤，或者检查项目中文字体的加载配置。

扩展：AI 相关主题简介

Remotion Skills 只是 AI Agent 应用的一个精彩案例。围绕 AI 辅助开发，还有许多值得探索的方向：

• Agent 开发入门：学习如何构建能自主决策、执行任务的 AI 代理。从定义用例开始，利用 Google ADK 或 OpenAI Assistants API 等工具，定义工作流并进行测试迭代。
• Agent 开发进阶：掌握链式思考提示、少样本学习、角色定义等高级技巧，甚至实现多代理协作来完成复杂任务。
• 模型微调与知识蒸馏：为了让大模型更适应你的特定任务，可以通过微调来调整其行为。知识蒸馏则可以将大模型的能力“压缩”到更小、更高效的模型中。
• AI 辅助前端开发：除了视频，AI 也在重塑前端开发流程。工具如 GitHub Copilot、Cursor 可以实时代码补全或生成整个文件；v0 能将设计描述直接转换为代码。
• AI 构建完整应用：现在已有一些平台允许你用自然语言描述一个应用 idea，AI 会自动生成前端、后端代码甚至完成部署，大大降低了应用开发的门槛。

结语：拥抱 AI 视频未来

Remotion Skills 与 Claude 的结合，实实在在地降低了专业视频创作的门槛，将自然语言到成片的过程压缩到了几分钟的对话里。它不仅仅是节省时间，更是在改变我们创作内容的方式。如果你对自动化内容生成、React 动画或 AI 集成开发感兴趣，这绝对是一个值得动手尝试的 开源实战 项目。不妨现在就按照指南创建你的第一个项目，亲自体验一下“用语言生成视频”的魔力。如果你在云栈社区有相关的心得或问题，也欢迎分享与交流。