本文由 辛梓煜@词元2号站（www.ciyuanerhao.com）撰写，转载请注明出处。

快速摘要

如果你只想要一句话结论：2026 年做视频最大的变化，不是出现了更强的画面生成模型，而是"剪辑"这件事被搬进了代码世界——AI 编程 Agent（Codex、Claude Code、iFlow CLI 这一类）开始扮演"执行层"，Remotion 与 HyperFrames 负责"把画面渲染出来"，video-use 负责"读懂长素材并做出剪切决策"，OpenChatCut 这类工具负责"把 AI 的改动写进一条真实可编辑的多轨时间线"。四层各司其职，谁都替代不了谁。

再补三条关键信息：第一，画面生成模型（Seedance、可灵这类）和上面四层完全不是一回事，前者造新画面，后者组织已有画面；第二，AI 目前稳定能到的水平大约在六七十分，剩下那 20% 的节奏、音效、转场，还得靠人一版一版给具体反馈；第三，真正拉开成片差距的不是工具，而是你手里有没有结构化的素材库和沉淀好的 skill。

后面我会把每个工具的底层原理讲透，附上可直接复制的命令与提示词模板，再拆四个典型场景的完整制作链路，最后给一份踩坑自检清单。想看完整拆解，往下翻。

一、先搞明白一件事：视频为什么能"写"出来

1.1 传统剪辑的瓶颈到底卡在哪

我自己折腾这套流程之前，做视频的路径和大多数人一样：素材导入剪辑软件，拖时间线，找入点出点，加字幕，套转场，导出。这条路走了很多年，问题不在于难学，而在于它的每一步都必须由人的手完成，且不可复用。

这里面藏着两个真实的成本。

一个是定位成本。一段 30 多分钟的采访，人要找出其中最有信息量的几段，只能靠一遍遍拖动播放头，凭记忆和感觉判断。这个过程不产生任何可以留存的结果，下次换一段素材，一切从头再来。

另一个是重复成本。同样是给口播加字幕、去口水词、调一个暖色调，你这周做一遍，下周还得做一遍。软件里的"预设"能解决一部分，但预设是死的，它不理解这一条视频的内容。

代码路线之所以值得关注，恰恰是因为它把这两个成本都变成了可积累的东西。画面用代码描述，那么"这个标题动画怎么做"就变成了一个组件；剪切点由文本推理得出，那么"怎么判断一句话说完了"就变成了一条可以写进配置的规则。

1.2 "视频即代码"的准确含义

这个词最近被用得有点滥，我把它拆开说清楚。

所谓视频即代码，指的是把视频的每一帧看成一次可确定计算的结果。给定时间点 (t) 和帧率 fps，渲染器需要知道这一帧上应该出现什么。对应到工程实现上就是这样一个映射关系：

[

\text{frame} = \lfloor t \times \text{fps} \rfloor

]

渲染器按这个公式逐帧向前跳（seek），每跳到一帧就把当前画面截取下来，最后交给 FFmpeg 编码成 MP4。整个渲染管线是"跳转驱动"的，不依赖真实世界的时钟，每一帧都被独立捕获 。

这个设计带来一个非常重要的性质：确定性。同样的输入，永远产出一模一样的输出。听起来平平无奇，实际影响很大——你可以对渲染结果做哈希缓存，内容没变就不重渲；可以把渲染任务切片分发到多台机器上，接缝处不会出现色差或抖动；还可以像跑单元测试一样做回归比对，改了一行样式之后立刻看出哪几帧变了。

传统剪辑软件做不到这一点。同一个工程文件，换个版本、换台机器，导出结果可能就有细微差别。

1.3 AI 编程 Agent 在这条链路上的位置

很多人第一次接触这套东西，会下意识把 AI 编程 Agent 理解成"一个会做视频的 AI"。这个理解偏了。

更准确的比喻是：它是一个坐在电脑前替你干活的人。它会读你的文章、看你的素材文件夹、拆解结构、写代码、跑命令、看报错、再改代码。它本身不生成画面，也不直接编码视频，它调用别的工具去做这些事。

