作者注：让编程 Agent 做视频，目前主要有两条路径：代码逐帧渲染出 MP4，或者生成网页演示再录屏。本文对比两者的原理、交付物和适用场景，并给出 5 步选型方法。
很多开发者已经习惯让 Claude Code、Cursor、Codex 帮忙写页面和脚本，但“让编程 Agent 直接做视频”仍然让人犹豫。常见的担心是：Agent 只会写代码，怎么产出有节奏、有声音、能直接发布的视频？本文介绍 代码逐帧渲染与网页演示录屏两条路径，帮你判断自己的需求该走哪一条。
这不是又一篇“AI 一键生成视频”的科普。两条路径都基于开源技能集 garden-skills 中的真实技能：motion-showreel 负责代码逐帧渲染，web-video-presentation 负责网页演示录屏，它们的工作流、检查点和交付物都有明确约定。
核心价值：读完本文，你将知道两条路径各自的原理和边界，能在 5 步之内为自己的视频项目选定路径，并了解如何为编程 Agent 配置合适的大模型。
编程 Agent 做视频的 2 条路径核心要点
先用一张表看清两条路径的本质差异。简单说，代码逐帧渲染是“Agent 当动效导演 + 渲染农场”，网页演示录屏是“Agent 当演示文稿工程师，人来按录制键”。
| 要点 | 代码逐帧渲染（motion-showreel） | 网页演示录屏（web-video-presentation） |
|---|---|---|
| 核心原理 | 确定性 render(t) 页面，按时间逐帧捕获 |
Vite + React + TypeScript 网页，点击或键盘推进后录屏 |
| 交付物 | MP4 成片 + 可编辑源码 | 可录制的 16:9 网页演示工程 |
| 典型时长 | 短片 5–60 秒，章节式长片最长约 20 分钟 | 取决于讲解脚本，按章节和步骤推进 |
| 声音处理 | 画面与音乐、音效、旁白共用一条时间轴 | 可选的旁白音频合成，一个画面步骤对应一个旁白节拍 |
| 最适合 | 产品宣传片、Logo 片头、动态字体、循环动画 | 课程讲解、文章转视频、产品演示、技术分享 |
代码逐帧渲染路径详解
motion-showreel 的关键在于“确定性”。Agent 写出的页面暴露一个 render(t) 函数，给定时间 t 就能画出唯一确定的一帧，渲染器按帧率逐帧调用并捕获画面。因为同一页面能产出静帧、联系表、三方向风格板、代理版和母版，所以从提案到成片始终是同一份源头，不会出现“预览好看、成片走样”的问题。运动模糊、超采样和胶片颗粒都只是渲染参数开关。
声音方面，这条路径把剪辑点、重拍和音效放在同一条时间轴上，数字是共享的。音乐既可以用内置的零依赖合成器或 Tone.js 采样钢琴合成，也可以对齐用户自己的音轨，并做节拍和 drop 检测。旁白只朗读用户提供的脚本，画面跟随真实语音时间戳走，而不是反过来。
网页演示录屏路径详解
web-video-presentation 走的是另一种思路：把视频当成“会动的演示文稿”。它固定一个 1920×1080 的舞台并按视口缩放，保证录屏时画面稳定；演示由 (chapter, step) 光标驱动，每次点击或按键推进一个视觉步骤，对应一句旁白。
这条路径更像传统的“写稿 → 做页 → 录制”。技能会先把原始文章改写成旁白脚本，再把脚本节拍映射到全屏场景，在脚本、主题、大纲、实现模式和可选音频这几个节点强制停下来让你确认。录制时进度控件只在鼠标悬停时出现，舞台保持干净。
两条路径的工作流对比：让编程 Agent 做视频的关键差异
如果只看最终都是视频文件，两条路径似乎差不多；但从工作流细节看，它们对人和模型的要求完全不同。下面这张表从 8 个维度拆开对比。
| 维度 | 代码逐帧渲染 | 网页演示录屏 |
|---|---|---|
| 人工检查点 | 2 个：确认需求、确认风格帧 | 5 个：脚本、主题、大纲、实现模式、可选音频 |
| 风格资产 | 43 种风格库（瑞士编辑、水墨、合成波、软 3D、电影片头、国潮等） | 23 个内置主题（编辑风、终端风、工程蓝图、瑞士国际主义等） |
| 风格定义范围 | 外观、运动、镜头语法、声音调色板 | 设计 Token，控制配色、字体与版式 |
| 语音方案 | Gemini / MiniMax TTS，只读用户脚本；也可用真实录音 | 可插拔 TTS，内置 MiniMax mmx-cli 与 OpenAI TTS，另有 ElevenLabs、edge-tts、Azure、Google Cloud、macOS say 接入片段 |
| 音乐音效 | 独立来源，自动为语音让位 | 主要围绕旁白，不强调配乐 |
| 质量验收 | 尺寸、帧率、时长、帧数、黑帧、响度、真峰值、循环接缝、确定性全部需 PASS | 依赖录屏前的人工预览 |
| 是否需要人录制 | 不需要，直接渲染出 MP4 | 需要，用录屏工具录制网页 |
| 当前版本 | v0.1.0 | v1.2.2 |
这里有一个容易被忽略的设计点：motion-showreel 把“技术验收”和“审美判断”严格分开。前者是机器可检查的硬指标，必须全部通过；后者的评审意见交给用户，由用户最终拍板。这种分工让 Agent 不会因为“觉得好看”就跳过黑帧或响度超标的问题。
网页演示录屏则把控制权更多留给人。5 个检查点看起来繁琐，但对讲解类视频非常必要，因为脚本措辞、章节划分是内容质量的核心，最好由作者本人确认。
编程 Agent 做视频快速上手
第一步：安装技能
两个技能都遵循 SKILL.md 规范，可以装进 Claude Code、Claude.ai、Cursor、Codex CLI、Gemini CLI、OpenCode 等环境。下表列出常用安装方式，命令直接在终端或 Agent 对话框中输入即可。
| 安装方式 | 操作要点 | 适合人群 |
|---|---|---|
| skills CLI | 运行 npx skills add ConardLi/garden-skills -s motion-showreel，或把 -s 后换成 web-video-presentation；加 -a claude-code 可指定 Agent |
任意 Agent 用户，一行安装 |
| Claude Code 插件市场 | 先执行 /plugin marketplace add ConardLi/garden-skills，再安装 motion-showreel-skills@garden-skills 或 presentation-skills@garden-skills |
Claude Code 用户 |
| Releases 固定版本 zip | 下载对应版本 zip 并校验 SHA-256，解压到 .claude/skills/、.agents/skills/ 或 .codex/skills/ |
CI、离线环境、需要可复现的团队 |
| 手动复制 | 克隆仓库后把技能目录复制到项目的技能目录 | 想二次修改技能的开发者 |
第二步：准备驱动模型
编程 Agent 做视频的大部分工作是“写代码 + 理解需求 + 审视画面”，所以驱动模型的代码能力和长上下文表现最关键。如果你的 Agent 支持自定义接口，只需配置两个参数：API Key 和 base_url。OpenAI 兼容格式的 base_url 可填写 https://api.apiyi.com/v1,Anthropic 格式的接入地址与具体参数请以 API易 文档中心 docs.apiyi.com 为准。
第三步：用一句清晰的需求启动
启动时把关键信息一次说全，能减少来回确认的轮次。以代码逐帧渲染为例，技能会主动确认主题、时长、横竖屏、音乐与音效来源、旁白模式；网页演示录屏则需要你提供原始文章或脚本，以及大致的章节划分。
- 代码逐帧渲染示例需求：为一款开发工具做 30 秒横屏产品片，合成波风格，用内置合成器配乐，无旁白。
- 网页演示录屏示例需求：把一篇技术文章做成 8 分钟讲解视频，工程蓝图主题，需要中文旁白。
🚀 快速开始：如果你还没有为 Agent 配置模型接口，可以先在 API易 apiyi.com 注册并获取测试额度。平台同时兼容 OpenAI 与 Anthropic 两种接口格式，Claude Code 这类 Agent 和自研脚本都能直接接入，便于先跑通一个短片样例再决定路径。
第四步：在检查点认真拍板
代码逐帧渲染在风格帧阶段，未指定风格时会给出三个差异明显的方向，这是决定成片气质最便宜的时机。网页演示录屏在大纲阶段确认后才会进入实现，此时修改章节成本最低。两条路径都建议把主要意见集中在检查点提出，而不是成片后返工。
第五步：验收与交付
代码逐帧渲染交付 MP4 和可编辑源码，建议保留源码，后续改文案、换配色只需重新渲染。网页演示录屏交付的是工程，你需要用录屏工具按章节录制，必要时把可选 TTS 生成的音频与录屏在剪辑软件中对齐。
为编程 Agent 做视频选择驱动模型
两个技能本身不绑定模型，但实际效果高度依赖驱动 Agent 的大模型。下表整理了在 API易 上可调用的相关模型，价格全部以 API易 价格页 docs.apiyi.com/models 的实际数据为准，计费单位与口径请以价格页标注为准。
| 模型 | 在本文场景中的角色 | API易 价格（输入 / 输出 / 缓存） | 可用平台 |
|---|---|---|---|
| claude-opus-5-5 | 复杂动效编排、长片章节规划、主力编码 | $4 / $20 / $0.2 | API易 apiyi.com |
| claude-sonnet-5-5 | 日常编码主力，性价比均衡 | $2 / $10 / $0.1 | API易 apiyi.com |
| kimi-k3.1-pro | 长文改写旁白脚本、中文内容整理 | $2 / $10 / $0.2 | API易 apiyi.com |
| deepseek-v4.1-flash | 批量小改动、字幕整理等轻量任务 | $0.3 / $1.2 / $0.006 | API易 apiyi.com |
| gpt-image-2.6-flare / gpt-image-2.6-sunburst | 生成封面、风格参考图、片中素材 | 文本输入 $5 / 图片输入 $8，输出 $30 | API易 apiyi.com |
关于语音合成需要特别说明：motion-showreel 内置的是 Gemini 与 MiniMax TTS，web-video-presentation 内置的是 MiniMax mmx-cli 和 OpenAI TTS。这些 TTS 模型如果在 API易 价格页中查不到，即表示 API易 目前暂未上线该模型，我们会尽快上线；在此之前请按技能文档直接使用对应服务商，或换用技能支持的其他 TTS 方案。同样，文心 ERNIE 系列目前 API易 没有上线，如果你的流程依赖它，需要另行接入。
💰 成本建议：做视频时 Agent 会反复读取同一份 brief、风格定义和工程代码，缓存命中率通常较高。选择带缓存价格的模型能明显降低多轮迭代成本，具体可在 API易 价格页 docs.apiyi.com/models 按模型逐一对照。
5 步决策：编程 Agent 做视频该选哪条路径
前面讲了原理和工具，下面把选择过程压缩成 5 个问题，按顺序回答即可得出结论。
- 内容是“讲清楚”还是“看得爽”？ 以信息传递为主选网页演示录屏，以视觉冲击为主选代码逐帧渲染。
- 时长有多长？ 60 秒以内的短片天然适合逐帧渲染；十几分钟以上的课程讲解，网页演示录屏更好维护。
- 是否需要精确的音画同步？ 卡点剪辑、音效命中、循环无缝这类需求，只有共享时间轴的逐帧渲染能稳定做到。
- 是否接受人工录屏？ 如果希望全自动产出、可在 CI 中重复渲染，选逐帧渲染；如果愿意亲自按节奏讲解或录制，网页演示录屏更灵活。
- 后续是否频繁修改？ 两条路径都保留源码，但网页演示改一页文字立即可见，逐帧渲染则需要重新出片。
| 典型场景 | 推荐路径 | 理由 |
|---|---|---|
| 新品发布 30 秒宣传片 | 代码逐帧渲染 | 风格库丰富，音画同轴，直出 MP4 |
| Logo 片头 / 标题序列 | 代码逐帧渲染 | 确定性渲染保证每次输出一致 |
| 技术文章转讲解视频 | 网页演示录屏 | 自动改写旁白脚本，一步一节拍 |
| 在线课程章节 | 网页演示录屏 | 主题统一，章节结构清晰，便于逐课维护 |
| 带旁白的年度回顾短片 | 代码逐帧渲染 | 画面跟随真实语音时间戳，支持章节式长片 |
| 产品功能演示 | 网页演示录屏 | 点击驱动，演示节奏可控 |
💡 选择建议：如果拿不准，可以先用同一份需求分别让 Agent 做一个 15 秒样片和一页演示，比较产出质量与迭代成本。通过 API易 apiyi.com 用同一个 Key 切换 Claude、Kimi、DeepSeek 等模型，也方便顺便比较不同驱动模型在你项目上的表现。
常见问题 FAQ
Q1：什么是“让编程 Agent 做视频”？
指让 Claude Code、Cursor、Codex 等编程 Agent 通过写代码来产出视频。它不是直接调用视频生成模型，而是用网页、动画和渲染脚本组织画面与声音，因此结果可编辑、可复现。
Q2：代码逐帧渲染和网页演示录屏有什么区别？
代码逐帧渲染在视觉表现和音画同步上更强，直出 MP4，但适合较短的片子。网页演示录屏在讲解结构和后期维护上更有优势，但需要人工录制。前者像动效工作室，后者像演讲幻灯片工程。
Q3：这两个技能目前是什么版本，支持哪些 Agent？
按 garden-skills 仓库信息，motion-showreel 为 v0.1.0，web-video-presentation 为 v1.2.2。两者遵循 SKILL.md 规范，官方标注已在 Claude Code、Claude.ai、Cursor、Codex CLI、Gemini CLI、OpenCode 上测试。
Q4：这种方式最适合哪些场景？
– **产品营销**：发布会预热短片、功能亮点动效。
– **品牌视觉**:Logo 演绎、片头片尾、动态字体海报。
– **知识传播**：技术文章转讲解视频、课程章节、内部培训。
– **开发者内容**：架构讲解、工具演示、开源项目介绍。
Q5：如何给编程 Agent 配置模型接口？
在 API易 apiyi.com 注册并创建 API Key，然后在 Agent 或脚本中填写 Key 与 base_url。API易 兼容 OpenAI 和 Anthropic 两种接口格式，具体地址与参数见文档中心 docs.apiyi.com，模型价格以 docs.apiyi.com/models 为准。
Q6：旁白可以让 Agent 自己写吗？
两个技能的取向不同。motion-showreel 的 TTS 只朗读用户提供的脚本，避免 Agent 擅自编写台词；web-video-presentation 会把原始文章改写成旁白脚本，但必须经过你在脚本检查点确认。你可以用 API易 上的 kimi-k3.1-pro 或 claude-sonnet-5-5 先起草脚本，再自行审定。
Q7：这两条路径有哪些已知限制？
代码逐帧渲染依赖浏览器逐帧捕获，长片渲染耗时较长，复杂 3D 或粒子效果会显著增加渲染时间。网页演示录屏的最终质量受录屏工具和操作者影响，难以完全自动化。另外部分内置 TTS 服务需要单独开通，若 API易 价格页查不到对应模型，即表示暂未上线。
Q8：可以两条路径混用吗？
可以，而且很常见。比如用代码逐帧渲染做 10 秒片头和章节转场，用网页演示录屏做主体讲解，最后在剪辑软件中拼接。两者都基于网页技术，配色和字体可以共享同一套设计规范。
编程 Agent 做视频核心要点 Key Takeaways
- 两条路径本质不同：逐帧渲染直出 MP4，网页演示需人工录屏。
- 逐帧渲染靠确定性：同一
render(t)页面产出预览与母版，结果可复现。 - 网页演示靠结构：一个视觉步骤对应一句旁白，适合长讲解。
- 检查点决定质量:2 个与 5 个检查点分别对应视觉优先与内容优先。
- 技术验收与审美分离：黑帧、响度、帧数等硬指标必须全部 PASS。
- 模型选择影响成本：驱动模型可在 API易 统一接入，价格以 docs.apiyi.com/models 为准。
总结
让编程 Agent 做视频，关键不在于“能不能”，而在于选对路径：
- 代码逐帧渲染：适合短片、片头、强节奏的视觉作品，音画同轴、直出成片。
- 网页演示录屏：适合讲解、课程、文章转视频，结构清晰、便于维护。
- 5 步决策：依次判断内容目标、时长、音画同步、是否接受录屏、修改频率即可选定。
建议先用一个 15 秒样片跑通全流程，再扩展到正式项目。驱动模型方面，推荐通过 API易 apiyi.com 统一调用 Claude、Kimi、DeepSeek 与 GPT Image 系列模型，接口兼容 OpenAI 与 Anthropic 格式，价格以价格页实际数据为准。
📚 参考资料
- GitHub – garden-skills:motion-showreel 与 web-video-presentation 技能所在仓库
- 链接：
github.com/ConardLi/garden-skills -
说明：包含两个技能的 README、SKILL.md 与安装方式
-
Agent Skills 规范:SKILL.md 格式说明
- 链接：
agentskills.io -
说明：了解技能目录结构与 Agent 如何按需加载技能
-
API易 文档中心：接口接入说明
- 链接：
docs.apiyi.com -
说明：OpenAI 与 Anthropic 兼容格式的接入参数
-
API易 模型价格页：各模型实际计费
- 链接：
docs.apiyi.com/models - 说明：本文所有价格数据均以此页为准
作者:API易 技术团队
技术交流：欢迎在 API易 网站首页联系我们，更多接入资料可访问 docs.apiyi.com 文档中心
