2026 年，AI 视频生成领域出现了两条路。一条是 Sora、可灵、Seedance 这类”文生视频”模型，效果炫酷但成本高昂、可控性差。另一条是 “视频即代码” 路线——用 HTML 写视频，像写网页一样做剪辑。

第二条路的代表组合就是 OpenAI Codex + HeyGen HyperFrames。这篇文章，带你从零跑通完整工作流。

一、先把两个工具认清楚

Codex：不是写代码的，是调度一切的

许多人以为 Codex 只是个 AI 编程助手。实际上，2026 年的 Codex 已经进化成了通用 AI Agent 平台。

它能做什么？

• 读取文件、分析内容、拆解需求
• 自动写代码、运行脚本、排查错误
• 调用第三方工具（飞书 CLI、文件系统、API）
• 操作电脑桌面、执行定时任务
• 通过插件市场连接任意外部服务

每周超过 100 万开发者在使用 Codex，自 2026 年 1 月以来使用量增长 5 倍。它已经从一个编程工具变成了”AI 桌面助理”。

HyperFrames：把 HTML 渲染成 MP4

HyperFrames 是 HeyGen 开源（Apache 2.0 协议）的 AI 原生视频渲染框架，目前 GitHub 已获得 2.9k Stars。

核心概念就一句话：用 HTML 写画面，再把它渲染成视频。

它的底层原理：

1. 你用 HTML + CSS + JS 描述每一帧画面
2. 通过 data-start 和 data-duration 属性控制时间轴
3. 支持 GSAP 动画、Lottie、CSS 动画、Three.js 3D 渲染
4. Puppeteer 逐帧截图 → FFmpeg 编码合成 → 输出 MP4

最重大的是：一样输入永远产生一样输出。 这意味着批量化、自动化、版本管理、CI/CD 集成全部可行。

二、为什么要用 Codex + HyperFrames 组合？

一句话总结：如果你要做的是”结构清晰、信息明确”的视频，Codex + HyperFrames 是目前性价比最高、最可控的方案。

三、核心原理：视频就是一篇 HTML 网页

理解这个，就理解了整个工作流。

传统剪辑软件的逻辑是：时间轴 → 拖素材 → 调参数 → 预览 → 导出。

HyperFrames 的逻辑是：写 HTML → 定义时间 → 一键渲染。

一个镜头在 HyperFrames 里长这样：

html

<div class="scene clip" data-start="0" data-duration="12.3">
  <h1 class="title">视频文案采集器</h1>
  <p class="subtitle">一键提取，直接存进 Obsidian</p>
</div>

data-start 是这个镜头出现的时刻，data-duration 是持续时长。

Codex 在这里的作用是：你告知它想要什么效果，它帮你写这些 HTML。 你不需要懂代码，只需要描述需求。

四、完整六步工作流（从图文到成片）

以下是经过大量实测验证的稳定流程：

第一步：喂素材

把你要做成视频的内容交给 Codex。支持飞书文档、Markdown 文件、网页链接、纯文本。

如果你用飞书，提议安装飞书 CLI，否则 Codex 用 Web 抓取可能读不到内容。

第二步：提炼脚本和分镜

Codex 会自动做两件事：

配音脚本（narration.txt）：不是逐字念原文，而是提炼成适合听的版本。3000 字的文章压到 300-500 字，控制在 1-2 分钟。

分镜表（STORYBOARD.md）：把配音脚本拆成多个镜头，每个镜头对应一段话和一个画面。

示例：

第三步：生成配音

这步是整个流程最关键的一环。

不推荐：

• Edge-TTS 等本地 TTS → 机器人味道太重
• 手动配好再发给 Codex → 音画必然不同步

推荐方案：阿里云百炼 CosyVoice 声音复刻。

流程：

1. 录 10-20 秒干净语音样本
2. 上传百炼平台，创建个人音色，拿到 voice_id
3. 获取百炼 API Key，在终端配置环境变量
4. Codex 自动调用 API，按分镜分段生成配音

核心原则：配音先行，视频跟着配音走。 先生成配音，再按每段配音的真实时长反推每个镜头的 data-start 和 data-duration。别反过来，否则音画同步会让人抓狂。

第四步：初始化 HyperFrames 项目

在 Codex 对话框直接告知它：

这是一个专门用来研究 AI 剪视频的项目，
主要依靠 Codex + HyperFrames 来进行工作。

Codex 会自动完成环境配置和项目初始化。

项目结构：

