企业官网建设流程全解析

1. 为什么我要用 Claude Code 驱动 Remotion 做视频自动化

Remotion 是一个用 React 代码生成视频的开源项目，GitHub 上已经拿到 35.7k Star。它的核心思路很直接：把视频当成一个 React 组件树，每一帧就是一个 React 渲染结果，你用 CSS、SVG、Canvas、WebGL 写什么，最终就渲染成什么画面。对于熟悉 React 的开发者来说，这意味着不用打开剪辑软件，直接用代码控制视频的每一帧内容。

Claude Code 在这里扮演的角色是“代码生成与工程编排层”。你不需要手写全部 Remotion 组件，而是用自然语言描述分镜、字幕、动画节奏，让 Claude Code 生成对应的 React 代码和渲染脚本。两者结合后，整个流程变成：描述需求 → Claude Code 生成 Remotion 工程代码 → 本地预览 → 渲染导出 MP4。

这套方案适合三类人：一是会 React 但不想学 Premiere/After Effects 的开发者；二是需要批量生成统一风格讲解视频的内容团队；三是想把视频生成接入 CI/CD 或自动化流水线的工程团队。我实测下来，从零到跑通第一条 30 秒视频，大约 40 分钟，其中大部分时间花在调整字幕样式和音频对齐上。

Remotion 官方已经集成了 Claude Code、Cursor、Gemini 等 AI 工具的调用入口，你可以在项目初始化后直接让 Claude Code 读取工程结构并生成新场景。下面我从环境准备开始，把整条链路拆成可复制的步骤。

2. TaoToken 前置准备：给 Claude Code 配置可用的 API 通道

Claude Code 本身是一个命令行工具，它需要连接一个兼容 Anthropic API 协议的服务端才能工作。TaoToken 提供了这个通道，你需要在本地配置 Base URL 和 API Key，让 Claude Code 把请求发到正确的地址。

先拿到 API Key。打开 TaoToken 控制台，进入 API Keys 页面创建一个新 Key，复制保存。这个 Key 只显示一次，丢了就得重新生成。

然后配置 Claude Code 的接入信息。Claude Code 读取的是环境变量或本地配置文件，推荐用环境变量方式，避免把 Key 写进代码仓库。在终端执行：

export ANTHROPIC_BASE_URL="https://taotoken.net/api" export ANTHROPIC_API_KEY="sk-你的TaoTokenKey"

如果你用的是 Windows PowerShell，换成：

$env:ANTHROPIC_BASE_URL="https://taotoken.net/api" $env:ANTHROPIC_API_KEY="sk-你的TaoTokenKey"

配置完成后，Claude Code 发出的请求会走 TaoToken 的 API 地址。这里注意一点：Base URL 末尾不要加/v1或/chat/completions，Claude Code 会自己拼接路径。我试过加多余后缀，结果直接 404。

如果你同时用多个模型或工具，建议把配置写进~/.claude/settings.json，这样每次启动 Claude Code 都会自动读取。文件内容如下：

{ "env": { "ANTHROPIC_BASE_URL": "https://taotoken.net/api", "ANTHROPIC_API_KEY": "sk-你的TaoTokenKey" } }

保存后重启终端，运行claude --version确认工具能正常启动。如果报 401，说明 Key 无效或没读到环境变量；如果报连接超时，检查 Base URL 是否写错。这一步是整个链路的前置条件，Key 不通后面全白搭。

3. 可复制配置：Remotion 工程初始化与 Claude Code 调用脚本

Remotion 的工程初始化用一条命令完成：

npx create-video@latest my-video-project

执行后会提示你选择模板，选“Blank”或“Hello World”都行，我选的是 Blank，方便后面让 Claude Code 从零生成组件。进入目录后安装依赖：

cd my-video-project npm install

此时项目结构大致是：src/放 React 组件，remotion.config.ts是渲染配置，package.json里有start和render脚本。你可以先运行npm start打开预览界面，确认基础工程能跑起来。

接下来让 Claude Code 生成视频组件。在项目根目录启动 Claude Code：

claude

然后输入提示词，例如：

在当前 Remotion 项目中创建一个新场景，包含： 1. 一个 1920x1080 的 Composition，时长 30 秒，帧率 30； 2. 画面中央显示标题文字，从透明渐入； 3. 底部有字幕条，按时间切换三句话； 4. 背景用 CSS 渐变，颜色从深蓝到紫色。 请直接修改 src 目录下的文件，并告诉我需要注册到 Root.tsx 的组件名。

Claude Code 会读取现有工程结构，生成类似src/MyScene.tsx的文件，并提示你在src/Root.tsx里注册<Composition>。注册片段大致如下：

import { Composition } from "remotion"; import { MyScene } from "./MyScene"; export const RemotionRoot = () => { return ( <Composition id="MyScene" component={MyScene} durationInFrames={900} fps={30} width={1920} height={1080} /> ); };

如果你需要音频，Remotion 支持<Audio>组件。让 Claude Code 生成音频调用脚本时，可以指定用 edge-tts 生成 MP3，再在组件里引用：

edge-tts --text "欢迎来到自动生成视频教程" --write-media public/audio/intro.mp3

然后在 React 组件里：

import { Audio, staticFile } from "remotion"; <Audio src={staticFile("audio/intro.mp3")} />

这里有个细节：staticFile的路径是相对于public/目录的，不要写成绝对路径。我踩过的坑是把 MP3 放在src/assets下，结果渲染时报找不到文件，移到public/audio/后正常。

4. 验证请求与成功结果：从预览到渲染出 MP4

配置完成后，先做本地预览验证。运行：

npm start

