一、工具简介

最近 AI 圈又炸出一个颠覆性视频工具——由 AI 数字人公司 HeyGen 开源的 HyperFrames。它彻底改变视频创作逻辑:写一段 HTML,直接渲染成 MP4 视频,搭配 AI 助手,真正实现“用嘴做视频”。

HyperFrames 底层原理很简单:把 HTML 页面逐帧截图,再通过 FFmpeg 拼接成视频。看似常规,却打通了代码与视频的壁垒,让 AI 成为你的专属剪辑师。
二、核心优势:告别鼠标,用自然语言做视频
传统视频制作(PR/AE/Canva)需要拖拽素材、调关键帧、点界面,10 秒动画可能耗时 1–2 小时。
HyperFrames 把视频变成代码,而大模型天生擅长写 HTML/CSS/JS,你只需说需求,AI 自动生成代码并渲染视频。
核心能力
动效、转场、字幕、配音全自动 支持 Tailwind、GSAP、Canvas 等前端效果 适合非实拍类视频:产品介绍、数据可视化、文字动效、Logo 动画、社交短片 
三、使用方法:3 步上手
打开 Codex,安装 HyperFrames 插件 
用自然语言描述视频需求(时长、比例、风格、内容) AI 生成代码 → 预览 → 调整 → 导出 MP4
万能 Prompt 公式
时长 + 画面比例 + 风格 + 内容安排 + 动画细节
四、四大实用场景
1. 产品介绍视频
@HyperFrames by HeyGen,做一个 15 秒的产品介绍视频,16:9 横屏,1920x1080。 风格:深色背景,简约科技感,字体用白色无衬线体。 内容安排: 0-3秒:产品名「AI一手」从中央淡入,底下小字同步出现 3-6秒:产品名上移,下方三个功能点逐个滑入 6-12秒:功能点高亮展示 12-15秒:元素淡出,显示 Logo 背景加深蓝到深紫渐变动画
2. 数据可视化动画
做周报、做汇报的时候,这种太好用了。
@HyperFrames by HeyGen,做一个 20 秒的数据展示动画,16:9 横屏。
风格:白色背景,商务简约风,数据用蓝色系配色。
内容安排:
- 0-3秒:标题「2026年Q1用户增长」从顶部滑入
- 3-12秒:底部出现柱状图,四根柱子分别代表1月/2月/3月/4月,
柱子从底部逐个生长到目标高度,每根间隔 1.5 秒,
每根柱子上方显示具体数字(1.2万/1.8万/2.5万/3.1万),数字有跳动计数效果
- 12-16秒:柱状图右侧淡入一个环形进度条,显示「目标完成率 78%」,
进度条从 0% 动画填充到 78%
- 16-20秒:底部出现一行文字「环比增长 158%」,带高亮闪烁效果,然后全部元素淡出

3. 社交平台竖屏短视频
发抖音、小红书的时候能用上。
@HyperFrames by HeyGen,做一个 9:16 竖屏的 10 秒 hook 视频,1080x1920。
风格:高饱和度,活泼,年轻化,背景用渐变紫到粉。
内容安排:
- 0-2秒:大字「你还在手动剪视频?」从底部弹入,带夸张的弹性动画
- 2-4秒:文字抖动一下,然后缩小上移
- 4-7秒:中间区域出现三行文字,逐行打字机效果显示:
「写一段话」「→ AI 生成代码」「→ 直接出 MP4」
每行间隔 1 秒
- 7-10秒:整个画面做一个缩放 + 旋转的转场效果,
最终定格在「用嘴做视频 了解一下」,底部显示箭头指向下方
字体要大,一屏最多两行字。节奏要快。

五、高效技巧:对话式迭代
不用每次重写 Prompt,生成后直接像跟剪辑师聊天一样修改:
标题放大2倍,背景改纯黑 第3秒加姓名条 字幕重叠就往上挪AI 保留上下文,精准修改,效率翻倍。
六、适合人群与局限
适合谁
自媒体人:快速做产品演示、功能介绍 打工人:动态数据汇报视频 独立开发者:零成本做产品 Demo 视频
不适合
真人出镜、实拍剪辑、电影级特效
七、获取方式
GitHub:https://github.com/heygen-com/hyperframes
官网:https://hyperframes.heygen.com
创作门槛正在被 AI 彻底拉平,以前要学 AE、懂设计,现在会说话就能做视频。工具一直在变,但创意永远属于你。
夜雨聆风