Opus 做视频教程：用 Claude Code + Remotion / HyperFrames 写代码出片（2026）

先说清楚：Opus 本身不生成视频

最近大家说的「Opus 做视频」「Opus 5.5 做动效」，指的是一套写代码出片的做法：

1. 在 Claude Code 里选用 Claude Opus 5.5，用中文描述你要的画面；
2. Opus 写出动画代码：用 Remotion 就是 React 代码，用 HyperFrames 就是 HTML、CSS 加动画；
3. 由 Remotion 或 HyperFrames 把代码逐帧渲染成 MP4。

Anthropic 官方模型文档写明，当前所有 Claude 模型都是「文本和图片输入、文本输出」（Models overview，查阅日期：2026-10-21）。所以 Opus 不会直接吐出一段视频，它交付的是能渲染成视频的代码。好处是每一帧都能改：改文案、改时长、换配色，改代码重新渲染就行。

阅读说明

• 本页步骤摘自 Anthropic、Remotion、HyperFrames 官方文档，命令可能随版本更新，以文中链接的官方原文为准。
• 本页不写价格。订阅和商用许可以官方页面为准。

Remotion 还是 HyperFrames？

两个都是「代码 → 视频」的渲染框架，Claude Code 都能用：

	Remotion	HyperFrames
画面怎么写	React 组件	HTML + CSS + 可按帧定位（seekable）的动画
给编程助手的技能	官方 Agent Skills	官方插件 / Skills
本地预览	npm run dev（Remotion Studio）	npx hyperframes preview
渲染	Studio 里点 Render，或 npx remotion render	npx hyperframes render
许可	个人和小团队免费，一定规模的营利公司需公司许可（官方 License）	Apache-2.0 开源（GitHub）
前提	Node.js	Node.js 22+、npm、FFmpeg

以上信息来自 Remotion · Claude Code、Remotion License、HyperFrames 插件安装、HyperFrames 快速开始（查阅日期：2026-10-21）。

怎么选：熟悉 React、想要成熟生态，选 Remotion；不想碰 React，或者在公司里用、不想先处理 Remotion 许可，可以先试 HyperFrames。下面先讲 Remotion，再讲 HyperFrames 的差异部分。

准备工作

1. Node.js：两个框架都需要。HyperFrames 要求 Node.js 22 以上，并且渲染要用 FFmpeg。
2. Claude Code：按 Anthropic 官方 Quickstart，需要 Claude 订阅（Pro、Max、Team 或 Enterprise）、Claude Console 账号，或通过受支持的云服务商使用（查阅日期：2026-10-21）。Remotion 文档也提醒，大多数编程助手需要付费订阅。
3. 商用许可：用 Remotion 做商用视频前，先按 官方 License 确认自己属于免费范围还是需要公司许可。

第 1 步：安装 Claude Code

按 Claude Code 官方 Quickstart（查阅日期：2026-10-21）：

macOS、Linux、WSL：

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

Windows PowerShell：

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

官方页面也给了 Homebrew、WinGet 等装法。装好后新开一个终端窗口，运行：

claude --version

能打印出版本号就说明装好了。如果提示找不到 claude，说明安装目录还不在 PATH 里，按官方 安装排错 处理。

第 2 步：新建一个空白 Remotion 项目

按 Remotion · Claude Code（查阅日期：2026-10-21）：

npx create-video --yes --blank my-video
cd my-video

第 3 步：装上 Remotion Agent Skills

Skills 是 Remotion 官方维护的「最佳实践说明」，编程助手读了以后，写出的 Remotion 代码更规范。在项目目录里运行：

npx remotion skills add

Remotion 的 Agent Skills 文档 也给了另一种装法：npx skills add remotion-dev/skills（查阅日期：2026-10-21）。

文档列出的部分 Skill：

Skill	用途
/remotion-best-practices	总入口，不确定用哪个时先用它
/remotion-create	新建项目或 composition（视频片段）
/remotion-markup	写 Remotion React 代码：动画、布局、字体、音频、时序等
/remotion-studio	打开 Studio 预览
/remotion-render	渲染成视频或静帧
/remotion-captions	字幕
/remotion-maps	地图动画：路线、标记、地理讲解

