Remotion 联动 Claude Code：用自然语言自动写代码并渲染 MG 动效视频

想给产品做一段带 3D 动效和 UI 界面的营销视频，过去通常只有两条路：要么打开 After Effects 手动调关键帧，要么找专业动效设计师排期。

现在，事情有了一点新变化。1 月 19 日，开发者展示了借助 Remotion 官方 Agent Skills 与 Claude Code，纯靠自然语言提示词自动编写代码并渲染出带有复杂 3D 动画的 MG 风格视频。

全过程没有打开任何传统剪辑软件，Claude Code 自行拆解需求、编写 React 代码、调试参数，并最终直接输出了渲染好的视频文件。

像使唤前端一样使唤 AI 剪片

这段长约 8 秒的演示视频，起因只是让 Claude Code 制作一段动画，用来展示一行命令行安装指令。

初始设定只是一个 1280x1000 像素的浅色 macOS 终端窗口。Claude Code 先读取了现有的 Remotion 项目目录，随后自动创建了独立的终端组件，并按反馈调整背景色和字体排版。

紧接着，智能体创建了主合成序列，把终端放进主场景，并加入从底部滑入、Y 轴持续旋转和缩放的多层 3D 动效。

更细节的地方在于，Claude 真实执行了命令行安装，将终端里的输出字符与 ASCII 艺术字抓取出来做成打字动画，并在结尾串联了品牌图标与向摄像机翻转 90 度的离场动效。

最终通过一行命令直接渲染成片。整个过程中，视频脚本、界面组件、动画逻辑与渲染流水线，全部由智能体自主完成。

什么是 Remotion Agent Skills

Remotion 本身是一个用 React 写视频的开源框架，而这套 Agent Skills 则是官方专门喂给 Claude Code、Codex、Kimi Code 或 Cursor 这类代码智能体的最佳实践规则库。

开发者只需要在终端运行一行安装命令，智能体就能掌握 Remotion 的专门语法。

规则库里不仅包含通用的组件布局、排版、缓动效果和时间轴调度，还细分了地图动画、外挂字幕渲染、SaaS 架构集成以及启动 Studio 实时预览等专项指令。

说白了，它就像是给代码智能体塞了一本 Remotion 官方团队编写的操作手册，避免 AI 在生成 React 动效代码时胡编 API 或踩进性能陷阱。

为什么重要

我们认为，这件事情最有意思的地方，在于它彻底把视频生产拉进了代码工程的阵营。

对开发者和独立创作者来说，以往最头疼的往往是为新功能做一段体面的演示视频或年报动画。AE 门槛高，现成的 AI 视频生成工具又常常在文字排版和 UI 精度上严重失真。现在通过 Remotion 加代码智能体，生成的画面像素级可控，改动一个字或换个配色只需要在终端里提一句需求。

对整个行业而言，这代表了 AI 视频工具的另一条演进路线：不是靠大模型直接幻想连续像素，而是用大模型生成精确的结构化代码，再由确定性的渲染引擎把它画出来。这种方式天然具备精确、轻量、可版本控制的优势。

当然，这种方式目前主要适合 UI 动效、数据可视化和软件推广等 MG 风格视频，想做复杂的实景叙事依然不现实。但只要你本身有前端基础或使用 AI 代码编辑器的习惯，现在已经完全值得装上这套技能试一试了。