让 AI 用 React 帮你写视频？Remotion 上手教程

Tue, 09 Jun 2026 00:00:00 +0000

Remotion 是什么

Remotion 是一个用 React 代码写视频的框架。你可以用 JSX、CSS、Canvas 这些前端技术来创建视频，而不是在 After Effects 里拖时间轴。

它的核心思路是：视频的每一帧就是一个 React 组件的渲染结果。用 useCurrentFrame() 获取当前帧号，用 interpolate() 做动画插值，跟写前端动画很像，但输出的是 MP4。

48.8k GitHub Stars，Fireship 的「This video was made with code」就是用 Remotion 做的，GitHub Unwrapped 年度回顾也是。

装这个 Skill 能干什么

直接说结论：让 AI 帮你写 Remotion 代码，而不是你自己翻文档。

Remotion 有不少坑，AI 不知道的话会帮你踩一遍。比如 CSS transitions 在视频渲染里不会正确工作，Tailwind 的动画类名也不能用，资源必须放在 public/ 目录里用 staticFile() 引用。这些规则写一遍 prompt 记不住，但装了这个 Skill，AI 会自动遵循。

覆盖的范围很广，除了基础的动画和资源管理，还有 30 多个子规则文件：字幕、音效、转场、3D（Three.js）、GIF 同步、透明视频、音频可视化、旁白生成（ElevenLabs TTS）、Google 字体加载等。

装起来要多久

npx skills add remotion-dev/skills@remotion-best-practices

一行命令，装完就能用。

如果你还没有 Remotion 项目，先创建一个：

Remotion Best Practices

Sat, 06 Jun 2026 00:00:00 +0000

它能做什么

Remotion 是一个用 React 代码写视频的框架。这个 Skill 把 Remotion 团队的最佳实践全部打包成规则，装进 AI 助手后，从项目搭建、动画设计、资源管理、序列编排到渲染输出，AI 都能按官方推荐的方式写。覆盖 30 多个子主题，包括字幕、音效、转场、3D、GIF、透明视频、音频可视化等。

跟同类产品有什么区别

用代码生成视频这个领域，Remotion 几乎没有直接竞品——主流视频制作还是 Premiere、After Effects 这些传统工具。跟 After Effects 的脚本自动化比，Remotion 用的是 React，意味着你能复用整个前端生态的组件和库。但真正让这个 Skill 有价值的是：AI 写 React 代码很在行，但如果不了解 Remotion 的坑（比如 CSS transitions 不会正确渲染、Tailwind 动画类名不能用），写出来的代码直接报废。这个 Skill 就是在解决这个问题。

哪些人适合用

在做跟视频自动化相关的项目的人——批量生成视频、数据驱动的动态视频、用代码做动画。如果你只是偶尔剪辑一段视频，传统工具更直接。另外 Remotion 有特殊许可证，商用场景需要确认许可证条款。

一句话总结

AI 助手变成 Remotion 专家，用 React 代码写视频时自动避开所有已知的坑。

Video on Top AI Skills