AI 视频生成教程：让 coding agent 写代码出片，实测 162 秒拿到第一条 MP4

一句话结论：把"用 coding agent 生成视频"当成一个产品来看，它其实是两条技术栈被同一个词盖住了——一条是提示词出像素（Veo / Gemini Omni / Sora），一条是代码出帧（Remotion / HyperFrames）。前者 agent 只能替你点按钮；后者 agent 能接管整个仓库：它写文件、读类型错误、跑渲染、再看帧。所以我们实测了后者：从空目录到第一条 MP4 是 162 秒，此后每 5 秒 1080p 片子只要 11.7 秒。但真正决定你会不会用它的是另一半——渲染几乎不会失败，判断"对不对"却没人替你做。

披露：文中所有命令与耗时，是我们在 2026-10-26 于 Windows 11 / 8 核 / Node 24.21.0 / npm 11.19.0 / Remotion 4.0.538 上亲自跑出来的（目录是全新的空目录）。许可证条款、skill 数量、官方命令均引自厂商原文（见文末 Sources）。我们没有跑云端渲染，也没有调用付费视频生成模型。

一、这轮"热"到底热在哪：两条互不相干的技术

这个区分之所以重要，是因为两边的失败方式完全相反：扩散模型失败是六根手指，渲染管线失败是 TypeError: undefined is not a function。coding agent 恰好擅长第二种、完全帮不上第一种。

2026 年这波之所以起来，就三个时间点：1 月 Remotion 上线 Agent Skills；4 月 HeyGen 把 HyperFrames 开源；两者都是纯文本——这才是 coding agent 唯一真正理解的东西。

二、机制：一帧，是时间的纯函数

想通一句话就够了：帧是时间的纯函数。

const frame = useCurrentFrame();          // 0, 1, 2, … 149
const p = spring({ frame, fps, config: { damping: 200 } });
return <div style={{ opacity: p }}>…</div>;

没有时间线、没有关键帧面板、没有剪辑软件。你写一个组件，给它帧号，它返回这一帧长什么样。渲染器只做三件事：

1. 打包项目（Remotion）或直接加载 index.html（HyperFrames）；
2. 开 headless Chrome，逐帧 seek 到对应时间点；
3. 截图，把帧喂给 FFmpeg。

两家都是这个套路。HyperFrames 的 README 把可用性写得很直白："渲染器在 headless Chrome 里 seek 每一帧，再用 FFmpeg 编码，所以同样的输入产生同样的视频。" Remotion 的赌注在另一头：用 React 组件树当创作表面。

agent 为什么吃这一套：产物是 TypeScript 或 HTML，反馈回路是编译器，改动可以 review。git diff 一个视频这句话，从比喻变成了字面意思。

三、实测：162 秒到第一条 MP4

四条命令，没有编辑器，没有 API key。

npx create-video@latest --yes --blank demo   # 脚手架
cd demo
npx skills add remotion-dev/skills -a claude-code -y   # 12 个 skill → .claude/skills
npx remotion render MyComp out/video.mp4      # 渲染

两个结论直接从这个表里掉出来。

第一，渲染耗时随片长线性增长。 150 帧 11.7 秒、1800 帧 68.7 秒，折算都是每秒输出约 26 帧。我们只测了一种合成，所以严格说是"本机上近似恒定"，不是"证明了恒定"。

第二，"3 分钟出片"是真的，但那是脚手架时间，不是创作时间。 116 秒安装 + 6 秒 skill + 40 秒冷渲染 ≈ 162 秒，光 npm install 就占三分之二。想看效果的人别被这 2 分钟劝退，它只发生一次。

一个必须知道的操作坑：两个安装命令，写进两个目录

Remotion 官方文档现在写的是 npx remotion skills add；通用安装器也能用：npx skills add remotion-dev/skills -a claude-code -y。但它们装到不同目录：