video-project/
├── index.html          ← 视频主文件（镜头、动画、字幕全在这里）
├── hyperframes.json    ← 项目配置（分辨率、帧率、时长）
├── narration.wav       ← 配音音频
├── music-bed.wav       ← 背景音乐
├── capture/assets/     ← 截图素材
├── generated-voice/    ← 分段配音文件
└── renders/            ← 渲染输出

第五步：搭建视频内容

Codex 根据分镜表自动生成 index.html，包括：

• 截图以 3D 卡片形式飞入
• 扫描线、脉冲环等科技感特效
• 镜头间的淡入淡出转场
• 底部字幕逐段显示
• 进度条

渲染前必做三项检查：

bash

npx hyperframes lint      # 检查语法错误
npx hyperframes validate  # 验证结构
npx hyperframes inspect   # 检查布局是否溢出

三个都通过才能渲染。

第六步：渲染输出

bash

npx hyperframes render

渲染需要 FFmpeg。如果系统没有，用 pip install imageio-ffmpeg 自动获取。

输出：1920×1080，30fps，MP4，带完整音频轨。

五、进阶玩法：Codex + HeyGen + HyperFrames 三件套

如果你需要数字人出镜口播，把 HeyGen 接入工作流。

三工具分工铁律：

六步进阶流程：

1. 主题输入：把需求交给 Codex
2. 内容规划：Codex 输出脚本、分镜、素材清单
3. HeyGen 任务准备：整理 avatar、造型、场景、语音、脚本
4. 数字人生成：HeyGen 生成口播主视频（A-Roll）
5. HyperFrames 编辑：把 A-Roll 放进 HyperFrames，加入 B-Roll、字幕、字卡、音效
6. 预览输出：preview 确认节奏后 render MP4

数字人的使用技巧：不要让它从头到尾占满画面。好的做法是：

• 让它做 A-Roll 主线
• 讲到的功能点时，切到 UI 截图或流程动画
• 进度条、重点文字叠加在画面边缘
• 音效在关键节点轻轻提醒

六、实战案例与效果

案例 1：教程视频一键转化

有人把自己的公众号图文教程直接丢进 Codex，全程没打开任何剪辑软件。最终输出 1080p、带个人声线配音、字幕同步、3D 转场特效的教学视频。

总消耗：GPT Plus 周额度的 15%。

案例 2：Codex 入门教程视频

指令：

用 HyperFrames 做一个 16:9 横屏教程视频，教程主题是
"Codex 入门 6 个必看的技巧"，55 秒，动画节奏控制在
0.5 到 1 秒之间，受众是 vibe coding 小白，渲染成 MP4。

Codex 自动完成脚本撰写、分镜设计、HTML 代码编写、动画编排、渲染输出。

案例 3：AI 猫咪视频包装

用 Codex + HyperFrames 给原始视频添加：开头大标题、左上角科技感信息卡片、动态字幕、猫咪动作反应气泡、进度条、轻量动效。FFmpeg 底层处理音视频合成。

七、避坑指南（来自一线实战）

坑 1：先做视频再贴配音

这是最大的坑。 这样做的结果必定是音画不同步。

正确顺序：先分段生成配音 → 用 ffmpeg 读取每段真实时长 → 按时长反推镜头的时间参数 → 再搭建视频。

铁律：配音先行，视频跟着配音走。

坑 2：用本地 TTS 模型

Kokoro 等本地 TTS 中文支持极差，macOS 自带的 Tingting 语音像机器人。

推荐：阿里百炼 CosyVoice（有试用额度）或 MiniMax。

坑 3：一整条配音而不是分段

配音必须按分镜分段生成。由于每段配音的时长决定对应镜头的持续时间。一整条配音无法精细匹配每个镜头的节奏。

坑 4：忽略 FFmpeg 安装

HyperFrames 依赖 FFmpeg。macOS 不自带，可用 pip install imageio-ffmpeg 获取独立二进制。

坑 5：飞书文档直接 Web 抓取

Codex 的 Web 抓取可能读不到有鉴权的飞书文档。必须告知它”用飞书 CLI”读取。

八、适合哪些场景？

九、总结

Codex + HyperFrames 的本质是：把视频制作从”设计活动”变成了”编程活动”——而编程这件事，Codex 可以替你做。

三个核心认知：

1. 视频即 HTML：会描述需求，就能做视频
2. 配音先行：先有配音的真实时长，再有视频的精准节奏
3. Codex 是导演，HyperFrames 是摄影棚：你只需要描述想要的画面，Codex 组织一切

当你把这套流程跑通后，从图文到成片的效率提升是数量级的。下次要做视频，不妨先问自己：这个内容适合用 HyperFrames 做吗？如果答案是肯定的，打开 Codex，输入你的需求，剩下的交给 AI。