企业官网建设流程全解析

1. 从一句需求到 30 秒课件：这条链路到底卡在哪

Claude Skill 是 Anthropic 给 Claude Code 设计的一套「能力说明书」，本质是一个带SKILL.md的目录，里面写清楚某个工具怎么装、怎么调、有哪些坑。Remotion 则是一个用 React 写视频的框架：你把每一帧当成一个 React 组件，用useCurrentFrame()拿到当前帧号，再配合interpolate()做补间，最后npx remotion render输出 mp4。把这两件事拼起来，就能实现「在 Claude Code 里用自然语言描述教学片段，由 Skill 驱动生成 Remotion 工程并渲染出片」。

适合谁？三类人最合适：一是做课程/科普但不会前端的老师；二是想批量产出动画课件的教研团队；三是已经在用 Claude Code 写代码、想把视频渲染也纳入 Agent 工作流的开发者。我试过把一段卷积核滑动的讲解拆成 6 个镜头，从写 Skill 到出片大概 20 分钟，其中渲染只占 3 分钟，剩下都在调参数。

真正的卡点不在 Remotion 本身，而在两处：第一，Claude Code 要能稳定调用模型，否则 Skill 写到一半就断流；第二，Skill 目录结构如果不符合规范，Claude 会「假装懂」，生成的代码跑不起来。这篇就围绕这两点，给你一套可复制的配置和验证流程。

2. 前置：用 TaoToken 统一 Key 给 Claude Code 供能

Claude Code 本身是免费装的，但驱动它干活需要模型额度。官方订阅之外，更省钱的做法是接一个兼容 Anthropic 协议的 Coding Plan。TaoToken 在这里的作用是「统一 Key」：你只维护一个 API Key，就能在 Claude Code、脚本、CI 里复用同一套鉴权，不用每个工具单独配一遍。

配置写在~/.claude/config.toml（Windows 是C:\Users\你的用户名\.claude\config.toml）。核心是env段，把 base_url 指向 TaoToken 的 API 地址，Key 用环境变量注入，避免明文进 git：

# ~/.claude/config.toml model = "claude-sonnet-4-5" [env] ANTHROPIC_BASE_URL = "https://taotoken.net/api" ANTHROPIC_AUTH_TOKEN = "${TAOTOKEN_API_KEY}" ANTHROPIC_MODEL = "claude-sonnet-4-5"

Key 在控制台生成，建议单独建一个项目 Key，方便按项目统计用量。生成入口在这里：https://taotoken.net/console?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content=console

注意：ANTHROPIC_AUTH_TOKEN不要直接写字符串，用${}引用系统环境变量。macOS/Linux 在~/.zshrc里export TAOTOKEN_API_KEY="sk-xxx"，Windows 用setx。

配好后先别急着装 Skill，跑一条最小请求确认链路通：

claude -p "只回复两个字：通了"

返回「通了」说明 Key 和 base_url 都对。如果报 401，八成是环境变量没生效，重开一个终端再试。

3. 可复制配置：Skill 目录结构 + Remotion 工程骨架

Claude Skill 的规范是：一个目录，根下必须有SKILL.md，frontmatter 里写name和description，正文写使用说明。Remotion 相关的辅助脚本放scripts/，模板放assets/。结构如下：

remotion-video-skill/ ├── SKILL.md ├── scripts/ │ ├── scaffold.sh # 初始化 Remotion 工程 │ └── render.sh # 封装渲染命令 └── assets/ └── template/ ├── package.json ├── remotion.config.ts └── src/ ├── Root.tsx └── scenes/ └── SlideIn.tsx

SKILL.md的 frontmatter 和关键正文这样写：

--- name: remotion-video description: 用 React + Remotion 生成教学动画视频。当用户要求制作讲解视频、动画课件、知识可视化片段时使用。 --- ## 使用步骤 1. 运行 scripts/scaffold.sh 初始化工程 2. 在 src/scenes/ 下新建场景组件，必须导出 durationInFrames 3. 在 Root.tsx 的 Composition 里注册场景 4. 运行 scripts/render.sh 输出 mp4 ## 关键约束 - 所有动画用 useCurrentFrame() + interpolate()，禁止用 CSS animation - 单场景时长不超过 300 帧（10 秒 @30fps） - 中文字体在 remotion.config.ts 里显式指定，否则渲染乱码

scaffold.sh负责把模板拷到工作目录并装依赖：

#!/usr/bin/env bash set -e TARGET=${1:-./my-video} cp -r "$(dirname "$0")/../assets/template" "$TARGET" cd "$TARGET" npm install echo "工程已初始化：$TARGET"

render.sh把渲染参数固定下来，避免每次手敲：

#!/usr/bin/env bash set -e npx remotion render src/index.ts MainComposition out/video.mp4 \ --codec=h264 --crf=18 --concurrency=2

一个最小场景组件长这样，interpolate控制透明度从 0 到 1：

