Opus 5.5 做视频教程：Remotion 出第一条 MP4 ​

一句话答案：最近刷屏的「Opus 5.5 一句话出视频」，不是它学会了拍视频，而是它用代码把画面画出来，再用 Remotion 逐帧渲染成 MP4。框架用 Remotion（用 React 写视频），让 Claude Code 先把项目骨架建好、把 Remotion 官方技能装上，然后你用中文描述需求、它生成代码、你在预览里看效果、最后一条命令导出。全程八步，第一次大概半小时。工具装好见使用教程，本文不重复接入步骤。

2026 年 9 月 22 日 Opus 5.5 发布后，一批用代码渲染的动画在社交平台爆火，中文社区称之为「Vibe Video」，教程与实测文章大量出现。截至 2026-10-10，本文流程已在 Remotion 官方文档与 remotion-dev/skills 仓库核对过，中文社区的实测记录也逐条对照过（来源登记见知识库素材记录）。Remotion 版本号与命令以官方文档为准，标注日期是因为这类工具更新较快。

爆火案例里模型扮演的四个角色 ​

结论：那些爆款视频不是模型一气呵成写出来的，流程和动画团队一样：先有分镜，再拆章节，再逐章画帧，最后合成。2026 年 9 月被广泛拆解的几个案例都呈现这个骨架，看懂它就知道自己该在哪一步插手。

公开案例里还出现过更复杂的组织方式：一支 5 分钟的 MV 分成九章、九个代码文件并行生成，配乐与图像由外部工具生成后由代码按节拍组合；一支科普讲解视频只丢进去一篇论文，出来 8 分钟带配音的讲解。这些工作量的分界线不是「模型能不能」，而是时长、镜头数和你愿意审几轮。

原理：视频是一段会动的网页 ​

结论：Claude 不生成像素，它生成代码。Remotion 把视频拆成「一帧一帧的网页截图」：你写一个 React 组件，它在渲染时问「现在是第几帧」，组件根据帧号决定画面长什么样；把所有帧按每秒 30 帧连起来，就是视频。

理解这一层，后面所有步骤都好解释了：

• 你改的其实是网页，CSS 动画、字体、颜色、布局全都能用。
• 「预览」是一个可以拖动时间轴的网页，「导出」是把这些帧用 FFmpeg 编码成 H.264 的 MP4。
• 帧率、分辨率、时长是视频的四个属性，在代码里写死，Claude 按你给的值生成。
• 不适合做的是照片级真实人物和长镜头表演，那类仍然要用视频生成模型。

这也是为什么它特别适合「解说的画面」：字幕、图表、进度条、镜头推拉，本质都是网页元素。

这条路线分三层，选哪层看你做什么：底层都是「写代码画画面 → 浏览器逐帧截图 → FFmpeg 合成成 MP4」，区别在中间那一层用什么——底层用 GSAP 加 HTML 或 React，中间层用 Remotion，最上层可以用轻量框架直接把 HTML 逐帧渲染，适合十几秒的短片。三层从零写起都可行，本文只讲中间这层，因为多分钟的长片用 Remotion 的 React 组件最好维护，改一个组件不会牵动整条片子，AI 也更容易只改该改的地方。

它相对传统剪辑的核心优势是「可编辑」：不满意时传统视频模型只能改提示词整条重生成，代码路线只改那个镜头的几行代码，参数、速度、风格都能精确控制；再往后做「每周销量 TOP10」这类固定栏目，模板写一次、换数据就出一条，成本几乎只剩渲染。

要说边界也很清楚：擅长文字动效、数据图表、科普动画、地图与 3D 场景、Logo 演绎这类程序化内容；写实人物、自然物理、复杂表演仍然是视频模型的领域。社区里也有「照着别人的提示词做，出来像 PPT」的反馈，那通常是只给了一句指令和参考图、没给风格手册与分镜约束。

换个角度更容易理解：传统剪辑软件是命令式的，鼠标点到第 24 帧拉一个关键帧、第 60 帧再拉一个，软件插值出中间过程；模型看不到时间轴、拖不了鼠标，也算不准缓动曲线。Remotion 是声明式的，每一帧的画面都由「当前帧号」这段代码算出来，时间轴不是拖出来的而是算出来的。代码正是模型最擅长生成和反复修改的东西，所以「文字指令做视频」在这里成立。

开始前：三样东西 ​

结论：Node.js、Claude Code、FFmpeg。Claude Code 见使用教程；下面只核对另外两个。

Node.js 用 nvm-windows 装，版本选 20 或 22 的 LTS，装完重开终端：

