企业官网建设流程全解析

Remotion 的官方文档里，有一页直接叫 "Prompting videos with coding agents"——想用它做视频，官方给出的第一步是：装一个 coding agent（这一页列出的名单是 Claude Code、Codex、Kimi Code 等），再装 Node.js。
这个默认入口合理，但并不构成边界。因为 Remotion 官方 Skill 从第一天起就是开放格式：一行npx skills add remotion-dev/skills，任何具备代码执行能力的 Agent 都能加载。这篇文章要回答的就是这件事的推论——当一份面向所有 Agent 的说明书，被一个办公 Agent（WorkBuddy）加载之后，视频流水线能不能照样跑通。

一、先看底座：视频是帧号的纯函数

Remotion 是一个用 React 写视频的框架。它的核心抽象朴素得近乎固执——视频是帧号的纯函数。

useCurrentFrame()返回当前帧号，你用 React 描述"这一帧画面长什么样"，渲染器逐帧执行、拼合成片。没有关键帧面板，没有"过渡效果"下拉菜单，一切画面都是代码算出来的：

（来源：https://v3.remotion.dev/ ）

interpolate(frame, [0, 10, 40, 49], [0, 1, 1, 0])就是一段完整的缩放动画——第 0 帧为 0，第 10 帧到位，第 49 帧收回。动画在这里不是"效果"，而是一段函数。

这一点决定了 Remotion 的输出是确定性的：同样的代码、同样的帧号，渲染一万次结果一模一样。字幕不会写错、品牌色不会偏、第 37 帧永远是你指定的那帧。这和 Sora、可灵那类"抽卡式"生成是两条完全不同的路线。

第二个性质同样关键：渲染天然可并行。不同帧可以在多个无头浏览器里同时渲染，最后按帧号拼接：

（来源：https://www.remotion.dev/docs/flickering ）

渲染进程把帧拆给多个 Chrome 实例并行处理，再编码进同一个 MP4。视频生产由此从"线性流水线"变成"可分解的工程任务"。

纯函数、无隐式状态、可并行分解——这三个性质加在一起，使 Remotion 成为代码化视频方案中 Agent 生态最厚的一条：官方 Skill 发布后累计安装已达数十万级（第三方目录口径），GitHub 的 remotion 主题页下聚集了大量第三方项目（见 https://github.com/topics/remotion ）。原因并不玄：从帧号推导画面，恰好落在语言模型生成代码的舒适区里。

二、官方名单很短，社区记录不少

Remotion 官方 Skills 文档的原文是："These skills are useful for AI agents like Claude Code, Codex, Kimi Code or Cursor."（来源：https://www.remotion.dev/docs/ai/skills ）——注意这份名单和 coding agents 教程的名单并不完全相同：Skills 页是 Cursor，教程页是 OpenCode，但两页有一个共同之处：都没有 WorkBuddy。官方的默认入口，确实开在终端里。

Remotion 官方 Skill 于 2026 年 1 月 20 日发布后迅速传播：官方演示视频获得 600 万+ 播放，首周安装量超过 2.5 万（来源：https://github.com/remotion-dev/skills ，发布数据）。从 2026 年 2 月起，中文社区出现了一批 WorkBuddy + Remotion 的完整实操记录，而且路径比想象中更短——WorkBuddy 技能市场中直接提供了名为"Remotion 视频创作"的技能，含渲染、合成、动画、时序、转场等规则文件，用户不需要手动处理任何格式转换：

（来源：https://www.workbuddy.cn/docs/workbuddy/From-Beginner-to-Expert-Guide/Function-Description/Skills-Market ）

在此之上，是几条方向一致的社区实测记录（可复核程度不一，文末已逐一交代）：

• 贴纸动画实录（掘金，2026 年 9 月）：作者吾鳴把一条 12 秒、1080×1920、30fps 的赛车贴纸动画交给 WorkBuddy，文中明确写到"选择了用 Remotion 的 Skill"，建项目、轨迹动画、音频轨道与渲染都由 WorkBuddy 接管。生成过程中小车曾不贴路行驶，作者用一句"小跑车要贴着路开"反馈，WorkBuddy 把车头的朝向和行驶路径作为联动问题一并修正；最终成片经过抽帧核验通过，原文附有 31 帧贴路扫描、最大偏差 56px（容差 60px）的核验记录（来源：https://juejin.cn/post/7680486964761739298 ）。成片在 Remotion Studio 中的预览：

