01｜先想清楚：视频生成模型和 Remotion 是两条完全不同的路
先说结论：视频生成模型是「生成」，Remotion 是「程序」。前者你给一段提示词，它吐出一个 mp4，抽到什么节奏、抽到什么构图，你没法控制第二次；后者你写的是 React 组件，每一帧都是确定性的代码——同一份代码跑一万次，出同一支片子。
Remotion 本体是 remotion-dev/remotion（2026-10-18 实查 ★64,847 / 5,147 forks / 10-17 仍在提交），定位就一句「用 React 程序化地做视频」，npm 上 @remotion/player 当前版本 4.0.536。它的工作方式很反直觉：你写的是网页，用 useCurrentFrame() 拿到当前帧号，把所有动画参数都用帧号算出来；渲染时 Remotion 开一个 headless Chrome，一帧一帧地截，最后用 FFmpeg 拼成视频。没有「录制」，没有「表演」，每一帧都是算出来的。
两条路的成本结构差几个数量级：
- 视频生成模型：按秒/按次计费，出片有抽卡成分——抽崩了就得重roll，且生成完代码就死了。换一句文案、换一个颜色，只能重新生成一遍，上一遍的花费白扔。
- Remotion：开发和渲染的边际成本趋近于 0（本地渲染就耗电费），真正的成本在第一支片子上。但第一支做完，模板就在你手里了——参数化之后，换文案、换配色、换数据，重渲一次几十秒。做 100 支同类视频，第 2 支开始几乎零成本。
所以 Remotion 的「可复用」不是营销话术，而是它的媒介属性：视频是代码写出来的，代码天然可以改、可以 diff、可以进 CI。这也是整篇文章的立足点——它最适合的不是「一次性」的片子，而是要反复出、要换数据出、要批量出的模板型内容（数据日报、榜单视频、课程动画、产品演示）。
但它有明确的能力边界：生成模型能给你「真人实拍感」「物理世界的随机性」，Remotion 给不了。你要做的是设计明确、结构清晰的程序化动画——图形、文字、数据、镜头路径，越「工程化」的需求它越擅长；越「电影感」的，越该用生成模型。
做营销宣传片、给真实产品截图上运镜这类事，站内另有一篇 video-shotcraft 写过完整的 Agent 技能路线（★12,329，配方卡 + Remotion 出片），和本文的「自建可复用模板」是两种打法，可以对照着看。
02｜模型与 Agent：差距不只是代码水平，还有审美和导演能力
同一份 Remotion 工程，换个模型来写，代码层面的差异没那么大——interpolate、spring 这些 API 每个模型都会用。真正的差距在审美和导演能力上：同一句「做个 15 秒动效 showreel」，有的模型给你 3 个强段落 + 干净转场，有的模型给你密集蒙太奇 + 满屏炫技。前者克制、后者热闹，没有绝对好坏，只有哪种更贴你的片子气质。
这套判断站内已经有过一次同题实测：Opus 5.5 vs GPT-6 Astra（article-125，$4/$20 vs $10/$50，价差 2.5 倍，两个都是 2026 年 9 月的新旗舰）。那篇的结论可以拿来做模型选择的标准：要叙事感、克制、可长看，偏 Opus 5.5 一路；要密度、冲击力、快节奏，偏 Astra 一路；高频出片算总账时，单价差 2.5 倍会被产量放大。本文不重复那套对比，就引用它的结论当选型参考。
还有一层是 Agent 环境——这节专门讲本条选题里点名的「WorkBuddy 运行 Remotion 的环境问题」。
Remotion 不是纯 npm 包：渲染要走 headless Chrome，Studio 预览要开浏览器窗口，agent 在沙箱里跑常常缺这几样。我踩过的实际表现：
remotion studio起不来，agent 报「浏览器未打开」——其实是它用了--no-open又把 URL 丢了；- 渲染命令卡死在「等待媒体元素」——headless Chrome 没等到页面 ready；
- agent 把 Remotion 写成了「一个 React 页面 + 一个按钮」，忘了所有动画必须挂在
useCurrentFrame()上——这是脱离帧号驱动的根源性错误。
解法不是改环境，是用提示词把环境假设写死。官方 remotion-dev/skills 里的 skill 就是干这个的：它的 remotion-studio skill 原文就写着「在 Cursor 里跑 npx remotion studio（不加 --no-open）让浏览器自动打开；其它 agent 客户端如果开不了浏览器就用 --no-open，再把打印的 URL 喂给内置浏览器」。这就是典型的「环境常识」——你不写，agent 就猜；你写进提示词或 skill 里，它就照做。所以本文 03 节的准备清单里，装官方 skill 排第一位：skill 本质是把「这个环境里哪些命令长什么样、哪些参数该开哪些该关」固化成 agent 能读的知识。后面所有「踩坑→提示词约束」的例子，都是这个思路。
03｜动手前的准备：Skill、环境、长期项目、生图工具
四件事，一次做完，之后每支视频都站在同一个地基上。
① 装官方 Skill。Remotion 官方维护着 12 个 Agent Skill（remotion-dev/skills，2026-10-18 实查 ★5,305 / 584 forks / 10-16 仍在提交，无 license 字段——按官方组织仓库对待）：
npx skills add remotion-dev/skills安装后 agent 会多出这些技能：remotion-best-practices（总纲，拿不准就用它）、remotion-create（脚手架/新建 composition）、remotion-markup（写法的最佳实践）、remotion-studio（开预览）、remotion-render（出片）、remotion-maps（地图动画）、remotion-captions（字幕）、remotion-interactivity（Studio 里直接拖参数）、remotion-multimedia、remotion-docs（查官方文档）、remotion-saas、remotion-upgrade。官方还有各 agent 的对应安装入口：Claude Code / Codex / Cursor 各有一个 plugin 仓（star 数都不大，说明主入口还是上面那条 npx skills）。这一步解决的是 02 节的环境问题：skill 是写给 agent 看的环境说明书，装不装，出片质量差一个档次。
② 检查电脑环境。两个硬依赖：Node.js（版本对齐当前 4.0.x 的要求即可，node -v 看一眼）；headless Chrome（渲染和 Studio 都靠它，系统自带 Chromium 或它自己下载）。Windows 上没有「缺哪个库」这回事，但沙箱 agent 环境里 Chrome 起不来是高频坑——见 02 节。生图工具如果是走 API，把 key 放进项目 .env，别写死进代码。
③ 搭一个长期维护的 Remotion 项目，这是很多人跳过的、但最值钱的一步：
npx create-video@latest --yes --blank --no-tailwind .
npm i官方 remotion-create skill 里的标准脚手架命令。一次装好依赖、配好工程，之后每支新视频都是在同一个项目里加一个 composition，不重建、不重装。项目就是模板库：这次做音符、下次做地图，代码都沉在同一个仓库里，互相能 import。再配好 git，模板的每次演进都有版本——「复用」这件事，靠的是仓库，不靠聊天记录。
④ 配置生图工具。动画里的背景图、素材图，要么提前备好，要么让 agent 现场生成。走 API 的生图工具要提前配好，agent 才知道「缺素材时调谁」。我习惯是：确定要用的素材全部提前生成好放进 public/，动画阶段只让 agent 写代码，不掺生图——生图的随机性和动画的确定性会打架，分开各做各的。
04｜案例：「音符跳跃」的完整拆解（想法 → 方案 → 提示词 → 模板 → 复用）
挑一个故意简单但五脏俱全的例子：10 秒循环，3 个音符沿弧线跳起落下，落地时轻微压扁回弹。就这一个例子，把整个制作链路走一遍。
第一步，想法：「我想要一段音乐感很强的开场动画，音符自己会跳」。到这里就停住，别急着写代码。
第二步，找参考。找参考动画的方法，按性价比排序：
- LottieFiles 搜关键词（lottie 社区就是做「小动画素材」的，搜 "bouncing music notes" 一堆），看中哪个，直接下载那个 .lottie 文件拆看它的曲线；
- Dribbble / 站酷 搜动效截图，只看「节奏」不看「画法」；
- 最土但最有效：把喜欢的动画录屏，截 3~5 帧——起跳帧、最高点帧、落地帧、压扁帧、回弹帧——丢给 agent，让它「照这几帧描述里的节奏做」。参考动画的价值不是让人抄，是把「节奏」从一个说不清的形容词变成可描述的帧序列。这是「把需求说清楚」的第一块砖。
第三步，方案。拿到参考帧，和 agent 一起定方案：轨迹用 interpolate 从帧号算，起跳用 spring 带弹性，落地压扁用 scale 关键帧。核心就一段：
const frame = useCurrentFrame();
const p = interpolate(frame, [0, 15, 24], [0, 1, 0], {
extrapolateRight: 'clamp',
easing: Easing.out(Easing.quad),
});
// 落地瞬间压扁：p 在 [0.9, 1] 区间时 scaleY 压缩
const squash = p > 0.9 ? 1 - (p - 0.9) * 0.6 : 1;「跳」的感觉 90% 来自落下段比起跳段快（非对称 ease）和落地的 squash 那两帧。agent 会写出完整代码，你只需要盯着这两处：起跳缓出、落下加速，说清楚就行，不用碰缓动函数本身。
第四步，提示词。这一步就是 02 节那句「把需求说清楚」的落地，我实际用的提示词结构（浓缩版）：
- 项目环境：Node + Remotion 4.0.x，已有项目，composition 加在 src/ 下，
渲染走 npx remotion render，预览用 npx remotion studio（本环境能开浏览器，不加 --no-open）
- 参考：附上 5 帧截图，节奏照参考，起跳缓出、落下加速，落地压扁 2 帧回弹
- 输出：一个 composition，10 秒 @ 30fps，可循环（首尾状态一致）
- 参数化：颜色、音符数量、背景色、BPM 间隔 全部抽成 props，给默认值
- 不要：不要加参考里没有的元素，不要引入额外依赖四条约束里，「环境」和「不要」这两块的价值最大——前者避免 agent 猜环境，后者避免它自由发挥给你加戏。提示词写的好坏，判断标准只有一个：agent 出片后你要不要返工。返工少，就是写清楚了。
第五步，完成动画模板。出片后做两件事验收：一是在 Studio 里逐帧拖时间轴看落地那两帧的压扁够不够（Studio 就是为这种「最后 10% 的手感」存在的）；二是把这次的做法沉进仓库——这个 composition 现在叫 NoteJump，props 全开，它就正式是「模板」了。
第六步，复用。下次要做「歌词弹跳」，不需要重写，只需要：
<NoteJump colors={["#6c4dff","#22d3ee"]} count={4}
beat={40} background="#0f0f1a" />改 4 个 props，重渲 30 秒。第 01 节说的「可复用」在这个环节变成具体动作：复用的是组件，不是视频文件。项目里模板攒得越多，出同类片的边际成本越低——这就是「代码写完就死了」和「代码写完开始复用」的分界线。
05｜开放型创作 vs 精细控制：什么时候该放权，什么时候该抠
做动画有两个模式，选错模式比提示词写错更伤：开放型创作（你说「做个有音乐感的开场」，agent 自己定节奏定构图）和精细控制（「第 12 帧落地，压扁 0.6 倍，2 帧回弹」）。
开放型的动作难度低，但上限低：它适合氛围类、装饰类的动画，agent 自由发挥的空间越大越出彩；但你没法精确验收，只能「抽卡看感觉」。
精细控制反过来：难度高，但可验收。精确到帧的要求，最终一定落到 Studio 上——官方 skill 里专门有 remotion-interactivity，就是让 Remotion 元素在 Studio 里可以被直接点选、改参数、拖时间轴，不用每次「改代码→重渲→再看」。所以务实的分工是：方案、节奏、整体气质走开放型；具体帧、具体数值、最后 10% 的手感走 Studio 精细控制。别在提示词里纠结「让它第 12 帧精确压扁 0.6」——那是 Studio 的活，提示词负责到「方案层」就该停了。
06｜手绘动画：两档做法，先分线稿难度
「让一张线稿动起来」这类需求（白板式讲解、课程动画很常用），按线稿复杂度分两档：
简单线稿 → SVG 路径绘制。把线稿转成 SVG（手工描或 AI 转都行），用经典的「描边动画」：
const f = useCurrentFrame();
const len = 1000; // path 总长
<path d="..." stroke="#fff" strokeWidth="3" fill="none"
strokeDasharray={len}
strokeDashoffset={interpolate(f, [0, 45], [len, 0])} />直线、圆弧、封闭图形，这条路线又快又干净。
复杂线稿 → 遮罩显现。线一多、一碎，逐个 path 描边就疯了。改用「模拟手绘」：底图放完整的成品线稿，上面盖一层会「擦掉」的遮罩（渐变条或笔刷路径逐段扫过），扫到哪、哪一段才显现出来——视觉上就是「一笔一笔画出来」，但代码里只有一段遮罩位移。
判断标准很直白：线稿能拆成 10 个以内 path 的，走 SVG 描边；超过的，直接遮罩显现。别在复杂线稿上死磕 SVG 路径，那是拿工程时间换效果，不划算。
07｜地图动画：接高德 API，一条飞线路径
「数据从 A 城飞到 B 城」这类地图动画，Remotion 里挂地图 JS 库就是。官方 remotion-maps skill 默认列的是 Mapbox / MapLibre / MapTiler / CesiumJS（飞越式 3D 地理动画）那一套；Remotion 本质是 React，挂哪家地图库都行，高德作为国产替代完全可以接：初始化 AMap.Map 实例放进 composition，关键帧上驱动 map.flyTo([lng, lat], zoom) 做镜头飞行，叠加逐帧弹出的 marker，就是「一条路径飞过去、城市一个个亮起来」的标准动效。两三个注意点：
- Key 别写死：放
.env，agent 提示词里明确「key 在 .env 的 VITE_AMAP_KEY」，避免它把 key 写进组件里被进 git； - 合规：商用要走高德的 Web 端授权（JS API 有域名白名单），渲染出的视频里地图内容的版权归属按高德服务条款来，做公开分发的片子前要过一遍；
- 确定性：地图瓦片加载是异步的，提示词里要求 agent「等地图 ready 再播动画」（官方 skill 里也有 waiting for media 的处理），不然前几帧是空白底图。
08｜透明底输出：动画当「贴纸层」用
想让动画浮在别的视频上面（logo 水印、字幕条、角标特效），就要透明底。格式选择是硬约束：MP4 没有 alpha 通道，透明只能出 WebM 或 ProRes 4444——WebM 走 Web 播放和二次剪辑最方便，ProRes 走专业剪辑（AE/剪映专业版/达芬奇）画质更稳。提示词里直接把「输出 webm 透明底、codec 要带 alpha」写死，agent 在渲染参数上就只会往对的方向调。这个约束的价值再次印证 02 节：「透明底」这种要求写在需求里一句就够，但你不说，它默认给你出黑底的 mp4，返工一次。
09｜没有参考动画怎么办：和 agent 一起把观点「翻译」成画面
前面几节都默认你手里有参考。但很多需求是「我要讲清楚一个原理，但不知道长成什么样」。这时别硬憋，让 agent 先出 2~3 种「翻译」方案，各做 3 秒草图（草图用 Remotion 出，成本极低），你挑最能传达观点的那个，再投入完整制作。判断标准永远只有一个：观众看完 3 秒，能不能复述你那个观点——能，就是直观；不能，画面再漂亮也没用。「没有参考」不是做不了，是把「找参考」换成了「探索表达」，而探索恰恰是 agent 比人擅长的部分（它能一晚上试 5 种方案，你只能挑）。
10｜贯穿全程：把需求说清楚，永远比提示词本身更重要
回头把整条链路串一遍，会发现所有「踩坑→提示词约束」的例子（环境假设、不要加戏、等地图 ready、透明底出 webm）本质是同一件事：提示词写得好不好，取决于你能不能把需求说到「agent 不需要猜」的程度。agent 缺的从来不是措辞技巧，是你脑子里那些没出口的默认假设——节奏参考是截帧还是形容词、环境里浏览器能不能开、key 在哪、底线是不能加什么。这些默认假设每一条写进需求里，出片质量就上一档；每一条不写，就是给 agent 留了一个随机数。
具体做法不变味：参考给帧不给形容词、约束给「不要清单」不给「尽量别」、环境给实测结论不给「应该可以」、输出格式给硬指标不给「看着办」。提示词是需求的转录，功夫在提示词外面。
我的判断
三个判断，直接说：
- 选 Remotion 的指征：要批量出、要换数据出、要进 CI 出、要模板沉淀。一次性、强电影感、实拍感，走生成模型，别硬上 Remotion。
- 选模型的指征：照 article-125 的结论选气质（克制叙事 vs 密集炫技），算总账时记得单价差 2.5 倍会被产量放大。
- 这套组合的天花板：模型出方案 + 你出审美判断 + Studio 抠最后 10%——人真正不可替代的就那「10%」和「挑方案」两下，其它都可以交给 agent。长期维护的那个 Remotion 仓库，攒的就是你未来三个月出片的下限。
数据红线说明：Remotion 主仓 / skill 仓星数、fork、pushed 时间均为 2026-10-18 GitHub API 实查值；npm 版本号当日 registry 实查；Astra 口径与 article-125 一致（GPT-6 Astra，OpenAI）；「音符跳跃」案例为本文方法论演示，非某具体成片复盘；高德地图合规表述基于其公开服务条款常识，商用细节以官方文档为准。