Back to Articles
Feb 10, 20266 days ago

From Failure to Success: My Complete Journey Building an AI-Powered Animated Video Generation Skill

泊舟@bozhou_ai

AI Summary

This article offers a fascinating, behind-the-scenes look at one developer's journey to automate the creation of animated explainer videos using AI. Motivated by the popularity of projects like OpenClaw, the author sought to demystify complex topics through engaging, animated content but wanted to move beyond manual creation to a fully automated pipeline. The narrative is not just a dry technical tutorial; it’s a candid chronicle of iterative development, complete with initial failures, pivotal insights, and the ultimate architectural decisions that led to a working system.

先总结最终技术方案

整个系统的工作流程可以分解为以下九个步骤:

生成视频脚本文案

复制项目模板

提取旁白内容,通过 MiniMax API 生成音频

计算音频时间表

使用 Whisper 生成 SRT 格式字幕文件,并进行错别字修正

生成所有分镜的配置 JSON 文件

生成所需的 SVG 素材

审查并验证 JSON 文件

启动项目渲染

核心实现思路是将代码生成转化为配置生成。我预先构建了一套标准化的 Remotion 模板,该模板能够解析 JSON 配置文件并据此渲染视频。AI 的职责被简化为按照既定规则生成符合语法规范的 JSON 配置,而非直接编写代码。

这种架构设计带来两个显著优势:首先是可控性大幅提升,避免了 AI 生成代码的不确定性;其次是扩展性良好,后续增加新功能只需在模板中添加对应组件,并在 JSON 生成规则中补充相应条目即可。

以上是省流版本。如果你想了解完整的开发过程和踩坑经历,继续往下看。

一、 为什么干这个事情

OpenClaw 最近热度很高,这让我想到了一个有趣的选题:许多人对 OpenClaw 的工作原理感到好奇——当我们在 Discord 中向 AI 发送一条消息后,背后究竟发生了什么?

单纯写技术文章可能过于枯燥,我注意到抖音上一些知识类博主采用的视频形式:固定背景配合元素的动画进出场,这种呈现方式既直观又生动。评估后发现这类视频的技术难度适中,完全可以通过 Skills 构建自动化流水线来实现。

二、第一次尝试与失败

在正式开始之前,我先调研了视频生成的标准流程:通常是先生成分镜脚本和文案,然后通过 TTS 生成语音,最后根据语音时长生成视频和字幕文件。由于我之前开发过 TTS 相关工具,对这套流程较为熟悉,因此决定直接从视频生成环节入手。

第一次尝试采用了 Remotion 的 Skills,随手写了一个简单剧本让 AI 自动规划生成。好消息是视频确实生成出来了,坏消息是效果惨不忍睹。

主要问题总结如下:

素材质量低劣 - 背景和素材都很粗糙,只能使用 Emoji 表情包

动画混乱无序 - 动画使用极不规范,出现时机错乱,许多镜头甚至完全没有动画,直接硬切展示

代码生成不稳定 - AI 编写代码的随机性太大,第一次尝试直接报错无法运行,第二次才勉强成功

三、MVP 版本开发

吸取第一版的教训,我决定严格按照标准流程重新实现。这次我没有急于创建 Skills,而是选择先手动跑通完整流程,再进行工程化封装。我的经验是:如果手动流程都无法验证通过,直接封装成 Skill 只会让问题更加复杂。

第一步:生成剧本

我将 OpenClaw 项目克隆到本地,让 Gemini 3 帮我梳理核心逻辑并绘制架构图。随后在新会话中,让它编写一个结构清晰的剧本,明确每个场景的旁白内容和页面展示要素。

第二步:搞定语音

因为只是为了跑通流程做验证,所以我想应该有这个 skill 可以直接复用,于是直接用 find-skills 帮我进行查找,建议大家一定要按照这个 skill,非常好用,然后安装命令是

接下来根据旁白文本生成 TTS 音频。这里需要申请 MiniMax 的 API Key:

API Key 获取地址: https://platform.minimax.io/user-center/basic-information/interface-key

你也可以自定义声音。我的做法是在官网克隆一个声音,然后将克隆后的 Voice ID 复制到环境变量中即可。

使用这个 Skill 为每个分镜生成对应的音频文件。

第三步:生成音频时间表和 SRT 字幕文件

这一步需要为 Remotion 提供两个关键配置:音频播放时间表和字幕显示时间表。

音频时间表的生成相对简单,使用 ffprobe 计算每段音频时长并进行拼接即可。但这里有一个重要的坑:转场动画会占用时间。我将转场动画固定为 0.4 秒,因此每个分镜之间必须预留 0.4 秒间隔,否则会导致音画不同步。

字幕文件采用 SRT 格式,Remotion 可以直接解析。最初我考虑按音频时长直接拼接字幕,但这种方案存在明显缺陷:假设某个分镜时长 10 秒,旁白内容较多,那么这 10 秒的字幕会挤在一起,分成很多行显示,而不是我们期望的逐句展示效果。

为了获得更好的呈现效果,我采用了另一种方案:使用 Whisper 将音频转换为 SRT 字幕文件,这样可以实现逐句展示。不过第一次使用时遇到了错别字问题。AI 建议我换用更大的本地模型,但我意识到无论用什么模型都可能存在识别错误。由于我已经有了准确的旁白文本,更简单的做法是让 AI 参照旁白内容校正字幕文件中的错误,这样既省事又更准确。

第四步:生成视频