（来源：https://juejin.cn/post/7680486964761739298 ）

• 新闻视频实录（掘金，2026 年 3 月）：作者小虎的《WorkBuddy 从入门到精通》记录了另一条路径——点选"视频生成"指令后，WorkBuddy 自主判断需要 Remotion：检测本机 Node.js 版本、创建项目目录、安装依赖，先出分镜表（每场戏的时长、帧范围、转场方式）再生成 TSX 代码，最后渲染输出 ai-weekly.mp4（2.3MB）。作者特别注明，整个过程"没有依赖任何预装的视频制作软件"（来源：https://juejin.cn/post/7620801241318506537 ）；
• 一类可复现的摩擦，及其 WorkBuddy 样本（51CTO，2026 年 5 月）：Remotion 首次渲染需要下载 Chrome Headless Shell，下载失败是这条链路上最典型的环境问题——官方仓库有长期记录（ https://github.com/remotion-dev/remotion/issues/4763 ），官方文档给出的解法是用browserExecutable参数指向本地 Chrome（ https://www.remotion.dev/docs/miscellaneous/chrome-headless-shell ）。51CTO 的一篇 WorkBuddy 实操记录了同类场景：日志显示 WorkBuddy 读取了本地技能目录Remotion 视频创作/rules/下的规则文件，渲染时遇到同样的下载失败，按官方方案指定本地 Chrome 后成功输出 5.7MB 的 MP4（来源：https://blog.51cto.com/u_16120231/14624201 ）；
• 一键成片链路（腾讯云开发者社区，2026 年 10 月）：HyperFrames + ElevenLabs + Remotion + Captions 的组合，把脚本、配音、画面、字幕压进同一条链路（来源：https://cloud.tencent.com/developer/article/2765212 ）。

这些记录的成色需要交代：它们全部是社区作者发在自己博客里的文章，不是厂商白皮书——但翻车与修复、报错与绕过的细节，恰恰加强了而不是削弱了可信度。

（来源：https://www.jackvaughan.com/podcasts/jonny-burger ）

三、WorkBuddy 的形态：折叠的含义与边界

WorkBuddy 是 CodeBuddy 旗下的通用办公 Agent，官方定位是"一人指挥，全行业专家执行"，一句话指令自主规划并交付完整结果，支持 MCP 生态和自定义 Skills 扩展能力（来源：https://www.codebuddy.cn/work ）。它的默认交互是委托一个任务，而不是打开一个工程、和 AI 结对改代码。

所谓"折叠"，本文用它指一件具体的事：工程信息的可见性被移出用户决策面。工程本身仍然存在——Node 环境照样装、依赖照样解析、渲染报错照样发生、修复照样执行——只是这些动作转移到任务执行层完成，不再以文件树和终端流的形式要求用户实时参与。折叠的边界因此也很清楚：只要执行层成功，用户看到的就是任务和产物；一旦执行层失败，工程信息会以报错的形式重新出现，用户不得不重新面对它（第五节会展开讨论这个代价）。

对比之下，在 Claude Code 里用户是工程协作者：文件树摊开、报错堆栈裸露、每一步都看得见。WorkBuddy 把同样的工程内容沉到任务执行层之下——没有消灭工程，只是改变了工程的暴露程度。

兼容性可以拆成两层看。技能层已经现成：WorkBuddy 技能市场直接提供"Remotion 视频创作"技能，安装后即可在任务中被引用。格式层有官方文档可查：WorkBuddy 的技能包是包含 SKILL.md 的文件夹或 zip，SKILL.md 需含 YAML 格式的名称与描述，与 Agent Skills 开放规范是同一套结构；文档还提到从.agents等目录复制安装的技能会保持原始内容（来源：https://www.workbuddy.cn/docs/workbuddy/From-Beginner-to-Expert-Guide/Function-Description/Skills-Market ）。也就是说，即便不从技能市场安装，标准的 Agent Skills 产物也有进入 WorkBuddy 的通道。第三方教程的安装记录还显示，skills 安装器在链接技能时覆盖的客户端目录列表中包含 CodeBuddy（WorkBuddy 同属 CodeBuddy 产品线，来源：https://www.it235.com/ai/remotion/install.html ）。需要说明的是，这类安装日志里的"检测到 N 个 agent"计数并不可靠——上游安装器存在已记录在案的过度检测问题（ https://github.com/vercel-labs/skills/issues/186 ），因此这里只采用"客户端列表包含 CodeBuddy"这一可直接观察的事实，不采用任何检测计数。

