Claude Code自动生成视频章节进度条动画教程

视频剪辑中那些让人崩溃的重复劳动

做过视频的朋友一定深有体会：视频章节进度条动画看起来只是一个小小的装饰元素，但每次制作起来却异常繁琐。你需要手动选择背景颜色、调节蒙版、一根一根对齐刻度线和时间轴、打文字、居中、调字体……每做一个新视频，这套流程就要从头再来一遍。

B站UP主CinCin分享了一个思路：既然这件事情如此繁琐且高度重复，为什么不把它变成一个自动化的工作流？借助Claude Code的Skill机制和Remotion前端库，他实现了"扔一个字幕文件进去，自动生成章节进度条动画"的完整方案，并将其开源在GitHub上。

核心思路：用写代码的方式做视频动画

为什么选择代码而非剪辑软件？

这个方案的核心理念很简单——让AI做它擅长的事情。在剪辑软件里拖拽、对齐、调参数，这些操作对AI来说并不友好；但写代码生成动画，恰恰是AI的强项。

具体来说，方案使用了Remotion——一个基于React的视频生成前端库。Remotion由Jonny Burger于2021年创建并开源，它的核心理念是"用React写视频"。传统视频制作依赖时间轴拖拽，而Remotion将视频的每一帧都视为一个React组件的渲染结果——你可以用JavaScript精确控制第几帧显示什么内容、触发什么动画。它内置了interpolate()插值函数和spring()弹性动画等工具，开发者可以像写网页动画一样编写视频动画，最终通过FFmpeg渲染为MP4文件。这种方式特别适合需要批量生成、参数化控制的视频场景。

在这个方案中，每个进度条动画本质上就是一个React组件，改一个参数风格就变了，换一组时间戳新的进度条就出来了。每一次都只是在改参数，而不是整个重来。

更关键的是，用代码方式可以精准计算每一帧，这是手动剪辑很难做到的精度。

Claude Code Skill机制让工作流可复用

Claude Code是Anthropic推出的命令行AI编程助手，而Skill机制是其中一个让用户将常用工作流封装为可复用模块的核心功能。具体来说，一个Skill通常包含一组预定义的系统提示词（system prompt）、代码模板和执行逻辑。当用户安装某个Skill后，Claude Code会将这些预设加载到上下文中，使AI在后续对话中能够按照特定的工作流程执行任务。这类似于给AI装上了一个"专业插件"——它不再需要你每次从零开始描述需求，而是已经理解了整套流程的上下文。Skill可以通过链接分享和安装，这使得社区中的最佳实践能够快速传播和复用。

CinCin将视频章节进度条的生成逻辑封装成了一个Skill，安装后在Claude Code中输入skill命令即可查看和使用。这意味着任何人只要安装了这个Skill，就能立即获得同样的自动化能力，而不需要理解底层的代码实现。

实际操作演示：从字幕到动画只需几步

第一步：导出SRT字幕文件

打开剪辑软件，将视频的带时间戳SRT字幕文件导出。SRT（SubRip Subtitle）是最常见的字幕文件格式之一，几乎所有主流剪辑软件和播放器都支持。它的结构非常简单：每条字幕由序号、时间戳和文本三部分组成，时间戳精确到毫秒，格式为"小时:分钟:秒,毫秒 --> 小时:分钟:秒,毫秒"。正因为SRT是纯文本格式且结构规整，AI可以非常容易地解析其中的时间信息和文字内容，进而根据语义自动判断哪些段落属于同一个章节。这也是为什么CinCin选择SRT作为输入——它既是剪辑软件的标准输出，又是AI最容易处理的结构化数据之一。

第二步：让AI自动划分章节

将字幕文件扔给Claude Code（或Codex），它会自动分析内容并提出章节划分建议。AI在这一步做的事情本质上是自然语言理解——它阅读字幕中的文字内容，识别话题转换的节点，然后结合时间戳给出章节边界。当然，你也可以直接口头告诉AI你想怎么划分，比如"0分0秒是开场，1分钟是第一部分，1分50秒是第二部分"。

AI会给出它认为合理的划分方案，你确认后继续下一步。

第三步：选择风格并一键生成

确认章节划分后，AI会询问你想要的风格、比例（横屏/竖屏）以及位置（顶部/底部）。目前项目内置了六种进度条动画风格：

• 默认风格：经典的章节进度条，带主标题和小标题
• 底部进度条：将进度条放置在画面底部
• 破折号风格：简洁的破折号分隔样式
• 极简风格：不显示章节名称，只做进度划分
• 文字高光风格：当前章节文字高亮显示
• 矢量动画风格：可以放一个小矢量图（比如小螃蟹）跟随进度条移动

选好参数后，AI会自动修改配置文件中的参数，生成对应的进度条动画。由于底层是Remotion框架，所有风格本质上都是不同的React组件，切换风格只是切换组件和传入不同的props参数。最后点击Render按钮即可导出视频文件。

自定义贴纸和Logo玩法

CinCin还展示了一个有趣的自定义案例：他把自家狗狗的照片上传给Krea（一款AI图像处理工具，支持智能抠图、风格迁移等功能），自动抠图并加上黄色描边，然后将这个贴纸嵌入进度条动画中。这意味着你可以上传任何贴纸、Logo或照片，打造专属的进度条风格。

更深层的思考：构建可复用的创作资产

这个项目的价值不仅仅在于一个进度条动画工具，更在于它背后的工作流自动化思维。

CinCin提出了一个值得每个内容创作者思考的原则：在日常工作中，只要发现一件事情需要重复做，就要思考能不能把它变成一个可复用的东西。

视频章节进度条是这样，字幕动画也是这样，还有很多重复繁琐又没有创造价值的工作，都可以用同样的思路来解决。每做一个Skill，就相当于给工作流增加了一块积木，慢慢地你就能把时间和精力释放出来，专注于真正有创造性的工作。

这也呼应了他之前提出的观点：用写代码的方式做视频，是未来视频制作要走的方向。 事实上，这一趋势在行业中已经逐渐显现。除了Remotion，业界还有Motion Canvas（基于TypeScript的动画引擎）、Manim（3Blue1Brown用于数学动画的Python库）等程序化视频工具。大型平台也在布局：Canva收购了视频自动化公司，Adobe推出了基于模板的批量视频生成功能。核心趋势是将视频制作从"手工艺"转向"参数化生产"——设计师定义模板和风格，AI负责填充内容和渲染输出。

不是说每个创作者都要学编程，而是借助AI的代码能力，将重复性的视觉制作工作自动化，让创作者回归创意本身。

如何开始使用这个进度条动画工具

1. 在GitHub上获取该Skill的安装链接（原视频评论区有提供）
2. 在Claude Code或Codex中执行安装命令
3. 准备好你的SRT字幕文件或手动指定章节划分
4. 选择风格、比例和位置，一键生成

对于经常制作视频的创作者来说，这个工具能显著减少在重复性装饰动画上花费的时间。而对于所有使用AI工具的人来说，"把重复工作封装成可复用资产"的思维方式，或许比工具本身更有价值。

核心要点