“制作视频”这件事，终于与 “敲命令” 同义了。

2026年1月，使用React编程视频的框架 Remotion ，为Anthropic的 Claude Code 发布了“Agent Skills”。这不仅是一个AI工具，而是从“用提示词画像素”迈向 “编译视频” 时代的决定性转折点。

▲ 代理式编码带来的视频制作范式转移。

面向“主导工程师”的工作流

如果你已经接入Claude Code，搭建视频制作环境只需3分钟。

决定论视频 vs 生成式AI视频

Agent Skills与传统生成式AI（Sora或Veo）的决定性差异，在于 其底层数据结构 。

对工程师而言，Remotion × Claude Code并不是用来制作“看起来像样的影像”。它是用来构建符合严格设计系统的 关键级视觉资产 的武器。

实践案例：促销视频的瞬时生成

我让Claude为这篇博客制作了一个简短的促销视频。整个流程完全无需手动操作。

>> 制作一个Titanium Smart Ring的介绍视频。
>> 加入有未来科技感的排版开场。
>> 使用ring.jpg，并用Tailwind加入霓虹点缀。

Claude: 正在分析需求...

- 初始化Remotion模板。
- 使用@remotion/animation实现开场。
- 用Tailwind CSS摆放素材。

预览服务器已在 http://localhost:3000 启动。

更令人惊讶的是，只需 “口头提出修改” （例如“把Logo闪烁速度加快”），React的Hooks就会被自动改写。我们终于从手动打关键帧的苦役中解放出来。

Deep Dive: 编程化视频构成 (Composition)

Remotion 的核心概念是“Composition（构成）”。代理生成的代码不仅仅是文本，其设计初衷是作为 React Props 接收时间线上的属性。

// 代理生成的典型组件示例
export const MyVideo = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  // 使用缓动函数实现平滑动画
  const opacity = interpolate(frame, [0, 30], [0, 1], {
    extrapolateRight: "clamp",
  });
  return <div style={{ opacity }}>数字 DNA 渲染中...</div>;
};

代理通过调整 interpolate 函数的参数，自动实现毫秒级的动画控制。

结论：工程师的新职能

设计师与开发者之间的界限，正在被CLI抹平。掌握Remotion Agent Skills，以程序掌控视频制作，在下一代营销驱动型开发中已不再是“选项”，而是“必修课”。

Remotion 官方网站

React可编程视频的精髓。

remotion.dev