HyperFrames：写 HTML 就能生成视频的开源框架
2026/7/20大约 8 分钟
如何用 HTML 生成视频？
HyperFrames：Write HTML. Render video. Built for agents.
19 个 Skills，按需加载，确定性渲染
产品发布、PR 演示、数据可视化、社交媒体视频，统统搞定
来源：GitHub 项目分析
问题背景
传统视频制作的痛点：
┌─────────────────────────────────────────────────────────┐
│ 传统视频制作的痛点 │
├─────────────────────────────────────────────────────────┤
│ │
│ 典型场景： │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 1. 专业门槛高 │ │
│ │ · 需要掌握 After Effects、Premiere 等专业软件 │ │
│ │ · 学习曲线陡峭 │ │
│ │ · 动画制作复杂 │ │
│ │ · 渲染时间长 │ │
│ │ │ │
│ │ 2. 自动化困难 │ │
│ │ · 难以批量生成视频 │ │
│ │ · 难以模板化复用 │ │
│ │ · 难以与数据源集成 │ │
│ │ · 难以实时更新内容 │ │
│ │ │ │
│ │ 3. AI 集成难 │ │
│ │ · AI Agent 无法直接操作专业软件 │ │
│ │ · 缺少标准化的接口 │ │
│ │ · 缺少确定性输出 │ │
│ │ · 缺少版本控制 │ │
│ │ │ │
│ │ 4. 协作成本高 │ │
│ │ · 设计师与开发者沟通成本高 │ │
│ │ · 设计文件与代码不同步 │ │
│ │ · 难以追踪变更 │ │
│ │ · 难以复用资产 │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 传统解决方案的局限： │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 1. 在线视频编辑器 │ │
│ │ · 功能受限 │ │
│ │ · 定制化困难 │ │
│ │ · 难以自动化 │ │
│ │ · 数据安全风险 │ │
│ │ │ │
│ │ 2. 模板化工具 │ │
│ │ · 灵活性差 │ │
│ │ · 难以满足定制需求 │ │
│ │ · 难以集成到工作流 │ │
│ │ │ │
│ │ 3. 编程视频库 │ │
│ │ · 学习成本高 │ │
│ │ · 文档不完善 │ │
│ │ · 缺少 AI 友好的设计 │ │
│ │ · 难以与 Agent 协作 │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────┘解决方案：HyperFrames
写 HTML 就能生成视频，专为 AI Agent 设计
┌─────────────────────────────────────────────────────────┐
│ HyperFrames │
├─────────────────────────────────────────────────────────┤
│ │
│ 核心定位： │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ HyperFrames 是一个开源框架 │ │
│ │ │ │
│ │ 将 HTML、CSS、媒体和可搜索动画 │ │
│ │ 转换为确定性的 MP4 视频 │ │
│ │ │ │
│ │ Write HTML. Render video. Built for agents. │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 核心特点： │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 1. HTML 驱动 │ │
│ │ · 用 HTML 定义视频 │ │
│ │ · 用 CSS 控制样式 │ │
│ │ · 用 data-* 属性定义时序 │ │
│ │ · 用 GSAP/CSS/Lottie/Three.js 控制动画 │ │
│ │ │ │
│ │ 2. AI Agent 原生设计 │ │
│ │ · 19 个 Skills，按需加载 │ │
│ │ · 支持 Claude Code、Cursor、Gemini CLI │ │
│ │ · Agent 可以直接调用 │ │
│ │ · 完整的生产循环：规划 → 编写 → 添加媒体 → 渲染 │ │
│ │ │ │
│ │ 3. 确定性渲染 │ │
│ │ · 相同输入产生相同输出 │ │
│ │ · Headless Chrome 渲染 │ │
│ │ · FFmpeg 编码 │ │
│ │ · 支持本地和 Docker 渲染 │ │
│ │ │ │
│ │ 4. 设计系统集成 │ │
│ │ · Frame.md：专为视频准备的设计系统 │ │
│ │ · Figma 集成 │ │
│ │ · 设计模板复用 │ │
│ │ · 资产跨项目复用 │ │
│ │ │ │
│ │ 5. 开箱即用的工作流 │ │
│ │ · 产品发布视频 │ │
│ │ · PR 演示视频 │ │
│ │ · 数据可视化 │ │
│ │ · 社交媒体视频 │ │
│ │ · 可复用的动态图形 │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 技术栈： │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ · Node.js 22+ │ │
│ │ · FFmpeg │ │
│ │ · GSAP / CSS / Lottie / Three.js / Anime.js / WAAPI │ │
│ │ · Headless Chrome │ │
│ │ · Docker │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────┘19 个 Skills
按需加载，覆盖全流程
┌─────────────────────────────────────────────────────────┐
│ 19 个 Skills，按需加载 │
├─────────────────────────────────────────────────────────┤
│ │
│ 核心：先读 /hyperframes │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ /hyperframes 是路由器 │ │
│ │ · 能力地图 │ │
│ │ · 意图层 │ │
│ │ · 意图路由 │ │
│ │ │ │
│ │ 对于任何「制作/创建/编辑/动画/渲染」视频请求， │ │
│ │ 都应该先读取 /hyperframes │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 创建工作流（Creation Workflows）： │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ /product-launch-video │ │
│ │ · 产品发布视频 │ │
│ │ · 网站营销/推广 │ │
│ │ · 网站导览/展示 │ │
│ │ · 社交媒体剪辑 │ │
│ │ · 时长：30-90秒 │ │
│ │ │ │
│ │ /faceless-explainer │ │
│ │ · 无讲解者说明视频 │ │
│ │ · 从任意文本解释主题/概念 │ │
│ │ · LLM 发明所有视觉（排版/抽象/图表/数据可视化） │ │
│ │ │ │
│ │ /pr-to-video │ │
│ │ · GitHub PR → 视频 │ │
│ │ · 变更日志/功能展示/修复/重构说明 │ │
│ │ · 通过 gh CLI 读取 │ │
│ │ │ │
│ │ /embedded-captions │ │
│ │ · 为现有视频添加字幕/说明 │ │
│ │ · 逐字轨/嵌入高潮/纯电影嵌入 │ │
│ │ │ │
│ │ /talking-head-recut │ │
│ │ · 现有头像/访谈/播客视频包装 │ │
│ │ · 设计图形叠加（下三分/数据标注/动态标题/引言） │ │
│ │ │ │
│ │ /motion-graphics │ │
│ │ · 短动态图形（<10秒） │ │
│ │ · 动态排版/统计图表/Logo/下三分/动态推文 │ │
│ │ │ │
│ │ /music-to-video │ │
│ │ · 音乐轨道 → 视频 │ │
│ │ · 节拍同步视频（歌词/幻灯片/动态推广） │ │
│ │ │ │
│ │ /slideshow │ │
│ │ · 演示/推销/交互式幻灯片 │ │
│ │ · 离散幻灯片/片段揭示/分支/热点导航/演示者模式 │ │
│ │ │ │
│ │ /general-video │ │
│ │ · 任何其他视频 │ │
│ │ · 多场景作品/品牌宣传片/标题卡/静态循环 │ │
│ │ · 伴侣模式（与完整工具箱共创） │ │
│ │ │ │
│ │ /remotion-to-hyperframes │ │
│ │ · Remotion (React) → HyperFrames HTML │ │
│ │ · 单向迁移，非创建 │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 领域技能（Domain Skills）： │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ /hyperframes-core │ │
│ │ · 组合契约 │ │
│ │ · data-* 时序属性 │ │"
│ │ · class="clip" │ │
│ │ · 轨道/子组合/变量 │ │
│ │ · 确定性规则 │ │
│ │ │ │
│ │ /hyperframes-animation │ │
│ │ · 所有动画知识 │ │
│ │ · 原子运动规则/场景蓝图/过渡 │ │
│ │ · 运行时适配器（GSAP/Lottie/Three.js等） │ │
│ │ │ │
│ │ /hyperframes-keyframes │ │
│ │ · 跨运行时安全关键帧编写 │ │
│ │ · GSAP 时间线/CSS 关键帧/Anime.js/WAAPI/FLIP │ │
│ │ · 路径/遮罩/SVG 变形/绘制/3D 深度 │ │
│ │ │ │
│ │ /hyperframes-creative │ │
│ │ · 非动画创意方向 │ │
│ │ · frame.md / design.md │ │
│ │ · 调色板/排版/旁白/节拍规划/音频响应视觉 │ │
│ │ │ │
│ │ /media-use │ │
│ │ · 媒体操作系统 │ │
│ │ · 解析任何媒体需求（BGM/SFX/图像/图标/Logo/语音） │ │
│ │ · 通过 TTS/音乐/图像模型生成 │ │
│ │ · 转录/字幕/移除背景/跨项目复用 │ │
│ │ │ │
│ │ /hyperframes-cli │ │
│ │ · CLI 开发循环 │ │
│ │ · init/lint/check/snapshot/preview/render/publish │ │
│ │ · HeyGen 云渲染/AWS Lambda 渲染 │ │
│ │ │ │
│ │ /hyperframes-registry │ │
│ │ · 安装和连接注册块和组件 │ │
│ │ · 通过 hyperframes add 贡献上游 │ │
│ │ │ │
│ │ /figma │ │
│ │ · 导入 Figma 资产/令牌/组件/故事板部分 │ │
│ │ · 重构动态（帧读取为状态，非幻灯片） │ │
│ │ · Motion 动画/MCP 着色器 │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────┘核心创新：Frame.md
你的设计系统，准备好为视频服务
┌─────────────────────────────────────────────────────────┐
│ Frame.md：你的设计系统，准备好为视频服务 │
├─────────────────────────────────────────────────────────┤
│ │
│ 问题： │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 每个品牌都有 design.md │ │
│ │ 但它们都不是为摄像机编写的 │ │
│ │ │ │
│ │ Web 上下文的设计规范 ≠ 帧上下文的设计规范 │ │
│ │ · Web 关注交互 │ │
│ │ · 视频关注视觉冲击力 │ │
│ │ · Web 关注响应式 │ │
│ │ · 视频关注固定比例 │ │
│ │ · Web 关注滚动 │ │
│ │ · 视频关注时间轴 │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 解决方案： │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ Frame.md 是缺失的翻译层： │ │
│ │ · 它采用你的 Web 上下文设计规范 │ │
│ │ · 将其转换为帧上下文 │ │
│ │ · 相同的令牌 │ │
│ │ · 相同的规则 │ │
│ │ · 但为摄像机重写 │ │
│ │ │ │
│ │ 输出是一个 DESIGN.md 超集 │ │
│ │ · 整个工具链都可以读取 │ │
│ │ · 原子保持神圣 │ │
│ │ · 组合保持自由 │ │
│ │ · 数字来自脚本 │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 价值： │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 1. AI Agent 可以组合促销视频 │ │
│ │ · 无需猜测规模 │ │
│ │ · 无需求助于 Web chrome │ │
│ │ │ │
│ │ 2. 设计系统统一 │ │
│ │ · Web 和视频使用相同的设计语言 │ │
│ │ · 确保品牌一致性 │ │
│ │ │ │
│ │ 3. 自动化友好 │ │
│ │ · 设计令牌可编程 │ │
│ │ · 布局规则可自动化 │ │
│ │ · 批量生成视频成为可能 │ │
│ │ │ │
│ │ 4. 可复用性 │ │
│ │ · 设计模板可复用 │ │
│ │ · 资产跨项目复用 │ │
│ │ · 降低创作成本 │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 设计模板： │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ HyperFrames 提供多种设计模板： │ │
│ │ · Biennale Yellow │ │
│ │ · BlockFrame │ │
│ │ · Blue Professional │ │
│ │ · Bold Poster │ │
│ │ · Broadside │ │
│ │ · Capsule │ │
│ │ · Cartesian │ │
│ │ · Cobalt Grid │ │
│ │ · Coral │ │
│ │ · Creative Mode │ │
│ │ · ...（更多模板） │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────┘技术架构
如何工作：HTML → 视频
┌─────────────────────────────────────────────────────────┐
│ 技术架构：HTML → 视频 │
├─────────────────────────────────────────────────────────┤
│ │
│ 步骤 1：定义视频为 HTML │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 用 HTML 定义视频结构： │ │
│ │ <div id="stage" │ │
│ │ data-composition-id="launch" │ │
│ │ data-start="0" │ │
│ │ data-width="1920" │ │
│ │ data-height="1080"> │ │
│ │ │ │
│ │ <video class="clip" │ │
│ │ data-start="0" │ │
│ │ data-duration="6" │ │
│ │ data-track-index="0" │ │
│ │ src="intro.mp4" │ │
│ │ muted playsinline></video> │ │
│ │ │ │
│ │ <h1 id="title" class="clip" │ │
│ │ data-start="1" │ │
│ │ data-duration="4" │ │
│ │ data-track-index="1">Launch day</h1> │ │
│ │ │ │
│ │ <audio data-start="0" │ │
│ │ data-duration="6" │ │
│ │ data-track-index="2" │ │
│ │ data-volume="0.5" │ │
│ │ src="music.wav"></audio> │ │
│ │ │ │
│ │ </div> │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 步骤 2：添加动画 │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 用 GSAP 定义动画时间线： │ │
│ │ <script src="gsap.min.js"></script> │ │
│ │ <script> │ │
│ │ const tl = gsap.timeline({ paused: true }); │ │
│ │ tl.from("#title", { │ │
│ │ opacity: 0, │ │
│ │ y: 40, │ │
│ │ duration: 0.8 │ │
│ │ }, 1); │ │
│ │ window.__timelines = window.__timelines || {}; │ │
│ │ window.__timelines.launch = tl; │ │
│ │ </script> │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 步骤 3：预览和渲染 │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 在浏览器中预览： │ │
│ │ npx hyperframes preview │ │
│ │ · 实时重新加载 │ │
│ │ · 即时反馈 │ │
│ │ │ │
│ │ 渲染为 MP4： │ │
│ │ npx hyperframes render │ │
│ │ · Headless Chrome 渲染每一帧 │ │
│ │ · FFmpeg 编码为视频 │ │
│ │ · 确定性输出 │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 渲染原理： │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 1. 解析组合 │ │
│ │ · 读取 HTML 和 data-* 属性 │ │
│ │ · 解析时序和轨道 │ │
│ │ · 构建渲染计划 │ │
│ │ │ │
│ │ 2. 驱动 Headless Chrome │ │
│ │ · 在无头浏览器中加载 HTML │ │
│ │ · 执行动画时间线 │ │
│ │ · 捕捉每一帧 │ │
│ │ │ │
│ │ 3. 编码视频 │ │
│ │ · 用 FFmpeg 编码帧为 MP4 │ │
│ │ · 确保相同输入产生相同输出 │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────┘应用场景
你可以构建什么
┌─────────────────────────────────────────────────────────┐
│ 应用场景：你可以构建什么 │
├─────────────────────────────────────────────────────────┤
│ │
│ 1. 产品发布视频 │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ · 产品功能介绍 │ │
│ │ · 产品演示视频 │ │
│ │ · 营销推广视频 │ │
│ │ · 网站导览视频 │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 2. PR 演示视频 │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ · 变更日志视频化 │ │
│ │ · 功能展示视频 │ │
│ │ · 代码差异动画 │ │
│ │ · 旁白和字幕 │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 3. 数据可视化 │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ · 图表竞速 │ │
│ │ · 地图动画 │ │
│ │ · 数据驱动视频 │ │
│ │ · 实时数据更新 │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 4. 社交媒体视频 │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ · 动态字幕 │ │
│ │ · 图形叠加 │ │
│ │ · 音乐同步 │ │
│ │ · 平台适配 │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 5. 文档到视频 │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ · 文档视频化 │ │
│ │ · PDF 视频化 │ │
│ │ · 网站导览 │ │
│ │ · 说明视频 │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 6. 可复用的动态图形 │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ · 动态排版 │ │
│ │ · Logo 动画 │ │
│ │ · 下三分 │ │
│ │ · 自动化内容管道 │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────┘核心价值
HyperFrames 的革命性意义
┌─────────────────────────────────────────────────────────┐
│ 核心价值 │
├─────────────────────────────────────────────────────────┤
│ │
│ HyperFrames 的革命性意义： │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 1. 降低门槛 │ │
│ │ · 用 HTML 替代专业软件 │ │
│ │ · Web 开发者可以直接制作视频 │ │
│ │ · 学习曲线大幅降低 │ │
│ │ │ │
│ │ 2. AI 原生设计 │ │
│ │ · 19 个 Skills，按需加载 │ │
│ │ · AI Agent 可以直接调用 │ │
│ │ · 完整的生产循环自动化 │ │
│ │ │ │
│ │ 3. 确定性输出 │ │
│ │ · 相同输入产生相同输出 │ │
│ │ · 版本控制友好 │ │
│ │ · CI/CD 集成友好 │ │
│ │ │ │
│ │ 4. 设计系统集成 │ │
│ │ · Frame.md 统一 Web 和视频设计 │ │
│ │ · Figma 集成 │ │
│ │ · 资产跨项目复用 │ │
│ │ │ │
│ │ 5. 开箱即用 │ │
│ │ · 多种预置工作流 │ │
│ │ · 多种设计模板 │ │
│ │ · 完整的文档和示例 │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 这就是 HyperFrames 的核心价值： │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ Write HTML. Render video. Built for agents. │ │
│ │ │ │
│ │ 让 Web 开发者可以轻松制作视频， │ │
│ │ 让 AI Agent 可以直接生成视频！ │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────┘快速开始
如何使用 HyperFrames
┌─────────────────────────────────────────────────────────┐
│ 快速开始 │
├─────────────────────────────────────────────────────────┤
│ │
│ 方式 1：使用 AI coding agent │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 安装 HyperFrames Skills： │ │
│ │ npx skills add heygen-com/hyperframes │ │
│ │ --full-depth │ │
│ │ │ │
│ │ 然后描述你想要制作的视频： │ │
│ │ Using /hyperframes, create a 10-second │ │
│ │ product intro with a fade-in title, │ │
│ │ a background video, and subtle │ │
│ │ background music. │ │
│ │ │ │
│ │ Agent 会自动完成： │ │
│ │ · 规划视频 │ │
│ │ · 编写 HTML │ │
│ │ · 添加可搜索动画 │ │
│ │ · 添加媒体 │ │
│ │ · Lint 检查 │ │
│ │ · 预览 │ │
│ │ · 渲染 │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 方式 2：手动使用 CLI │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 初始化项目： │ │
│ │ npx hyperframes init my-video │ │
│ │ cd my-video │ │
│ │ │ │
│ │ 在浏览器中预览： │ │
│ │ npx hyperframes preview │ │
│ │ │ │
│ │ 渲染为 MP4： │ │
│ │ npx hyperframes render │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 要求： │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ · Node.js 22+ │ │
│ │ · FFmpeg │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────┘收尾金句
- 如何用 HTML 生成视频？
- HyperFrames：Write HTML. Render video. Built for agents.
- 19 个 Skills，按需加载，确定性渲染
- 产品发布、PR 演示、数据可视化、社交媒体视频，统统搞定
HyperFrames：写 HTML 就能生成视频，专为 AI Agent 设计的开源框架！
让 Web 开发者可以轻松制作视频，让 AI Agent 可以直接生成视频！