每日热门skill：5分钟出大片！Remotion + Skills 把“AI生成视频“从玄学变工程

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */
#content_views .toc,
/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */
#content_views.markdown_views > p:empty:has(+ .toc),
#content_views.markdown_views > .toc + p:empty,
/* 富文本旧版目录标记 */
#content_views.htmledit_views #main-toc,
#content_views.htmledit_views #hr-toc,
#content_views.htmledit_views p[id*=\”-toc\”] {
display: none !important;
}
/* 目录去掉后，紧跟的首个标题不再多出一块上边距 */
#content_views.markdown_views > .toc + h1,
#content_views.markdown_views > .toc + h2,
#content_views.markdown_views > .toc + h3,
#content_views.markdown_views > .toc + h4,
#content_views.markdown_views > .toc + p:empty + h1,
#content_views.markdown_views > .toc + p:empty + h2,
#content_views.markdown_views > .toc + p:empty + h3,
#content_views.markdown_views > .toc + p:empty + h4 {
margin-top: 0 !important;
}

一句话：把视频当 React 组件写，让 AI 像调库一样调 Remotion。

一、当 AI 遇上视频，事情开始变得离谱

我有个做技术博主的朋友，去年被"AI 生成视频"折磨了整整一年。

先是 Pika、Runway、Sora 一通试，惊喜了三天，第四天发现：每条片子的片头片尾都得手调关键帧，文案改了视频得全部重渲染，剪辑师工资一分没省，Token 却翻了三倍。

然后他想了个"偷懒"的办法：能不能让视频"像代码一样"被改？

他把时间轴拆成一帧一帧的 React 组件，让 AI 改一个 <Sequence> 里的文案，整段动画自动重排——结果还真就成了。片头从"加个粒子"到"加粒子 + 改颜色 + 调时间"全由一句话搞定。

这背后站着的，就是 Vercel Labs 旗下的 Remotion，加上 2026 年最火的 remotion-best-practices Skill。

这套组合，让"AI 生成视频"第一次从"玄学抽卡"，变成了"可工程化、可版本控制、可批量复用"。

今天这篇，我们就来扒一扒这个让无数 X 博主原地高潮的 Skill，到底是什么，怎么装，怎么用，为什么它能成为 2026 年最值得装的前端 Agent Skill 之一。

二、为什么是 Remotion？一句话：视频 = React 组件

如果你做过 React 开发，前 5 秒就能 get Remotion。

传统剪辑软件（PR、AE、Final Cut）的逻辑是 “命令式”——把素材拖到时间轴上，鼠标点第 24 帧拉个关键帧，第 60 帧再拉一个，让软件"插值"出中间的过渡。

但 AI 不擅长这个。LLM 看不到时间轴，拽不动鼠标，更算不准贝塞尔曲线。

Remotion 反其道而行：“声明式”——把每一段动画写成一个 React 组件。

const opacity = interpolate(frame, [0, 30], [0, 1]);

就这一行，AI 就懂：在第 0 帧到第 30 帧之间，透明度从 0 变到 1。

时间轴不再是"拖出来的"，而是"算出来的"。视频本质上变成了一份代码工程，而代码，恰恰是 AI 最擅长生成和迭代的东西。

Remotion 的核心映射关系：

一句话：会写 React，就会写视频。

三、remotion-best-practices Skill：让 AI 真正"懂" Remotion

光有 Remotion 还不够。AI 写视频有三大通病：

remotion-best-practices 是 Vercel Labs（Remotion 官方团队）发布的 Agent Skill，作用就是给 AI 装一个"Remotion 老师傅"。

这个 Skill 包含 30+ 个领域规则文件，覆盖 Remotion 开发的全部场景：

