企业官网建设流程全解析

1. 当"剪辑"这件事被 Agent 接管之后

视频剪辑这件事，长期以来有个隐形门槛：你得会软件。Premiere、Final Cut、达芬奇，随便挑一个，光是熟悉时间线、关键帧、转场曲线，就够一个非专业选手喝一壶的。但最近一年，我观察到的一个明显变化是——剪辑正在从"操作软件"变成"描述意图"。你不需要知道怎么拖拽轨道，你只需要说清楚"我想要什么效果"，剩下的交给 Agent。

Claude Opus 5.5 这一代模型出来之后，配合 Claude Code 和 Remotion 这套组合，我实测下来最大的感受是：Agent 开始具备"导演思维"了。它不只是帮你执行某个孤立的命令，而是能理解一个完整的视频叙事结构——片头怎么起、节奏怎么控、字幕什么时候出现、转场用什么类型，这些原本需要人来统筹的决策，现在 Agent 能自己拿主意。

这篇文章我想聊的不是"AI 能不能剪视频"这种泛泛的话题，而是具体怎么用 Claude Code + Remotion 搭出一套能自动生成视频的工作流。关键词里出现的 TypeScript、Remotion、Agent 架构、Claude Code 安装配置，这些我都会拆开讲。适合两类人看：一类是懂点前端但没碰过视频的技术人，另一类是想把内容生产流程自动化的创作者。哪怕你完全没剪过视频，跟着走一遍也能跑通。

先说结论：Remotion 负责"渲染"，Claude Code 负责"编排"，Opus 5.5 负责"决策"。这三者各司其职，构成了一个能自我迭代的视频生产闭环。下面我按实际搭建顺序，把每个环节的坑和技巧都摊开讲。

2. Remotion 为什么成了 Agent 剪视频的首选底座

2.1 用 React 写视频，这个思路解决了什么根本问题

传统视频编辑软件的核心是"时间线 + 图层"，本质上是给人类视觉操作设计的。但 Agent 没有眼睛，它处理的是文本和代码。所以要让 Agent 剪视频，第一件事就是把视频变成代码能描述的东西。

Remotion 干的就是这件事。它让你用 React 组件来定义视频的每一帧。一个<Sequence>就是一个时间段，一个<AbsoluteFill>就是一个全屏图层，useCurrentFrame()拿到当前帧号，然后你就能用数学公式控制任何元素的动画。比如让一个标题在 30 帧内从透明渐变到不透明，代码就是：

const frame = useCurrentFrame(); const opacity = interpolate(frame, [0, 30], [0, 1], { extrapolateRight: "clamp", }); return <h1 style={{ opacity }}>标题</h1>;

这段代码对 Agent 来说太友好了。它不需要理解"淡入"这个视觉概念，它只需要知道"用 interpolate 把 0 到 30 帧映射到 0 到 1 的透明度"。视频从"像素艺术"变成了"参数化函数"，这才是 Agent 能介入的前提。

我试过用其他方案，比如让 Agent 直接操作 FFmpeg 命令。问题是 FFmpeg 的 filter 语法极其晦涩，Agent 生成十次有八次参数写错，而且没法做复杂的图层叠加和动态排版。Remotion 的优势在于它站在 React 生态上，Agent 对 React 的熟悉程度远高于 FFmpeg 滤镜链。

2.2 环境搭建：从零到能跑第一个视频

安装 Remotion 本身不复杂，但有几个细节容易卡住。我按实际步骤走一遍：

# 用官方脚手架创建项目 npx create-video@latest my-video # 进入目录 cd my-video # 启动预览（会打开浏览器实时预览） npm run dev

脚手架会问你选模板，第一次玩建议选 "Blank" 或者 "Hello World"，别一上来就选复杂模板，容易看晕。创建完之后目录结构大概是这样：

my-video/ ├── src/ │ ├── Root.tsx # 注册所有 Composition │ ├── Composition.tsx # 你的视频组件 │ └── index.ts # 入口 ├── remotion.config.ts # 渲染配置 └── package.json

