企业官网建设流程全解析

用claude-code-video-toolkit制作Sprint Review视频：Remotion代码化视频的实战教程

【免费下载链接】claude-code-video-toolkitAI-native video production toolkit for Claude Code项目地址: https://gitcode.com/gh_mirrors/cl/claude-code-video-toolkit

claude-code-video-toolkit是一个 AI 原生的视频制作工具箱，专为 Claude Code 打造。它用Remotion（基于 React 的代码化视频框架）把 Sprint Review（迭代回顾）演示变成一份可配置、可复用的工程化视频模板：你只需修改配置文件、放入演示录屏，AI 工具就能帮你生成旁白、配乐，最终渲染出专业级的 MP4 视频。本教程将带你从零走通完整流程。

一、工具箱是什么？能做什么？

这个工具箱的核心工作流是：撰写脚本 → 生成配乐 → 生成素材 → 合成画面 → 渲染成片。它内置了技能（Skills）、斜杠命令、视频模板和 Python 工具，覆盖旁白、音乐、画面生成等完整生产链路。

对于团队最实用的场景之一就是Sprint Review 视频：每个迭代结束时，把"做了什么、修了什么、效果如何"做成一支 3~5 分钟的视频，配上 AI 旁白和演示录屏，远比 PPT 汇报更有感染力。

工具箱内置两套 Sprint Review 模板，位于templates/目录：

• sprint-review— 经典结构：标题页 → 概览 → 演示片段 → 总结，开箱即用
• sprint-review-v2— 可组合的场景化架构，支持更多幻灯片类型（目标、决策、指标、路线图等）

二、环境准备：2 分钟快速开始

最低要求只有一个：Node.js 18+。不需要任何 API Key 就能渲染出视频。

1. 克隆仓库

git clone https://gitcode.com/gh_mirrors/cl/claude-code-video-toolkit cd claude-code-video-toolkit

2. 先用示例项目验证环境（无需任何配置）：

cd examples/hello-world npm install npm run render

几秒钟后就会得到一个 MP4 文件。如果这一步成功，说明你的 Remotion 渲染环境已经就绪。

💡 如果要使用 AI 旁白、配乐等进阶功能，再运行uv sync安装 Python 依赖，然后启动 Claude Code 输入/setup，按向导完成云 GPU 与语音配置即可（详见 docs/getting-started.md）。

三、理解 Remotion 代码化视频的思路

传统视频制作靠剪辑软件拖时间轴，而 Remotion 的思路完全不同：视频就是一段 React 代码。

• 每一帧画面都是一个 React 组件的渲染结果
• 动画由帧号（frame）驱动，时间轴就是数字
• 修改内容 = 修改配置文件，然后重新渲染

这意味着 Sprint Review 视频天然适合"复用"：本季度的视频和上季度的视频共享同一套组件，你只需要换配置。模板的核心文件 sprint-config.ts 就是唯一的"内容入口"：