node -v
npm -v

FFmpeg 装好后要把 bin 目录加进 PATH，让 Claude Code 找得到。装完同样验证：

ffmpeg -version

建议项目放在路径没有空格和中文的目录（例如 D:\video\my-first-video），避免个别依赖在 Windows 上出问题。

第 1 步 建项目 ​

结论：不要手敲项目文件。Remotion 官方维护了一套给 Claude Code 等编程助手用的技能，官方文档推荐的入口就是让助手先装技能、再建项目。

在项目父目录开一个终端，把下面这段原样粘给 Claude Code：

请先确认已安装 Node.js，然后安装 Remotion 官方技能：
npx -y skills@latest add remotion-dev/skills -g -y
装好后，用这些技能帮我创建一个 Remotion 项目，叫 my-first-video，
用 blank 模板（不要 Tailwind），用 npm 作为包管理器。
创建完先启动预览，不要直接渲染。

remotion-dev/skills 是官方仓库，里面按场景拆了十来个技能，比如：

不想用助手也有命令行入口，效果一样：

npx create-video@latest my-first-video --blank --package-manager npm
cd my-first-video
npx remotion skills add
npm install

第 2 步 启动预览 ​

结论：预览是浏览器里的一个网页，左侧是项目里的「视频」（官方叫 composition），右侧是时间轴和属性面板，改参数立刻能看到效果。项目建好后跑：

npm run dev

它会打印一个本地地址，默认是 http://localhost:3000。保持这个终端开着，改代码浏览器会自动刷新。

不想先让它渲染，这是对的：官方技能也明确写着「只有用户明确要求导出时才渲染」，先看预览再导出能省很多时间。

第 3 步 写提示词 ​

结论：提示词越具体，出来的东西越接近你想要的效果。至少说清五件事：视频做什么主题、多长、什么比例、什么风格、要不要字幕和音乐。下面这段可以直接改：

在 Remotion 项目里做一个 30 秒的产品宣传片：
- 主题：为一款叫「星尘」的笔记应用做宣传
- 时长 30 秒，1920x1080，30fps
- 结构：0-5 秒标题「星尘，让记录发生」，5-20 秒三个卖点逐条滑入，
  每个卖点配一行副标题，20-28 秒展示界面占位，28-30 秒回到 logo 与一句话
- 风格：深色背景，白色文字，无衬线字体，动效克制（淡入加轻微上移）
- 字幕：一句都不要；背景音乐：先不加
- 画布比例先按 16:9 做，竖屏 9:16 的版本我稍后自己改
做完先在预览里给我看，不要渲染。

写提示词的四个经验：

1. 先要预览，不要 MP4。 让它改到满意，最后再导出；官方技能也是这么要求的。
2. 时间轴写成秒数。 「0-5 秒、5-20 秒」比「开头、中间、结尾」有用得多。
3. 一次只改一件事。 「第 12 秒那个卡片换成向左飞入」，比整段重写更快也更准。
4. 不确定的需求先问它。 让它先用一两句话复述需求，你确认了再动手。
5. 颜色和间距写成 token。 「主色用品牌蓝 #1F6FEB，标题 72px、说明 40px、行距 1.2」比「好看一点、明显一点」精确得多。
6. 附上参考视频让它拆。 爆火案例里最常见的做法是一句话加一条参考：「这是参考视频，分析它，然后按同样风格做一支 30 秒宣传片。」它会拆帧分析风格、去代码里找 logo 与配色。
7. 长片先要分镜和风格手册。 超过一分钟的片子别让它一口气写完，先只要「分镜表 + 风格手册」，你点头之后再一章一章生成。这一步来自爆款案例的真实做法，也是普通用户最容易漏掉的一步。
8. 要求动画完全由时间决定。 别让它用「上一帧结束后停 0.3 秒再开始」这类依赖状态的写法，而是让每个元素的位置、透明度、缩放都只由「第几帧」算出来；随机纹理要固定种子。这是海外动效创作者复盘爆款作品后总结的规矩，遵守了每帧稳定、循环能接上、多端渲染一致，违反了就容易出现同一份代码两次渲染不一样。

还有一条最容易被忽略：画面里的数据必须是真的。 产品宣传片里的价格、界面、卖点，写之前先让它从你的官网、README 或截图里读，别让它为了「画面顺」自己编；数字和文案不准，再好看的动效也是自嗨。这也是专业广告公司愿意走这条路的原因：他们本来就有真实素材和品牌规范，缺的只是把素材变成动画的熟练工。

