企业官网建设流程全解析

去年下半年开始，我一直在琢磨一件事：能不能让 AI 直接写代码来生成完整视频，而不是像现在大多数工具那样，靠关键词描述让模型"猜画面"。倒不是说文生视频不好，而是它的不确定性太致命了——你没法精确控制第 137 帧上标题出现在哪里，也没法保证首尾帧风格一致。我一直觉得，视频生成要真正进入生产环境，必须有一个"程序化、可验证"的底座，而 Remotion 恰好就是这个底座。最近 Anthropic 推出 Agent Skills 之后，我又试了试把 AI 编程和 Remotion 串成一条完整的生产链路，效果比我预期的还要好。这篇文章就聊聊我实际搭建"AI 写代码生成视频"流程时踩过的坑、总结出的方法论，以及为什么我认为这条路才是降低视频生成成本的正解。适合对 AI 编程、自动化视频生产感兴趣，并且愿意动手折腾的开发者。

1. Remotion 凭什么成为 AI 生成视频的底座

1.1 从"剪辑软件思维"切换到"编程思维"

传统视频制作的路径是：拍摄素材 → 剪辑软件里拖时间线 → 加转场、字幕、调色 → 导出。这套流程非常成熟，但它依赖一个东西——素材。如果你要做的是一条完全没有实拍素材的纯动态图文视频，剪辑软件反而成了负担，你得手动摆关键帧、调缓动曲线、对时间轴，每一步都是在跟 GUI 搏斗。

Remotion 的思路是彻底换一个赛道：用 React 组件来描述每一帧画面。它把视频的本质还原成了一件事——time → pixels的函数映射。你在组件里拿到当前帧号useCurrentFrame()，然后决定这一帧屏幕上渲染什么。比如：

const frame = useCurrentFrame(); const opacity = interpolate(frame, [0, 30], [0, 1], { extrapolateRight: "clamp", }); return <div style={{ opacity }}>你好，视频</div>;

这就定义了前 30 帧内，文字从完全透明到完全不透明的淡入效果。没有关键帧面板，没有曲线编辑器，有的只是你熟悉的 CSS、JavaScript 和 React 生命周期。

我刚开始接触的时候也觉得别扭：写视频不应该是拖拽时间线吗？写代码算什么？真正跑通一个项目之后才意识到，代码描述画面有一个不可替代的优势——可复用。一个<ProductCard />组件，你可以在视频的第 0 秒、第 10 秒、第 20 秒分别渲染，只要给它传入不同的timestamp参数，它就能自动完成入场、停留、离场整套动画。这在剪辑软件里意味着你要复制三个图层，而在 Remotion 里就是一个.map()循环。

1.2 帧级可控是 AI 生成视频的命根子

现在市面上的 AI 视频生成工具，最被人诟病的一点是什么？是"不可控"。你让 AI 生成"一只猫在窗台看夕阳"，它给你 3 秒的片段，画面很惊艳，但猫的耳朵角度、光影方向、镜头运动，全部不可复现。做一条短视频还行，做产品宣传片、教学课程、广告素材，这种随机性就是灾难。

Remotion 恰好是反过来的：同一个代码输入，永远生成完全相同的视频。因为每一帧都是确定性计算的——frame=100时，组件里所有插值函数都会算出唯一确定的值。这种确定性给 AI 生成视频提供了关键前提：AI 写完代码后，你可以逐帧验证、精准修改。

比如我经常用renderStill()先输出第 0 帧、第 90 帧、第 180 帧，截图检查标题位置、配色、动画进度是否符合预期。发现不对，直接告诉 AI "第 6 秒时副标题应该已经完全淡出，现在透明度还在 0.5"——AI 修改对应代码，再次渲染验证，循环几次就能收敛。这在传统的文生视频工具里根本无法想象。

提示：如果你对视频生成的第一需求是"惊艳的随机画面"，那就继续用扩散模型类的工具；如果需求是"可控、可改、可批量"，那 Remotion + Agent 的路线才是对的。

2. Agent Skills：AI 从"聊天"到"干活"的关键升级

2.1 SKILL.md 是怎么让 AI 学会写 Remotion 的