export const sprintConfig: SprintConfig = { info: { name: 'Everest', // 迭代名称 dateRange: '15th Jan – 29th Jan', // 时间范围 product: 'Your Product', // 产品名 version: '2.0.0', // 版本号 build: '150', // 构建号 }, // overview、demos、summary、audio … };

改完保存，浏览器预览里立刻生效——这就是"代码即视频"的爽点。

四、sprint-review 模板的项目结构

模板目录 templates/sprint-review/ 的组织方式清晰直观：

sprint-review/ ├── src/ │ ├── config/ │ │ ├── theme.ts # 颜色、字体、间距 │ │ ├── sprint-config.ts # 每次迭代要改的就是它 │ │ └── types.ts # TypeScript 类型定义 │ ├── components/ │ │ ├── slides/ # 标题页、概览页、总结页、片尾 │ │ └── demos/ # 演示区、分屏组件 │ ├── SprintReview.tsx # 主合成（composition） │ └── Root.tsx # 组件注册 └── public/ ├── demos/ # 你的演示录屏（mp4） ├── audio/ # 旁白、配乐、音效 └── images/ # Logo、截图

模板还复用了工具箱共享的组件库 lib/components/，包含动态背景、胶片颗粒、标签、分屏、画中画讲述者等 11 个视频组件，以及 lib/transitions/ 里的 7 种自定义转场（glitch、RGB 分离、像素化溶解等）。

五、实战：从一个真实案例学起来

仓库里有一个完整的参考案例 examples/sprint-review-cho-oyu/：一款 iOS 视频会议应用 v4.0.2 的 Sprint Review 视频，展示了 6 段独立演示、分屏对比、JIRA 单号标签和 AI 旁白。

它的项目文档非常值得照着学：

• VIDEO-SPEC.md — 完整视频规格：每一幕几秒、画面放什么、旁白说什么
• VOICEOVER-SCRIPT.md — 约 3 分钟的旁白脚本
• ASSETS-NEEDED.md — 需要制作的素材清单

视频中用到的演示素材（比如 App Store 后台截图）就存放在 examples/sprint-review-cho-oyu/remotion/public/images/：

照做四步（以这个案例为蓝本）：

1. 复制案例到你的项目目录：cp -r examples/sprint-review-cho-oyu projects/my-sprint
2. 更新 VIDEO-SPEC.md 为你的迭代内容
3. 修改remotion/src/config/sprint-config.ts，填入你的演示视频文件名、标签和 JIRA 号
4. 录制新演示 → 生成新旁白 → 预览 → 渲染

六、给演示片段加旁白：一条命令生成 AI 配音

推荐"按场景生成音频"的方式：在public/audio/scenes/里为每一幕写一个.txt脚本文件，然后一条命令批量生成对应 MP3：

uv run tools/voiceover.py --scene-dir public/audio/scenes --json

好处很实际：

• 单独重生成某一幕，不用整段重录
• 场景时长和音频天然对齐，不用手动算偏移帧
• 语音用的是自托管的开源模型 Qwen3-TTS，成本约$0.01/条（工具源码：tools/voiceover.py）

生成后在配置里引用即可：

overview: { title: "What's New", items: [...], audioFile: 'scenes/02-overview.mp3', },

配乐同样一条命令搞定：uv run tools/music_gen.py --preset corporate-bg --duration 120 --output music.mp3（详见 tools/music_gen.py）。

七、控制演示节奏：时长与播放速度的小技巧

Sprint Review 视频里最容易出现的问题是：演示录屏太长，观众等不及。工具箱给了两个"时间轴旋钮"：


• playbackRate— 给冗长的演示提速。设置playbackRate: 1.5或2.0，30 秒的录屏只放 15~20 秒
• durationSeconds— 每段演示的展示时长，用来和旁白对齐

另外两个实用配置：

• 分屏演示：type: 'split'可以同时放"手机端 + 浏览器端"两段录屏，适合展示跨端功能
• 声音同步：用voiceoverStartFrame延迟旁白起点，让解说和画面节奏贴合

八、预览与渲染：三条命令完成成片

在模板目录（或你的项目目录）下：

npm install npm run studio # 打开 Remotion Studio 浏览器预览，逐帧检查 npm run render # 渲染全尺寸 MP4

还有npm run render:preview可以渲染半分辨率预览，迭代设计时能省不少等待时间。

如果你走的是 Claude Code 的完整工作流，则更省事：/video选模板建项目 →/scene-review逐场景审查 →/generate-voiceover生成旁白 → 最后渲染发布，整套生命周期由project.json自动跟踪（见 lib/project/）。

九、进阶玩法：让视频更有质感

模板内置了三个低成本的"质感开关"，都在sprint-config.ts里：

1. 讲述者画中画（Narrator PiP）— 录一段自己讲旁白的视频，以画中画形式叠加在角落，视频立刻有了"人"的温度
2. 迷宫装饰（Maze Decoration）— 角落的等距网格动画，微妙地增加画面动感
3. 多主题切换— theme.ts 提供 default、dark、blue、green 四套主题，改一行ThemeProvider即可换肤

想给转场加点戏剧性？工具箱的转场库 lib/transitions/ 提供 glitch、彩虹色散、镜头光斑等效果，还能在 showcase/transitions/ 里打开预览画廊直接看效果。

十、总结

核心收获：Sprint Review 视频不再是一次性工程。配置化 + 代码化的好处在于——下个迭代开始时，你只需要换一份配置、一批录屏，半小时就能产出同样专业水准的新视频。这正是 claude-code-video-toolkit 的理念：AI 负责生产，你负责导演。

更多资料：

• 快速上手：docs/getting-started.md
• 模板开发指南：docs/creating-templates.md
• 品牌配置：docs/creating-brands.md
• 另一个完整案例：examples/sprint-review-cho-oyu/README.md

【免费下载链接】claude-code-video-toolkitAI-native video production toolkit for Claude Code项目地址: https://gitcode.com/gh_mirrors/cl/claude-code-video-toolkit