第 4 步 边预览边调 ​

结论：调效果在浏览器里做，不用改代码。右侧面板能改画布比例、时长、帧率，改完立刻生效。

常见的三类调整：

一个示例：30 秒 30fps 的视频，时长就是 900 帧。Claude 写代码时会把秒换算成帧。

一次改到位的验收循环 ​

结论：预览满意不等于成片满意。定稿前用三步小样验收，比反复重渲全片快得多。

# 1) 出半分辨率小样，确认能渲染通
npx remotion render out/MyVideo.mp4 --scale=0.5

2. 打开小样只检查三处，其余先不看：开头 3 秒有没有交代清楚主题、手机竖屏下文字有没有被裁、结尾与开头能不能无缝循环。
3. 把发现的问题写成一句话指给它，例如「第 12 秒那个卡片换成向左飞入」「开头先出 logo 再出标题」。

这条流程之所以要写出来，是因为爆款案例里几乎没有人只靠预览定稿，都是导出小样、自己抽帧检查、发现问题再改。「每轮导出联系表并检查开头、手机尺寸、循环接缝」是动效创作者总结的固定动作。

第 5 步 导出 MP4 ​

结论：导出就是一条命令，默认输出 MP4（H.264 + AAC），竖屏或横屏由画布比例决定。

npx remotion render

产物默认在 out/ 目录。常用变体：

npx remotion render MyComp out/video.mp4          # 指定文件名
npx remotion render --concurrency=4                # 机器卡就降并发
npx remotion render --scale=0.5                    # 先出个半分辨率小样验证
npx remotion render --log=verbose                  # 报错时把详细日志打开
npx remotion still MyComp out/thumbnail.png        # 只要一张封面图

渲染耗时和时长、分辨率成正比，长视频建议先用 --scale 出小样，确认没问题再出全尺寸。

渲染报错了别只把报错贴给它，先加 --log=verbose 再跑一次：Remotion 实际在执行 JavaScript，出错的常见原因就三类——组件里访问了 undefined、异步数据还没加载完就渲染（画面上表现为空元素或 NaN）、以及大尺寸视频或图片太多导致内存不足。日志里第一处异常的位置就是问题所在。

资源也要按它的规矩引：项目里的 MP4 用 <OffthreadVideo> 放在 public/ 目录并用 staticFile() 引用，直接写本地绝对路径会在渲染时报「无法打开文件」；本地字体同样要放进 public/ 加载，否则渲染用的浏览器环境拿不到。

第 6 步 成本与批量出片 ​

结论：30 秒 1080p 的片子在本机渲染，token 消耗通常不大；真正决定花多少的是镜头数量、迭代轮数和你用不用外部素材工具。

• 便宜的一端：纯代码画面、无配乐，短片多次迭代，token 花得少；本机渲染免费。
• 贵的一端：长片、多章节并行、图片和音乐靠外部生成工具，或反复从头重出。公开案例里一支 5 分钟 MV 的 API 花到数百美元，一支 2 分多钟的科普片只用高档订阅周额度的百分之一，差距来自复杂度而不是「做视频」这件事本身。
• 真正的大头往往不是模型账单：一支 30 秒讲解片的实测是七百多行代码画帧、用代码合成配乐、中途自己抽帧检查标签重叠后重渲，全程 5 小时额度只烧了 5%；另一支 60 到 70 秒的动效用了 249 万输入 token、33 万输出、323 次请求。所以「一分钟 2 美元」是真的，「一句话」是省略了上万字导演说明的。
• 想少花钱：先出 30 秒样片定风格，风格确认后再做长片；同一素材别反复重生成；数据类内容做模板，换数据出片。

第 7 步 改竖屏、字幕与音乐 ​

结论：这类宣传片最常要改的就是竖屏、加字幕、加音乐三件事，都能用几行配置或一句提示词解决。

竖屏 9:16（抖音、视频号、小红书）：在预览面板把比例改成 9:16，所有元素会按新画布重排，再微调字号即可。

加背景音乐：

import { Audio, staticFile } from "remotion";
// 放在视频组件最外层：
<Audio src={staticFile("bgm.mp3")} volume={0.3} />

把音频文件放进项目的 public/ 目录，用 staticFile() 引。音量建议 0.2 到 0.4，避免盖住人声。

加字幕：可以直接把字幕做成画面元素（每条字幕一个 <div>，用 useCurrentFrame() 控制出现区间），也可以用 Remotion 的字幕技能，它会根据你提供的文字稿生成字幕文件。