有了 Remotion 这个底座，下一步就是让 AI 会写 Remotion 代码。直接跟大模型说"帮我写一段 Remotion 视频代码"，它确实能写，但质量波动很大：有时导入路径不对，有时忘记Composition注册，有时用了一个根本不存在的 API。原因很简单——通用大模型对 Remotion 的精细掌握，远不如它对 React 或 JavaScript 那么深。它的训练数据里 Remotion 相关内容占比太小，各种版本差异、弃用 API、最佳实践，模型根本不知道。

Agent Skills 解决的就是这个问题。它是 Anthropic 在 Claude 中引入的一种机制：你可以在项目目录下放一个SKILL.md文件，把 Remotion 的核心概念、常用 API、易踩坑点写成结构化的技能说明，Claude 在需要时会自动读取这份文件，按里面的规范来写代码。

一个典型的工程结构长这样：

my-video-project/ ├── .claude/ │ └── skills/ │ └── remotion-expert/ │ ├── SKILL.md │ └── remotion-cheatsheet.md ├── package.json ├── remotion.config.ts └── src/ └── index.ts

SKILL.md的头部用 frontmatter 声明技能名称和描述，正文写详细指令。我实际用的简化版大概是这样：

--- name: remotion-expert description: 用 Remotion 生成程序化视频的专业技能，包含核心 API、时间轴技巧和常见错误规避。 --- # Remotion 专家技能 你负责使用 Remotion 编写高质量视频代码。必须遵循： 1. 所有视频帧由 useCurrentFrame() 获取，动画用 interpolate() 插值 2. 时间轴组件统一用 Sequence，禁止用 setInterval 或 requestAnimationFrame 3. 视频宽度 1920、高度 1080、帧率 30，除非用户另行指定 4. 导出必须能通过 npx remotion render 命令完成 ...

别看就是这么一份 Markdown 文件，作用极其明显。我对比过同样的需求，"裸 Claude"和"装了 Remotion 技能的 Claude"产出的代码质量，后者几乎不需要做语法层面的修正，直接能过 TypeScript 编译，而且时间轴设计明显更合理。

2.2 与 MCP、普通提示词的区别

很多人会问，这不是跟 MCP（Model Context Protocol）差不多吗？我最初也这么想，但用下来发现定位完全不同。

对"AI 写代码生成视频"这个场景来说，Agent Skills 是更合适的选择。因为生成视频本质上是"让 AI 写出一段能稳定渲染的代码"，它需要的是对这个领域的深刻理解，而不是实时的外部数据。你不需要让 AI 去查某个视频素材库，你要的是它知道interpolate的extrapolateLeft该在什么场景用clamp。

我个人的结论是：如果做通用 Agent 应用，MCP 必不可少；但如果就是为了把某个专业框架的代码写好，Agent Skills 是成本最低、见效最快的方式。把 Remotion 的文档精华、社区最佳实践、我自己踩坑总结全部塞进 SKILL.md，AI 写的代码就像个有三年 Remotion 经验的开发者在写。

3. 实战：一条 30 秒产品宣传片从描述到成片

3.1 环境搭建与依赖锁定

先说明一下我的环境：Node.js 20 LTS、npm 10、macOS。Remotion 版本我固定在 4.0.x，因为 AI 的训练数据对这个版本的 API 最熟悉，太新的版本容易踩导入路径变更的坑。

初始化项目时我用官方模板：

npm init video@latest my-project -- --template blank cd my-project npm install remotion @remotion/cli

这里有个小细节：一定要把package-lock.json提交到版本库。AI 在生成代码过程中，偶尔会顺手给package.json加依赖，如果没锁版本，下次npm install可能拉到一个破坏性更新的版本，整套渲染就挂了。我专门准备了一个规则写进 Agent Skills——"禁止修改 package.json 中的现有依赖版本，新增依赖必须明确用途且由用户确认"。

3.2 需求拆解：写好给 Agent 的"任务说明书"

AI 写代码好不好，一半取决于你给它什么输入。你如果说"做一个产品宣传片"，它给你一堆热闹但没逻辑的动画。但如果你按工程化方式给出需求说明书，质量会完全不同。

我整理了一套视频需求模板，每次让 AI 生成前都按这个格式填写：