• 3d.md — 用 Three.js / React Three Fiber 做 3D 内容
• animations.md — 基础动画模式
• assets.md — 图片、视频、音频、字体导入
• audio.md — 音频处理（导入、修剪、音量、速度、音调）
• calculate-metadata.md — 动态设置合成时长、尺寸、属性
• can-decode.md — 用 Mediabunny 检查视频可解码性
• charts.md — 图表与数据可视化
• compositions.md — 组合定义、静态图像、文件夹、默认属性
• display-captions.md / subtitles.md / transcribe-captions.md — 字幕处理（导入 SRT、自动转录、显示）
• extract-frames.md — 用 Mediabunny 在特定时间戳提取帧
• fonts.md — Google 字体 / 本地字体加载
• get-audio-duration.md / get-video-duration.md / get-video-dimensions.md — 元数据获取
• gifs.md — 与时间轴同步的 GIF
• images.md — Img 组件最佳实践
• import-srt-captions.md — SRT 字幕导入
• light-leaks.md — 光泄漏叠加效果
• lottie.md — 嵌入 Lottie 动画
• maps.md — Mapbox 地图动画
• measuring-dom-nodes.md / measuring-text.md — DOM 元素 / 文本尺寸测量
• parameters.md — 用 Zod 模式让视频可参数化
• sequencing.md — 序列模式（延迟、修剪、限制时长）
• tailwind.md — TailwindCSS 集成
• text-animations.md — 排版与文本动画
• timing.md — 插值曲线（线性、缓动、弹簧）
• transitions.md — 场景过渡
• transparent-videos.md — 透明视频渲染
• trimming.md — 修剪模式
• videos.md — 视频嵌入（修剪、音量、速度、循环、音调）

一句话：这不是一个 Skill，是一本"Remotion 实战百科全书"交给 AI 背诵。

四、装起来：3 步搞定

1. 准备环境

2. 安装 Skill

一行命令：

npx skills add https://github.com/remotion-dev/skills –skill remotion-best-practices

验证：

claude skills list

看到 remotion-best-practices (active) 就对了。

3. 让 AI 创建项目

在空目录里启动 Claude Code，粘贴这段 Prompt：

先读取 remotion-best-practices skill，然后创建一个 Remotion 项目。

目标：6 秒钟的"Hello 公众号"好莱坞风格片头视频，1920×1080，30fps。

效果要求：

• 纯黑背景
• “HELLO 公众号” 文字以冲击力方式砸入画面，伴随冲击波扭曲效果
• 撞击瞬间爆发金色粒子
• 强烈的色差闪光（chromatic aberration）
• 文字落定后，绿色（#67c23a）轮廓光晕脉冲
• 顶部和底部黑色宽幅遮幅条像电影一样滑入

Claude Code 读取 Skill 后会自动完成：

预览：

cd hello-gzh
npm run dev

导出：

npx remotion render HelloGzh out/hello-gzh.mp4

完整可复用的实战示例（Jonny Burger 官方版）： https://gist.github.com/JonnyBurger/5b801182176f1b76447901fbeb5a84ac

五、核心 API 三件套：interpolate、spring、Sequence

装好 Skill 后，AI 写出来的代码长什么样？我举三个最常用的 API。

1. interpolate：线性插值

最基础也最常用。把"任意数值"插值成"动画值"。

import { useCurrentFrame, useVideoConfig, interpolate } from 'remotion';

export const FadeIn: React.FC = () => {
const frame = useCurrentFrame();
const { fps } = useVideoConfig();

// 第 0 帧到第 30 帧（1 秒）内，透明度从 0 变到 1
const opacity = interpolate(frame, [0, 30], [0, 1], {
extrapolateRight: 'clamp',
});

return <div style={{ opacity, fontSize: 100 }}>Hello Remotion!</div>;
};

2. spring：物理弹簧

想做出"Q 弹"效果？用 spring，它会按真实物理运动规律算位置。

import { spring, useCurrentFrame, useVideoConfig } from 'remotion';

export const BounceIn: React.FC = () => {
const frame = useCurrentFrame();
const { fps } = useVideoConfig();

const scale = spring({
frame,
fps,
config: { damping: 100, stiffness: 200, mass: 0.5 },
});

return (
<div style={{ transform: `scale(${scale})`, fontSize: 100 }}>
我 Q 弹入画
</div>
);
};

3. Sequence：时间编排

把不同元素的出场时间精确到帧。

import { Sequence, AbsoluteFill } from 'remotion';

export const Demo: React.FC = () => {
return (
<AbsoluteFill>
{/* 0~30 帧：背景淡入 */}
<Sequence from={0} durationInFrames={30}>
<Background />
</Sequence>

{/* 30~60 帧：标题砸入 */}
<Sequence from={30} durationInFrames={30}>
<Title />
</Sequence>

{/* 60~90 帧：副标题出现 */}
<Sequence from={60} durationInFrames={30}>
<Subtitle />
</Sequence>
</AbsoluteFill>
);
};

这三件套组合起来，AI 就能生成 90% 常见的片头片尾动画。