• npx remotion skills add → .agents/skills/，并生成 skills-lock.json（我们这次它还跳过了几个没装的 agent，日志里能看到 skipped: Pi (project directory not found)）；
• npx skills add remotion-dev/skills -a claude-code → .claude/skills/。

所以"agent 说它看不见 skill"这件事，九成不是模型笨，是你去看的目录不是它写进去的那个。先 ls 两个目录，再谈调试。

四、skill 的上下文成本，是可以量化的

很多人以为装技能 = 往提示词里塞一本手册。不是，而且数字值得记住：

最大的一块是 remotion-best-practices，它的 SKILL.md 是 4.2 KB 的路由表：告诉 agent 当前这个任务该去读另外 11 份里的哪一份。整个设计就是"先付 290 token，按需换 12k token 的 API 知识"。

代价是失败是静默的：路由没触发，agent 就凭记忆写 Remotion，给你一段看着很像、渲染出来全黑的代码。

五、成本模型：许可证比显卡更坑

两个数决定你能不能做：许可证和算力。算力上面测过了，许可证才是意外。

那个"3 人"门槛要读两遍：三个人以内免费；招到第四个人，按它自己的条款就已经进入 Company License 了。另外，如果你是做工具给别人渲染视频（prompt-to-video 产品、剪辑器、把播放器嵌进自己产品），那走的是 Automators：$0.01/次 + $100/月起。一个月渲染 5 万条个性化短片，500 美元不算贵；一个只渲染 9 条的个人项目，就很贵。

HyperFrames 是那条退路：Apache 2.0、同样的渲染机制、不同的创作赌注。它 README 里说得很直接——"Remotion 赌的是 React 组件；HyperFrames 赌的是人和 agent 都容易写的纯 HTML。"

token 这边给一个量级而不是结论：NiharDaily 在 2026-10-17 的实测里报的是第一次 prompt 到 MP4 花了 $0.13。这个数高度依赖 agent 迭代了几轮、读了几张帧，当量级看。

六、真正会塌的地方：自检缺口

这一节决定你是上线还是弃坑，也是所有教程都跳过的一段。

"能编译"不等于"好看"。 agent 跑完 remotion render，退出码 0，而这个合成可能是白字白底、logo 被裁掉、动画在第 12 帧就演完了。Digital Applied 把它叫作 agent 工具链里最难的自检问题——没有单测能验"这看起来对不对"，而现有的视觉回归工具测的是像素差，不是意图。

按有效性排序的三条补救：

1. 给组件库，不给空白画布。 随手编的动效，恰恰是"AI 视频看着廉价"的来源。让它去组合 <LowerThird/>、<StatCard/>，而不是自己发明 spring，质量下限立刻被抬高一大截。
2. 迭代时只出静帧。 npx remotion still MyComp out/f.png --frame=45 是 6.7 秒；整片 5 秒要 11.7 秒、60 秒要 68.7 秒。打包是固定 ~5 秒开销，片子越长省得越多，而布局错误 90% 在单帧上就能看出来。
3. 让它把帧读回去。 有视觉能力的 agent 能打开 out/f.png。没有这一步，你就是那个验证回路。

其余的坑，都是我们踩到的或源文明说的：

• 第一次渲染 ≠ 你的渲染时间。 光下载 headless Chrome 就占了那 40 秒的大头，CI 里要把它算进预热，别算进 demo。
• 字体和素材是异步加载的。 抢在图片解码之前截的那一帧，够你查一天。用本地素材，别用 CDN 链接。
• 长片子一直是线性的。 10 分钟 1080p 在这台机器上约 11 分钟渲染。本地可以，放在请求处理链路里不行——所以才有 Remotion Lambda 和 HyperFrames 的 Lambda 通道。
• 许可证按人头触发，不按用量触发。 别等法务来找你才数人头。
• 一眼能看出是生成的就等于失败。 但失败的不是工具，是 brief。

七、什么时候用哪种