四、安装与使用

打开WorkBuddy，点击专家·技能·连接器，选择技能，搜索remotion，点击安装

安装后可以告诉ai使用这个技能，比如‘帮我用 Remotion 做xxxx视频’，可选写具体要求（越详细后面改动越少），部分过程如下（下面第一张图是做另一个视频，与后面的降雨原理视频无关）

这里ai写了代码添加了音频

中间仅提了2次左右的修改，出现过标题重复之类的小问题，最终产物如下

视频看起来不错，有一定的动态效果，也没有出现明显遮挡的文字，声音也没有错位

五、产物是可修改的——这也是它和"一键出片"的分界线

委托式交互最容易引发的担心是：做完之后想改一个字怎么办？会不会变成一次性黑盒？

不会。Remotion 工程天然是可修改的：你随时可以追加一句委托——"把第 3 秒那个标题的入场改慢一点"——Agent 会定位到对应的帧区间和 interpolate 参数，只改那一处，重渲染。你不需要理解整个工程，但工程就在那里，改一帧和重做一条的成本天差地别。

（来源：https://www.remotion.dev/docs/editor-starter/features ）

Canvas、Timeline、Inspector 一应俱全。Agent 生成的工程随时可以被人接管、按帧修改——确定性意味着"改"是廉价操作，而不是重新抽卡。

也要承认折叠有代价。委托式修改的理想图景是 Agent 一次定位准确；一旦定位错了帧区间、或修改引发新的渲染报错，用户面对的将是一个自己从未进入过的工程语境——折叠层失效时，工程细节不会消失，只是以一种毫无准备的方式回来。这是委托式形态固有的摩擦，本文不打算假装它不存在。缓解这一点的，恰恰是 Remotion 路线本身的性质：产物是标准 React 工程，任何 Agent、乃至人自己，都可以接管它。

六、两种形态放在一起看

以下对比基于两类产品的公开交互形态与官方定位，是定性归纳，而非基准测试。可查证的事实锚点有两个——WorkBuddy 官网的"一句话指令自主规划并交付完整结果"（ https://www.codebuddy.cn/work ）；Remotion 官方 coding agents 教程列出的先决条件是一个 coding agent 加 Node.js（ https://www.remotion.dev/docs/ai/coding-agents ）。归纳如下：

同一条 Remotion 链路，两种形态暴露给用户的层次不同：编程 Agent 把工程摊在你面前，WorkBuddy 把工程收进任务后面。

七、适合什么，不适合什么

适合：

• 要确定性输出的视频——品牌规范精确一致、数据图表数字准确、批量生成只换文案或数据源；
• 要可修改的工程产物——做完还能回头调某一帧，而不是推倒重来；
• 要把视频嵌入更大的任务流——脚本、调研、配音、字幕、渲染在同一条委托链路里完成，不在多个工具间来回切换。

不适合：

• 追求电影感镜头、复杂实拍质感——那是 Sora、可灵、Veo 的领域，Remotion 不解决这类问题；
• 追求零判断的"一键出片"——Agent 能写代码、能跑渲染，但信息密度、动画节奏、叙事结构这些判断仍然在人这边；
• 需要极致代码控制和复杂工程调试——编程 Agent 暴露的工程细节更多，这类需求它更直接。

八、收束：多了一个入口，判断仍在人这边

Remotion 的价值，是把视频变成帧号的纯函数，让 Agent 可以可靠地生成和迭代；Skill 则把这份能力封装成说明书。官方把说明书的默认发放窗口开在了终端里，但说明书的内容从不限定读者。

WorkBuddy 用它做视频，不构成特例，也无意替代谁。它提供了另一种折叠层级：任务委托式的入口，工程细节下沉，产物依然可修改。对读者来说，这意味着选择变多了：要工程深度，去终端里找编程 Agent；要启动摩擦低、任务编排顺，委托式入口是一个可跑的选项。

工具一直在折叠工程细节，但从来没有折叠判断。有判断力的人，只是又多了一个让判断落地的入口。

创作不易，禁止抄袭，转载请附上原文标题及其链接。