我画了一张图，把整条链路的分层关系说清楚：

graph TD
    A[人：想法 / 判断 / 审美] --> B[AI 编程 Agent：理解需求、拆解任务、写代码、跑命令]
    B --> C1[渲染框架层<br/>Remotion / HyperFrames]
    B --> C2[剪辑决策层<br/>video-use]
    B --> C3[时间线编辑层<br/>OpenChatCut 等]
    B --> C4[素材生成层<br/>即梦 CLI 等]
    C1 --> D[FFmpeg 编码]
    C2 --> D
    C3 --> D
    C4 --> C1
    C4 --> C3
    D --> E[成片 MP4]

这张图里，最上面那一层是人，最下面那一层是编码器，中间的 Agent 是唯一一个"会思考"的环节。它的价值不在于取代任何一层，而在于把原本需要人手动串起来的四五个工具，变成一次自然语言对话。

1.4 一个必须先建立的预期

我把话说在前面：这套东西不是点一下就出完美成片。

我自己跑下来的体感是，第一版能到六十分左右，结构对了、字幕齐了、节奏大致能看，但细节全是问题——某个字幕多停了两秒，某段背景音乐情绪不对，某个镜头切得太早人还没进画。

这些问题不是 AI 蠢，而是它拿不到你脑子里的标准。你说"再高级一点""再有电影感一点"，它只能猜。你说"第 8 秒人物还没进场，把这个镜头往后挪 0.4 秒""这句旁白结束后字幕多停了 2 秒，同步掐掉"，它立刻就能改对。

这是我踩过最大的一个坑：反馈越具体，迭代越快。抽象的形容词是最贵的沟通方式。

二、四类工具的定位与边界，别再混着用

2.1 最容易搞混的一组概念

刚接触这个领域的朋友，八成会把下面这几类东西混在一起。我做个明确区分。

把这张表记住，后面所有的选型问题都会变得简单：先问自己"我缺的是画面，还是画面的组织方式"。

缺画面，去找生成模型；缺组织方式，才轮到后面几层。

2.2 渲染框架：Remotion 与 HyperFrames 的路线分歧

这两个都属于"写代码渲染视频"，但技术路线完全不同，适用人群也不同。

Remotion 走的是 React 路线。 你用 React 组件描述画面，用 hooks 拿到当前帧号，据此计算元素的位置、透明度、缩放。它适合用组件去描述画面、时间轴、动画和素材，最终输出 MP4 。这条路线的优势是生态成熟、社区案例多、人工作者写起来顺手。

HyperFrames 走的是纯 HTML 路线。 它是 HeyGen 在 2026 年 4 月中旬开源的 HTML 转 MP4 框架，作品就是普通的 index.html 文件，靠 data-start 和 data-duration 这类属性定义时间信息，无头浏览器逐帧跳转截图，FFmpeg 编码，产出确定性 MP4。不需要 React，不需要专有时间线格式，不需要打包工具 。

为什么会出现第二条路线？原因很直白：大模型写 HTML 比写 React 更稳。HTML 在训练语料里的占比远高于任何一个特定框架的 API，让 Agent 直接吐 HTML，出错率明显更低。HyperFrames 的设计文档里也明确说了，作品是纯 HTML 文档，这是大模型最擅长生成的格式；CLI 默认非交互，所有输入通过参数传递，纯文本输出，遇错立即失败，这样 Agent 才能在没有人工确认的情况下驱动每一条命令 。

我自己的选择标准是这样的：

• 团队里已经有 React 基础，或者需要复杂的组件复用 → Remotion
• 主要让 Agent 自动产出，人几乎不手写代码 → HyperFrames
• 两者都要 → 也可以，它们并不冲突，只是别在同一个作品里混着写

