hyperframes （HTML转视频渲染工具）

曾爆款

heygen-com/hyperframes

去点 Star

图像、视频与音频 AI 应用与 AI Agent AI 模型与开发框架

82,714

Stars

Forks

Watchers

Open Issues

未知

许可证

TypeScript

语言

创建时间

项目能做什么

专为 Agent 打造的视频渲染工具，通过编写 HTML 即可直接生成视频。

来源：AI 基于仓库事实生成 · 内容以仓库实际 README 为准

使用说明查看原始 README 原仓库文档

项目简介

HyperFrames 是一个免费、开源的视频渲染框架，能够将 HTML、CSS、媒体资源以及可逐帧寻轨的动画渲染为确定性的 MP4 视频。它专为 AI 编码智能体（AI Agents）设计，既支持在本地通过 CLI 使用，也支持配合 Claude Code、Cursor 等 Agent 调用技能（Skills）生成视频，或作为云端视频生成工作流的底层渲染核心。

此外，官方还提供了跨平台的桌面端应用 HyperFrames Studio（支持 macOS、Windows、Linux）。

运行环境要求：Node.js >= 22

核心功能

HTML/CSS 转 MP4：利用 Web 前端技术栈编写页面与动画，直接渲染输出确定性的 MP4 视频。
Agent 原生工作流：为 AI 智能体配备专属技能（Skills），涵盖视频规划、HTML 编写、动画绑定、媒体添加、代码检查（lint）、预览和渲染的完整流程。
多 Agent 支持：深度适配 Claude Code、Codex、Cursor、Gemini CLI 等支持 skills 扩展的编码工具。
丰富的技能套件：官方提供 9 个扩展技能（包含核心技能包，以及 /slideshow、/remotion-to-hyperframes、/figma 等按需技能）。
桌面端应用：提供 HyperFrames Studio 免费桌面客户端；Pro 版本支持接入 HeyGen 的视频、图像、声音和音乐模型。

适合谁用

AI Agent 开发者 / 重度用户：希望在 Claude Code、Cursor 等工具中直接通过自然语言让智能体生成视频的开发者。
前端开发者：习惯使用 HTML/CSS/JavaScript 构建视觉效果，并希望将其导出为高质量视频的开发者。
自动化工作流构建者：需要程序化、批量生成确定性视频内容的内容创作者或团队。

安装步骤

1. 桌面端应用安装

可直接前往官方下载对应操作系统的安装包： - macOS - Windows - Linux (.deb)

2. 在 AI 编码智能体中配置

方案 A：针对 Claude Code（插件安装）

在终端中执行以下命令添加并安装插件：

claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes

方案 B：针对通用 Agent / 独立 Skills（如 OpenCode、Cursor 等）

在你的视频项目目录下运行交互式安装：

npx skills add heygen-com/hyperframes

提示：交互式选择器默认未选中任何项目，选择 Core Skills 组即可满足常规使用需求。

你也可以使用 CLI 快速更新/安装核心技能：

# 从当前 CLI 对应的发布版本更新/安装核心技能
npx hyperframes skills update

# 安装全部已发布的技能
npx hyperframes skills

注：如果你在 HyperFrames 源码仓库本身中工作，请使用全局安装以防覆盖本地未提交的修改。

使用示例

安装完成后，在 Agent 中尝试以下提示词（Prompt）：

Using /hyperframes, create a 10-second product intro with a fade-in title, a background video, and subtle background music.

配置说明

Claude Code 自动更新设置：在项目终端启动 claude，在终端 UI 中输入 /plugin，依次选择 Marketplaces → hyperframes → Enable auto-update。配置后即可使用 /hyperframes:hyperframes。
其他关于 Copilot、VS Code、Cursor、Gemini CLI 的详细配置，此部分原文未详细说明，请查看原仓库的 docs/guides/plugins.mdx。
独立配置文件及参数说明原文未作展开，请查看原仓库文档。

常见问题

此部分原文未说明，请查看原仓库。

原始 README 摘录（英文原文，节选前 3000 字符）

<p align="center">
  <picture>
    <source media="(prefers-color-scheme: dark)" srcset="docs/logo/dark.svg">
    <source media="(prefers-color-scheme: light)" srcset="docs/logo/light.svg">
    <img alt="HyperFrames" src="docs/logo/light.svg" width="300">
  </picture>
</p>