项目目标：为某云存储产品制作 30 秒宣传视频 目标用户：中小企业的技术负责人 视觉风格：深色科技感，主色 #4F46E5，强调色 #22D3EE 场景脚本： S1（0-5秒）：黑场中出现产品 logo，缩放淡入 S2（5-15秒）：三张核心功能卡片依次滑入 S3（15-25秒）：数据对比图表柱状动画 S4（25-30秒）：二维码 + 引导文案 配音文案：(用引号标注，逐字对应时间轴) 字幕样式：底部居中，白字 + 0.1 透明度黑底 输出要求：1920x1080，30fps，mp4 格式

这个说明书的本质是告诉 AI 两件事："画面分几个阶段"和"每个阶段的时间轴边界"。AI 拿到之后就能自动把 30 秒拆成 900 帧（30fps × 30s），并根据场景脚本在对应帧段注册<Sequence>。

3.3 我用 Codex/Claude 生成代码的过程记录

实际生成时，我先用装了 Agent Skills 的 Claude 跑了一轮。第一版代码框架非常标准：src/index.ts里注册了Root组件，用Composition声明了分辨率、帧率、总帧数；每个场景独立成组件文件，通过<Sequence durationInFrames={150}>做时间轴切换。整体架构完全符合 Remotion 最佳实践。

但细节上还是有问题的。比如它给第一段场景配的文字动画是translateY从 100px 到 0px 的入场，我原意是"缩放淡入"而非"滑动"。这种偏差靠一次生成基本避免不了，所以我建立了"渲染-审查-反馈"的循环：

1. 渲染首尾关键帧截图，用npx remotion still src/index.ts out.png --frame=0；
2. 把截图发给 AI，指出偏差——"第 0 帧应该是 logo 缩放淡入，不是上移滑入"；
3. AI 修改插值参数，把translateY换成scale，重新渲染验证。

这个循环一般跑 2-4 轮就能收敛到可交付状态。整个过程大约 40 分钟，其中大部分时间在等渲染和等 AI 响应，真正手动改代码的时间不超过 5 分钟。

注意：用 Codex 或 Claude 这类编程剂体验时，不要让它一次性生成完 900 帧的全部动画代码再渲染。正确的节奏是让它先生成骨架，再逐场景填充，每填一个场景就渲染一次验证。分而治之，出错时才能快速定位到具体组件。

4. 渲染过程中的坑：从单帧到全片，一步步排

4.1 首帧/尾帧快速验证法

AI 生成代码最大的问题是"看起来没问题，渲染时炸掉"。所以我把渲染验证流程做成固定的四级检查，第一级是首尾帧验证。

我几乎不会直接跑全片渲染。第一步永远是renderStill导出一个单帧。因为 Remotion 的渲染入口是 Chromium headless，全片渲染一旦中间某个组件抛异常，你只能看到一段堆栈，定位成本很高。但单帧渲染几秒钟就能出结果，配合--frame参数，可以快速检查任意时间点的画面。

npx remotion still src/index.ts out/first-frame.png --frame=0 npx remotion still src/index.ts out/last-frame.png --frame=899

看到首尾帧没问题后，我做"中间抽帧"：每 150 帧抽一帧，刚好覆盖每个场景的结束点。检查转场是否粘连、文字是否溢出、画面是否有明显闪烁。

4.2 内存爆掉：帧太多、资源没释放

这是我在多次 AI 生成视频过程中遇到最头疼的问题。现象是：渲染到一半，进程直接报out of memory，Chromium tab 崩溃，npm 进程退出。

原因其实是资源加载策略的问题。AI 生成的代码里，如果引用了大量外部图片、字体、视频素材，Remotion 在准备渲染阶段会预加载这些资源。如果代码写得粗糙——比如每个帧都重新请求图片、或者把大图直接塞进 Canvas——几百帧渲染下来，内存就爆了。

这一点和 ComfyUI 爆内存有异曲同工之处，都是"一次性加载太多中间数据"。我在 ComfyUI 里处理视频生成内存溢出的经验，用在这里也同样有效：分段渲染 + 控制并发。

Remotion 支持通过--concurrency参数控制并发渲染的标签页数量。默认可能是 CPU 核数的一半，在内存不足的机器上务必调低：

npx remotion render src/index.ts out.mp4 --concurrency=2

如果还爆，就采用更彻底的方案——分段渲染，再拼接：