六、5 大真实场景：这套组合能干啥

场景 1：产品/项目宣传视频

把"产品功能 + 数据 + Logo"灌进 Prompt，AI 自动生成 30~60 秒的 Demo 片头。改文案不用重做，只改 React props，3 分钟出新版。

场景 2：科普/教学类视频

讲师录课太累？把 PPT 大纲丢给 AI，自动生成带转场、配图、字幕的教学视频。B 站 UP 主、慕课讲师必备。

场景 3：数据可视化/动态报告

把 Excel 喂给 AI，自动生成柱状图、折线图、地图动画的动态数据报告。投行、咨询、数据分析师的年终汇报神器。

场景 4：批量内容生产

自媒体矩阵最痛苦的就是"100 个号 = 100 条片头"。用 Remotion + Skill，一次性生成 N 条带不同数据、不同颜色、不同配乐的片头，模板化复用。

场景 5：GitHub 年度总结、节日祝福、员工入职欢迎

这些"标准化 + 需个性化"的视频，用 Remotion 一行命令生成，效率是剪辑软件的 10 倍。

七、对比：Remotion + Skill vs 传统 AI 视频工具

一句话总结：Sora 适合"灵感乍现拍一条"，Remotion 适合"每天稳定产出 100 条"。

八、避坑指南：新手最容易踩的 5 个坑

坑 1：忘记 extrapolateRight: 'clamp'

interpolate 默认会"外推"，导致动画到最后一帧后继续变化。务必加 extrapolateRight: 'clamp'，把值锁死在目标范围。

坑 2：素材路径写死

别写 import img from './assets/1.png'，用 Remotion 提供的 staticFile() 函数，确保打包后路径正确：

import { staticFile } from 'remotion';
const img = staticFile('images/cover.png');

坑 3：字体没声明

Remotion 渲染时需要明确知道字体文件路径。用 loadFont 提前加载 Google 字体：

import { loadFont } from '@remotion/google-fonts/Inter';
loadFont();

坑 4：渲染太慢

每帧超过 200ms 就要排查。常见原因：

• 重复 import 大资源
• 在组件函数体内创建新对象
• 没用 useMemo 缓存

坑 5：音视频不同步

用 Audio 组件的 volume prop + getVideoMetadata 提前获取时长，别在 <Sequence> 里用条件渲染切音轨。

九、为什么我把它评为 2026 必装 Skill？

说真的，我装过 200+ 个 Skill，能让我"装完就回不去"的不超过 10 个。remotion-best-practices 是其中之一，原因有三：

1. 真正的"代码即内容"

视频不再是"渲染产物"，而是"代码工程"。可以 Git 管理、可以 PR Review、可以 CI/CD 自动化。这是对内容生产范式的一次根本升级。

2. 完美踩中 LLM 的能力曲线

LLM 最强的是"生成结构化代码"，Remotion 恰好是"用代码描述视频"。这是真正的"AI 友好型框架"，不是营销噱头。

3. 30+ 规则文件 = 一本实战百科

装上 Skill 相当于请了一个 Remotion 老师傅 7×24 在线答疑。AI 写出来的代码 90% 直接能跑，省去大量查文档时间。

十、行动清单：5 分钟开始你的第一个 AI 视频

5 分钟后，你就有了一条可以发 B 站、抖音、小红书的视频。

写在最后

Sora 们让"AI 生成视频"成了新潮话题，但 Remotion + remotion-best-practices 让"AI 生成视频"成了生产工具。

前者是灵感火花，后者是流水线。

如果你和我一样，是个每天要稳定产出 5~10 条视频的技术博主、运营、自媒体人，强烈建议你花一个下午试试这套组合。

装上它之后，你会发现：

视频制作不再是"剪辑"，而是"编程"。

而编程，正是 AI 最擅长的事。

参考链接：

• 官方仓库：https://github.com/remotion-dev/remotion
• Skills 仓库：GitHub – remotion-dev/skills: Agent Skills · GitHub
• 实战示例：https://gist.github.com/JonnyBurger/5b801182176f1b76447901fbeb5a84ac
• 菜鸟教程：Claude Code 与 remotion-best-practices 制作视频 | 菜鸟教程
• 腾讯云：Remotion Skills 爆火！Remotion
• Remotion Skills 爆火！

安装命令：

npx skills add https://github.com/remotion-dev/skills –skill remotion-best-practices