<p align="center">
  <a href="https://www.npmjs.com/package/hyperframes"><img src="https://img.shields.io/npm/v/hyperframes.svg?style=flat" alt="npm version"></a>
  <a href="https://www.npmjs.com/package/hyperframes"><img src="https://img.shields.io/npm/dm/hyperframes.svg?style=flat" alt="npm downloads"></a>
  <a href="LICENSE"><img src="https://img.shields.io/badge/license-Apache%202.0-blue.svg" alt="License"></a>
  <a href="https://nodejs.org"><img src="https://img.shields.io/badge/node-%3E%3D22-brightgreen" alt="Node.js"></a>
  <a href="https://discord.gg/fzbdWyjphr"><img src="https://img.shields.io/badge/Discord-Join-5865F2?logo=discord&logoColor=white" alt="Discord"></a>
</p>

<p align="center"><b>Write HTML. Render video. Built for agents.</b></p>

<p align="center">
  <a href="https://hyperframes.studio/studio?utm_source=github&utm_medium=readme">Studio</a> |
  <a href="https://hyperframes.heygen.com/quickstart?utm_source=github&utm_medium=readme">Quickstart</a> |
  <a href="https://hyperframes.heygen.com/examples?utm_source=github&utm_medium=readme">Showcase</a> |
  <a href="https://hyperframes.studio/?utm_source=github&utm_medium=readme">Playground</a> |
  <a href="https://hyperframes.heygen.com/catalog/blocks/data-chart?utm_source=github&utm_medium=readme">Catalog</a> |
  <a href="https://hyperframes.heygen.com/introduction?utm_source=github&utm_medium=readme">Docs</a> |
  <a href="https://discord.gg/fzbdWyjphr">Discord</a>
</p>

<p align="center">
  <img src="https://github.com/user-attachments/assets/f6ff9fae-f33d-4f68-bd54-f3ed4ba6473b" alt="The HyperFrames Studio app opening from the Dock: free for Mac, Windows and Linux" width="800">
</p>

<p align="center">
  <b>Download the desktop app:</b>
  <a href="https://hyperframes.studio/studio/download?os=mac&src=github-readme&utm_source=github&utm_medium=readme">macOS</a> ·
  <a href="https://hyperframes.studio/studio/download?os=windows&src=github-readme&utm_source=github&utm_medium=readme">Windows</a> ·
  <a href="https://hyperframes.studio/studio/download?os=deb&src=github-readme&utm_source=github&utm_medium=readme">Linux (.deb)</a>
</p>

HyperFrames is a free, open-source framework for turning HTML, CSS, media, and seekable animations into deterministic MP4 videos. Use it locally with the CLI, from AI coding agents with skills, or as the rendering core behind hosted authoring workflows.