npx remotion render src/index.ts out-s1.mp4 --frames=0-300 npx remotion render src/index.ts out-s2.mp4 --frames=301-600 npx remotion render src/index.ts out-s3.mp4 --frames=601-899

然后用ffmpeg拼接三个片段：

ffmpeg -f concat -i list.txt -c copy out-final.mp4

这样每个渲染进程只处理 300 帧，内存压力骤减，而且能精准定位是哪一段导致崩溃。如果 S2 崩、S1 和 S3 没问题，那问题基本就锁定在 S2 对应的组件里。

4.3 音画不同步的根因

如果用 Remotion 加配音音频，最容易犯的错是：音频时长 31 秒，但画面durationInFrames只设了 900 帧（30 秒）。播到最后一秒，画面已经黑场，配音还在说话。

我发现 AI 生成代码时经常出现这个问题，因为它默认按视频总帧数算时间轴，却不检查音频时长。实际写法应该取两者的最大值：

const audioDurationInFrames = AudioData.durationInSeconds * fps; const totalDurationInFrames = Math.max( userDefinedDuration, Math.ceil(audioDurationInFrames) );

或者更稳的做法：在<Sequence>外单独放<Audio>标签，让音频独立于画面时间轴：

<Composition id="Main" durationInFrames={900fps} fps={30}> <Audio src={voiceoverUrl} /> <SceneS1 /> <SceneS2 /> </Composition>

排查音画不同步时，不要靠肉眼。用ffprobe查看音频实际时长，再用 900÷30 算出画面秒数，两者对不上的，以音频为准扩展durationInFrames。我的规则很简单：凡是加了音频，画面总时长必须大于等于音频时长加 1 秒留白，这条规则我也写进了 Agent Skills。

5. 提示词工程与规则设定：让 AI 稳定输出可渲染代码

5.1 给 AI 的"需求说明书"怎么写

要做提示词工程，首先得理解一个反常识的现象：大模型写代码时，你不给它规则，它就默认按最通用的方式写；你给它规则，它才会按工程化的方式写。

我写视频生成提示词时，固定包含四块：角色设定、项目约束、输出格式、验收标准。

角色设定： 你是 Remotion 专家，有 5 年 React 动画开发经验，熟悉视频渲染的工程实践。 项目约束： - 必须使用 useCurrentFrame() 和 interpolate() 实现动画 - 禁止引入任何非 React 动画库（GSAP、Framer Motion 等） - 所有组件必须是纯函数，不得有外部副作用 - 总帧数 900，fps 30，分辨率 1920x1080 - 每个场景单独一个组件文件，用 Sequence 编排 输出格式： - 返回修改后的完整代码，标注新增/变更的文件 - 先说明实现思路，再给代码 验收标准： - npx tsc --noEmit 无报错 - npx remotion still 渲染任意帧均成功

这段提示词的价值在于"禁止项"。大模型特别爱做的事就是引入各种 fancy 动画库，但那些库和 Remotion 的时间轴模型根本不是一个体系，一旦引入，你在 useCurrentFrame 里根本拿不到它们的动画进度，整个视频就失控了。所以必须明确禁止。

5.2 自动化测试：AI 写代码也要有 CI

既然 AI 生成视频代码已经变成一个工程流程，那测试就必须跟上。我的做法是写一个简单的 Node 脚本，每次 AI 生成新版本代码后自动执行：

const { execSync } = require("child_process"); // 1. TypeScript 编译检查 execSync("npx tsc --noEmit", { stdio: "inherit" }); // 2. 抽帧渲染关键帧 const frames = [0, 150, 300, 450, 600, 750, 899]; for (const frame of frames) { execSync( `npx remotion still src/index.ts out/frame-${frame}.png --frame=${frame}`, { stdio: "inherit" } ); } // 3. 校验输出文件数量 const fs = require("fs"); const files = fs.readdirSync("out"); console.log(`渲染完成，共 ${files.length} 张关键帧截图`);

这套脚本看起来简陋，但非常有效。它把"AI 写完代码是否能渲染"变成一个可自动判定的测试用例。我和 AI 协作时，会明确要求"生成代码后必须能通过上述三个检查"。AI 为了通过检查，会自动规避可能导致编译错误或渲染异常的代码写法。

5.3 给 Agent 建立项目级 FAQ 记忆