这里有个新手最容易踩的坑：Remotion 的视频是通过<Composition>注册的，每个 Composition 有id、durationInFrames、fps、width、height这几个必填参数。很多人改了组件但忘了改durationInFrames，结果渲染出来只有几帧，一脸懵。记住：视频总时长 = durationInFrames / fps。想要 10 秒的视频，fps 是 30，那 durationInFrames 就得是 300。

提示：Remotion 默认用 Chromium 渲染，第一次跑会下载一个 headless 浏览器，国内网络环境下可能比较慢。建议提前配好 npm 镜像，或者耐心等一次，后续就缓存了。

2.3 渲染管线：本地渲染和云端渲染怎么选

Remotion 的渲染分两种模式。本地渲染就是npx remotion render，直接在你机器上跑，适合短视频和调试。云端渲染是 Remotion Lambda，把渲染任务分发到 AWS Lambda 上并行处理，适合长视频和批量生产。

我实测下来的经验是：3 分钟以内的视频，本地渲染完全够用。一台普通的 M 系列 Mac，渲染 1080p 的 1 分钟视频大概 20 到 40 秒。超过 5 分钟的视频，本地渲染会明显变慢，而且占满 CPU，这时候才考虑上 Lambda。

但 Lambda 的配置成本不低，要配 AWS 账号、IAM 权限、S3 存储桶，对个人开发者来说有点重。我的建议是：先用本地渲染把流程跑通，等真的需要批量生产了再上云。别一开始就追求"工业级"，那是给自己找麻烦。

3. Claude Code 在视频工作流里到底扮演什么角色

3.1 它不是"帮你写代码"，而是"帮你做决策"

很多人对 Claude Code 的理解还停留在"AI 补全代码"。这个认知在视频场景下会严重限制你的用法。Claude Code 真正的价值在于：它能读取你的项目上下文，理解你的意图，然后自主决定改哪个文件、加什么逻辑、怎么组织代码结构。

举个我实际遇到的例子。我想给视频加一个"根据背景音乐节拍切换画面"的效果。如果只是让 AI 补全代码，我得先想清楚怎么检测节拍、怎么把节拍时间映射到帧号、怎么触发切换。但用 Claude Code，我只需要说：

"读一下 src/Composition.tsx，我想让画面切换跟着背景音乐的鼓点走，音乐文件在 public/bgm.mp3，你看着实现。"

它会自己去读文件、分析音频、写节拍检测逻辑、把结果映射到 Sequence 的切换点上。它做的是"导演决策"，不是"打字员工作"。这就是标题里说的"Agent 开始自己当导演"的真正含义。

3.2 安装与配置：把 Claude Code 接进你的开发环境

Claude Code 的安装方式有几种，我推荐用 npm 全局装：

npm install -g @anthropic-ai/claude-code

装完之后在项目根目录跑claude就能启动。第一次会引导你登录，按提示走就行。

如果你用 VS Code，可以装官方扩展，这样 Claude Code 能直接读取你当前打开的文件和光标位置，交互更顺。配置上有个关键点：在项目根目录放一个 CLAUDE.md 文件，把你项目的约定写进去。比如：

# 项目约定 - 所有视频组件放在 src/compositions/ 下 - 每个视频必须注册到 src/Root.tsx - 统一使用 30fps，1080p - 动画优先用 spring() 而不是线性 interpolate - 字幕组件复用 src/components/Subtitle.tsx

这个文件的作用是给 Agent 一份"项目说明书"。我实测下来，有没有 CLAUDE.md，Agent 生成代码的准确率能差一倍。因为它不用每次重新猜你的目录结构和编码习惯。

注意：Claude Code 会执行终端命令，所以权限管理很重要。默认它会问你确认，别图省事关掉确认。尤其是涉及rm、git push这类操作，多一次确认就少一次事故。

3.3 让 Agent 理解"视频语言"的关键：把意图翻译成参数

Agent 剪视频最大的障碍不是技术，是语义鸿沟。你说"节奏快一点"，它不知道快多少。你说"高级感"，它更懵。所以用 Claude Code 做视频，核心技巧是把模糊的审美描述翻译成可量化的参数。

