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-videolatest 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 - 统一使用 30fps1080p - 动画优先用 spring() 而不是线性 interpolate - 字幕组件复用 src/components/Subtitle.tsx这个文件的作用是给 Agent 一份项目说明书。我实测下来有没有 CLAUDE.mdAgent 生成代码的准确率能差一倍。因为它不用每次重新猜你的目录结构和编码习惯。注意Claude Code 会执行终端命令所以权限管理很重要。默认它会问你确认别图省事关掉确认。尤其是涉及rm、git push这类操作多一次确认就少一次事故。3.3 让 Agent 理解视频语言的关键把意图翻译成参数Agent 剪视频最大的障碍不是技术是语义鸿沟。你说节奏快一点它不知道快多少。你说高级感它更懵。所以用 Claude Code 做视频核心技巧是把模糊的审美描述翻译成可量化的参数。我总结了一套翻译对照表实测非常好用你的模糊描述翻译成 Agent 能懂的参数节奏快一点每个镜头 durationInFrames 从 90 降到 45高级感用低饱和度配色 慢速 spring 缓动 大量留白有冲击力用 scale 从 0.8 到 1.2 的快速缩放 高对比色温柔一点spring 的 damping 调到 20 以上避免回弹卡点把 Sequence 的 from 对齐到音频节拍时间戳有了这张表你跟 Agent 沟通就顺畅多了。比如我想要一个高级感的片头直接说片头用深灰背景标题用 spring 缓动从下方 30px 处升起damping 设 25停留 60 帧后淡出。Agent 拿到这种指令一次就能做对。4. 从一句话到成片完整工作流的拆解4.1 第一步用自然语言描述分镜让 Agent 生成骨架假设我要做一个 30 秒的产品介绍视频。我不会一上来就写代码而是先跟 Claude Code 描述分镜帮我做一个 30 秒的产品介绍视频1080p30fps。分四段第一段 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或者手动loadFontimport { 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 接进来然后一步步加复杂度。踩过几个坑之后你会发现这套工作流的威力远超预期。