如果你经常刷 B 站的科普区，一定见过那种极简、丝滑且富有逻辑感的 PPT 风格视频。 很多人以为这类视频是用 AE（After Effects）一帧一帧抠出来的，其实在 2026 年的 AI 工作流中，我们完全可以利用 Codex 配合 HyperFrames 插件，通过 HTML 和 CSS 代码直接“写”出画面与动画。 这种方式的核心优势在于：动画精准、图层清晰、支持全自动渲染，而且能够直接通过链接或文档生成视频脚本。 本文将带你手把手拆解这一流程，从环境配置到实战避坑，彻底打通你的 AI 视频生产线。

一、 为什么选择 Codex + HyperFrames？

在传统的视频剪辑中，调整一个关键帧的曲线可能需要点击几十次鼠标。 HyperFrames 是由 HeyGen 推出的开源视频框架插件，它的逻辑非常超前：将视频内容视为一组动态的网页代码。 说白了，你只要通过 Prompt（提示词）告诉 AI 你想要什么，它会先生成 HTML 结构和 CSS 动画代码，然后利用 HyperFrames 的渲染引擎，将这些代码实时转化为 1080P 或 4K 的 MP4 视频。 这种“代码即视频”的模式，让视频的修改成本降低到了零——改一行参数，全片自动刷新。

二、 基础环境安装与准备

工欲善其事，必先利其器。首先我们需要在 Codex 中安装必要的增强插件。

1.进入插件中心：打开 Codex 客户端，点击左侧导航栏的【插件】（Plugins）图标。

插件安装入口

2.检索 HyperFrames：在顶部的 Design 标签分类下，找到 HyperFrames。3.点击安装：点击插件右侧的“+”号。注意，安装过程需要稳定的网络环境配置。

找到 HyperFrames 插件

安装完成后，你的插件列表会显示已激活状态。

安装成功界面

三、 演示环境配置：API 与模型服务

在使用 Codex 进行深度创作时，稳定的模型调用是核心。 由于视频生成涉及大量的代码构造与逻辑推理，通常需要配置高性能的模型服务环境。 

为了方便大家快速上手实操，本文使用 iThinkAPI 作为演示环境。

该平台支持典型的 OpenAI Compatible API 配置方式，能够无缝接入各类开源 WebUI 或 AI 交互前端。

在实际配置过程中，大家需要重点关注 API Key 的获取以及 Base URL 的正确指向

Base URL：https://token.ithinkai.cn/v1
API Key：YOUR_API_KEY
Model：以服务文档为准

在进阶测试中，如果涉及 GPT-Image-2 等生图模型，单张 2K/4K 分辨率图片的生成成本大约在 0.05¥ 起（估算），具体的计费标准和模型能力请务必以服务方的官方文档为准。

iThinkAPI 配置环境示例

四、 实战：从零构建科普视频项目

安装好插件并配置完 API 后，我们开始进入实操。

1. 新建本地工作区

AI 渲染会产生大量的临时代码文件和媒体素材，因此必须先建立一个干净的项目文件夹。 在电脑本地新建一个文件夹（例如命名为 AI_Video_Lab）。 在 Codex 中选择【添加新项目】，并指向这个文件夹。

新建文件夹

2. 启用“计划模式”与自动审查

为了保证 AI 生成的视频符合预期，建议开启【计划模式】。 点击输入框下方的“+”号，选择【计划模式】，并将权限设置为【自动审查】。

开启计划模式

这一步的逻辑是让 AI 在动手写代码前，先给你列出一个详细的视频大纲和分镜计划，确认无误后再执行。

3. 调用插件并输入 Prompt

在对话框中再次点击“+”号，选择【插件】，选中 HyperFrames。 当输入框中出现带有图标的 HyperFrames by HeyGen 标识时，说明调用成功。

调用插件

此时，你可以输入类似下方的提示词：

“使用 HyperFrames 制作一个科普视频，内容基于这篇文章 [链接地址]。 要求：风格为扁平化科普动画，时长 60 秒，16:9 比例，完成后直接渲染并导出 MP4 到项目根目录。”

输入 Prompt

五、 避坑指南：如何处理“读取失败”与“Token 溢出”

在实际测试中，我遇到了两个最典型的问题，大家务必留意。

1. 网页读取失败的替代方案

有时候 AI 无法通过链接直接读取公众号或外部网站的内容，这会导致生成的视频内容跑偏。 如果你发现 AI 提示“无法访问该网页”，不要反复重试。 最稳妥的做法：手动复制原文内容，直接粘贴到对话框里，告诉它“基于以下文本内容生成视频”。

2. 慎用“电脑控制”模式

在最新版的 Codex 中，支持“计算机控制（Computer Use）”功能。 虽然它能帮你自动打开浏览器、自动复制代码，但这个功能的 Token 消耗极高！ 如果你只是为了提取一段文字，自己手动 Ctrl+C/V 只需 1 秒钟，而交给 AI 控制电脑可能需要消耗数万 Token，折算下来非常不划算。 这里建议大家在执行简单任务时，尽量保持手动干预。

电脑控制模式配置

六、 进阶优化：如何让视频质感更高？

如果你只是给一段话，AI 生成的视频往往只是文字的堆砌。 想要做出 B 站大咖那种质感，我建议采用“三步走”策略：

1.脚本优化：先让 AI 把文章提炼成 5-8 个核心金句，并配上对应的画面描述。2.分镜设计：要求 HyperFrames 针对每一个金句设计特定的 CSS 动画（如平移、淡入、缩放）。3.Skill 封装：如果你觉得这套流程好用，可以将其封装为 Codex 的一个 Skill。 以后你只需要丢一个链接进去，它就会自动按照你预设的风格（比如：配色方案、字体大小、转场特效）进行批量生产。

七、 常见报错排查

在使用过程中，如果遇到渲染中断，请检查以下几项：

•文件夹权限：确保项目文件夹不是只读状态，否则 MP4 文件无法写入。•渲染引擎报错：如果提示 CSS 语法错误，通常是因为 Prompt 太模糊导致 AI 生成了不规范的代码。尝试在 Prompt 中加入“使用标准 CSS3 动画规范”。•版本更新：由于 2026 年 Codex 更新极其频繁，如果发现插件不显示，请去微软商店查看是否有新版本。

检查更新

八、 总结

代码驱动视频生成，是内容创作从“手工业”向“自动化”转型的必经之路。 

通过 Codex 和 HyperFrames，我们不仅是在做一个视频，而是在构建一个可复用的视频生成模版。 

虽然现阶段在 Token 消耗和网络配置上还有一定的门槛，但其带来的效率提升是指数级的。 

希望这篇教程能帮你开启 AI 视频创作的大门。