The [HyperFrames Studio app](https://hyperframes.heygen.com/studio-app) is free to use as well; its [Pro plan](https://hyperframes.studio/pricing) adds HeyGen's top video, image, voice and music models.

Using Claude Code, Codex, Cursor, or another coding agent? Run `npx hyperframes skills update` once, then ask your agent to make

阅读完整原文

商业机会分析 AI 生成

垂直领域“数据与报表转视频”云渲染 SaaS/API

产品构想	基于 HyperFrames 对 HTML 图表与动画的友好支持，构建自动化将表格数据（CSV/API）转化为动态数据图表视频、财报解读视频的服务。
核心功能	图表动效组件库、Webhook 触发自动生成、云端渲染队列、视频防抖与水印管理。
目标用户	SaaS 产品团队、金融与电商数据分析师、自动化自媒体创作者。
难度/周期	中等 · 4-6 周 · 成本：低（基础云服务器、对象存储及按需 Headless 渲染实例）
收费模式	按渲染时长或生成条数订阅制计费（API 配额）
竞争风险	服务器端 Headless 渲染存在 CPU/内存开销，高并发下需做好队列隔离，避免被滥用产生算力账单失控。
依据	数据支持的判断

面向 AI Agent 的商业化 HyperFrames 模版与技能库（Template Pack）

产品构想	制作高质量的垂直场景 HTML/CSS 动效模板，并包装为 Claude Code / Cursor 等 Agent 的开箱即用 skills，让用户通过自然语言直接生成专业级商业视频。
核心功能	SaaS 产品推广模板、社交媒体图文卡片动效模版、一键安装的 Agent Skill 脚本、参数化定制配置。
目标用户	使用 AI Coding Agent 的出海营销人员、独立开发者、短视频矩阵运营者。
难度/周期	低 · 2-3 周 · 成本：极低（主要为设计与时间成本）
收费模式	数字资产买断销售（通过 Gumroad / Lemon Squeezy）或会员制模版订阅
竞争风险	HTML 代码类资产难以彻底防盗版；依赖官方 Agent 生态的发展与流量。
依据	已验证事实

Figma / 网页设计转 HyperFrames 动效出片转换插件

产品构想	打造连接设计工具（如 Figma）到 HyperFrames 代码的高精度导出插件，帮助设计师将静态 UI 或原型直接输出为可渲染的高清视频代码。
核心功能	Figma 图层转可寻址 HTML/CSS 动效、关键帧时间轴映射、实时网页端预览面板。
目标用户	UI/UX 设计师、产品经理、前端开发团队。
难度/周期	中等偏高 · 2 个月 · 成本：低（插件开发与托管成本）
收费模式	免费基础功能 + 高级动效导出/商业授权按月订阅
竞争风险	官方已有 `/figma` 技能，独立开发存在与官方功能重叠的竞争风险（推测）。
依据	尚需验证的假设

AI 基于仓库公开数据分析生成，含推测成分，不构成收益承诺。

报告会保存到个人中心

竞品与相似项目 GitHub Search 真实检索

项目	中文简介	Stars	语言
latent-spaces/brag	通过单条命令将刚开发完成的项目转换成可分享的发布短视频。	20,864	Python
nexu-io/html-anything	本地 AI Agent 驱动的 HTML 编辑器，支持多场景内容生成与一键导出。	9,484	HTML
nexu-io/html-video	面向编码 Agent 的程序化工具，可将 HTML、CSS 与数据本地渲染为 MP4 视频。	4,823	HTML
nateherkai/herk-edit-kit	配合 Codex 或 Claude Code 剪辑短视频的技能工具包，含文稿粗剪与动效模板。	2,696	HTML
zhuyansen/awesome-claude-video-skills	收录让 Claude Code 等编码 Agent 制作视频的开源技能与工具库精选列表。	1,830	-
Tejashmakwana/motionmaxxing	用于优化提升 AI 视频质感的 Agent 技能，使其达到动效设计师水准。	1,499	JavaScript

以上为通过 GitHub 官方 Search API 检索的相似项目，功能差异与优劣势需进一步人工确认，配置 AI 后可生成对比分析。

项目优势与风险

技术成熟度	创建于，最近推送，发布过 100 个 Release
社区活跃	Star 82,714 / Fork 0 / Issue 0（数据支持，可自行核实）
许可证	未检测到（需人工确认）
主要风险	上游项目方向可能变化；同赛道竞争者较多（见竞品表）；热度与需求不完全等价

安装与使用

快速开始（以仓库 README 为准）

git clone https://github.com/heygen-com/hyperframes.git
cd hyperframes
# 请阅读仓库 README 获取确切安装步骤（依赖、配置、启动命令）

阅读原仓库文档

术语说明：Docker＝应用容器（把程序和依赖打包运行）；API Key＝调用外部服务的密钥；Git Clone＝把仓库代码下载到本地。常见错误：API Key 未配置 / 端口占用 / 数据库连接失败，多数项目在 README 的 Troubleshooting 章节有说明。

技术要求与部署

部署难度	中等
Docker	未提供（参考 README）
API Key	不需要（或可选）
独立数据库	不需要
GPU	不需要
本地运行	一般可行
预计成本	入门级云主机（1~2 核 1~2GB）或本地运行即可，无需昂贵服务器

由规则引擎基于 README 关键词推断，以仓库实际要求为准。

商业潜力评分 49 / 100

实际需求与应用场景 20% 60

市场付费可能性 20% 44

个人开发者可实施性 20% 57

产品差异化空间 15% 40

项目成熟度 10% 30

部署与运营成本 10% 60

社区活跃度 5% 40

展开评分依据

实际需求与应用场景（60 分）

· Star 数 82,714（对数刻度映射，Star≠付费意愿）

· 主题/描述命中需求关键词：agent

· 长期未更新（>100 天），需求信号减弱

市场付费可能性（44 分）

· 许可证信息缺失或不明，商用前需人工确认

· 与付费场景相关关键词：video, agent

个人开发者可实施性（57 分）

· 主要语言 TypeScript，生态成熟、个人可掌握

· 部署难度评估：中等

产品差异化空间（40 分）

· 项目已是头部，直接复制竞争激烈，需找细分场景

项目成熟度（30 分）

· 项目创建于 9999 天前，已度过早期不稳定期

部署与运营成本（60 分）

· 运行成本评估：入门级云主机（1~2 核 1~2GB）或本地运行即可，无需昂贵服务器

社区活跃度（40 分）

· Fork 0 / Issue 0，社区参与度可查

数据更新时间：2026-11-11 · 规则透明可复算，Star 数仅作为需求信号之一，不代表付费意愿。

Star 增长曲线（采集快照）

最近 30 次采集快照 · 2026-11-10 ~ 2026-11-11