如何用 Claude Code 做视频（分步教程，2026）
可以。Claude Code 能做视频：它把动画写成代码，并在你自己的电脑上渲染出 MP4。常见的做法是 Remotion 的 Agent Skills、HyperFrames，或者一个 Skill，例如 Motion Skills 里能规划、配乐并渲染整支片子的完整版 Skill。Claude Code 包含在 Claude Pro 和 Max 中，不需要 Claude Motion；Claude Motion 是 Claude 中单独的 beta 功能，面向 Team 和 Enterprise 套餐。
下文包括：四种做法的对比，用免费的 Motion Director 从安装到拿到 MP4 的分步过程，以及一支真实片子从需求说明到最后一次修改的完整经过。
已于 2026 年 10 月 29 日对照 Claude 的价格页、Claude Code 快速入门、Remotion 的编程 Agent 指南和 HyperFrames 的 README 核实。
Claude Code 做视频的四种方式
| 做法 | 你要写什么 | 得到什么 | 准备工作 | 费用 |
|---|---|---|---|---|
| 给 Opus 一条提示词 | 什么都不用写；Claude 写出一个 HTML 动画 | 一个在浏览器中播放动画的页面；录屏或渲染需要自己完成 | 无 | 你的 Claude 套餐 |
| Remotion + 它的 Agent Skills | React 组件，由 Claude 编写 | 一个 MP4，来自一个由你保存的 Remotion 项目 | npx create-video，然后 npx remotion skills add |
Remotion 自己的许可证（见其许可证页面） |
| HyperFrames | HTML、CSS 和 GSAP，由 Claude 编写 | 一个 MP4，在无头 Chrome 中用 FFmpeg 渲染 | npx hyperframes init，或它的 Claude Code 插件 |
开源（Apache 2.0） |
| Motion Skills 完整版 Skill | 你的素材和一句话 | 一整支片子：方向、原创配乐、检查和 MP4 | 下文的一句话安装 | Motion Director 不收费；每个 Skill $4.90，或购买方案 |
给 Opus 一条提示词是看看 Claude 能做出什么动画的最快方式：让它做「一个 15 秒的应用动画标题，做成一个 HTML 文件」，然后打开即可。每次运行的结果都不一样，转成 MP4 也要自己来。我们的 Claude Motion 提示词页收录了大家分享的、正好用于这种做法的提示词。
Remotion 是用 React 做视频的成熟框架。按照它的编程 Agent 指南，先用 npx create-video --yes --blank my-video 创建项目，用 npx remotion skills add 添加它的 Agent Skills，用 npm run dev 预览，再在第二个终端中启动 Claude Code。它适合想完全掌控每个组件的开发者。在工作中使用之前，请先查看 Remotion 的许可证。 它的 Agent 技能和完整版 Skill 有什么不同，见Remotion 的 Agent 技能与 Motion Skills 对比。
HyperFrames 来自 HeyGen，是一个开源框架，可以把「HTML、CSS、媒体和可按时间定位的动画」转成 MP4 文件。可以把它作为 Claude Code 插件安装，也可以用 npx hyperframes init my-video 创建项目，再用 npx hyperframes render 渲染。我们早期的动效模板（现在作为示例保留）就是基于它构建的。两个引擎的对比见 HyperFrames 与 Remotion 对比。
Motion Skills 完整版 Skill 由你的 Agent 加载。你不用写组件：把项目、笔记、数据或脚本交给它，说明片子的用途即可。它会选定方向并给你看一张关键帧，把片子写成代码，创作配乐，检查每一帧，再用我们的开源引擎 motion-skills（mo）渲染出 MP4。本指南接下来都采用这种做法。
需要准备什么
- Claude Code，需要 Claude Pro 或 Max（Team、Enterprise 或 Claude Console 账号也可以；Free 套餐没有）。
- Node.js 22 或更新版本。
- FFmpeg（macOS 上运行
brew install ffmpeg）。 - **Google Chrome。**渲染器会以无头模式驱动它。
引擎第一次渲染时会通过 npx 自行安装，不需要任何 API 密钥。Skill 的第一步 mo doctor 会检查这三项，并指出缺了什么。Skill 存放在哪里，详见如何安装 Agent Skills。
用 Motion Director 分步操作
Motion Director 免费，用 Google 登录即可使用。它可以做一支 10–20 秒、任意类型的短片：发布预告、一个落地有力的数字、讲清一个概念，或者一个竖屏开场钩子。
1. 用一句话安装
在某个文件夹（你的项目，或一个空文件夹）中打开 Claude Code，粘贴：
Read https://claude-motion.com/skills/motion-director/install.md and follow it to install the "motion-director" skill, then make a first video with it.
Claude Code 会读取这份指南并运行一条命令：npx motion-skills install motion-director。第一次运行时，浏览器会打开一个页面：用 Google 登录，并确认终端中显示的验证码。更想自己在终端里操作？每个 Skill 页面都提供了适用于 Claude Code、Codex、Cursor 和 Gemini CLI 的命令：点击复制安装提示词，再打开命令行安装标签页。
2. 把素材交给它
说明片子讲什么，并指出它该用哪些素材：所在的代码仓库、README、CHANGELOG、电子表格、链接或脚本。例如：
用 README.md 和 CHANGELOG.md 中的 2.0 更新说明，为这个应用做一支 15 秒的发布预告片。16:9，放在我们的网站上。
Skill 会新建一个 sources.md：列出片中可能出现的每一句文字、每个数字和名称，并注明来自哪个文件或 URL。它只问会改变片子的问题（在哪里播放、时长、你的品牌），并写好默认答案。还没有素材？它会使用 Skill 自带的一份示例 changelog，并说明这一点。
3. 选一个方向
动手之前，Skill 会为你的片子提出三个方向，每个方向一句话说明，再配一张按它自己的风格和配色做出的画面（Motion Director 可选动态文字、数据故事或白板）。你选一个，也可以混搭（“用第二个的配色、第一个的构图”）；如果你说过“直接做”，它会挑最有力的一个，并告诉你选了哪个。接着它为这个方向写一份简短的分镜说明：开场钩子何时出现，核心信息何时落在最强的节拍上，以及结尾的定格。这一步就是分镜检查：改一张画面比改一支做好的片子快得多。
4. 让它制作、检查并配乐
它把片子写成一个 index.html（HTML 和 GSAP），然后检查自己的成果：生成整支片子的缩略图总览，用 mo check 查错误，用 mo audit 确保屏幕上的每一行文字都有来源，还会截取关键时刻的静帧，逐一打开查看并修正。它会写一段原创配乐，为你的主题配上一个简短的动机。它听不到声音，所以会告诉你它写了什么。
5. 提出修改
看渲染结果，用平常的话说出要改的地方：「logo 出现得太晚」「用我们的绿色」「最后一句停留久一点」。Skill 会在对应的位置和时间点做最小的改动，然后重新渲染。也可以运行 mo studio 打开实时预览，按 C，点击你指的那一帧，直接在那里写下修改。
6. 拿到 MP4
最后一次渲染的成片会放进你的项目，附上路径、时长和格式，一句关于风格和音乐的说明，以及一份 handoff.md。想做这类片子的完整版本（30–90 秒的发布片、讲解片或数据视频）时，对应片型的完整版 Skill 可以在同一个文件夹中接着做。
真实案例：「Claude Code 三步上手」
这支 29 秒的片子用我们的功能演示片 Skill 制作。它的工作方式与 Motion Director 相同，只是片子更长、风格更多。
安装、在项目里启动、问第一个问题：按官方 quickstart，版本号是真实输出。
功能演示片 示例16:9 · 29 秒
非官方演示，并非 Anthropic 制作或认可。
需求说明。「一支 30 秒、16:9 的新手引导演示片，面向使用 Claude Pro 或 Max 套餐、但从未用过 Claude Code 的人，在我们的网站和入门邮件中播放：安装它，在项目中启动它，向它提一个问题。只使用官方快速入门；不要编造命令或输出。」素材是 Claude Code 公开的快速入门和安装设置页面，加上一次真实运行 claude --version 的结果。
**方向。**Skill 提出了三个：一个大终端配步骤导轨；一条横贯多块彩色区域、没有尽头的命令行；以及一张展示每条命令影响范围的系统图。它选了终端：「信息本身是一个工作流程，界面是终端，所以最有力的证明就是把真实命令用大字打出来」。它也提前点明了风险：没有真实的会话截图可用，所以那个画面必须让人看出是简化过的，片中标注了「布局已简化」。
**计划。**一份按小节编排的分镜说明，速度 112 BPM：安装、启动、提问，然后在高潮处给出示例回答，最后用安装命令作结尾卡。屏幕上的每个字都能在 sources.md 中追溯到快速入门；版本号那一行是真实输出。
**修改。**第一次渲染后，mo qa 显示第 1 步之后有 3 秒停顿、第 2 步之后有 2 秒停顿，都没有必要。第 2、3 步被提前，高潮也提前了一个小节，所以片子是 29 秒，而不是 30 秒。
这支片子的源文件，包括方向、分镜说明和素材来源，作为示例随功能演示片 Skill 一起提供。
为你的片型选一个完整版 Skill
Motion Director 有意限制在 20 秒以内。要做完整的片子，每个片型都有自己的完整版 Skill，并内置了相应的风格：
- **发布推广：**发布片、功能演示、对比片、品牌介绍、活动宣传、应用商店预览。
- **教学讲解：**讲解片、课程、论文讲解、时间线、数学讲解。
- **社媒创作：**竖屏短视频、口播视频、标题与转场、社媒卡片。
- **工作汇报：**数据视频、团队进展、会话回放、带旁白的演示文稿、投资人更新。
每个完整版 Skill 售价 $4.90，也可以通过方案获得全部 Skill：每月 $9.90、每年 $79，或一次性 $169 购买创始终身通行证。见价格。
故障排查
- **「FFmpeg not found」或「Chrome not found」。**运行
mo doctor（npx --yes motion-skills doctor），它会指出缺了什么。macOS 上运行brew install ffmpeg；Google Chrome 请从 Google 官网安装。 - **Claude Code 没有使用这个 Skill。**安装后开启一个新的 Claude Code 会话，让它读取新的 Skill，然后再提一次要求，并点名：「使用 motion-director 这个 Skill」。
- **沙盒拦截了浏览器或本地服务器。**Skill 的画面检查两者都需要。Claude Code 询问时请批准，不要让它跳过检查。
- **片子超过 20 秒。**Motion Director 会做出最精彩的 20 秒，并告诉你哪个完整版 Skill 能做完整的片子。
不用 Claude Code？
同样的 Skill 也能在 Codex、Cursor 和 Gemini CLI 中使用，这也是 Claude Free 套餐用户的做法。各个 Agent 把 Skill 放在哪里，见如何安装 Agent Skills。如果你要找的是 Claude Motion 本身，请看 Claude Motion 不在你的套餐里？。 这几个 Agent 的分步说明和各自读取的文件夹，见用 Codex、Cursor 或 Gemini CLI 做视频。
常见问题
Claude Code 能做视频吗？
能。Claude Code 可以把动画写成代码，并在你的电脑上渲染成 MP4。常见的做法是 Remotion 的 Agent Skills（React）、HyperFrames（HTML 和 GSAP），或者一个 Skill，例如 Motion Skills 里能规划、配乐并渲染整支片子的完整版 Skill。Claude Code 包含在 Claude Pro 和 Max 中。
用 Claude 做视频需要 Claude Motion 吗？
不需要。Claude Motion 是 Claude 中单独的 beta 功能，面向 Team 和 Enterprise 套餐。Pro 或 Max 上的 Claude Code 配合一个 Skill，就能做出同类的代码动画，并在你自己的电脑上渲染。
需要安装什么？
Node.js 22 或更新版本、FFmpeg 和 Google Chrome。motion-skills 引擎第一次渲染时会通过 npx 自行安装，不需要任何 API 密钥。
免费吗？
Motion Director 用 Google 登录即可免费使用，可以做 10–20 秒的片子。每个完整版 Skill 售价 $4.90，也可以通过方案获得全部 Skill：每月 $9.90、每年 $79，或一次性 $169。不用积分，唯一的用量是你 Claude 套餐本身的用量。
片子会离开我的电脑吗？
片子在你的电脑上制作和渲染。渲染完成时，引擎会告诉 claude-motion.com 是哪个 Skill 完成了渲染、是否成功，不涉及片子的任何内容；设置 MOTION_SKILLS_TELEMETRY=0 即可关闭。
参考来源
- Anthropic，Claude pricing（哪些套餐包含 Claude Code）
- Anthropic，Claude Code quickstart
- Remotion，Coding agents
- HeyGen，HyperFrames on GitHub
本指南为独立内容，与 Anthropic、Remotion 或 HeyGen 均无关联。Claude 是 Anthropic, PBC 的商标。内容已于 2026 年 10 月 29 日对照上述页面核实。