国内开发者必看：AI智能体如何用HTML直接写视频？Hyperframes 正式开源，附中文快速上手教程及 GitHub 地址。
程序化视频制作正在成为AI内容创作的新风口。无论你是想批量生成短视频，还是为数据报告制作动态解说，都不再需要打开Pr或剪映——写代码就够了。
近期，HeyGen开源的Hyperframes在GitHub上热度飙升（15.5k+ Star）。它凭什么让AI智能体也能轻松“写”出视频？和Remotion、RenderVid这些框架比，到底怎么选？本文用最直白的方式，拆解5大主流框架。
一、Hyperframes是什么？为什么说它对AI最友好？
Hyperframes是一个基于Node.js的开源视频渲染框架。核心理念：
视频 = HTML + CSS + JavaScript
工作流程：
1. 你（或AI）写出一个定义了动画和时间轴的HTML文件
2. Hyperframes用无头浏览器（Puppeteer）逐帧截图
3. 最后用FFmpeg合成MP4视频
为什么对AI特别友好？因为大语言模型（GPT-4、Claude、文心一言等）最擅长的就是生成HTML/CSS/JS代码。AI不需要学习任何新API，只要会写网页动画，就能直接输出完整视频。
核心组件：
- hyperframes CLI：项目创建、预览、渲染入口
- @hyperframes/engine：基于Puppeteer+FFmpeg的渲染引擎
- @hyperframes/studio：可视化时间轴编辑器
- @hyperframes/player：网页端视频播放器组件
确定性渲染是其杀手锏：通过data-start和data-duration属性精确控制每个元素的出现和持续时长，每次渲染结果完全一致。
二、中文快速上手指南（官方版）
两种方式：配合AI编程助手 或 手动命令行。
【方式一】配合AI编程助手（推荐Cursor/Claude Code）
安装技能包：
npx skills add heygen-com/hyperframes
然后直接用自然语言描述你想要的视频，例如：
“使用 /hyperframes 创建一个10秒的产品介绍视频，包含淡入标题、背景视频和轻柔的背景音乐。”
安装后AI助手会自动学会Hyperframes的完整工作流：规划视频→写合法HTML→添加动画和媒体→代码检查→预览→渲染。支持Cursor、Claude Code、Gemini CLI、Codex等。
【方式二】手动使用CLI
npx hyperframes init my-video
cd my-video
npx hyperframes preview # 浏览器预览，支持热重载
npx hyperframes render # 渲染输出MP4
环境要求：Node.js 22+ 和 FFmpeg（国内用户用包管理器安装）

#AI视频生成#

#AI编程#

#开源#