浏览器会打开 Remotion Studio，界面类似视频编辑器，左侧是 Composition 列表，右侧是预览窗口。点击播放按钮，你能看到 React 组件逐帧渲染的效果。注意：预览界面默认没有声音，这是 Remotion Studio 的行为，不代表最终视频没音频。我当初因为这个折腾了好一会儿，以为音频没生成成功，后来导出 MP4 才发现声音正常。

预览确认画面和字幕节奏没问题后，执行渲染命令：

npx remotion render MyScene out/video.mp4

这条命令会把MyScene这个 Composition 渲染成 MP4 文件，输出到out/video.mp4。渲染时间取决于视频长度和复杂度，30 秒 1080p 视频大约需要 1 到 2 分钟。渲染完成后，用系统播放器打开 MP4，检查画面、字幕、音频是否同步。

如果你需要批量渲染多个场景，可以写一个 Node 脚本调用 Remotion 的renderMediaAPI：

const { renderMedia, selectComposition } = require("@remotion/renderer"); async function render() { const composition = await selectComposition({ serveUrl: ".", id: "MyScene", }); await renderMedia({ composition, serveUrl: ".", codec: "h264", outputLocation: "out/video.mp4", }); } render();

运行node render.js即可。这种方式适合接入自动化流水线，比如每天定时生成日报视频。

验证成功的标志有三个：一是 Remotion Studio 里能正常播放；二是终端渲染命令没有报错；三是导出的 MP4 文件能播放且音画同步。三个都通过，说明整条链路跑通了。

5. 本篇常见错排查：401、local proxy failed、reading choices、OAuth

第一个高频错误是 401 Unauthorized。报错信息通常是：

APIError: 401 Unauthorized - invalid api key

原因一般是 TaoToken Key 没配置正确，或者环境变量没生效。排查步骤：先运行echo $ANTHROPIC_API_KEY确认 Key 存在；再检查 Base URL 是否写成https://taotoken.net/api，不要多加路径；最后确认 Key 没有过期或被删除。如果用的是settings.json，检查 JSON 格式是否合法，逗号多了少了都会导致读取失败。

第二个错误是 local proxy failed。Claude Code 在某些网络环境下会尝试走本地代理，如果代理没启动或端口不对，就会报：

local proxy failed: connect ECONNREFUSED 127.0.0.1:7890

解决办法是检查你的终端代理设置，或者直接取消代理环境变量：

unset HTTP_PROXY unset HTTPS_PROXY

然后重新启动 Claude Code。如果你确实需要代理，确保代理端口和实际监听端口一致。

第三个错误是 reading choices 相关报错，通常出现在模型返回格式不符合预期时：

Error: reading 'choices' - undefined

这多半是因为 API 返回的不是标准 OpenAI 格式，而 Claude Code 按 OpenAI 格式解析。检查你配置的 Base URL 是否指向了正确的 Anthropic 兼容端点。TaoToken 的/api路径兼容 Anthropic 协议，不要混用 OpenAI 的/v1/chat/completions。

第四个是 OAuth 相关报错，Claude Code 启动时可能提示：

OAuth token expired or invalid

这是因为 Claude Code 默认会尝试 OAuth 登录流程，但你用的是 API Key 模式。解决办法是在settings.json里显式关闭 OAuth，或者设置环境变量：

export CLAUDE_CODE_AUTH_MODE="api_key"

然后重新启动。如果还是报 OAuth 错误，删除~/.claude/下的缓存文件再试。

另外，如果你在 Remotion 项目里同时用了 Cline MCP 或 Codex 的auth.json，注意三件套要写全：Base URL、Key、Model ID。缺任何一个都会导致调用失败。例如：

{ "baseUrl": "https://taotoken.net/api", "apiKey": "sk-你的TaoTokenKey", "model": "claude-sonnet-4-20250514" }

Model ID 要和你实际使用的模型一致，写错了会报 model not found。

6. 长期编码与 Agent 场景：把视频生成接入自动化流程

跑通单条视频后，下一步是把它变成可重复的自动化流程。我的做法是把 Remotion 工程和 Claude Code 调用脚本一起放进 Git 仓库，用 GitHub Actions 或本地 cron 定时触发。每次触发时，Claude Code 根据输入的分镜 JSON 生成新的 React 组件，Remotion 渲染成 MP4，最后上传到对象存储或直接发布。

分镜 JSON 可以长这样：

{ "title": "每日技术简报", "scenes": [ { "text": "今天聊三个话题", "duration": 5 }, { "text": "第一，Remotion 渲染优化", "duration": 8 }, { "text": "第二，Claude Code 批量生成", "duration": 8 } ] }

Claude Code 读取这个 JSON 后，生成对应的<Sequence>组件，每个场景一个序列，时长按duration换算成帧数。这样你只需要维护 JSON，视频内容自动更新。

对于长期编码场景，建议开通 Coding Plan，把 Claude Code 的调用额度固定下来，避免按次计费带来的成本波动。如果你只是偶尔验证模型效果，用模型对话页面就够了；如果是团队协作或 CI 集成，API Keys 加接入文档是更稳的组合。

我在实际使用中把渲染命令封装成了 npm script：

{ "scripts": { "render:daily": "node scripts/generate-scenes.js && npx remotion render DailyBrief out/daily.mp4" } }

这样每次只需要运行npm run render:daily，整条链路自动完成。踩过的坑是：Claude Code 生成的组件偶尔会引用不存在的静态资源，导致渲染中断。解决办法是在渲染前加一步校验，检查public/下所有被引用的文件是否存在。

最后一步验证：运行npm run render:daily，确认输出 MP4 的时长、分辨率、音频轨道都符合预期。如果一切正常，你就拥有了一个用 Claude Code 驱动 Remotion 的自动视频生成流水线。