诚实一点说：代码出帧不是"用更便宜的方式做你本来要在 Premiere 里做的那条片子"，而是做以前不存在的品类——一个客户一条、一次数据更新一条、一个 PR 一条。

八、三步落地（每步有判据）

第 1 步（半天）：打通"能渲染"。 create-video --blank + 装 skill + 让 agent 写一个纯文字动效合成，跑通 remotion render。判据：删掉 out/ 重跑一次，产物 MD5 一致——不一致说明你在用墙上时钟做动画，后面的 CI 全是幻觉。

第 2 步（1–2 天）：把动效换成组件库。 把你们复用最多的 3–5 个版式（标题页、数据卡、下三分之一、结尾 CTA）写成带 prop 类型的组件，写一份 catalog.md 让 agent 先读。判据：同一个 brief 跑三次，产出的镜头顺序差异 ≤1 个，且没有一次自己发明缓动。

第 3 步（3 天）：把自检变成流水线。 每次改动只出 3 张静帧（开头 / 中部 / 结尾），让 agent 读图，人只看这 3 张；合并后才整片渲染。判据："渲染完才发现排版错"的次数降到 0，且单条改动的循环时间 < 1 分钟。

编者补充：和站内另外几篇的关系

• 站内 用 Remotion 构建 AI 生成视频 讲的是另一条架构：给模型一份 typed catalog，它输出 spec，播放器照着渲染（json-render 那套）。那篇回答"AI 怎么选镜头"，这篇回答"agent 怎么拥有仓库"——两篇叠起来才是完整的一条流水线。
• 用 Claude 自动运营视频内容 走的是内容运营侧（选题到发布），ViMax 视频制作智能体系统 走的是多智能体编排。它们都在"生成之后"，这篇在"生成之中"。

边界

• 实测数字来自一台 8 核 Windows 机器的一次运行，冷启动含浏览器下载，不是基准测试；换机器、换合成、换并发，绝对值都会变，只有"线性"这一条大致稳。
• 我们没有验证 cloud/Lambda 渲染，没有跑付费视频模型，没有在 macOS / Linux 上复现。
• $0.13/条 的 token 成本引自 NiharDaily 的实测，不是我们的数据。
• 许可证条款以 remotion.pro/license 与仓库 LICENSE 为准，本文写的是 2026-10-26 时点的公开信息；签约前自己再读一遍原文。
• 文中所有 npx 命令随版本变化，以你本地 --help 为准。

相关阅读：AI 编程 / Vibe Coding 完全指南 ｜ 用 Remotion 构建 AI 生成视频 ｜ 用 Claude 自动运营视频内容 ｜ ViMax 视频制作智能体系统

Sources

• Remotion 文档 · Coding Agents：https://www.remotion.dev/docs/ai/coding-agents
• Remotion 文档 · Agent Skills（12 个 skill 与安装命令）：https://www.remotion.dev/docs/ai/skills
• Remotion · 许可证与定价：https://www.remotion.pro/license
• HyperFrames · 仓库与 README（确定性渲染、Apache 2.0、与 Remotion 的对照）：https://github.com/heygen-com/hyperframes
• HeyGen Research · HTML to Video Was Not Easy: Here's How We Solved It，2026-06-22：https://www.heygen.com/research/html-to-video
• Digital Applied · Video as Code: Remotion and the Agent Feedback Gap，2026-08-11：https://www.digitalapplied.com/blog/video-as-code-remotion-agentic-generation-2026
• NiharDaily · Claude Code and Remotion: install the skill, render a video，2026-10-17：https://www.nihardaily.com/posts/claude-code-and-remotion-install-the-skill-render-a-video
• snapcn · Claude Code + Remotion，2026-09-24：https://snapcn.dev/claude-code-remotion-videos
• 封面：Pexels · Fuka jaz（photo 31718971）

本文由 hubwiz 实测整理，转载请注明出处。