先给大家看个效果！
这是用一句话自动生成的小米YU7 GT概念宣传片。有真实车图，有参数展示，有镜头推拉，有红黑科技风，有转场，还有原创背景音乐和关键音效。
重点是：没有打开剪映，没有打开PR，没有一帧一帧拖时间线。
只做了三件事：新建一个项目文件夹，勾选HyperFrames插件，发一段提示词。然后Codex自己打开小米汽车官网，自己找素材、截图、核对参数，自己写动画、渲染视频，最后导出MP4。
这是什么？
OpenAI的Codex CLI（一个AI编程代理）加上HeyGen出的HyperFrames框架，一句话就能自动做出一条宣传视频。
HyperFrames 是HeyGen出的开源框架，能把HTML、CSS、动画和媒体文件渲染成MP4视频，专门为AI代理设计。
“Write HTML. Render video. Built for agents.” — GitHub heygen-com/hyperframes
（来源：GitHub heygen-com/hyperframes仓库）
和普通AI视频有什么区别？
普通的AI视频工具（Sora、Runway、Pika）是这样的：
你输入一句话 → AI生成一段视频画面
HyperFrames + Codex是这样的：
你描述一个目标 → AI把视频拆成工程流水线（HTML、CSS、动画、素材、时间轴、音频） → 最后导出MP4
关键区别：
| 特性 | 普通AI视频 | HyperFrames + Codex |
|---|---|---|
| 确定性 | 每次输出不同 | 同样输入，每次一样 |
| 可编辑性 | 整段重新生成 | 可单独修改每一帧 |
| 素材来源 | AI生成的假图 | 从官网抓取真实图片 |
| 生产方式 | 一次性生成 | 工程化，可批量生产 |
详细操作步骤
第一步：新建项目文件夹
在电脑上新建一个文件夹（比如叫"Codex Film"），这就是视频项目的工作区。
打开Codex，在左侧项目栏点击添加图标 → 选择"使用现有文件夹"。
打开之后，左侧项目栏里就会出现这个项目。
为什么要单独建文件夹？ 因为后面会生成很多文件（HTML、配置、音频等），没有单独文件夹会很乱。
第二步：安装HyperFrames插件
在Codex左侧栏找到"插件"选项，在插件市场搜索"HyperFrames by HeyGen"。
点击插件后，会进入安装页面。可以看到它支持HTML、CSS、GSAP、HyperFrames CLI、网站转视频等能力。
安装完成后，在输入框点击加号 → 选择"插件" → 点击"HyperFrames by HeyGen"。
当输入框里出现带有图标的"HyperFrames by HeyGen"时，说明插件已成功调用。
关键点： 这次案例需要同时调用Chrome插件。HyperFrames负责做视频，Chrome负责查资料找素材。
第三步：写提示词
以下是实际使用的提示词（可以直接抄作业）：
请使用HyperFrames制作一条15秒、16:9的小米YU7 GT概念宣传片。先通过Chrome打开小米汽车官网的YU7页面，自动查找、提取并裁切页面中公开可见的YU7 GT真实车图、局部细节图和页面视觉元素，素材只允许使用官网可见图片或官网页面截图，不要使用任何占位图、虚构素材或通用汽车图；同时提取并核对官网可见的核心信息，重点展示Xiaomi YU7 GT、1003PS、300km/h、705km CLTC、2.92s 0-100km/h、GT主题座舱等内容。整体风格做成黑红暗夜科技风、高级、酷炫、有速度感，画面节奏像高端新能源汽车发布会宣传片，加入光线扫描、红色光轨、参数数字滚动、卡片弹出、车身剪影切换、镜头推拉、故障风转场和强节奏动效，屏幕文字尽量少而有力，重点突出参数冲击力和真实车图质感，结尾输出一个有冲击力的收尾标题，并直接渲染导出MP4。
提示词要点：
- 写清楚视频规格：15秒、16:9
- 写清楚素材来源：只用官网公开图片，不要占位图
- 写清楚画面风格：黑红暗夜科技风、高端发布会感
- 写清楚动效要求：光线扫描、红色光轨、数字滚动、故障风转场
第四步：让Codex自动执行
提示词发出去后，Codex会自动完成以下流程：
4.1 打开官网找素材
Codex调用Chrome插件，自动打开小米汽车官网，滚动页面抓取车图、参数、文案。
它会下载多张素材（整车图、局部图、座舱图），挑选适合放进宣传片的素材。
还会自动核对参数（比如验证"2.92s 0-100km/h"是否和官网一致）。
4.2 搭建视频工程
Codex调用HyperFrames设置视频项目，生成HTML + CSS + data属性，设置时间轴和场景顺序，写动画（GSAP做数字滚动、卡片弹出、转场）。
4.3 自动检查修复
Codex会自动跑检查，发现问题自动修复（比如文字溢出、字体fallback、转场遮罩警告）。就像一个会自己返工的剪辑助理。
4.4 导出MP4
渲染完成后，核验时长、分辨率，提供可点击的链接直接打开。
核验结果：15.000秒，1920x1080，30fps，16:9，约10.7MB。
点击"打开成片MP4"按钮，就能直接打开对应的文件夹，看到导出的视频文件。
第五步：补充背景音乐
第一版可能没有背景音乐。追加一段提示词：
请给这条15秒小米YU7 GT概念宣传片补一段原创背景音乐和关键音效，并重新导出带声音的MP4。音乐风格要像高端新能源汽车发布会宣传片，黑红科技感、低频厚重、节奏有冲击力、带一点赛博电子感，请在项目里用WebAudio、Tone.js或ffmpeg生成一段原创程序化BGM，不要下载网络音乐，不要使用受版权保护的音乐。
等一会儿，一条带有背景音乐和音效的宣传视频就做好了。
视频成品效果
最后整理出来的文件：
视频画面效果：
这意味着什么？
以前做一条宣传片，流程是：找素材 → 写脚本 → 打开剪辑软件 → 拖时间线 → 加字幕 → 调动画 → 找音乐 → 导出。
现在流程变成了：给Codex一个目标 → 它自己完成所有步骤。
可以批量生产的视频类型：
- 产品发布快讯
- AI工具更新介绍
- 数据报告动态展示
- App功能演示
- 社交媒体短视频
局限性
- 不能和专业广告公司的效果比（目前）
- 需要Node.js 22+和FFmpeg
- 复杂视频渲染需要5-10分钟
- 第一次不一定完美，可能需要2-3轮迭代
信息来源
- GitHub: heygen-com/hyperframes — “Write HTML. Render video. Built for agents.”
- HyperFrames官方文档
- HyperFrames案例展示
- GitHub: feicaiclub/video-spec-builder — 视频导演技能
- 水哥AIGC微信公众号，2026年6月
本文每月更新。最后验证：2026年6月2日。发现错误？联系我们。