Skill 是什么、怎么调用，见 Anthropic 官方 Claude Code Skills 文档：Claude 会在相关时自动使用 Skill，你也可以输入 /skill 名 直接调用（查阅日期：2026-10-21）。

第 4 步：打开预览

在项目目录里运行：

npm run dev

这会启动 Remotion Studio，在浏览器里实时预览。保持这个终端开着。

第 5 步：启动 Claude Code，切到 Opus，用提示做视频

另开一个终端，进入同一个项目目录：

cd my-video
claude

在 Claude Code 里用 /model 切换模型（Claude Code 官方文档，查阅日期：2026-10-21）。Anthropic 于 2026-09-22 发布 Claude Opus 5.5（Introducing Claude Opus 5.5，查阅日期：2026-10-21），官方文章讲的是编程和 agent 能力，没有说它能直接生成视频，视频仍然由 Remotion 渲染。

然后用自然语言描述你要的视频。下面是一个提示写法示例（仅示意结构）：

在这个 Remotion 项目里做一支 15 秒、1080x1920 竖屏的产品介绍视频：
1. 0–3 秒：黑底，产品名从中间淡入；
2. 3–10 秒：依次出现三条卖点文字，每条从左侧滑入；
3. 10–15 秒：结尾显示网址和 Logo（Logo 文件在 public/logo.png）。
字体用无衬线体，主色 #10B981。先告诉我你打算建哪些文件，再开始写。

写提示的建议：

• 写清时长、尺寸、每一段的画面和时间点，比「做个酷炫的视频」好改得多。
• 素材（图片、Logo、音乐）先放进项目，在提示里写出路径。
• 一次只改一两处，改完在 Studio 里看效果再继续。
• 提示和 Agent 工作流的通用写法，见本站 Claude Opus 5 提示工程。

第 6 步：渲染成 MP4

按 Remotion 渲染文档 和 CLI render 文档（查阅日期：2026-10-21）：

• 在 Studio 里：点「Render」按钮，选好设置后确认「Render video」。
• 用命令行：

npx remotion render

不写 composition ID 时会让你选择；不写输出路径时，文件会放进 out 文件夹。不指定 --codec 时默认用 H.264 编码。也可以直接让 Claude Code 调 /remotion-render 帮你渲染。

换成 HyperFrames：差异部分

按 HyperFrames 插件安装 和 快速开始（查阅日期：2026-10-21）：

1. 在终端里给 Claude Code 装官方插件：

claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes

2. 新开一个 Claude Code 会话，或者运行 /reload-plugins；
3. 用 /hyperframes:hyperframes 开头提需求，例如「Using /hyperframes:hyperframes, make a 5-second title card that says "Hello world".」；
4. 完成后会留下一个可编辑的项目文件夹并打开本地预览，之后可以在项目里用 npx hyperframes preview 重新打开预览、用 npx hyperframes render 渲染。

不用插件也可以手动起项目：npx hyperframes init my-video，再 npx hyperframes preview 和 npx hyperframes render（GitHub README）。

常见卡点

下面几条来自近一周 X 上做「Opus 视频」的用户反复提到的问题，解法都按官方文档核对过（查阅日期：2026-10-21）。

1. 以为 Opus 能一句话直接出片 Opus 输出的是代码，不是像素（见上文 Models overview）。第一版通常要几轮修改，HyperFrames 文档也写明首版「不是保证可用的成片」，要自己检查故事、事实、文字可读性和声音。

2. 公司用 Remotion，担心许可 按 Remotion License：个人、最多 3 名员工的营利组织、非营利组织，以及还在评估、尚未商用的情况可以免费使用（含商用出片）；超出这个范围需要公司许可。不想先处理许可，可以用 Apache-2.0 的 HyperFrames。

3. 渲染时电脑卡死或渲染崩溃 本地渲染时，Remotion 会并行打开多个浏览器标签页截帧。官方说明并发过高收益递减，还可能拖垮机器、让渲染崩溃（Concurrency）。可以在 npx remotion render 后面加 --concurrency 调低并发；内存不够时还可以加 --disallow-parallel-encoding（CLI render）。

