Claude Code + Remotion 怎么做动态视频？Opus 5.5 AI 动效实战教程

2026-09-30 · AI 工具与实践

Claude Code 能不能用来做动态视频？最近比较受关注的一种玩法，是让 Claude 负责理解需求、规划分镜和编写动画代码，再通过 Remotion 完成预览与视频渲染。

它和传统的文生视频并不是同一种东西。Claude 不会直接根据一句提示词“画出”完整 MP4，而是帮助你创建和修改一个可以持续编辑的视频代码项目。

简单理解：Claude Code 负责理解需求和修改动画代码，Remotion 负责时间轴、画面预览和最终视频渲染。

本文从零开始讲清楚 Claude Code + Remotion 的实际工作流程，包括环境准备、项目创建、分镜、提示词、素材、预览、修改以及最终导出。

本文你会学到：
Claude Code 和 Remotion 分别负责什么、如何创建视频项目、怎样让 Claude 先做分镜再写动画，以及 Windows、Mac、费用和常见问题需要注意什么。

本文信息更新于 2026 年 9 月。AI 模型、安装方式、套餐和软件功能可能随时间调整。

Claude Code + Remotion 做视频是什么原理？

传统 AI 视频工具通常是输入文字或图片，再由模型直接生成一段视频。

Claude Code + Remotion 的逻辑不同。

你先告诉 Claude 视频时长、画面比例、真实素材、需要表达的信息、文字如何出现以及镜头如何切换。

Claude 再根据这些要求创建或修改 React、JavaScript、CSS 等代码，并通过 Remotion 的时间轴控制动画。

最后再由 Remotion 将项目渲染为视频。

需求与素材 → Claude Code → 动画代码 → Remotion 预览 → 修改 → 渲染视频

这种方式最大的优势不是“一句话生成视频”，而是最终得到的仍然是一个可以继续修改和重复使用的代码项目。

以后要更换标题、Logo、产品截图、颜色或者数据，不一定需要重新制作整条视频。

一定要使用 Claude Opus 5.5 吗？

不一定。

本文参考案例使用 Claude Opus 5.5，但真正的核心并不是某一个固定模型，而是：

Coding Agent + Remotion

Opus 5.5 比较适合复杂编码和长时间 Agent 工作，但 Remotion 本身并不要求必须使用 Opus 5.5。

Claude Code 可以配合不同 Claude 模型，Remotion 的 Agent Skills 也可以用于其他能够操作代码项目的 Coding Agent。

如果只是修改文字、颜色和简单动画，没有必要每一步都追求最高规格模型；如果项目包含大量场景、素材和复杂修改，再考虑使用更强的模型会更合理。

开始之前需要准备什么？

工具	主要用途	是否必须
Claude Code	读取项目、生成代码、修改动画和运行命令	推荐
Remotion	使用 React 制作、预览和渲染视频	必须
Node.js	运行 Remotion、npm 和 npx 工具	必须
参考图片 / 视频	帮助 AI 理解构图、节奏和视觉方向	推荐
产品素材	Logo、UI 截图、字体和产品图片等	按项目需要
Playwright	自动打开网页并获取页面截图	可选
FFmpeg	处理部分视频、音频和媒体文件	按需要安装

第一次尝试不用一次安装所有工具。先准备好 Claude Code、Node.js 和 Remotion，就可以把最基础的制作流程跑起来。

第一步：安装 Claude Code

Claude Code 的安装方式已经发生过变化，因此如果看到旧教程里的 npm 全局安装命令，不建议直接照搬。

目前官方优先推荐原生安装方式。

Mac 安装

在 Mac 终端运行：

curl -fsSL https://claude.ai/install.sh | bash

安装完成后重新打开终端，检查版本：

claude --version

如果已经使用 Homebrew，也可以通过 Homebrew 安装：

brew install --cask claude-code

Windows 安装

Windows 现在可以原生运行 Claude Code，不一定需要 WSL。

PowerShell 可以使用：

irm https://claude.ai/install.ps1 | iex

如果电脑支持 WinGet，也可以使用：

winget install Anthropic.ClaudeCode

安装完成后重新打开终端：

claude --version

如果需要检查 Claude Code 的安装与配置状态：

claude doctor

Windows 用户注意：
Claude Code 可以直接在 PowerShell 或 CMD 中运行。Git for Windows 不是运行 Claude Code 的硬性要求，但安装后可以使用 Git Bash；如果项目本身依赖 Linux 环境，也可以选择 WSL。

安装完成后，在需要工作的项目目录运行：

claude

按照提示完成账户登录即可。

第二步：创建 Remotion 视频项目

先确认电脑已经能够正常使用 Node.js 和 npm：

node -v
npm -v

然后创建一个空白 Remotion 项目：

npx create-video@latest --yes --blank motion-demo
cd motion-demo
npm i

接着安装 Remotion 的 Agent Skills：

npx remotion skills add

启动 Remotion Studio：

npm run dev