// src/scenes/SlideIn.tsx import { useCurrentFrame, interpolate, AbsoluteFill } from "remotion"; export const SlideIn: React.FC<{ title: string }> = ({ title }) => { const frame = useCurrentFrame(); const opacity = interpolate(frame, [0, 30], [0, 1], { extrapolateRight: "clamp", }); const y = interpolate(frame, [0, 30], [40, 0], { extrapolateRight: "clamp", }); return ( <AbsoluteFill style={{ background: "#0f172a", justifyContent: "center" }}> <h1 style={{ color: "#fff", opacity, transform: `translateY(${y}px)` }}> {title} </h1> </AbsoluteFill> ); };

在Root.tsx注册时，durationInFrames和fps必须和渲染命令一致，否则时长会错位：

import { Composition } from "remotion"; import { SlideIn } from "./scenes/SlideIn"; export const RemotionRoot: React.FC = () => ( <Composition id="MainComposition" component={SlideIn} durationInFrames={900} fps={30} width={1920} height={1080} defaultProps={{ title: "卷积核如何滑动" }} /> );

900 帧 ÷ 30fps = 30 秒，正好对上你要的教学片段长度。

4. 验证请求：一次可复现的 30 秒片段

装 Skill 有两种方式。手动方式是把上面的目录放到~/.claude/skills/remotion-video/；更省事的是在 Claude Code 里直接说：

安装 https://github.com/wshuyi/remotion-video-skill

Claude Code 会自己拉取并放到正确位置。装完用/skills命令确认列表里出现remotion-video。

接着在项目目录里发起需求，描述要具体到镜头和时长：

用 remotion-video skill 做一个 30 秒教学片段： - 0-10 秒：标题「卷积核如何滑动」淡入 - 10-20 秒：一个 3x3 网格，高亮框从左到右移动 - 20-30 秒：底部出现公式 y = w·x + b 输出 1920x1080，30fps。

Claude 会依次调用scaffold.sh、生成场景组件、注册 Composition，最后跑render.sh。渲染日志里你会看到类似输出：

Bundling 100% Rendering frames 0-899 Encoded 900 frames in 42.3s out/video.mp4 (2.1 MB)

打开out/video.mp4，如果标题淡入、网格移动、公式出现三个镜头都对，说明整条链路通了。想先在浏览器里预览而不渲染，用npx remotion studio，改代码热更新，比反复渲染快得多。

如果你只是想验证模型对话是否正常，不想跑完整渲染，可以直接在模型对话页发一条测试：https://taotoken.net/models?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content=model-chat

5. 本篇常见错排查

报错一：Error: Cannot find module '@remotion/cli'scaffold.sh没跑完或npm install被中断。删掉node_modules重装，确认package.json里有@remotion/cli和remotion两个依赖。

报错二：渲染出来中文是方块remotion.config.ts没指定字体。加一行Config.setChromiumOpenGlRenderer("angle")并在组件里用fontFamily: "Noto Sans SC"，同时确保系统装了该字体。

报错三：401 Unauthorized出现在 Claude Code 调用时ANTHROPIC_AUTH_TOKEN没读到。用echo $TAOTOKEN_API_KEY确认变量存在，再检查config.toml里是不是写成了${TAOTOKEN_API_KEY}而不是字面量。Key 失效的话去控制台重新生成：https://taotoken.net/api-keys?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content=api-keys

报错四：视频时长和预期不符durationInFrames和fps的乘积才是秒数。900 帧 @30fps 是 30 秒，但如果你在render.sh里加了--frames=0-300，就只渲染前 10 秒。

报错五：Skill 装了但 Claude 不调用SKILL.md的description写得太泛。把触发条件写具体，比如「当用户要求制作讲解视频、动画课件时使用」，Claude 才会在合适时机加载。

报错六：并发渲染内存爆掉--concurrency=2是保守值。机器内存小于 8G 时降到 1，或者加--gl=swiftshader走软件渲染。

6. 把这条链路变成你的常规产线

跑通一次之后，真正省时间的是把它固化下来。我的做法是：把常用的教学镜头（标题淡入、网格高亮、公式推导、对比分栏）各写成一个场景组件，放进assets/template/src/scenes/，下次做新视频时让 Claude 直接复用，而不是从零生成。这样 Skill 就从「一次性脚本」变成了「可积累的素材库」。

长期高频做视频的话，按量计费的 API 账单会涨得比较快，这时候换成 Coding Plan 更划算，额度固定、适合 Agent 这种持续调用的场景：https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content=coding-plan

接入细节和参数说明都在文档里，遇到协议层的问题先翻这里：https://taotoken.net/doc?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content=doc

如果你用的是 Claude Code 的 Anthropic 兼容模式，配置示例可以直接参考：https://taotoken.net/claude-code-anthropic?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content=claudecode-anthropic

最后留一个我踩过的坑：Skill 里的render.sh别写死输出路径，用$1接收参数，否则多个项目并行时会互相覆盖。改完之后，你就能在同一个 Claude Code 会话里连续做三四个片段，最后用ffmpeg拼接成完整课程。