视频即代码:我用Remotion Skill搓了个客户年度持仓回顾视频,附实用教程

说实话，我是因为看到了remotion skill才真正动了想搞skills的念头。Remotion是用 React 编程方式制作视频的一个框架，生成的视频炫酷、可控，有种编程之美，有种nano banana初见时的兴奋感。

官网🔗：remotion.dev

Remotion将视频制作视为开发任务，通过参数化内容、服务器端渲染来构建应用程序，并最终渲染为 MP4格式。Remotion核心理念是视频即代码，视频不再是时间轴上的剪辑，而是一个按帧渲染的 React 应用，因此可以驱动复杂的数学动画。

Remotion 虽然源代码可用并在 GitHub 上开源，但并不能让普通人都用起来，非码农出身根本搞不懂什么是部署，直到上个月底它上了skill技能，我才有机会用上这么个天才玩意儿。

传送门🔗：

https://github.com/remotion-dev/skills

核心逻辑是：数据 + 模板 = 无限视频。

1. 数据可视化：因为是代码控制，它可以直接把 Excel 或 API 里的金融数据（K线、净值曲线、饼图）实时转化为动态、精准的动画。

2. 可交互/动态化：视频内容可以根据即时参数改变。比如同一个理财产品介绍视频，可以根据客户输入的投资金额，动态演示未来的预期收益。

3. 批量化生产：写好一个模板，导入 100 个客户的数据，就能瞬间生成 100 个针对不同客户的专属视频。

这就有意思了，很多视频的制作过程可以被它颠覆掉：

10个，100个，1万个，批量复制，一人局即可搞定。

这里的Cursor当然可以换成其他的AI IDE或是CLI工具，如ClaudeCode，Codex，Trae等。

搞清楚这个问题非常关键。

简单来说：Cursor（AI模型）是“导演兼程序员”，Remotion 是“物理引擎和摄影机”，而 Remotion Skill 是“导演的教科书”。

当你输入“帮我做一个折线图，要Apple风格，要丝滑动画”时，Cursor 里的 AI 做了 90% 的显性工作，比如：

• 设计决策：它决定了用SVG的`<path>`来画线，决定了用Tailwind的 `stroke-indigo-500`来上色，决定了文字排版在左上角。

• 数学计算：它写了代码来计算数据点（Data Points）如何转换成屏幕上的坐标（X, Y）。

• 动画逻辑：它写了`interpolate`函数，告诉程序：“在第 0 帧的时候，线是长度为0；在第60帧的时候，线长度是 100%”。

设计、排版、动效逻辑的代码，全是AI模型写的。如果没有AI，你需要自己手写每一行`<div style={{...}}>`和SVG路径。

AI写的代码只是一堆文本，Remotion 才是让这堆文本变成视频的基础设施。比如，在折线图案例中，Remotion 做了：

• 提供时间 (Time)：Remotion提供了核心Hook`useCurrentFrame()`。它告诉React组件：“现在是第 30 帧”。如果没有这个，React组件是静态的，动不起来。

• 参数化渲染 (Interpolation)：AI写的`interpolate` 函数是 Remotion 提供的工具。它负责在后台精密计算：如果第0帧是0，第60帧是 100，那么第30帧必须严格是50。

• 逐帧拍摄 (Rendering)：当你点击Render时，Remotion控制浏览器把 React页面刷新600次（假设20秒30帧），每次把画面“截图”下来，最后拼成 MP4。

Remotion提供了“让 React 动起来”的能力和“导出视频”的能力。AI模型只是在调用Remotion提供的能力。

如果你直接问一个没读过`remotion-dev/skills` 的AI：“用 React 做个视频”，它可能会写出很多错代码：

• 错误写法：它可能会用 `useEffect` 和 `setTimeout` 来做动画（这在 Web开发中很常见，但在视频渲染中是绝对错误的，会导致视频闪烁或不同步）。

• 错误写法：它可能不知道 `zod` 是 Remotion 定义参数的标准方式。`remotion-dev/skills`实际上是告诉 Cursor：“嘿，AI，当用户让你写视频代码时，千万别用`useEffect`！要用`useCurrentFrame`。如果要画折线图，推荐用SVG path 而不是HTML div。如果要定义宽高，记得从`useVideoConfig`里取……”

Remotion Skill是AI的“外挂脑插”。它确保了Cursor写出来的代码是符合Remotion规范的、高性能的、能跑通的，而不是一段只能在网页上跑但在视频里跑不通的代码。

我用的还是Cursor，等我想用skills的时候发现它早已有这个功能，何时上线的不详，位置在:设置->Rules,Skills,Subagents