浏览器中会打开 Remotion Studio，可以查看视频画面和时间轴。

接下来再打开一个终端，进入同一个项目：

cd motion-demo
claude

这时 Claude Code 就可以读取项目文件，并开始创建或修改视频。

第三步：不要第一句话就让 Claude“做一个高级视频”

这是整个工作流中最容易踩坑的地方之一。

例如直接输入：

帮我制作一条非常高级的科技感产品宣传视频。

Claude 虽然可以开始制作，但它并不知道你真正想要什么。

最后很容易出现常见的 AI 模板感：深色渐变、紫蓝光效、所有标题居中、大量淡入淡出，再放一个 Logo 收尾。

更稳定的办法是：

先让 Claude 做分镜，再让它写动画。

先确定“什么时候出现什么内容”，再处理“这些内容应该怎么动”，后续修改会容易很多。

第四步：给 Claude 一份可以真正执行的视频需求

下面是一份适合产品动态视频的基础提示词：

你是这个项目的动态设计师和前端动画工程师。

我要制作一条 20 秒的产品动态宣传视频。

目标：
让第一次看到视频的人快速理解产品是什么，
整体简洁、专业、有高级感。

画面规格：
- 20 秒
- 1080 × 1920
- 9:16
- 30fps

视觉方向：
- 深色背景
- 简洁现代
- 少量蓝紫色强调
- 不要廉价赛博朋克
- 不要所有内容都居中
- 不要大量无意义粒子
- 不要所有场景都只使用淡入淡出

素材：
- ./assets/logo.png
- ./assets/product-home.png
- ./assets/product-detail.png

要求：
1. 使用真实产品截图，不要重新想象产品 UI。
2. 前 2 秒出现最重要的信息。
3. 每个场景只表达一个重点。
4. 手机屏幕观看时文字必须清楚。
5. 场景切换使用自然的缩放、位移或弹性动画。
6. 最后一幕显示 Logo 和简短 CTA。

先不要开始写动画代码。

先创建：
docs/storyboard.md

内容包括：
- 时间轴
- 每个镜头的内容
- 屏幕文字
- 动画方式
- 使用素材
- 场景切换方式

完成分镜后再开始制作。

这类提示词真正有用的地方并不是“足够长”，而是把“高级一点”“科技一点”这种模糊要求，变成 Claude 可以实际执行的规则。

第五步：参考图和真实素材比堆形容词更重要

如果希望视频有明确的视觉方向，可以提前建立两个文件夹：

assets/
refs/

assets 用来存放自己的素材，例如：

Logo
产品截图
网站页面
字体
产品图片
需要展示的数据

refs 则用于存放你希望参考的视觉图片或视频。

然后告诉 Claude：

请分析 ./refs 中的参考素材。

我希望借鉴：
- 信息层级
- 字体大小关系
- 留白方式
- 运镜节奏
- 动画速度
- 构图方式

不要复制：
- 原视频文字
- Logo
- 产品
- 人物
- 品牌元素

先总结为 docs/style-guide.md，
再按照这个视觉语言制作我的视频。

相比不断增加“高级、电影感、未来感、专业感”等形容词，参考素材通常能给 AI 更明确的视觉边界。

产品类视频尤其要注意：尽量使用真实产品截图。让 AI 负责构图和动画，而不是让它凭空设计一套不存在的产品界面。

第六步：先在 Remotion Studio 预览，不要反复渲染整条视频

制作代码视频时，没有必要每修改一个标题就重新输出完整 MP4。

更高效的方法，是先在 Remotion Studio 中检查关键画面和时间轴。

重点看下面几个问题：

前 2 秒是否已经进入主题；
手机屏幕下文字是否足够清楚；
标题和产品 UI 有没有重叠；
镜头停留时间是否太长；
所有场景是不是使用了几乎一样的动画；
Logo、颜色和产品截图有没有错误。

也可以直接让 Claude 自己检查：

检查当前视频。

重点检查：
1. 前 2 秒是否快速进入主题；
2. 手机屏幕下文字是否清晰；
3. 有没有文字和图片重叠；
4. 有没有节奏明显过慢的场景；
5. 动画是否过度重复；
6. 有没有明显模板感；
7. 产品截图和品牌元素是否正确。

先列出最严重的 3 个问题，
然后只修改这些问题。

不要重新制作整条视频。

这种“制作 → 检查 → 修改”的方式，通常比感觉效果不好就全部重做更稳定。

第七步：怎么导出最终视频？

确认画面和时间轴没有明显问题后，就可以开始正式渲染。

npx remotion render

如果项目中存在多个 Composition，可以选择需要输出的项目。

如果以后需要同时制作多个平台版本，最好一开始就把尺寸和布局做成可调整参数，例如：

9:16：Shorts、Reels 和竖版短视频；
1:1：社交媒体方形内容；
16:9：YouTube、网站视频和演示画面。

不要等横版视频全部完成后，再简单裁掉左右两边做成竖版，否则标题和产品 UI 很容易被裁掉。

