用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-toolkitclaude-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 就能渲染出视频。克隆仓库git clone https://gitcode.com/gh_mirrors/cl/claude-code-video-toolkit cd claude-code-video-toolkit先用示例项目验证环境无需任何配置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/照做四步以这个案例为蓝本复制案例到你的项目目录cp -r examples/sprint-review-cho-oyu projects/my-sprint更新 VIDEO-SPEC.md 为你的迭代内容修改remotion/src/config/sprint-config.ts填入你的演示视频文件名、标签和 JIRA 号录制新演示 → 生成新旁白 → 预览 → 渲染六、给演示片段加旁白一条命令生成 AI 配音推荐按场景生成音频的方式在public/audio/scenes/里为每一幕写一个.txt脚本文件然后一条命令批量生成对应 MP3uv run tools/voiceover.py --scene-dir public/audio/scenes --json好处很实际单独重生成某一幕不用整段重录场景时长和音频天然对齐不用手动算偏移帧语音用的是自托管的开源模型 Qwen3-TTS成本约$0.01/条工具源码tools/voiceover.py生成后在配置里引用即可overview: { title: Whats 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.030 秒的录屏只放 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里讲述者画中画Narrator PiP— 录一段自己讲旁白的视频以画中画形式叠加在角落视频立刻有了人的温度迷宫装饰Maze Decoration— 角落的等距网格动画微妙地增加画面动感多主题切换— theme.ts 提供 default、dark、blue、green 四套主题改一行ThemeProvider即可换肤想给转场加点戏剧性工具箱的转场库 lib/transitions/ 提供 glitch、彩虹色散、镜头光斑等效果还能在 showcase/transitions/ 里打开预览画廊直接看效果。十、总结环节你做什么工具帮你做什么内容填写 sprint-config.ts自动排版成专业幻灯片演示录屏放进 public/demos/自动加标签、JIRA 号、分屏旁白写 txt 脚本AI 一条命令生成配音成片npm run renderRemotion 逐帧渲染出 MP4核心收获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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考