我总结了一套翻译对照表，实测非常好用：

有了这张表，你跟 Agent 沟通就顺畅多了。比如"我想要一个高级感的片头"，直接说"片头用深灰背景，标题用 spring 缓动从下方 30px 处升起，damping 设 25，停留 60 帧后淡出"。Agent 拿到这种指令，一次就能做对。

4. 从一句话到成片：完整工作流的拆解

4.1 第一步：用自然语言描述分镜，让 Agent 生成骨架

假设我要做一个 30 秒的产品介绍视频。我不会一上来就写代码，而是先跟 Claude Code 描述分镜：

"帮我做一个 30 秒的产品介绍视频，1080p，30fps。分四段：第一段 5 秒，品牌 logo 淡入；第二段 10 秒，三个核心功能点依次出现；第三段 10 秒，用户评价滚动；第四段 5 秒，结尾 CTA 按钮脉冲。用 Remotion 实现，组件拆到 src/compositions/ProductIntro/ 下。"

Claude Code 会生成一套完整的组件结构，包括 Root.tsx 的注册、每个 Sequence 的时间分配、基础动画。这一步的产出是"骨架"，不是"成品"。骨架能跑起来，但视觉上很粗糙。别急着否定，骨架的价值在于它把时间轴和结构定死了，后面所有调整都在这个框架内进行。

我踩过的一个坑是：一开始就让 Agent 生成"完美"的视频，结果它为了满足所有细节，代码写得极其复杂，改一处崩三处。后来我改成先骨架后细节，每次只让 Agent 改一个方面，效率反而高得多。

4.2 第二步：逐段打磨，每次只改一个维度

骨架跑通之后，进入打磨阶段。这个阶段的关键原则是：一次只改一个维度。视觉、动效、文案、音频，分开处理。

比如先调视觉。我会说："把第二段的三个功能点卡片改成玻璃拟态风格，背景加模糊，边框用半透明白色。"Agent 改完，我预览，满意了再进入下一步。

然后调动效："给这三个卡片加依次入场的动画，每个间隔 15 帧，用 spring 缓动，从右侧滑入。"

再调文案和排版："功能点标题字号加大到 48px，描述文字用 24px，行高 1.5。"

为什么要这样拆？因为 Agent 的上下文窗口是有限的，你一次性给它太多修改指令，它容易顾此失彼。而且分开改，出问题了你立刻知道是哪一步引入的，回滚成本低。这跟传统开发里的"小步提交"是一个道理。

4.3 第三步：音频与字幕的自动化对齐

视频有了画面，接下来是音频和字幕。这块是 Agent 最能体现价值的地方，因为手动对齐字幕是纯体力活。

我的做法是：把配音音频丢进public/目录，然后让 Claude Code 处理。它会调用语音识别（可以接 Whisper 之类的本地模型，也可以用云服务），拿到每个词的时间戳，然后自动生成字幕组件的 Sequence 数据。

// Agent 生成的字幕数据结构大概长这样 const subtitles = [ { text: "这是第一句话", from: 0, to: 90 }, { text: "这是第二句话", from: 90, to: 180 }, // ... ];

然后字幕组件遍历这个数组，每个字幕用<Sequence from={sub.from} durationInFrames={sub.to - sub.from}>包起来。整个过程你只需要提供音频，剩下的 Agent 全包。

背景音乐的处理更简单，直接<Audio src={staticFile("bgm.mp3")} volume={0.3} />就行。但有个细节：音乐要淡入淡出，不然开头结尾会很突兀。让 Agent 加个 volume 的 interpolate 就搞定了。

4.4 第四步：渲染输出与批量生产

所有调整满意之后，渲染成片：

npx remotion render ProductIntro out/video.mp4

第一个参数是 Composition 的 id，第二个是输出路径。渲染过程中 Remotion 会逐帧截图再合成，所以 CPU 会跑满，这是正常的。

