如何用 Claude Skill 做教学视频？TaoToken 统一 Key 接入 Remotion 渲染管线

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.tomlWindows 是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-5Key 在控制台生成建议单独建一个项目 Key方便按项目统计用量。生成入口在这里https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentconsole注意ANTHROPIC_AUTH_TOKEN不要直接写字符串用${}引用系统环境变量。macOS/Linux 在~/.zshrc里export TAOTOKEN_API_KEYsk-xxxWindows 用setx。配好后先别急着装 Skill跑一条最小请求确认链路通claude -p 只回复两个字通了返回「通了」说明 Key 和 base_url 都对。如果报 401八成是环境变量没生效重开一个终端再试。3. 可复制配置Skill 目录结构 Remotion 工程骨架Claude Skill 的规范是一个目录根下必须有SKILL.mdfrontmatter 里写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.tsxSKILL.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 工程已初始化$TARGETrender.sh把渲染参数固定下来避免每次手敲#!/usr/bin/env bash set -e npx remotion render src/index.ts MainComposition out/video.mp4 \ --codech264 --crf18 --concurrency2一个最小场景组件长这样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 idMainComposition 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-skillClaude Code 会自己拉取并放到正确位置。装完用/skills命令确认列表里出现remotion-video。接着在项目目录里发起需求描述要具体到镜头和时长用 remotion-video skill 做一个 30 秒教学片段 - 0-10 秒标题「卷积核如何滑动」淡入 - 10-20 秒一个 3x3 网格高亮框从左到右移动 - 20-30 秒底部出现公式 y w·x b 输出 1920x108030fps。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_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentmodel-chat5. 本篇常见错排查报错一Error: Cannot find module remotion/cliscaffold.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_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentapi-keys报错四视频时长和预期不符durationInFrames和fps的乘积才是秒数。900 帧 30fps 是 30 秒但如果你在render.sh里加了--frames0-300就只渲染前 10 秒。报错五Skill 装了但 Claude 不调用SKILL.md的description写得太泛。把触发条件写具体比如「当用户要求制作讲解视频、动画课件时使用」Claude 才会在合适时机加载。报错六并发渲染内存爆掉--concurrency2是保守值。机器内存小于 8G 时降到 1或者加--glswiftshader走软件渲染。6. 把这条链路变成你的常规产线跑通一次之后真正省时间的是把它固化下来。我的做法是把常用的教学镜头标题淡入、网格高亮、公式推导、对比分栏各写成一个场景组件放进assets/template/src/scenes/下次做新视频时让 Claude 直接复用而不是从零生成。这样 Skill 就从「一次性脚本」变成了「可积累的素材库」。长期高频做视频的话按量计费的 API 账单会涨得比较快这时候换成 Coding Plan 更划算额度固定、适合 Agent 这种持续调用的场景https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentcoding-plan接入细节和参数说明都在文档里遇到协议层的问题先翻这里https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentdoc如果你用的是 Claude Code 的 Anthropic 兼容模式配置示例可以直接参考https://taotoken.net/claude-code-anthropic?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentclaudecode-anthropic最后留一个我踩过的坑Skill 里的render.sh别写死输出路径用$1接收参数否则多个项目并行时会互相覆盖。改完之后你就能在同一个 Claude Code 会话里连续做三四个片段最后用ffmpeg拼接成完整课程。