Windows 和 Mac 有什么区别？

项目	Mac	Windows
Claude Code	支持原生运行	支持原生运行，也可以使用 WSL
常用终端	Terminal / iTerm	PowerShell / CMD / Git Bash / WSL
Node.js	正常安装即可	正常安装即可
Remotion	可正常使用	可正常使用
路径示例	/Users/name/project	C:\Users\name\project
主要注意点	Shell 命令通常比较接近开发文档示例	PowerShell、CMD、Git Bash 的语法存在少量差异

普通 Windows 用户没有必要为了 Claude Code 专门学习 WSL。

只有当项目本身依赖 Linux 工具链，或者已经习惯 WSL 开发环境时，再使用 WSL 会更合适。

Claude Code + Remotion 免费吗？

需要把 Claude Code、Claude 模型和 Remotion 分开来看。

Claude Code

截至 2026 年 9 月，Claude Code 需要支持 Claude Code 的 Claude 付费账户或 Console 账户，普通 Claude 免费方案并不包含 Claude Code 使用权限。

具体套餐、使用额度和支持的模型可能继续调整，因此建议以 Anthropic 当时的账户说明为准。

Claude Opus 5.5

Opus 5.5 属于付费模型，也可以通过 Claude API 等方式使用。

如果通过 API 调用，会按照实际 Token 使用量产生费用。由于模型价格和套餐可能发生变化，长期教程没有必要把具体价格固定写死。

Remotion

截至 2026 年 9 月，个人用户以及总人数不超过 3 人的组织可以使用 Remotion Free License，包括商业用途。

4 人及以上的组织，以及部分企业协作和自动化场景，需要按照 Remotion 当前许可规则选择对应方案。

简单来说：Remotion 本地制作本身不等于必须付费，但 Claude Code 和所使用的 Claude 模型通常涉及账户套餐或 API 使用成本。

常见问题

Claude 为什么总做成紫色科技风？

通常不是模型只能做这种风格，而是你给出的视觉信息太少。

只写“高级、未来、科技感”时，模型容易回到常见设计模式。更有效的方法是提供参考图，同时明确哪些元素不要出现。

为什么生成的视频文字会重叠？

常见原因是一个场景同时运行的元素太多，或者前一个元素还没有离场，下一个元素已经进入。

可以要求 Claude 明确每个元素的进入时间、停留时间、离场时间和安全区域，再重新检查时间轴。

为什么重新渲染后动画不完全一样？

如果项目使用随机数、实时系统时间或者依赖非确定状态的动画，同一个时间点可能得到不同结果。

需要稳定重复渲染的视频，应尽量使用确定性的时间轴和固定输入数据。

一定要会 React 才能使用 Remotion 吗？

不一定。

使用 Claude Code 后，大部分代码可以由 AI 创建和修改，普通用户主要负责提出要求、准备素材和检查结果。

不过如果懂一些 HTML、CSS、JavaScript 或 React，在出现报错和布局问题时会更容易定位原因。

Claude Code 能直接生成 MP4 吗？

严格来说，Claude Code 主要负责生成、读取和修改项目代码。

真正把代码渲染为视频的是 Remotion 以及相关媒体工具。

更准确的理解：Claude Code 是 AI 编程与动态设计助手，Remotion 才是实际的视频制作与渲染框架。

Claude Code + Remotion 适合做哪些视频？

它比较适合结构明确、需要反复修改或者可以模板化的视频，例如产品介绍、App 功能展示、网站 UI 演示、数据动画、排行榜、教程动画和品牌动态内容。

如果目标是电影级真人镜头、复杂人物表演或者纯文生视频，则更适合使用专门的生成式视频模型。

新手最简单的制作流程

准备素材
↓
创建 Remotion 项目
↓
用 Claude Code 打开项目
↓
确定视频目标和尺寸
↓
提供参考风格
↓
先生成分镜
↓
制作动画
↓
Remotion Studio 预览
↓
修改明显问题
↓
最终渲染 MP4

第一次使用时，没有必要直接挑战一分钟甚至更长的视频。

先完成一条 10～20 秒 的短视频，把“分镜 → 制作 → 预览 → 修改 → 渲染”这条链路跑通，再考虑批量生成、多尺寸输出和更复杂的自动化。

总结

Claude Code + Remotion 真正有价值的地方，并不是“输入一句 Prompt 就自动得到一条完美视频”。

它更像是把过去需要人工完成的分镜规划、动画代码、时间轴调整和重复修改，交给 Coding Agent 辅助完成。

最终得到的也不是一个无法继续编辑的黑盒视频，而是一个能够继续修改和重复利用的视频代码项目。

对于产品宣传片、UI 动效、软件介绍、数据动画和模板化短视频，这种方式尤其适合需要精确控制画面和反复修改的场景。

第一次尝试时，先把“分镜 → 制作 → 预览 → 修改 → 渲染”这一条最小工作流跑通，比寻找一份几千字的万能 Prompt 更重要。