我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

1. 从剪辑时间线到 React 组件短视频批量生产的真实痛点如果你做过短视频大概率经历过这种循环打开剪辑软件拖素材、对时间轴、调关键帧、导出然后第二天老板说“把品牌色换成新的再出 20 条不同文案的版本”。这时候你会发现传统剪辑软件里那些鼠标拖拽出来的效果根本没法批量复用。每换一个文案就得重新对齐一遍时间线纯体力活。Remotion 这个开源工具给出的思路很直接视频就是 React 组件时间轴就是帧数动画就是 CSS 和 JS 的函数。你用写网页的方式写视频每一帧画面由代码决定那么“批量生成 100 条不同文案的视频”就变成了“循环 100 次、每次换一个 props 渲染”。像素级精准控制、组件复用、自动化批量产出这些在剪辑软件里要靠插件和脚本勉强实现的能力在代码世界里是天然存在的。但问题也在这里。Remotion 要求你懂 React、会写 CSS 布局、理解useCurrentFrame和interpolate这些 API。对于前端开发者来说不算难对于内容创作者来说门槛就高了。最近 Remotion 推出了 Agent Skills配合 Claude Code 这类编码助手可以把“写 Remotion 组件”这件事交给 AI 来辅助完成。你只需要用自然语言描述场景Claude Code 帮你生成组件代码你在本地用npx remotion studio预览满意后npx remotion render导出成片。这篇文章聚焦一个具体场景用 React/CSS 组件化思维替代传统剪辑软件以 Remotion 为渲染引擎、Claude Code 辅助生成场景代码实现短视频批量产出。我会交付可复制的 Remotion 工程结构、npx初始化命令、Claude Code 的接入配置以及从组件到成片的完整验证流程。适合谁有基础前端知识、想做自动化视频产出的开发者或者愿意让 AI 帮你写代码的内容创作者。2. 前置准备TaoToken 接入 Claude Code 与 Remotion 环境搭建在开始写 Remotion 组件之前需要先把两件事准备好一个是 Remotion 的本地工程环境另一个是 Claude Code 的模型接入。Remotion 本身是 npm 包用npx就能初始化Claude Code 需要配置一个可用的模型服务端点这里我用 TaoToken 来做接入因为它提供了兼容 Anthropic 的 API 格式配置起来比较直接。先确认本地环境。你需要 Node.js 18 以上版本npm 或 pnpm 都行。打开终端执行node -v npm -v如果版本太低去 Node.js 官网下载 LTS 版本安装。然后创建一个 Remotion 工程。Remotion 官方提供了脚手架命令直接运行npx create-videolatest my-video-project这个命令会问你几个问题选择模板我选 Blank 空白模板、是否使用 TypeScript选 Yes、包管理器选 npm。等待依赖安装完成后进入目录cd my-video-project npm run dev浏览器会自动打开http://localhost:3000你会看到一个 Remotion Studio 的界面左边是组件列表右边是预览窗口。默认模板里有一个Composition定义了视频的宽高、帧率、时长。到这里Remotion 环境就绪。接下来配置 Claude Code 的模型接入。Claude Code 是 Anthropic 推出的终端编码助手默认走官方 API。如果你已经有可用的 API Key可以直接在终端里设置环境变量。TaoToken 的 API 地址是https://taotoken.net/api兼容 Anthropic 的 Messages API 格式。在终端里执行export ANTHROPIC_BASE_URLhttps://taotoken.net/api export ANTHROPIC_API_KEY你的TaoToken API KeyAPI Key 可以在 TaoToken 控制台的 API Keys 页面创建地址是https://taotoken.net/console/api-keys。创建后复制出来替换上面的占位符。如果你用的是 Windows PowerShell把export换成$env:语法$env:ANTHROPIC_BASE_URLhttps://taotoken.net/api $env:ANTHROPIC_API_KEY你的TaoToken API Key配置完成后在终端里运行claude命令如果能看到 Claude Code 的交互界面说明接入成功。你可以先问一句“帮我写一个 Remotion 的 Hello World 组件”测试模型是否能正常返回代码。这里有一个细节需要注意Remotion 的 Agent Skills 需要单独安装。在项目根目录执行npx skills add remotion-dev/skills这个命令会把 Remotion 相关的技能描述文件下载到本地Claude Code 在生成代码时会参考这些技能定义输出的组件更符合 Remotion 的 API 规范。安装完成后你的工程目录里会多出一个.skills文件夹里面包含 Remotion 的组件模板、动画函数说明、渲染配置示例。环境准备好之后整个工作流就清晰了你在终端里用自然语言描述视频场景Claude Code 生成 Remotion 组件代码你在 Remotion Studio 里预览效果调整满意后用npx remotion render导出 MP4。下一节我会给出具体的配置文件和可复制的组件代码。3. 可复制配置Remotion 工程结构、Claude Code settings 与组件代码这一节直接给可复制的内容。先看 Remotion 工程的核心结构。用npx create-videolatest初始化后目录大概是这样my-video-project/ ├── src/ │ ├── Root.tsx # 注册所有 Composition │ ├── Composition.tsx # 默认视频组件 │ └── index.ts # 入口文件 ├── remotion.config.ts # Remotion 渲染配置 ├── package.json ├── tsconfig.json └── .skills/ # Agent Skills 技能文件Root.tsx是注册视频的地方每个Composition定义一条视频的宽高、帧率、时长和对应的 React 组件。我把它改成一个批量生成的例子// src/Root.tsx import { Composition } from remotion; import { ProductPromo } from ./ProductPromo; export const RemotionRoot: React.FC () { return ( Composition idProductPromo component{ProductPromo} durationInFrames{300} fps{30} width{1080} height{1920} defaultProps{{ title: 新品上市, subtitle: 限时优惠, brandColor: #FF6B35, }} / / ); };这里durationInFrames{300}表示 10 秒视频30fps × 10swidth和height是竖屏 1080×1920适合短视频平台。defaultProps是传给组件的参数后面批量生成时只需要换这些 props。接下来是ProductPromo.tsx组件用 React 和 CSS 实现一个简单的产品宣传动画// src/ProductPromo.tsx import { AbsoluteFill, interpolate, useCurrentFrame, useVideoConfig, spring, } from remotion; type Props { title: string; subtitle: string; brandColor: string; }; export const ProductPromo: React.FCProps ({ title, subtitle, brandColor, }) { const frame useCurrentFrame(); const { fps } useVideoConfig(); const titleOpacity interpolate(frame, [0, 30], [0, 1], { extrapolateRight: clamp, }); const titleScale spring({ frame, fps, config: { damping: 12 }, }); const subtitleY interpolate(frame, [30, 60], [50, 0], { extrapolateRight: clamp, }); return ( AbsoluteFill style{{ backgroundColor: #0A0A0A, justifyContent: center, alignItems: center, fontFamily: sans-serif, }} h1 style{{ color: brandColor, fontSize: 120, opacity: titleOpacity, transform: scale(${titleScale}), margin: 0, }} {title} /h1 p style{{ color: #FFFFFF, fontSize: 48, opacity: interpolate(frame, [30, 60], [0, 1], { extrapolateRight: clamp, }), transform: translateY(${subtitleY}px), marginTop: 40, }} {subtitle} /p /AbsoluteFill ); };这段代码里useCurrentFrame拿到当前帧号interpolate把帧号映射成透明度或位移spring生成弹性动画。所有动画都是帧驱动的渲染时每一帧都会重新计算样式所以导出结果和预览完全一致。然后是 Claude Code 的配置文件。在项目根目录创建.claude/settings.json内容如下{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_API_KEY: 你的TaoToken API Key }, permissions: { allow: [ Read, Write, Bash(npx remotion:*), Bash(npm run:*) ] } }这个文件让 Claude Code 在项目内自动使用 TaoToken 的端点并且允许它执行 Remotion 相关的命令。注意ANTHROPIC_API_KEY要替换成你在 TaoToken 控制台创建的真实 Key。如果你不想把 Key 写进文件也可以用环境变量方式Claude Code 会优先读取系统环境变量。三件套对照表配置项值说明Base URLhttps://taotoken.net/apiTaoToken 的 Anthropic 兼容端点API Key控制台创建在https://taotoken.net/console/api-keys生成Model IDclaude-sonnet-4-20250514Claude Code 默认模型可在 settings 里指定如果你用的是 Cline 或者 CC Switch 这类工具配置逻辑一样Base URL 填https://taotoken.net/apiAPI Key 填 TaoToken 的 KeyModel ID 填 Claude 的模型标识。Cline 的 MCP 配置里把anthropic的 baseURL 指向 TaoToken 即可。配置完成后在终端里运行claude进入交互模式输入帮我在 src/ProductPromo.tsx 里加一个背景渐变动画从深蓝到紫色持续 2 秒。Claude Code 会读取现有组件生成修改后的代码你确认后它会直接写入文件。Remotion Studio 会热更新你立刻能看到效果。4. 验证请求从组件到成片的完整渲染流程配置写好了接下来验证整条链路能不能跑通。我分三步走先在 Remotion Studio 里预览组件再用 Claude Code 生成一个新场景最后用npx remotion render导出 MP4。第一步启动 Remotion Studio。在项目根目录执行npm run dev浏览器打开http://localhost:3000左侧边栏会列出ProductPromo这个 Composition。点击它右侧预览窗口会播放 10 秒的动画标题从透明变清晰并带弹性缩放副标题从下方滑入。如果你看到这个效果说明组件代码没问题。第二步用 Claude Code 生成一个新场景。在终端里运行claude输入提示词在 src 目录下新建一个 DataChart.tsx 组件用 Remotion 实现一个柱状图动画。 要求5 根柱子高度从 0 增长到目标值每根柱子延迟 5 帧启动 颜色用 #4A90D9背景白色时长 150 帧30fps。 然后在 Root.tsx 里注册一个 id 为 DataChart 的 Composition。Claude Code 会生成DataChart.tsx并修改Root.tsx。你回到 Remotion Studio刷新页面左侧会多出DataChart这个 Composition。点击预览应该能看到柱子依次生长的动画。如果动画不对你可以继续在 Claude Code 里说“第二根柱子的延迟改成 10 帧”它会精准修改对应代码。第三步导出成片。在终端里执行npx remotion render ProductPromo out/product-promo.mp4这个命令会把ProductPromo这个 Composition 渲染成 MP4 文件输出到out/product-promo.mp4。渲染过程中终端会显示进度条完成后你会看到文件大小和耗时。我实测下来10 秒的 1080×1920 视频在 M1 Mac 上大约 20 秒渲染完成。如果画面复杂、图层多时间会相应增加。批量生成怎么做Remotion 提供了--props参数可以从 JSON 文件读取参数。创建一个props.json{ title: 春季大促, subtitle: 全场五折, brandColor: #E91E63 }然后渲染时指定npx remotion render ProductPromo out/spring-sale.mp4 --propsprops.json如果你想批量生成 100 条不同文案的视频写一个 Node.js 脚本循环读取 CSV 或 JSON 数据每次调用npx remotion render并传入不同的 props 文件。这就是代码化视频生产的核心优势渲染引擎是确定性的输入相同 props 就输出相同视频批量任务可以并行调度。验证成功的标志out/目录下出现 MP4 文件用播放器打开画面、动画、文字都符合预期。如果渲染失败终端会报错下一节我会列出常见错误和排查方法。5. 常见报错排查401、local proxy failed、reading choices 与 OAuth 问题这一节整理我在配置和渲染过程中真实遇到的报错以及对应的解决方法。你如果卡在某一步可以先对照这里排查。报错一401 UnauthorizedError: 401 Unauthorized {error:{type:authentication_error,message:invalid x-api-key}}这个错误说明 Claude Code 请求 TaoToken 时 API Key 无效。检查三个地方第一ANTHROPIC_API_KEY环境变量是否设置正确有没有多余空格第二Key 是否在 TaoToken 控制台被删除或过期第三ANTHROPIC_BASE_URL是否写成了https://taotoken.net/api注意末尾不要加/v1TaoToken 的兼容层会自动处理路径。如果你用的是.claude/settings.json确认 JSON 格式没有语法错误可以用cat .claude/settings.json | python -m json.tool验证。报错二local proxy failedError: local proxy failed: connect ECONNREFUSED 127.0.0.1:7890这个错误通常是因为系统里设置了本地代理但代理服务没有运行。Claude Code 会读取HTTP_PROXY或HTTPS_PROXY环境变量。如果你之前配置过代理现在代理关了就会报这个错。解决方法在终端里执行unset HTTP_PROXY HTTPS_PROXY或者在.claude/settings.json里显式设置HTTP_PROXY: 和HTTPS_PROXY: 。注意这里只是清理本地环境变量不涉及任何网络工具的使用。报错三reading choices 相关错误Error: reading choices of undefined这个报错一般出现在用 OpenAI 兼容格式请求 TaoToken 时。TaoToken 的/api端点兼容 Anthropic Messages API返回格式是content数组不是 OpenAI 的choices。如果你用的工具默认走 OpenAI 格式需要把请求路径改成 Anthropic 格式或者把 Base URL 指向 TaoToken 的对应端点。Claude Code 本身走 Anthropic 格式不会出现这个问题如果你用 Cline 或其他工具检查它的 API 提供商设置是否为 Anthropic。报错四OAuth 相关错误Error: OAuth token expired or invalidClaude Code 在某些版本里会尝试 OAuth 登录。如果你已经用 API Key 方式配置不需要 OAuth。出现这个报错时检查是否同时设置了ANTHROPIC_API_KEY和 OAuth 凭证两者冲突。解决方法删除~/.claude/下的 OAuth 缓存文件只保留 API Key 配置。具体路径是~/.claude/credentials.json删掉后重新运行claude。报错五Remotion 渲染时内存不足Error: JavaScript heap out of memoryRemotion 渲染是把每一帧截屏合成复杂画面会吃内存。解决方法在remotion.config.ts里设置Config.setConcurrency(2)降低并发帧数或者用--concurrency1参数。另外把视频分辨率从 4K 降到 1080P 也能显著减少内存占用。如果还是不够在package.json的渲染脚本里加NODE_OPTIONS--max-old-space-size4096。报错六Composition 找不到Error: No composition with id ProductPromo found检查Root.tsx里Composition的id属性是否和渲染命令里的一致。Remotion 的 id 区分大小写ProductPromo和productpromo是两个不同的 id。另外如果你在Root.tsx里用了条件渲染或动态注册确保组件在渲染时已经挂载。排查完这些基本能覆盖 90% 的配置和渲染问题。如果遇到其他报错把终端完整输出复制给 Claude Code让它帮你分析通常几轮对话就能定位。6. 语义一致 CTA从单条视频到批量生产线的下一步走到这里你已经有了一个可运行的 Remotion 工程能用 Claude Code 生成组件代码能渲染出第一条 MP4。接下来如果想把它变成真正的批量生产线有几个方向可以继续。第一把 props 数据源接到外部。比如从 Google Sheets、Airtable 或者本地 CSV 读取文案和品牌色用 Node.js 脚本循环调用npx remotion render每次传入不同的 props。这样你只需要维护一张表格就能生成成百上千条视频。第二用 Remotion 的Series和Sequence组件组合多场景。一条 30 秒的视频可以拆成开场、产品展示、价格、CTA 四个场景每个场景是一个独立组件用Series串联。Claude Code 可以帮你生成每个场景的骨架你只需要调整文案和配色。第三把渲染任务放到 CI/CD 里。Remotion 官方提供了 GitHub Actions 模板你 push 代码后自动渲染并上传到对象存储。这样团队里非技术成员只需要改表格视频自动产出。如果你在配置 Claude Code 接入时遇到问题或者想换一个更稳定的模型端点可以试试 TaoToken 的 API 服务。它的 Anthropic 兼容端点配置简单适合用来驱动 Claude Code 做代码生成。API Key 在控制台创建文档里有详细的接入说明。对于长期做视频自动化、需要频繁调用模型生成组件的场景Coding Plan 提供了更划算的额度方案适合把这条生产线跑成日常流程。模型对话页面可以快速测试模型响应接入文档里有完整的 Base URL 和参数说明。如果你只是想先验证 Remotion 和 Claude Code 的配合效果从 API Keys 创建一个 Key按本文的配置跑通第一条视频再决定要不要扩大规模。最后分享一个我踩过的坑Remotion 的interpolate函数默认会在输入范围外继续外推导致动画在结束后出现异常值。记得加extrapolateRight: clamp和extrapolateLeft: clamp让动画在边界处停住。这个细节在官方文档里不太显眼但实际渲染时经常遇到。