关于授权，这块得说清楚，很多人搞错了。Remotion 采用的是分层授权：个人和小型公司可以免费使用它创作视频，哪怕是商业用途；达到一定规模的营利性组织则需要购买公司授权 。具体门槛是：个人、非营利组织、以及三人及以下的营利团队免费（免费档本身就是一份真正的商业授权，不是试用）；营利性组织达到四人及以上就需要付费授权 。而 HyperFrames 是 Apache 2.0 协议，HeyGen 明确去掉了按渲染次数和席位数计费的门槛 。

对个人创作者来说，两者都免费；对小团队来说，需要留意人数这条线。这是选型时容易被忽略但真会踩的一个点。

2.3 剪辑决策 Agent：video-use 解决的是另一个问题

前面两个框架解决的是"画面从无到有"，video-use 解决的是"素材已经有了，怎么剪"。

它是 Browser Use 团队开源的 AI 视频剪辑 Agent，用自然语言对话替代传统时间线操作。把原始素材放进文件夹并描述需求，Agent 自动完成素材盘点、口癖清除、调色、字幕、动画叠加以及自评估，最终输出成片 。

它最巧妙的地方在读取方式，这个我在第五章会详细拆。先给个直觉：它不让模型看画面，只让模型读文本。

2.4 时间线编辑器：把 AI 的动作变成可撤销的工程

这一层是最近才补齐的，也是我认为最关键的一块拼图。

前面几类工具有个共同问题：输出是"拍扁"的。AI 给你一个 final.mp4，你觉得第三段音乐不对，只能重新描述需求让它整体再跑一遍。改动无法定位，也无法撤销。

OpenChatCut 这类工具解决的正是这个问题——它是免费开源的桌面视频编辑器，让 AI Agent 在一条真实可编辑的多轨时间线上做修改。它不返回一个拍扁的生成片段，而是把片段、字幕、音频、特效、转场都保留下来供人继续打磨。核心区别在于 Agent 操作的是一个工程，而不只是给出剪辑建议 。

Agent 可以检查媒体、轨道、当前选区、转写文本和时间线状态，然后放置片段、裁掉停顿、加字幕、铺音乐、做转场，所有动作都是可见、可逆、可调整的 。它是独立的开源项目，采用 AGPL 协议，与商业版 ChatCut 没有从属关系 。

这个差别在实操中非常要命。我举个具体例子：一条 60 秒的片子，你对其中 5 秒不满意。拍扁式工具让你重跑整条；工程式工具让你打开时间线，把那 5 秒里的某个片段往右拖 8 帧，两秒钟解决。

顺带说一句我实测中遇到的兼容性问题：商业版 ChatCut 在 macOS 上连接稳定，Windows 环境下经常连不上。所以我在 Windows 机器上的剪辑工作，基本都走 video-use 或 OpenChatCut 这两条路。这个坑我卡了大半天，希望你别再卡一遍。—— 辛梓煜@词元二号站

2.5 一张选型决策图

把上面的判断浓缩成一张图，遇到新需求照着走就行：

flowchart TD
    Start[拿到一个视频需求] --> Q1{手里有真实拍摄素材吗}
    Q1 -->|没有，全靠生成| Q2{需要复杂动效和数据可视化吗}
    Q1 -->|有，是长素材| Q3{需要人工精修吗}
    Q2 -->|需要| R1[Remotion 或 HyperFrames<br/>+ 生成模型出素材]
    Q2 -->|不需要，主要是画面| R2[生成模型直出<br/>+ 轻量拼接]
    Q3 -->|不太需要，追求速度| R3[video-use 全自动]
    Q3 -->|需要反复打磨| R4[时间线编辑器<br/>OpenChatCut 等]
    R1 --> End[成片]
    R2 --> End
    R3 --> End
    R4 --> End

2.6 关于访问与替代方案的现实提醒

这里必须讲一个实际问题：上面提到的部分工具由海外团队开发，在国内网络环境下的登录、更新和使用体验并不稳定，尤其是需要账号授权的环节，经常出现卡在验证步骤的情况。

我的建议是分两条线走。

