> ## Content Index
> Fetch the complete content index at: https://www.hubwiz.com/blog/llms.txt
> Use this file to discover other available public pages before exploring further.

# AI 视频生成教程：让 coding agent 写代码出片，实测 162 秒拿到第一条 MP4
- URL: https://www.hubwiz.com/blog/video-as-code-coding-agents/
- Published: 2026-10-26T04:21:14.000Z
- Updated: 2026-10-26T04:44:50.000Z
- Description: 渲染是最简单的一半：162 秒能出第一条片子，数字全部实测。难的另一半是"能编译 ≠ 好看"，这条闭环现在没有任何工具替你闭上。
- Author: admin
- Tags: AI 视频生成, Remotion, HyperFrames, Coding Agent, Claude Code

**一句话结论**：把"用 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）。我们**没有**跑云端渲染，也**没有**调用付费视频生成模型。

---

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

|           | 提示词 → 像素                       | 代码 → 帧               |
| --------- | ------------------------------ | -------------------- |
| 代表        | Veo 3.1、Gemini Omni Flash、Sora | Remotion、HyperFrames |
| 你交付的东西    | 一句话                            | git 里的一个文件           |
| 同样输入的结果   | 每次都不一样（采样）                     | 逐字节一致                |
| 改一个细节     | 重新提示，祈祷                        | 改一个数字，重渲染            |
| 模型要会什么    | 摄影、物理、人脸                       | 你给它的那套 API           |
| agent 的位置 | 帮你调 API                        | **拥有整个仓库**           |

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

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

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

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

```tsx
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。

```bash
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      # 渲染

```

| 步骤                             | 实测耗时         | 备注                                       |
| ------------------------------ | ------------ | ---------------------------------------- |
| create-video --yes --blank     | **1 分 56 秒** | 几乎全是 npm install，占了总时间的大头                |
| skills add …                   | **6.0 秒**    | 写入 12 个 skill 目录                         |
| 首次 remotion render（5 秒 @1080p） | **39.9 秒**   | 含下载 headless Chrome                      |
| 同参数再渲染一次                       | **11.7 秒**   | 150 帧 / 1080p30，\--concurrency 默认 = 核数/2 |
| 60 秒 @1080p                    | **68.7 秒**   | 1800 帧，≈ 26 帧输出/秒                        |
| 60 秒 @1080p，\--concurrency=2   | **84.4 秒**   | 8 核上强压到 2 个 worker，慢 23%                 |
| remotion still --frame=45      | **6.7 秒**    | 出单帧 PNG，用来迭代                             |

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

**第一，渲染耗时随片长线性增长。** 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 的上下文成本，是可以量化的

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

| 实测项                                           | 数值                                 |
| --------------------------------------------- | ---------------------------------- |
| 装上的 skill                                     | 12 个                               |
| 12 个 skill 的 frontmatter（name \+ description） | **1,031 字符 ≈ 290 token**（常驻上下文的部分） |
| 12 个 SKILL.md 正文合计                            | 43 KB ≈ 12k token，**按需读取**         |
| 附带文件（文档、示例 .tsx、SVG、地图数据）                     | 285 个 / 2.3 MB，agent 主动要才打开        |

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

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

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

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

|      | Remotion                                               | HyperFrames                                   |
| ---- | ------------------------------------------------------ | --------------------------------------------- |
| 许可   | 源码可见的 **Remotion License**                             | **Apache 2.0**                                |
| 免费线  | 个人与**≤3 人**公司，商用不限量                                    | 无按次费用、无商用门槛                                   |
| 付费档  | Creators **$25/座/月**；Automators **$0.01/次渲染，$100/月保底** | —                                             |
| 渲染引擎 | headless Chrome + FFmpeg                               | headless Chrome + FFmpeg                      |
| 创作表面 | React 组件                                               | HTML + CSS + 可 seek 动画（GSAP、Lottie、Three.js…） |

那个"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。

## 七、什么时候用哪种

| 你要的东西                       | 用什么                                          |
| --------------------------- | -------------------------------------------- |
| 动效、解说、图表、下三分之一、数据驱动 / 参数化短片 | **代码出帧**（Remotion / HyperFrames）             |
| 真实镜头、人物、空镜、"大阪下雨的街道"        | **生成模型**（Veo 3.1 / Gemini Omni Flash），再用代码拼装 |
| 出镜口播                        | 数字人产品，上面两个都不合适                               |
| 一个模板做 1 万条个性化版本             | 代码出帧 + Lambda，这是它的杀手场景                       |
| 就做一条 30 秒宣传片                | 都别用，打开剪辑软件                                   |

诚实一点说：代码出帧**不是"用更便宜的方式做你本来要在 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 生成视频](https://www.hubwiz.com/blog/building-ai-generated-video-with-remotion/) 讲的是**另一条架构**：给模型一份 typed catalog，它输出 spec，播放器照着渲染（json-render 那套）。那篇回答"AI 怎么选镜头"，这篇回答"agent 怎么拥有仓库"——**两篇叠起来才是完整的一条流水线**。
- [用 Claude 自动运营视频内容](https://www.hubwiz.com/blog/automate-video-content-with-claude/) 走的是内容运营侧（选题到发布），[ViMax 视频制作智能体系统](https://www.hubwiz.com/blog/vimax-agentic-video-generation/) 走的是多智能体编排。它们都在"生成之后"，这篇在"生成之中"。

## 边界

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

---

**相关阅读**：[AI 编程 / Vibe Coding 完全指南](https://www.hubwiz.com/blog/vibe-coding-stack/) ｜ [用 Remotion 构建 AI 生成视频](https://www.hubwiz.com/blog/building-ai-generated-video-with-remotion/) ｜ [用 Claude 自动运营视频内容](https://www.hubwiz.com/blog/automate-video-content-with-claude/) ｜ [ViMax 视频制作智能体系统](https://www.hubwiz.com/blog/vimax-agentic-video-generation/)

**Sources**

- Remotion 文档 · *Coding Agents*：[https://www.remotion.dev/docs/ai/coding-agents](https://www.remotion.dev/docs/ai/coding-agents?ref=hubwiz.com)
- Remotion 文档 · *Agent Skills*（12 个 skill 与安装命令）：[https://www.remotion.dev/docs/ai/skills](https://www.remotion.dev/docs/ai/skills?ref=hubwiz.com)
- Remotion · 许可证与定价：[https://www.remotion.pro/license](https://www.remotion.pro/license?ref=hubwiz.com)
- HyperFrames · 仓库与 README（确定性渲染、Apache 2.0、与 Remotion 的对照）：[https://github.com/heygen-com/hyperframes](https://github.com/heygen-com/hyperframes?ref=hubwiz.com)
- 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](https://www.heygen.com/research/html-to-video?ref=hubwiz.com)
- 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](https://www.digitalapplied.com/blog/video-as-code-remotion-agentic-generation-2026?ref=hubwiz.com)
- 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](https://www.nihardaily.com/posts/claude-code-and-remotion-install-the-skill-render-a-video?ref=hubwiz.com)
- snapcn · *Claude Code + Remotion*，2026-09-24：[https://snapcn.dev/claude-code-remotion-videos](https://snapcn.dev/claude-code-remotion-videos?ref=hubwiz.com)
- 封面：Pexels · Fuka jaz（photo 31718971）

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