除了标准的提示词，我还在项目目录维护了一个AGENT_FAQ.md，专门记录每次协作中 AI 反复犯的错误。比如：

# 项目 FAQ 1. 不要用 remotion.config.ts 里没有注册的 Composition 导出 2. interpolate 的默认 extrapolate 是 extend，入场动画必须显式 clamp 3. 字体加载必须在 index.html 中预加载，不能运行时 fetch 4. 三分钟内视频的分辨率不要用 4K，渲染时间和磁盘占用会暴涨

然后在 Agent Skills 里加一句指令：每次生成代码前，先读取 AGENT_FAQ.md，并保证不违反其中任何一条。实际效果非常显著——同样的错误几乎不会犯两次。这就是把一次性的提示词工程升级成了可积累的项目知识库。多跑几个项目后，这份 FAQ 越来越完善，AI 的产出质量也水涨船高。

6. 成本账：AI 生成视频到底多省钱（和多烧钱）

6.1 本地渲染成本模型

先说本地渲染。我测试过一台 M 系列 MacBook Pro，渲染 30 秒 1080p 视频的平均耗时约为 3-5 分钟，具体取决于动画复杂度。按电费估算一次渲染成本不到 0.1 元。对比传统视频制作：就算是最基础的设计师手工制作一张静态卡片都要几十块，一条 30 秒的动画视频外包报价普遍在 1000-3000 元区间。AI 写代码 + 本地渲染把边际成本几乎打到了零，这是它最让人心动的地方。

但本地渲染也不是完全免费，它烧的是你的时间。你把 5 分钟浪费在等渲染上的时候，本可以去做别的事。我通常的做法是：白天调代码时用低分辨率（960x540）渲染预览，速度能快 3 倍；确认没问题后再用 1080p 出最终版。

6.2 Lambda 渲染的计费逻辑与取舍

如果本地算力不够，或者说需要批量生产几十条视频，那就得上 Remotion Lambda。它的计费模型是GB-秒：按分配给渲染函数的 CPU 内存 × 运行时长计费。举例，你分配 2048MB 内存给渲染函数，渲染 1 分钟视频耗时 60 秒，计费就是2GB × 60s = 120 GB-秒。按当前主流云厂商的定价，约等于 0.002 美元左右。一条视频几美分的计算成本，比本地电费贵，但赢在并发——可以同时开 20 个 Lambda 渲染任务，10 分钟批量产出 20 条视频。

这条路线更适合内容平台、MCN 机构做矩阵号内容。我试用过一次 Lambda 渲染 10 条产品卖点视频，总时长约 4 分钟，渲染费不到 1 美元。相比人工剪辑团队的成本，完全可以忽略。

6.3 真正的大头成本在哪

说句实话，AI 生成视频这条路，真正烧钱的不是渲染，是 API 调用和调试循环。

我用 Claude + Agent Skills 写代码，每个视频需求大约要对话 5-8 轮，每轮消耗几千到上万 token，一次完整流程下来 API 成本大约 1-3 美元。如果是用 Codex 按需付费的套餐，费用也在这个量级。所以单条视频的材料成本大约是：

• 本地渲染电费：约 0.1 元
• AI 编程 API 费用：10-20 元
• 人力校对时间：30-60 分钟

对比人工制作，费用已经降了两个数量级，但还是不能完全免费。想控制成本，核心在于减少调试轮次——这也是为什么我强调 Agent Skills 和项目 FAQ，它们直接决定 AI 第一次产出代码的质量，质量越高，后续调试 API 费用越少。算过一笔账之后，我可以负责任地说，Agent Skills 的投入产出比是所有环节里最高的。

我最近正在把整套流程复制到另一个方向：用 Agent 批量生成课程短视频，一个讲师的口播稿丢进来，自动出分镜脚本、自动配字幕动画、自动渲染成片。过程中发现，AI 写代码生成视频这件事，真正的门槛从来不是代码，而是你对手头领域"结构化程度"的理解。你越能把一次视频生产拆成清晰的阶段、边界和时间轴，Agent 就越能干得漂亮。Remotion 提供了一个足够确定的画布，Agent Skills 让 AI 学会了在这张画布上作画，剩下的，就看你能不能把自己的需求讲清楚——这是任何工具都替代不了的部分。