渲染框架和剪辑工具本身，绝大部分是开源的，代码可以直接从国内的代码托管平台获取（Gitee、AtomGit、GitCode 等都有镜像），本地跑不依赖外部服务。 这一层基本不受影响。

Agent 层则建议优先考虑国内可直接访问的方案。 2026 年国产 AI 编程工具已经相当能打，选择也不少。阿里采取双产品策略，通义灵码深耕 IDE 插件生态，Qoder 定位为 CLI 终端编程工具；腾讯有 CodeBuddy，字节有 Trae，百度有文心快码 。终端重度用户可以关注 iFlow CLI，完全免费开源，模型支持丰富；对数据安全要求极高的可以考虑 OpenCode，本地优先、可私有化部署 。

素材生成这一层，国内的选择其实更顺手。即梦 AI 在 2026 年 4 月正式推出了官方命令行工具即梦 CLI，把文生图、文生视频、图生视频等能力以 CLI 形式开放给开发者和 AI Agent ，中文语义理解和亚洲面孔一致性是它的强项，配合国产 Agent 用完全没有障碍。

一句话：不要因为某个海外工具用不顺就放弃整套方法论，方法论是通用的，工具是可以替换的。

三、Remotion：把画面写成 React 组件

3.1 它的核心心智模型

理解 Remotion 只需要抓住一件事：你写的不是"一段视频"，而是"第 N 帧长什么样"这个函数。

在传统剪辑软件里，你想让一个标题在第 2 秒淡入，做法是打两个关键帧，软件在中间插值。在 Remotion 里，你的思路要反过来：组件被渲染时会被告知"现在是第几帧"，你根据这个帧号自己算出透明度应该是多少。

用伪代码表达这个心智模型：

对于每一帧 f：
    当前时间 t = f / fps
    读取所有组件在 t 时刻的状态
    把状态渲染成一张网页画面
    截图 → 存为一帧
所有帧编码 → MP4

一旦转过这个弯，剩下的就是前端开发的常规工作了。

3.2 一个最小可运行的例子

下面是一个标题淡入并轻微上浮的作品片段，注释我写得比较细，新手可以逐行对照：

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

export const TitleCard = ({ text }) => {
  // 拿到当前正在渲染的帧号，这是整套逻辑的起点
  const frame = useCurrentFrame();
  // 拿到作品配置，主要是取 fps，方便把"秒"换算成"帧"
  const { fps } = useVideoConfig();

  // 0 到 0.8 秒之间，透明度从 0 线性变到 1
  const opacity = interpolate(
    frame,
    [0, Math.round(fps * 0.8)],
    [0, 1],
    { extrapolateRight: 'clamp' }   // 超出范围后保持末值，避免继续增长
  );

  // 同一段时间里，位置从下方 40px 移动到 0
  const translateY = interpolate(
    frame,
    [0, Math.round(fps * 0.8)],
    [40, 0],
    { extrapolateRight: 'clamp' }
  );

  return (
    <div style={{
      opacity,
      transform: `translateY(${translateY}px)`,
      fontSize: 72,
      fontWeight: 700,
      fontFamily: 'Source Han Sans SC, sans-serif',
    }}>
      {text}
    </div>
  );
};

这里有两个新手常见的坑，我提前说：

第一，extrapolateRight 一定要设。 不设的话，动画区间结束之后数值会继续按斜率往外跑，透明度变成 3、位置飞出画面，你会看到一个莫名其妙的空白帧。

第二，中文字体要显式声明并确保系统里装了。 渲染跑在无头浏览器里，它不会自动帮你找字体。字体缺失的表现是画面里出现一排方块，或者直接回退成很难看的默认衬线体。我第一次渲中文标题就栽在这儿。

3.3 让 Agent 来写这些代码

上面那段代码，实际工作中我基本不会手写。流程是这样的：

在 Codex 桌面端左侧找到插件入口，在 Design 分类里找到 Remotion 并添加安装。装好之后建一个项目文件夹，素材放进去它能读取，生成的代码会写到项目里，导出的视频也在对应目录 。然后在输入框里输入 @ 唤出插件菜单，选择 Remotion，就可以开始描述你想要的动画了 。