安装时在这里点击“+New”或者在对话区“/creat skills”都可以，技能可以选择是用户级安装还是项目级安装，Cursor官网有指引：

创建技能时，把Remotion Skill的github地址发给它，让它安装就可以。

安装过程还是挺快的，安装完随即调用Remotion Skill让它随便生成一个样例，我以为1分钟立等可取呢，结果开始了漫长的安装各种依赖的过程，中间还历经数次bug、安装异常缓慢的问题，最后用手动下载包，放到项目目录下才解决。不过这些都可以让模型指导你一步一步来完成。

到这时才逐渐体会到什么是skill，它确实就是个“说明书”，项目中真的要去调用时，代码要现写、依赖要现装，该买的菜还得买，只是写代码的路径被缩短了、能力变专精了，因为有专家指导了，有大厨给你手把手了！

依赖装完，代码写完，终端输入：npm start，项目就启动了，remotion启动一个本地服务，通常网址是： http://localhost:3000

打开后是一个类似剪映的页面，叫做Remotion Studio，视频跑出来的那一刻，还是很舒服的。页面右下角点击Render，就会开始渲染和导出，导出mp4格式的视频。

用Remotion Skill做了个20s小视频，用于财富管理场景，客户年度持仓收益回顾：

回顾一下视频制作流程：

1.提示词设计

上面我们写了，在用remotion制作视频的过程中，AI助手还是充当着设计者、逻辑编写者的关键角色，所以提示词依然关键，决定着视频效果的成败，这是区别于nano banana的一个关键点。

我是先在Google AI Studio先跟gemini探讨了一下提示词的设计，把remotion skill的链接发给他，让他研究下项目的能力，构思一个案例。因为我是做财富管理方向的，我们确定了以“客户年度持仓回顾”为主题的视频，提示词的结构为：

角色目标+视频风格+视频分镜脚本+样例数据

视频分镜脚本这里，要根据remotion的能力特长进行设计，我看gemini设计的分镜脚本里会包含：图表逻辑、视觉效果、动画特效等方面，还是有讲究的，这专业react术语我们一般人是描述不出来的，如“使用 SVG <path>”、“使用 spring 效果”。事实证明，没有大模型我们就是个废物，有了大模型个顶个天才~

我的提示词在这里，这是初稿，后期有对细节的优化，这个仅供参考：

另外，我实际在做的时候，是一幕一幕输入给模型的，不是一股脑进去的，不知道remotion完成度咋样，也是第一次用skill，cursor里的模型我用的是gemini 3 flash。结果发现人家能力杠杠的，每一幕做的很快，细节美观度要微调，整体完成还是比较顺的，没有复杂的bug出现，意外好评！

2.配音也重要

Remotion能配音么？当然能，但是有前提：

• Remotion 能做的：把现有的音乐/音效文件加载进来，控制它什么时候播放、音量多大、是否循环、淡入淡出等。 

• Remotion 不能做的：凭空“创作”或“生成”一段旋律或音效（它没有内置 Suno 或 Udio 那样的 AI 音乐生成模型）。

所以，想配音要先下载背景音乐和音效，放到项目里，然后给remotion提需求，以什么方式加载音效，例如：当柱状图超过某个高度时，播放“叮”的一声金币音效；当数字快速滚动时，播放“哒哒哒”的机械声。

于是，我选择了剪映...毕竟用着顺手了。但，通过上述配置录音文件有一个巨大的好处，当视频批量生成时，配音直接复用，剪映得一个个重来。这就引出了用代码生成视频的巨大好处：批量复制！

什么可灵，什么Sora，哪个能通过参数的变化如此精准、快速的批量出产视频？没有，底层逻辑不一样，remotion透露着一种编程之美。

3.批量复制

我们前期视频制作时，输入的是样例数据，我先把样例数据写入了一个excel文件，然后让模型批量复制：

• 再生成5个不同资产等级、收益情况、资产配置情况的客户，每个人一张excel表。

• 视频中涉及到的配置信息，改为从excel表获取，每张excel生成一个对应的AnnualBill视频。

眨眼之间，王总、赵总、陈总的视频就呼啦啦地生成了：

Remotion Skill还有无限可能，下期继续解锁...

这是低产博主的第9篇AI+销售系列思考产出，希望大家能喜欢，如果能对你有所启发那就太棒了，欢迎给我提出你在销售赋能上的创意和想法，我们一起来实现！

VibeCoding产品记：基于Gemini 3 Flash的“活人感”销售对练和演讲训练工具

赋予MBTI人格的顶级营销文案创作

我用VibeCoding+飞书多维表格做了个 AI语音应用，让销售人员张嘴就能记漂亮的台账