最初的方案采用了分步策略:先将剧本转换为 Remotion 友好的中间脚本,明确描述每个页面使用的组件和调用方法;然后使用 Remotion 的 Skill 生成这份文档;最后在新会话中将文档转换为代码。回头看,这个流程确实有些繁琐,完全可以简化。

生成结果基本符合预期:代码能够正常运行,音频与字幕同步准确,动画效果也都实现了。不过背景等视觉元素还需要手动调整。

MVP 版本的问题总结

视觉设计简陋 - 组件样式过于简单,仅使用基础颜色

动画风格混乱 - 淡入淡出、滑动等多种动画混用,缺乏统一性

布局存在缺陷 - 组件会发生重叠,前景元素遮挡文字内容

素材类型单一 - 只有文字和卡片,缺少 SVG 图标等丰富素材

生成结果不稳定 - 第二次生成时风格完全改变,缺乏一致性

尽管存在这些问题,但 MVP 版本证明了一个关键结论:这套方案完全可以封装成稳定的 Skill。接下来需要解决的是如何保证生成结果的稳定性和可控性。

四、 Skill 架构设计

开始规划 Skill 架构时,我采用了循序渐进的策略。经过仔细分析,我发现字幕和音频部分已经相当规范化,可以稳定生成,真正的挑战在于视频渲染部分。

视频的每个分镜本质上是:固定背景 + 多个元素依次出现 + 进出场动画。基于这个认知,我决定采用配置驱动的架构:预先构建固定模板,将最小渲染单位定义为 Element(可以是 SVG、卡片文字、表格、列表等),然后通过 JSON 配置来描述每个 Element 的出现时间、位置和动画效果。

这样一来,代码只需要按照 JSON 配置进行渲染,AI 的任务被简化为生成符合规范的 JSON 配置文件。为了降低复杂度,我做了一些取舍:砍掉了大部分动画类型,只保留淡入淡出;固定生成几种核心组件并封装成模板。虽然功能有所限制,但可控性大幅提升。先实现核心功能,后续再迭代优化。

接下来就是完善 skill,还是按照固定的工作流来,我们一步一步的解决,想创建了一个剧本的 skill,来负责将复杂只是变成我需要的视频脚本,然后创建视频生成的 skill,这时候需要三个脚本,生成语音的,语音转时间表的,语音转字幕的,这个让 AI 生成也非常丝滑,一下子就搞定了

最关键的环节是让 AI 准确理解并生成符合规范的分镜 JSON 文件。为此我编写了详细的文档和模板,这个过程耗时最长。生成后还需要进行二次校验,包括语法错误检查和规范验证(例如元素不能贴边显示,避免重叠,控制出现时机等)。

这里我踩了一个坑:最初让 AI 启动子代理来处理,发现效果并不理想,Token 消耗反而更多。最终方案是直接在 Skill 中内置审查清单和验证脚本,效果更好。

JSON 生成完成后是素材问题。这类视频通常需要大量图片或其他素材,我在工作流中让 AI 生成 SVG。这部分其实有很大优化空间,比如可以从素材网站下载 Logo,或者获取高质量图片,效果会更好。但为了快速验证,我直接让 AI 绘制 SVG,并限制了一些生成规则。

经过多轮调试,整个流程已经可以流畅运行了。

六、视觉优化与设计提升

视频生成了,接下来就是美观的问题,这时候就是我们的 Gemini3 登场了,我直接让他站在一名顶尖的设计大师的角度,优化我目前代码的所有组件,然后他根据我的需求帮我设计了一套风格,我觉得还是不错的

优化前

优化后

视觉提升非常显著。不过后续优化空间主要集中在视频脚本生成环节。坦白说,这是我的短板——我对这类视频的最佳呈现方式缺乏足够的审美判断,因此给 AI 的描述不够精准,生成效果也就差强人意。如果你要使用这套方案,建议重点关注 video-script-creator 这个 Skill,根据自己的审美和需求进行调整。

最终效果展示在这里。

虽然还有很多优化空间(也确实存在一些 bug,请多包涵),比如可以添加自媒体账号标识、增加片头片尾固定镜头、支持更多动画类型、丰富组件库、提升样式美观度等,这些都需要逐步迭代完善。

当然,我的方案肯定不是最优解。我更想分享的是开发这个相对复杂的 Skill 的完整过程和思路。希望能给大家一些启发:我们平时的工作流程完全可以封装成 Skill,提升效率。

八、采用了什么实现工具

这里重点说明一下开发过程中使用的模型和工具。整个项目使用 Claude Opus 4.5 完成主体开发,后期用 Opus 4.6 进行了优化,效果非常出色。

关于 API 服务,我想特别推荐 ZenMux。最初我使用的是某个中转站服务,但在开发 Skill 的关键阶段,中转站突然崩溃无法连接,这让我非常焦虑,当时还专门发推特吐槽了这件事。

然后客服就是说正在修复,这里就不说哪家中转了,虽然后面恢复了,但是体验真心不舒服。我也看到了 ZenMux 出了订阅服务,因为我的 AI 工具网站是有部分接入的是 ZenMux 的 API,知道他们的速度和稳定性还是相当靠谱的,于是果断买单,立马尝试非常的丝滑,量也很足,和我之前用官方的体感上没有啥区别,当然价格上会相对中转站贵一点,但是一分钱一分货,这种企业级的 API 站点不会搞注水的 API,所以对于 AI 有质量要求的可以看一下这家,真心推荐,而且这两周opus4.6加入到了free档,在chat里面可以免费使用, 并且现在充值还送 10%,谁听了不说一声卧槽

官网地址: zenmux.ai/invite/G3C143

Skill 开源地址: https://github.com/bozhouDev/explainlab