Claude Code + Remotion 造视频流水线：从尝鲜到生产复盘

这条流水线解决什么问题

栏目每周要固定产出几条短视频：标题卡、数据播报、片尾板。用剪映或 AE 改模板，每条都要人肉复一遍流程，改个数字也得重新开软件、导出、检查。Remotion 换了一个思路：视频就是 React 组件。每一帧等于组件按当前帧号渲染一次，渲染器按 fps 逐帧成像再编码成 mp4。于是”改文案出片”变成”改一个 props 重跑一条命令”，天然适合批量生产。

Claude Code 是 Anthropic 官方的终端编程工具，写这类组件代码正是它的主场。之前缺的一环是框架知识：Remotion 的 API、渲染参数、目录约定，都得现查现喂。2026 年 1 月起，Remotion 官方开始提供 Agent Skills，把这些知识打包成 Claude Code 可以加载的技能，Claude 写出来的代码直接就是框架的最佳写法。两者拼起来，流水线只剩三步：改 props → 渲染 → 出片。这篇按我们实际上线的完整过程复盘，从装环境到批量渲染，包括踩过的每一个坑。

环境与版本

三个前置条件：Node.js、Claude Code、Remotion。Node 是 Remotion 的运行前提；Claude Code 有 npm 和原生安装两条路线，装法见文末相关阅读，这里只确认可用性。

node -v            # Remotion 需要 Node.js 18 以上
claude --version   # 确认 Claude Code 可用【待补：实际输出的版本号】
mkdir weekly-video && cd weekly-video
npx create-video@latest
# 交互式向导里选 blank 模板，包管理器选 npm
npm i
npx remotion studio   # 启动本地预览，默认 3000 端口

create-video 脚手架生成的目录里，最关键的是 src/Root.tsx：所有 Composition 都注册在这里。本机环境【待补：操作系统、CPU 核数、内存、Remotion 版本号】。

第二步：接入 Remotion 官方 Agent Skills

Remotion 从 2026 年 1 月起提供官方 Agent Skills，把框架 API 用法、渲染参数、目录约定写成 SKILL.md，Claude Code 加载后不用你再喂文档。安装入口【待补：官方文档给出的 Agent Skills 安装命令与地址】。装完做两个确认：

技能目录里确实有 SKILL.md，frontmatter 的 description 提到 Remotion；
开一个新会话（技能在会话启动时扫描加载，老会话不生效），问一句”用 Remotion 写一个 3 秒的标题卡”，看它是否按框架约定写出 Composition。

技能放 ~/.claude/skills/（个人全局）或项目内 .claude/skills/（随仓库共享），同名时项目级覆盖全局。这类与项目绑定的技能建议放项目级，连同 Root.tsx 一起提交进仓库，队友克隆即用。

第三步：让 Claude 写第一个 Composition

给 Claude 的指令要带上三要素：文案内容、时长感受、视觉风格。例如：“写一个 3 秒标题卡组件，文案’TuskyAI 每周 AI 情报’，深色渐变背景，文字弹入”。它给出的组件核心长这样：

import {
  AbsoluteFill,
  Composition,
  interpolate,
  spring,
  useCurrentFrame,
  useVideoConfig,
} from "remotion";

const containerStyle: React.CSSProperties = {
  background: "linear-gradient(135deg, #0f172a, #1e293b)",
  justifyContent: "center",
  alignItems: "center",
};

const Title: React.FC<{ text: string }> = ({ text }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const opacity = interpolate(frame, [0, 20], [0, 1], {
    extrapolateRight: "clamp",
  });
  const scale = spring({ frame, fps, config: { damping: 200 } });
  const titleStyle: React.CSSProperties = {
    color: "#f8fafc",
    fontSize: 72,
    opacity,
    transform: `scale(${scale})`,
  };
  return (
    <AbsoluteFill style={containerStyle}>
      <h1 style={titleStyle}>{text}</h1>
    </AbsoluteFill>
  );
};