如果你用的是 CLI 类工具，路径更简单——把 Remotion 官方的最佳实践 skill 装上，Agent 会自动参考里面的规则。Skills 的机制是：一个 Skill 就是一个目录，包含必填的 SKILL.md 和可选的脚本、文档、资产文件。Agent 启动时扫描 Skills 目录按需加载，任务描述与 Skill 的 description 匹配时自动激活，也可以显式调用 。

我给 Agent 的提示词大致长这样，供参考：

项目目录：./history-animation
目标：做一条 16:9、时长约 90 秒的历史人物故事动画

画面规范：
- 分辨率 1920x1080，帧率 30
- 主色 #1a1a2e，强调色 #e94560，文字用思源黑体
- 卡片式分层结构：底层是纸纹背景，中层是人物剪影，顶层是文字

内容结构：
- 分 6 个场景，每个场景 12-18 秒
- 每个场景包含：场景标题（3秒）→ 主体画面（8-12秒）→ 一句总结（3秒）
- 场景之间用横向推移转场，时长 0.5 秒

要求：
1. 先输出 Composition 的目录结构和每个场景的时间分配表，不要直接写代码
2. 我确认后再逐个场景生成组件
3. 每写完一个场景，用 npx remotion still 抽一帧给我看
4. 所有时间常量集中定义在 constants.ts，方便我后面统一调

注意第 1 条和第 4 条，这是我踩了很多次坑之后总结出来的。让它先给结构再写代码，避免它一口气写完两千行然后你发现整体节奏就不对；把时间常量抽出来，是因为调节奏的时候你会改上百次数字，散落在各个文件里根本改不动。

3.4 渲染与质检

写完之后的常规命令：

# 启动本地预览工作台，浏览器里能拖时间轴看效果
npx remotion studio

# 抽单帧检查，参数是帧号，用来快速验证某个时间点的画面
npx remotion still src/index.ts MyComp out/frame-90.png --frame=90

# 正式渲染成片
npx remotion render src/index.ts MyComp out/video.mp4 --concurrency=4

--concurrency 这个参数值得说一下。它控制同时开几个浏览器实例渲染，调大能明显提速，但吃内存。我的经验是设成 CPU 核心数的一半左右比较稳，设太高容易在渲染中途因为内存不足崩掉，而且崩了之前渲的帧全白费。

渲染完别急着看，先跑一遍抽帧质检：

# 每 30 帧抽一张，快速扫一遍有没有黑帧、错位、字体缺失
ffmpeg -i out/video.mp4 -vf "select='not(mod(n,30))'" -vsync 0 qc/frame_%03d.png

# 顺便确认一下实际参数对不对
ffprobe -v error -select_streams v:0 \
  -show_entries stream=width,height,r_frame_rate,nb_frames \
  -of default=noprint_wrappers=1 out/video.mp4

抽帧质检是个很朴素但极其有效的习惯。一条 90 秒的片子有 2700 帧，人不可能逐帧看，但抽出 90 张缩略图排成一屏，异常帧一眼就能挑出来。这个步骤也可以直接让 Agent 帮你跑，让它看图并报告异常。

3.5 Remotion 最适合的场景

我实测下来，这几类内容用 Remotion 做效率最高：

• 数据可视化动画：柱状图生长、排行榜滚动、地图打点，这类东西本质就是数据驱动的图形，代码天然合适
• 知识科普卡片动画：分层元素、文字逐条出现、图示配合讲解
• 产品功能演示：UI 截图配合高亮框、箭头指引、放大特写
• 片头片尾模板：一次写好，换个文案就能复用，这是代码路线最爽的地方

反过来，真人表演、复杂剧情、强电影感镜头，别指望它。那些还是得靠拍摄或者生成模型，再配合人的审美判断。

四、HyperFrames：让 HTML 直接变成视频帧

4.1 它为什么会出现

