HyperFrames 讲解动画技能 + 你自己的风格技能，在 Codex 里一句话出片
Apache 2.0 开源HyperFrames 是 HeyGen 开源的视频渲染框架，Apache 2.0 协议。它的思路很简单：用 HTML 写画面，渲染成 MP4。画面就是网页，动画用 GSAP、CSS 动画、Lottie、Three.js 这些现成的网页动画库，最后用无头浏览器逐帧截图、FFmpeg 编码成视频。
它是专门给 AI 编程工具设计的：官方提供 20 个技能，Codex、Claude Code、Cursor、Gemini CLI 都能用。其中 /faceless-explainer 就是本期的主角——给它一段文字，它把主题讲成一条讲解动画，不需要产品、网址或素材，画面全部由 AI 设计：文字排版、抽象图形、流程图、数据图。
同一段输入永远渲染出同一个视频（确定性渲染），所以可以反复改、反复出。再配一个你自己写的「风格技能」，把竖屏、中文字体、配色、镜头时长这些每次都要交代的要求固定下来，以后丢文案进去，出来都是同一个风格。
| 项目 | 说明 |
|---|---|
| 输入 | 一段文案、一篇文章、一个主题；也可以给文档或网页让它先读再讲 |
| 适用类型 | 流程拆解、概念讲解、数据对比、原理说明，行业不限 |
| 输出 | MP4 视频；过程文件是 HTML，可在浏览器里直接预览和改 |
| 画幅 | 横屏、竖屏都行，在需求里说清楚或写进风格技能 |
| 配音 / 字幕 | 可选：技能里带 TTS 和字幕流程，也可以只出无声动画，自己配音 |
| 支持的 AI 工具 | Codex、Claude Code、Cursor、Gemini CLI 等支持技能的编程工具 |
| 环境 | 建议配置 |
|---|---|
| 操作系统 | Windows / macOS / Linux |
| 运行环境 | Node.js 22 或更新版本 |
| 关键依赖 | FFmpeg（编码视频用）；渲染用的无头浏览器会自动准备 |
| 硬件 | 普通电脑即可，不需要显卡；镜头多、分辨率高时渲染会慢一些 |
| AI 工具 | Codex 桌面版或命令行版（或其他支持技能的编程工具） |
| 不用 LaTeX | 和 Manim 不同，这套不需要装 LaTeX，Windows 上省掉最麻烦的一步 |
也可以直接对 Codex 说「帮我装好 Node.js 22 和 FFmpeg」。装完在终端确认版本：
node -v
ffmpeg -version
在终端运行下面这条（或者把它发给 Codex 让它装）。交互式选择时勾「Core Skills」一组就够，/hyperframes 入口会按需安装具体流程。
npx skills add heygen-com/hyperframes
让 Codex 这类智能体自己装时，官方建议用非交互命令，只装核心那一组：
npx hyperframes skills update
新建一个空文件夹，把写好的文案存成 文案.md，在 Codex 里打开这个文件夹，发一句：
用 /faceless-explainer，把 文案.md 做成一条竖屏讲解动画，
画面用流程图、数据图和关键词大字。
它会先跟你确认要做成什么样，再拆镜头、写 HTML、加动画，渲染前自己检查排版。过程中也可以手动预览和渲染：
常用命令：
| 命令 | 作用 |
|---|---|
npx hyperframes init | 新建一个 HyperFrames 项目 |
npx hyperframes preview | 在浏览器里预览，改代码自动刷新 |
npx hyperframes lint | 检查画面代码有没有写错 |
npx hyperframes snapshot | 截关键帧，出片前看排版 |
npx hyperframes render --output explainer.mp4 | 渲染成 MP4 |
npx hyperframes doctor | 环境有问题时自检 |
在 Codex 里打 $skill-creator，把你每次都要交代的要求用大白话告诉它，它会问你「这个技能做什么、什么时候用」，然后帮你写好。也可以自己建文件夹 ~/.agents/skills/my-explainer-style/，放一个 SKILL.md：
---
name: my-explainer-style
description: 做讲解动画时使用。用 HyperFrames 的 faceless-explainer 出片，并套用我的固定风格。
---
# 我的讲解动画风格
- 画幅：竖屏 1080×1920
- 字体：中文一律用黑体（Microsoft YaHei / Noto Sans SC）
- 镜头：一个镜头不超过 8 秒，每个镜头只讲一件事
- 配色：背景 #0f172a，主色 #38bdf8，强调色 #facc15
- 画面优先用流程图、数据图、关键词大字，不用照片
- 渲染前先 snapshot 检查，文字重叠或出界就改完再渲染
以后说「用我的讲解动画风格，把这段文案做成动画」，或者打 $my-explainer-style 点名调用都行。
风格技能放在个人技能目录，所有项目都能用；描述写清「做讲解动画时使用」，碰到对得上的任务 Codex 会自己调用。每做完一条，把你又手动改过的地方补进 SKILL.md，技能会越用越贴你的习惯。
| 方案 | 写画面的方式 | 适合做什么 |
|---|---|---|
| HyperFrames | HTML + 网页动画库 | 通用讲解动画、流程图、数据图，行业不限；不用装 LaTeX |
| Manim | Python | 数学公式推导、几何证明这类学科动画（3Blue1Brown 风格），要装 LaTeX |
| Remotion | React | 需要写 React 组件，适合程序员做模板化视频 |
| 剪辑软件手做 | 手动拖关键帧 | 精细可控，但一段十几秒的讲解动画要花很久 |
视频生成模型是「画」出来的，文字和图表容易糊、每次结果不一样；HyperFrames 是「写」出来的网页，文字清晰、数据准确、能反复改，更适合讲解类内容。
能。HTML 和动画都是 Codex 写的，你只要写文案、提要求、看结果。想改哪里就用大白话告诉它。
不必须。Claude Code、Cursor、Gemini CLI 等支持技能的编程工具都能装这套技能，用法一样。
先确认 Node.js 是 22 或更新版本（node -v）。版本对了还报错，运行 npx hyperframes doctor 自检，或者把报错整段贴给 Codex 让它修。
多数是 FFmpeg 没装好或不在系统路径里，终端运行 ffmpeg -version 能出版本号才算装好。再跑一次 npx hyperframes lint 看画面代码有没有报错。
能做竖屏，在需求里说清楚或写进风格技能。中文字体在风格技能里指定黑体（Microsoft YaHei / Noto Sans SC），就不会出现字体缺失。
可以。HyperFrames 技能里带 TTS 和字幕流程，用第三方配音接口前它会先问你；也可以只出无声动画，自己配音后再合成。
放在 ~/.agents/skills/ 下，所有项目都能用；只给当前项目用就放项目里的 .agents/skills/。description 写清「什么时候用」，Codex 碰到对得上的任务会自动调用，也可以打 $技能名 点名。
HyperFrames 是 Apache 2.0 协议，可以商用，保留原项目的版权和协议声明即可。你自己写的风格技能完全归你。