const titleProps = { text: "TuskyAI 每周 AI 情报" };

export const RemotionRoot: React.FC = () => (
  <Composition
    id="TitleCard"
    component={Title}
    durationInFrames={90}
    fps={30}
    width={1920}
    height={1080}
    defaultProps={titleProps}
  />
);

看懂三个 API 就能看懂一切：useCurrentFrame() 返回当前帧号，渲染器每帧调用一次组件；interpolate(frame, [0, 20], [0, 1]) 把前 20 帧的帧号映射成透明度 0 到 1；spring() 按物理弹性公式算缩放值，比手写缓动自然。durationInFrames={90} 配 fps={30}，这条片子的时长就是 3 秒——时长、帧率、分辨率全部是 Composition 上的显式参数，没有隐藏状态。

npx remotion studio 打开预览，拖时间轴确认弹入动画符合预期，再进入渲染。

第四步：渲染与批量化

渲染就是把 Composition 落成 mp4 文件，--props 可以在命令行覆盖 defaultProps：

# 单条渲染
npx remotion render TitleCard out/weekly-38.mp4 --props='{"text":"第 38 周 AI 情报"}'

# 批量：三条标题卡连跑
for i in 38 39 40; do
  npx remotion render TitleCard "out/weekly-${i}.mp4" --props="{\"text\":\"第 ${i} 周 AI 情报\"}"
done

props 一旦变成命令行参数，“每周改数字出片”就是改一个字符串的事。再往生产走一步，可以用 zod 定义 props 的校验模式（Remotion 提供 @remotion/zod-types），让错误文案在渲染前就报错，而不是出了一条黑屏视频才发现。批量渲染的耗时随条数线性增长，本机渲染 3 秒 1080p 成片的实测耗时【待补：实测数据】，--concurrency 不同档位的对比【待补：实测数据】。

Remotion Studio 预览界面

常见坑

坑一：首次渲染卡在下载 Chrome Headless Shell。 Remotion 渲染依赖无头浏览器，首次渲染会自动下载 Chrome Headless Shell，国内网络环境下这一步经常超时【待补：当时的报错原文】。解法是给终端配代理再重跑，比如 export HTTPS_PROXY=http://127.0.0.1:7890（端口按自己的代理改）；下载成功后缓存在本机，之后渲染不再重复下载。

坑二：并发开满反而更慢。 渲染时每个并发占一路浏览器实例，内存占用随并发数线性上涨。小内存机器上把 --concurrency 拉满，轻则频繁交换内存拖慢渲染，重则直接被系统杀掉进程。并发档位留给实测数据说话【待补：本机对比数据】，经验方向是先按默认值跑，再小幅上调观察内存水位。

坑三：中文渲染成方框。 渲染发生在无头浏览器里，机器上装了什么字体它不管，容器里没有中文字体就是一片方框。正确做法是把字体文件放进项目的 public/ 目录，用 staticFile() 引入；或者用 @remotion/google-fonts 按需加载网络字体。字体跟随项目走，换机器渲染也不会跑版。

坑四：商用许可。 Remotion 对个人和小团队免费，公司团队使用需要购买商业许可，具体条款以官网为准。这套流水线一旦接入公司业务流程，先把许可这件事过一遍，比上线后被合规问询省事得多。

最终效果

这条流水线的价值不在”AI 会写代码”，而在改数重跑：文案、配色、时长全部收敛为 Composition 的显式参数，出一条新片从”开剪辑软件改半小时”变成”改一行 props 跑一条命令”。Claude Code 负责增量改组件（加一屏数据播报、换一种转场），人只做最终审片。上线以来累计产出【待补：视频条数】条，单条平均耗时【待补：数据】，相对旧流程节省的工时【待补：统计口径与数据】。

生产级流水线的能力边界也复盘清楚了：套路化的模板视频（标题卡、数据播报、片尾板）交给它；需要创意运镜的片子，人写分镜，Claude 翻译成代码，效率同样高于从零手写。