视频自动化通常有两条常见路径。一条是用传统剪辑工具，适合人工制作但不适合批量生成；另一条是用代码化视频框架，对自动化友好，但往往要求开发者进入某个特定的组件体系或专用描述语言 。

HyperFrames 的思路是绕开第二条路的门槛。它让你像写网页一样定义视频场景、时间轴和动画，在浏览器里预览，再渲染成 MP4 。

我第一次看到这个设计的时候，反应是"这也太朴素了"。但用下来会发现，朴素恰恰是它最大的优势——当执行者是 AI 而不是人的时候，越通用的格式越可靠。

4.2 作品长什么样

一个 HyperFrames 作品就是一个 HTML 文件，时间信息写在属性里。结构大概是这样：

<!-- 每个 scene 用 data-start 和 data-duration 声明自己的时间区间，单位是秒 -->
<div class="scene" data-start="0" data-duration="3">
  <h1 class="title">开场标题</h1>
</div>

<div class="scene" data-start="3" data-duration="5">
  <video src="./assets/clip-01.mp4" data-fit="cover"></video>
  <div class="caption">这里是叠加在画面上的字幕</div>
</div>

<div class="scene" data-start="8" data-duration="4">
  <div class="chart" id="revenue-chart"></div>
</div>

动画部分不用学新东西。动画可以用 GSAP、Lottie、CSS，或者任何能够跳转到指定帧的运行时 。你会写 CSS 动画，就已经会做 HyperFrames 的动效了。

配上一段常规的 CSS：

.title {
  font-family: 'Source Han Sans SC', sans-serif;
  font-size: 84px;
  /* 注意：这里的动画时长要和 data-duration 对得上，
     否则渲染器跳帧的时候会取到动画还没跑完的中间态 */
  animation: fadeUp 0.8s ease-out forwards;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

4.3 安装与常用命令

仓库克隆时建议跳过 LFS 大文件，命令是在 git clone 前加上 GIT_LFS_SKIP_SMUDGE=1 环境变量 ，不然会拖下来一大堆示例素材。

# 克隆仓库（跳过大文件，能省不少时间和磁盘）
GIT_LFS_SKIP_SMUDGE=1 git clone https://github.com/heygen-com/hyperframes.git
cd hyperframes && npm install

CLI 提供了完整的开发循环：init、lint、check、snapshot、preview、render、publish、doctor，另外还有云端渲染和 Lambda 渲染的相关命令 。

日常用得最多的几条：

# 初始化一个新作品
npx hyperframes init my-video

# 启动预览工作台，浏览器里实时看效果
npx hyperframes preview

# 静态检查，提前发现时间区间重叠、素材路径错误这类问题
npx hyperframes check

# 渲染成片
npx hyperframes render --output demo.mp4

check 这条命令建议养成习惯，每次改完就跑一遍。它能在渲染之前把大部分低级错误抓出来，比渲了三分钟才发现素材路径写错要划算得多。

4.4 装上 skill，让 Agent 直接干活

这才是 HyperFrames 真正的使用姿势。官方提供了完整的 Agent skill 体系，包括路由 skill、创作工作流 skill 和领域 skill，一条命令安装 ：

npx skills add heygen-com/hyperframes

装完之后，在你常用的 AI 编程工具里直接用自然语言描述需求即可，比如"做一个 10 秒的产品介绍，标题淡入，带背景视频和背景音乐"，然后继续用大白话描述修改，比如"标题放大一点，切成深色模式，结尾加个淡出"。Agent 可以帮你创建作品、调整动画、更新样式，并准备渲染 。

官方还提供了 50 多个开箱即用的区块和组件，包括社交媒体样式的叠加层、着色器转场、数据可视化和电影感特效，一条命令就能装上任意一个 。这一点对新手特别友好——你不需要从零设计一个转场，先装现成的看效果，不满意再让 Agent 改。

4.5 中文内容的额外注意事项

海外框架做中文内容，有几个坑是躲不掉的，我把踩过的都列出来：