4. 额度用得很快 做视频要反复渲染、返工，会话很容易拉长。按 Claude Code 官方 省用量建议：

• 用 /usage 看用量花在哪里；
• 复杂任务先按 Shift+Tab 切到计划模式，先定分镜再写代码；
• 方向跑偏时马上按 Esc，用 /rewind 退回；
• 换一支新视频时用 /clear 开新会话；
• 简单修改不一定要用 Opus，可以用 /model 换成 Sonnet。

注意：如果提示的是会话或每周上限（session limit / weekly limit），官方说明这时换模型也没用，只能等重置或按官方说明开通 usage credits。另外，按 Claude Code 更新日志 2.1.304，Pro 和 Max 用户恢复闲置很久的对话前，会提示这样做会占用不少 5 小时额度，可以改成开新会话再让 Claude 查阅旧会话。

5. 装了 HyperFrames，Claude 却没用上 按 HyperFrames 插件文档：装完要新开会话或运行 /reload-plugins；可以用 claude plugin details hyperframes 确认插件里有 hyperframes、general-video、media-use。如果用的是 npx skills add heygen-com/hyperframes，按 GitHub README 的说法，选择器默认什么都没勾，要手动勾「Core Skills」。

6. 装了 Remotion Skills，Claude 好像没用上 按 Claude Code Skills 文档：先问 Claude「What skills are available?」，看 Skill 有没有列出来；再直接输入 /remotion-best-practices 调用；仍不行，用 claude --debug 启动，在日志里查原因。

7. 预览打不开或画面不更新 确认 npm run dev（或 npx hyperframes preview）那个终端还在运行，而且 Claude Code 是在同一个项目目录里启动的。

案例线索（X 上的讨论）

想看别人做出来的效果，可以看这几条讨论。它们只是案例线索，具体步骤以上面的官方文档为准：

• 一份按「技能、动画、3D、素材、声音、导出」分层整理的中文工具清单
• 一篇介绍 HyperFrames「写 HTML 渲染成 MP4」思路的中文帖
• 一条关于 Claude Code 渲染 Remotion 时调低并发的讨论

参考来源（官方）

• Anthropic · Models overview：https://platform.claude.com/docs/en/about-claude/models/overview（查阅日期：2026-10-21）
• Anthropic · Introducing Claude Opus 5.5：https://www.anthropic.com/news/claude-opus-5-5（查阅日期：2026-10-21）
• Claude Code · Quickstart：https://code.claude.com/docs/en/quickstart（查阅日期：2026-10-21）
• Claude Code · Troubleshoot installation：https://code.claude.com/docs/en/troubleshoot-install（查阅日期：2026-10-21）
• Claude Code · Skills：https://code.claude.com/docs/en/skills（查阅日期：2026-10-21）
• Claude Code · Manage costs effectively：https://code.claude.com/docs/en/costs（查阅日期：2026-10-21）
• Claude Code · CHANGELOG：https://github.com/anthropics/claude-code/blob/main/CHANGELOG.md（查阅日期：2026-10-21）
• Remotion · Claude Code：https://www.remotion.dev/docs/ai/claude-code（查阅日期：2026-10-21）
• Remotion · Agent Skills：https://www.remotion.dev/docs/ai/skills（查阅日期：2026-10-21）
• Remotion · Render：https://www.remotion.dev/docs/render（查阅日期：2026-10-21）
• Remotion · CLI render：https://www.remotion.dev/docs/cli/render（查阅日期：2026-10-21）
• Remotion · Concurrency：https://www.remotion.dev/docs/terminology/concurrency（查阅日期：2026-10-21）
• Remotion · License：https://www.remotion.dev/license（查阅日期：2026-10-21）
• HyperFrames · Make your first video：https://hyperframes.heygen.com/quickstart（查阅日期：2026-10-21）
• HyperFrames · Install the plugin：https://hyperframes.heygen.com/guides/plugins（查阅日期：2026-10-21）
• HyperFrames · GitHub：https://github.com/heygen-com/hyperframes（查阅日期：2026-10-21）