让 AI 写一段 Remotion 代码，经常会遇到一种情况：
预览看着挺正常，一导出就出问题。标题在最后一帧跑出画面，几个元素挤在一起同时飞进来，加了转场后总时长又对不上。
代码不是不会写。是 AI 不知道 Remotion 的规矩：画面是一帧一帧算出来的，不是 CSS 动画自己动的。
buainoai/remotion-skills 将 Remotion 的最佳实践整理成 31 条中文规则，便于 AI 编程助手查阅。
它不是视频生成器，是一本“避坑手册”
先分清一件事：这个仓库不会帮你生成视频，也不会替你想脚本。
它是一堆 Markdown 文件。一个 SKILL.md 当目录，下面 31 个规则文件，分别讲动画、组合、时间、序列、图片、视频、音频、字幕、字体、参数化、转场这些事。
你可以把它理解成：给 AI 的一本《Remotion 避坑手册》。
平时我们给 AI 提需求，它靠通用经验写代码。但 Remotion 有些规则很反直觉，网页开发越熟，越容易写错。技能库的作用，就是把这些规则提前放进 AI 的上下文，让它动手前先查一眼。
比如同样是“淡入”，网页里写 transition: opacity 1s 很自然；在 Remotion 里，这行代码渲染时可能完全不动。正确的写法是从当前帧算出透明度：
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
const opacity = interpolate(frame, [0, 1 * fps], [0, 1], {
extrapolateRight: 'clamp',
});
差别不在语法，在思路：网页是“状态变了，浏览器补间”；Remotion 是“给我第几帧，我算出这一帧长什么样”。
最值得记住的 4 句话
31 条规则不用全背。如果你只想知道它到底在管什么，记住这 4 句就够了。
第一句：所有动画，都从 useCurrentFrame() 来。
不要用 CSS transition、animation，也不要用 Tailwind 的 animate-* 类名。它们在浏览器预览里可能像是动的，但 Remotion 逐帧渲染时对不上。
第二句：时长按“秒 × fps”写，不要写死 30。
interpolate(frame, [0, 30], [0, 1]) 在 30fps 下是 1 秒，在 60fps 下只有 0.5 秒。正确写法是先取 fps，再写 [0, 1 * fps]。
第三句：多个场景，用 Sequence 错开。
如果几个元素都从第 0 帧开始，它们就会一起登场。想让标题先来、图片后到，得用 Sequence 的 from 把时间错开。
第四句：中文比英文更容易溢出。
AI 常按英文字符长度算布局，换成中文就出框。标题限字、正文限行，导出前一定要看最后一帧。
这 4 句听起来都不难，但 AI 的翻车，大多栽在这里。
中文资料与官方技能，怎样搭配
这是最需要先讲清楚的一点。
中文库由社区维护，采用一个技能目录加 31 个规则文件的结构。它没有独立版本号，内容更新节奏与官方库不同。
官方 remotion-dev/skills 采用路由与专项技能分工，覆盖创建、渲染、字幕等任务。开始新项目时，优先从官方安装入口获取与当前工具链配套的规则。
| 中文库 | 官方技能 | |
|---|---|---|
| 结构 | 1 个技能 + 31 条规则 | 12 个技能目录 |
| 更新 | 2026-01-30，仅 1 次提交 | 持续更新 |
| 安装 | 手动复制 | npx skills add |
| 适合 | 阅读、学习、离线查 | 生产、最新 API |
所以更稳的用法是：
中文库当教材，官方技能 当工具。
先读中文资料，理解帧、序列、组合和参数，再为项目安装官方技能。不要在同一项目里同时装两份，它们都叫 remotion-best-practices，规则和流程不一致，AI 容易左右横跳。
它能搭配什么？四组就够了
技能库只影响“AI 怎么写代码”。真正做视频，还要看它上下游配什么。
第一组：AI 编程助手。
Claude Code、Codex、Cursor、Kimi Code 都能读技能。官方还给 Claude Code、Cursor、Codex 做了插件，装完直接说“帮我做个 15 秒产品演示”就行。
第二组：Remotion 自己的工具链。
Studio 用来预览和手动微调；Player 把视频组件嵌进网页或产品；CLI / Lambda 负责渲染和批量出片。做数据视频、个性化视频，这一套是核心。
第三组：内容生产上下游。
脚本、配音、字幕、产品截图、录屏、图表。Remotion 只负责“合成”，不负责“生成素材”。把技能库当视频模型的人，一定会失望。
第四组：替代或互补工具。
若需要比较其他技术路线，可以了解采用 HTML 与 GSAP 的 HyperFrames，选型时分别查看项目许可、依赖与渲染能力。如果片子以真人素材为主，需要精细剪辑、调色、混音，传统剪辑软件仍然更合适。
怎么用？两条路线
路线 A：直接装官方技能，适合真要做项目。
npx create-video@latest --yes --blank my-video
cd my-video
npx skills add remotion-dev/skills
npm run dev
create-video 会建一个空白项目，npm run dev 打开 Studio。然后在项目目录里启动 Claude Code、Codex 或 Cursor，直接描述你要的视频。
如果想让技能在所有项目里可用：
npx -y skills@latest add remotion-dev/skills -g -y
注意：npx skills 这个 CLI 要求 Node.js 22.20 或更高。
路线 B：装中文库，适合阅读和离线查。
仓库没有写安装命令，最稳妥是手动复制：
git clone https://github.com/buainoai/remotion-skills.git
mkdir -p .claude/skills/remotion-best-practices
cp -R remotion-skills/skills/remotion/. .claude/skills/remotion-best-practices/
Codex / Cursor 把 .claude/skills/ 换成 .agents/skills/。装完问 AI 一句：“引用 rules/animations.md 里的两条硬规则。”它能说出来，才算加载成功。
提需求时，把验收标准一起写进去。
不要说“帮我做个炫酷视频”，而是：
做一个 18 秒竖屏视频，1080×1920，30fps。
主题：一款记账 App 的三个卖点。
结构：0–3 秒钩子；3–9 秒三个功能；9–15 秒对比图；15–18 秒结尾。
要求：
1. 动画用 useCurrentFrame 驱动，不用 CSS 动画；
2. 时长乘 fps，不写死 30；
3. 中文标题不超过 9 字，正文一行不超过 14 字；
4. 先给分镜和文件结构，不要直接渲染。
验收：0 秒、9 秒、17 秒三帧无溢出、无重叠。
这比“炫酷一点”有用得多。AI 不是不会做，它只是不知道你的标准。
三个坑，提前避开
坑一：用 CSS 动画或 Tailwind 动画类名。
预览能动，渲染不动，或者只动一半。记住：所有动态值从 useCurrentFrame() 来。
坑二：写死 30。
30fps 的项目能跑，60fps 就全乱。先取 fps，再算时长。
坑三：忽略许可证。
Remotion 的免费资格适用于个人、最多 3 名员工的营利组织，以及符合条款的非营利组织；符合免费资格时，也可制作商业视频。规模更大的营利组织或其他不符合免费条款的用途，应查看公司许可证。中文资料库没有单独的 LICENSE 文件，不能直接按 MIT 或任意再分发处理。
适合谁？
适合：
- 会一点 React，想让 AI 帮忙做产品演示、数据视频、口播字幕视频；
- 需要批量出片，比如每个客户一条、每个商品一条；
- 团队已经在用 Claude Code / Codex / Cursor，想给 AI 补一份领域规范；
- 想把视频放进 Git，做版本管理和 Code Review。
不太适合：
- 完全不想碰代码，只想“一句话出片”；
- 以真人拍摄、采访、Vlog 为主，后期要精细剪辑和调色；
- 需要复杂特效、粒子、合成，Remotion 不是 AE 的替代品；
- 组织不符合免费许可资格，也未准备购买相应许可证。
写在最后
这个仓库最值钱的地方，不是“中文”两个字，而是它把 Remotion 里那些靠经验积累的规矩，变成了可查、可引用、可验收的清单。
中文资料适合建立概念和离线查阅；用于项目时，要结合当前 API 与官方文档检查示例。
如果你刚开始用 AI 做视频，可以把它当教材，把官方技能 当工具：一个帮你建立概念，一个帮你把活干完。
项目地址：buainoai/remotion-skills
官方技能库：remotion-dev/skills
官方文档：remotion.dev/docs/ai/skills