最近我们在研究 HyperFrames 在 Codex 中的高阶玩法。想法其实很简单把一篇深度技术文章，变成一段手绘白板风格的讲解视频。

我们写了不少 AI 工具教程和行业分析，有些文章信息密度比较高，大家在手机上看长文容易走神。所以我们就想着做一些有讲解感、有画面推演的知识视频，想着先用Codex试一下。

传统做法是写脚本、做分镜动画、配音、剪辑。一篇文章变成视频，快的要两三天，慢的可能要拖一周。

我们开源的手绘风视频skill，无需额外的 API在 Codex 中使用内置的生图技能就可以完成一整条视频生成，在 Codex 里几十分钟就可以完成！

01 先看一段Skill做出来的视频

先看视频效果（声音后续可替换为自己的声音）：

我们把一篇关于Skill的文章丢进去，Codex自己拆出镜头：学习误区、Skill 定义、案例、以及一个完整的上手路径等等。

每个镜头都是白底黑线的线稿风格。画面里没有花哨的动画和背景音乐，只有手绘线条、知识标注、关系箭头，一支笔随着旁白逐步揭示画面内容。

配音是使用的Mac电脑内置的语音，节奏偏快。整个视频两分多钟，从文章到成品，加上中间检查调整，不到半小时。

02 手绘风视频Skill工作流程

先来简单介绍一下这个 Skill 用到插件HyperFrames by HeyGen，它是用 HTML + CSS + GSAP 动画来制作视频画面。它可以跑在 Codex、WorkBuddy、Claude Code 等等任何一个智能体的工作流中，然后把写脚本、画线稿、配音、时间轴拼接这些步骤都串在一起。

步骤大概是这样：

拆文章。 先把原文拆成 2 到 6 个镜头，每个镜头只讲一个核心观点。这一步由Skill 自动完成，不需要人手动分镜。

画线稿。 每个镜头生成一张 16:9 的纯白底黑线条手绘稿。关键规则是图上不出现任何文字。所有标题、标签、字幕都通过 HTML 叠加渲染，确保中文显示准确，不会出现 AI 生图的乱码。

配标注。每张线稿上标注 3 到 5 个知识标签，箭头和关系线指向对应的图形区域。AI 概念有固定的视觉语言：青绿表示数据与检索，紫色表示模型与推理，橙黄表示成本，红色仅用于风险警告。

配音。使用 Mac 电脑自带的Tingting 语音，我设置的语音速度约 1.3 倍速。每句旁白单独生成音频文件，构建脚本读取真实时长来驱动镜头切换。旁白讲完才转场，不和画面脱节。

渲染。 一支虚拟马克笔随着旁白逐步"画"出画面内容，模块按顺序揭示，镜头之间用交叉淡入过渡。最后输出就是一段完整的视频。

03 它特别适合哪类内容

我们试了几种类型的文章，结论是信息密度高、逻辑链条清晰的内容，生成效果更好。

AI 技术科普和教程。比如解释 Skill 怎么工作、Hermes 和 Harness 的区别。HyperFrames 会把抽象概念翻译成可视化的图形关系，比纯文字直观很多。

知识密度高的分析文章。比如行业拆解、方法论总结。拆成镜头后，每个镜头承载一个逻辑节点，读者不用在大段文字里自己梳理结构。

还有一种用法我们觉得挺实用：把已有的文章快速转成视频版做内容分发。同一份内容，多一个触达渠道，不用额外投入制作时间。

不适合的情况也很明显，叙事性强、靠画面本身讲故事的内容（比如产品评测、Vlog），线稿风格反而限制了表现力。

这类还是用传统拍摄或剪辑更合适。

04 怎么安装

把压缩包丢给 Codex、 Work Buddy 或者其他任何 AI Agent 工具，安装就是一句：

帮我安装这个 Skill，并设置为全局级skill。

装完后在 Codex 里调用，把要转换的文章发给它然后调用这个技能即可，剩下的拆镜、线稿、配音、渲染全部自动跑。

我们的经验是，第一次跑建议先用一篇 1000 字左右的短文试水。跑通整个流程、确认配音正常、检查一遍线稿标注有没有越界，再上长文。高密度镜头至少要有 6 个以上的模块和 3 个以上的标注，少了说明拆镜不够细。

有一点要注意：HyperFrames 依赖 macOS 的 say 命令做语音合成，Windows 用户需要额外配置 TTS。

05 最 后

当然，这个 Skill 也不是最终版，大家后续可以按照自己的风格优化，配音也可以修改为自己的音色，形成自己专属的 Skill。

另外，不要把HyperFrames 想象成那种"一键生成完美视频"的魔法工具。它更像一条把写稿、画图、配音、剪辑串起来的自动化流水线。帮你把写好的内容转成容易让人理解的科普视频，让更多人、用更短的时间看完并看懂。

如果你也有几篇压箱底的文章想试试效果，推荐装一个。

欢迎大家关注万象AI实验室，帮你把AI工具真正用起来。