如果你要批量生产，比如给 100 个产品各做一个介绍视频，那就把可变部分抽成 props。Remotion 支持给 Composition 传 props，你可以写个脚本循环调用渲染命令，每次传不同的产品数据。这就是 Agent 剪视频的终极形态：你定义模板，Agent 填充内容，机器批量渲染。

我实测过用这套流程做 20 个视频，从写模板到全部渲染完成，大概花了 3 小时。如果纯手工剪，20 个视频至少两天。效率提升不是线性的，是数量级的。

5. 那些文档里不会写的坑和技巧

5.1 字体加载：渲染出来字体不对是最常见的问题

Remotion 渲染用的是 headless Chromium，它不会自动加载你系统里的字体。你在本地预览时字体正常，一渲染就变成默认的宋体或 Arial，这是新手最常遇到的坑。

解决方案是用@remotion/google-fonts或者手动loadFont：

import { loadFont } from "@remotion/google-fonts/Inter"; const { fontFamily } = loadFont();

或者把字体文件放进public/，用staticFile加载。记住：任何在视频里出现的字体，都必须显式加载，别指望系统字体。

5.2 渲染性能：为什么你的视频渲染特别慢

渲染慢通常有三个原因。第一是分辨率太高，4K 渲染比 1080p 慢四倍以上，除非客户要求，否则 1080p 足够。第二是用了太多实时计算，比如每帧都在做复杂的数学运算或者网络请求，这种要提前算好缓存起来。第三是并发数设置不当，Remotion 默认会用满 CPU 核心，但如果你同时跑其他任务，反而会互相拖慢。

我一般会在remotion.config.ts里显式设置并发：

import { Config } from "@remotion/cli/config"; Config.setConcurrency(4); // 根据机器核心数调整

5.3 Agent 生成的代码要 review，尤其是这几类

Claude Code 生成的代码大部分能用，但有几类必须人工检查。第一是时间计算，Agent 偶尔会把帧号和秒数搞混，导致动画时长不对。第二是资源路径，它可能用了相对路径而不是staticFile，本地能跑但渲染会失败。第三是循环和条件渲染，复杂逻辑下 Agent 可能写出死循环或者渲染顺序错误。

我的习惯是：Agent 改完代码，先跑npm run dev预览，重点看时间轴对不对、资源加载有没有报错。预览通过再渲染，能省掉大量返工。

5.4 版本管理：视频项目也要用 Git

很多人觉得视频项目就是一堆素材，没必要用 Git。错。Remotion 项目本质是代码项目，必须用 Git 管理。而且因为 Agent 会频繁改代码，Git 的 diff 和回滚能力就是你的安全网。

我的做法是：每次让 Agent 做一个独立改动之前，先 commit 一次。改完预览满意了再 commit。这样任何一步出问题，都能精确回滚到上一个可用状态。别嫌麻烦，这是用 Agent 开发的必备习惯。

6. 关于 Agent 剪视频这件事，我的一些真实判断

用了几个月这套流程，我对"Agent 当导演"这件事有了更具体的认知。它确实能接管大量重复性、结构性的工作——分镜编排、字幕对齐、批量渲染，这些以前要花大量时间的环节，现在 Agent 几分钟就能搞定。但它替代不了审美判断。什么颜色搭配好看、什么节奏让人舒服、什么文案能打动人，这些还是得人来定。

所以现阶段最有效的模式不是"全自动"，而是**"人定方向，Agent 执行"**。你把审美和叙事意图翻译成参数，Agent 负责把参数变成代码和成片。这个分工下，一个不懂剪辑的人也能做出结构完整、动效流畅的视频，因为他不需要会操作软件，只需要会描述意图。

Remotion 这套方案还有个隐藏优势：视频变成了可版本控制的代码资产。你可以像管理代码一样管理视频，改一个参数就能重新生成一版，A/B 测试不同版本的成本极低。这是传统剪辑软件做不到的。

如果你现在想上手，我的建议是从一个 15 秒的简单视频开始，别贪大。先把 Remotion 跑通，再把 Claude Code 接进来，然后一步步加复杂度。踩过几个坑之后，你会发现这套工作流的威力远超预期。