Mindket
简体中文
English简体中文
登录注册
商店MCP技能计算器学习价格博客
发现
研究312写作59商务95法律13财务33营销175开发1,427效率391教育81陪伴14
帮助与支持
语言
English简体中文

HyperFrames by HeyGen 视频框架

由 heygen-com 制作工具包开发
新上架第 2 版 · 更新于
GITHUB 热门4本月第 4 名仓库
星标84k
点赞

概览

HyperFrames by HeyGen 视频框架，图片 1
‹1 / 3›
HyperFrames by HeyGen 视频框架，图片 2
‹2 / 3›
HyperFrames by HeyGen 视频框架，图片 3
‹3 / 3›

HeyGen 的开源框架，把 HTML 变成 MP4 视频。它的技能教 Claude Code、Codex、Cursor、Gemini CLI 等智能体在你自己的电脑上规划、搭建、预览并渲染视频项目。

HyperFrames by HeyGen 视频框架 是一款 GitHub 上的开源项目，属于开发类，由 Mindket 上架。可免费获取。当前为第 2 版，最近更新于 。按它的 README 从 GitHub 安装。Mindket 的设置说明可在你的 Mindket 账户获取，以 zip 压缩包下载。

速览

用在
  • Claude Code：用插件安装，用 /hyperframes:hyperframes 调用
  • GitHub Copilot CLI 和 VS Code：用同一个 GitHub 插件市场
  • Gemini CLI：从仓库安装的扩展
  • Cursor：独立技能、团队插件市场或本地插件文件夹
先运行
claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes

平台

Claude Code编程智能体
GitHub Copilot编程智能体
VS Code代码编辑器
Gemini CLI编程智能体
Cursor代码编辑器
Codex编程智能体

用在哪里里还有 6 个

关于

它是什么

HyperFrames 是 HeyGen 的开源框架，能把 HTML、CSS、媒体素材和可逐帧定位的动画变成 MP4 视频。你让编程智能体做一个视频，HyperFrames 技能会教它怎样规划影片、写出合规的项目、预览，再渲染成片。README 说，渲染器在无头 Chrome 里逐帧定位，再用 FFmpeg 编码，所以同样的输入总会得到同样的视频。README 还说，HeyGen 自己的生产环境就在用 HyperFrames。

  1. 你让智能体做一个视频
  2. 技能判断影片类型，读取对应的参考资料
  3. 智能体写出定好时间的 HTML 场景和一条暂停的时间线
  4. 先跑 lint 和 check，再由你看预览
  5. 你点头之后，渲染器在无头 Chrome 里逐帧定位
  6. FFmpeg 把画面和混好的音频编码成 MP4

适合谁

想靠一段提示词拿到成片、又想把源文件留在手里的产品团队、开发者、营销人员和创作者。成果是一个由普通 HTML 组成的项目文件夹，智能体、浏览器编辑器和你自己的工具都能接着改同一批文件。HeyGen 的文档说，走智能体这条路不需要你写代码。

谁在用，怎么用
行业谁在用怎么用例子
软件与 SaaS产品营销人员和开发者做发布视频和功能公告，把产品自己的网页抓下来当素材开发者给出产品网址，要一段 10 秒的开场，智能体用抓下来的页面画面和字体把它做出来。
工程团队项目维护者把一个拉取请求做成讲解视频，配上代码对比动画、旁白和字幕维护者在评审会之前，要一段讲解某个拉取请求的短视频。
数据与新闻分析师和设计师做排名动态图、数据可视化和地图动画分析师拿出一张逐年汇总表，要一段柱状图排名动画。
社交与内容创作者和小品牌给素材加动态字幕、叠加图层和音乐创作者交来一段采访片段，要逐词对准时间的字幕。
自动化流水线同一版式要出很多版本的团队在合成里声明变量，每个版本换上新值再渲染团队用同一段开场，为每位客户各渲染一版换了标题的视频。

如果你只想把一段视频剪短，或者给它加一遍字幕，可以不用它。普通的视频剪辑软件更快，用不着建项目、跑检查、再渲染。

用在哪里

HeyGen 为下面每个智能体和应用都写了安装途径。

  • Claude Code：用插件安装，用 /hyperframes:hyperframes 调用
  • GitHub Copilot CLI 和 VS Code：用同一个 GitHub 插件市场
  • Gemini CLI：从仓库安装的扩展
  • Cursor：独立技能、团队插件市场或本地插件文件夹
  • Codex：技能放在共享的 ~/.agents/skills 文件夹里，用 $hyperframes 调用
  • OpenCode、Google Antigravity 和 IBM Bob：独立技能
  • 自己没有智能体：用适用于 Mac、Windows 和 Linux 的 Studio 应用，或者在 Claude.ai、ChatGPT、Grok 里用托管连接器

README 说 HyperFrames 一共有 8 个技能：核心的 4 个，外加 4 个按需安装的。

这 8 个技能
技能分组什么时候用
/hyperframes核心你要做、改或渲染一个视频、动态图形、字幕或叠加层。它最先被读取
/hyperframes-cli核心智能体用 CLI 搭项目、做检查、预览和渲染
/hyperframes-registry核心你点名要的画面，约 450 个现成模块里可能已经有了
/media-use核心视频需要音乐、音效、图片、标志、旁白或数字人片段
/figma按需你贴了一个 figma.com 链接
/slideshow按需你要的是一份能翻页的演示稿，不是 MP4
/remotion-to-hyperframes按需要把已有的视频代码或素材搬过来
/reverse-any-video按需要把一个视频文件变成可编辑的项目。README 里它那一行的末尾写着“HyperFrames Pro”

如何设置

点“获取”会把一个 zip 压缩包存进你的下载文件夹，里面是 Mindket 写的安装说明，按 HeyGen 的 README 和文档列出了每个智能体的步骤。先装好下面这些工具，再给每个智能体选一种途径装上技能。

先准备好这些
需要说明
Node.js22 或更高版本，带 npm。npx skills 背后的 skills 安装器在 npm 上写的是 22.20 或更高版本
FFmpeg渲染 MP4 文件要用。运行 npx hyperframes doctor 检查
Chrome渲染要驱动无头 Chrome。npx hyperframes browser ensure 会找到一个，或者下载一个
一个编程智能体上面列表里的任意一个。Studio 应用可以替你装一个
HeyGen 账号可选。免费登录就能用 HeyGen 的 Voice Turbo 声音、它的音乐库和素材搜索。HeyGen 的其他声音、数字人和生成片段要花点数。Studio 应用必须有账号
Python可选，用于本地的 Kokoro 声音。它在 PyPI 上写的是 3.10 到 3.13
Docker可选，用于 npx hyperframes render --docker
  1. 装好 Node.js 22 或更高版本和 FFmpeg，然后运行 npx hyperframes doctor。
  2. 给你的智能体选一种途径装上技能。Claude Code 用插件，其他大多数用安装器。
  3. 在你的视频项目文件夹里新开一个智能体会话。
  4. 要视频时点名技能：Claude Code 里写 /hyperframes:hyperframes，其他大多数写 /hyperframes，Codex 里写 $hyperframes。

在 Claude Code 里安装插件：

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

其他大多数智能体用安装器，在你的项目文件夹里运行。选择器打开时什么都没选，要勾的是 Core Skills 这一组。没有选择器的智能体或 CI 运行，改用第二条命令。

npx skills add heygen-com/hyperframes
npx hyperframes skills update

Gemini CLI、GitHub Copilot CLI、Cursor 和其他智能体的命令，写在工具包的说明里。HeyGen 的文档说，每个智能体只选一种安装方式。

如何使用

用平常的话要视频，并点名技能。智能体在你的文件夹里写出项目，做完检查，打开预览，然后就停在那里。你点头之后，或者你要成片文件时，它才开始渲染。超过 15 秒左右、要讲一段内容的影片开头不一样：智能体先给出三条只用文字写的故事线，由你挑一条。

npx hyperframes preview
npx hyperframes render --output final.mp4

第一条命令以后可以在浏览器编辑器里重新打开项目，第二条命令生成 MP4。用话说出你要的质量，参数由智能体来设。

用这些话来控制渲染
你说你得到
draft 或 quick renderdraft 档，编码快，用来判断剪辑
什么都不说looks 档，也是默认档，HeyGen 的文档说它在 1080p 下视觉无损
final 或 high qualitydelivery 档，用于你要交出去的母版
transparent WebM带透明通道的 VP9，只有浏览器能解码。视频剪辑软件会把透明区域显示成黑色

示例

在一个空文件夹里，插件已经装好，你让智能体做第一个视频。

Using /hyperframes:hyperframes, make a 10-second product intro for https://example.com.

智能体读取发布影片的指南，在你的文件夹里搭好项目，再跑一遍检查。它打开预览，然后等你。你拿到一个文件夹：根合成是 index.html，每个场景一个文件放在 compositions/ 下，你的媒体素材放在 assets/ 里。除非你另有要求，新视频是 1920×1080、30 fps。你认可预览之后，一条命令就生成文件。

npx hyperframes render --output final.mp4

新手与专家

新手：可以把这里的视频想成一个带时钟的网页。每个元素都写明自己什么时候出现，渲染器在时钟每走一格时把页面拍下来，再由 FFmpeg 把这些画面接成视频。你完全不用读 HTML。描述你要的视频，看预览，在同一段对话里说要改什么。如果你不习惯用终端，HeyGen 的 Studio 应用把聊天、预览和编辑器放在一个窗口里，还会替你装好智能体。

专家：一个合成就是 HTML，用 data 属性标注时间和轨道。动画来自 GSAP、CSS、Lottie、Three.js、Anime.js、WAAPI 或你自己的帧适配器。技能的约定禁止在合成里用 Date.now()、不带种子的 Math.random()、网络请求和定时器，因为每一帧都必须只由时间线上的时间决定。

渲染可以在哪里跑
途径谁来运行 Chrome 和 FFmpeg
本地 CLI你的电脑
npx hyperframes render --docker你电脑上的 Docker
HyperFrames CloudHeyGen，按点数从你的 HeyGen 账号扣费
AWS Lambda你的 AWS 账号
Google Cloud Run你的 Google Cloud 账号

插件在清单里锁定了 CLI 版本，但没有锁定技能的提交。HeyGen 的文档说，要想每次装出来都一样，就固定一个发布标签，并关掉自动更新。

注意事项

在本地做的时候，项目留在你的电脑上。会连到外面的，是 CLI 的使用数据、可选的 HeyGen 服务和你的智能体背后的服务商。

  • 使用数据：CLI 会发送命令名、渲染性能、错误名称和系统信息，包括它检测到的编程智能体名称。登录 HeyGen 之前是匿名的，登录之后会关联到你的账号。npx hyperframes telemetry disable 或 HYPERFRAMES_NO_TELEMETRY=1 可以关掉它
  • 安装器数据：skills 安装器会发送匿名使用数据，除非设置了 DISABLE_TELEMETRY=1 或 DO_NOT_TRACK=1
  • 登录：媒体技能在使用 HeyGen 的声音、音乐或素材搜索之前，会请你先登录 HeyGen，只有你开口要时才改用本地工具
  • 费用：文档说框架和本地渲染是免费的。你的智能体按它自己的套餐收费，Voice Turbo 以外的 HeyGen 声音、数字人、生成片段和云端渲染要用 HeyGen 点数
  • 云端渲染：它会把项目上传到 HeyGen，5 MB 及以上的媒体通过公开、未签名的 URL 引用。hyperframes cloud render --dry-run 会列出要上传的内容
  • 发布：npx hyperframes publish 会把项目上传到 hyperframes.studio，不登录也能用，靠一个认领链接
  • 网站抓取：它从你的电脑上抓取公开网页。设置了 GEMINI_API_KEY 或 OPENROUTER_API_KEY 时，抓到的图片还会发给对应的服务商去生成描述，--skip-vision 可以关掉这一步
  • 渲染标签：每个文件带两个元数据标签，hyperframes_renderer 和 hyperframes_version，不含你的路径或项目的任何信息
  • 磁盘与 Windows：在 macOS 或 Windows 上做长时间的多进程渲染，临时画面可能要占几十 GB。在 WSL2 下，Chrome 可能退回到更慢的软件渲染
  • 卸载：claude plugin uninstall hyperframes@hyperframes、copilot plugin uninstall hyperframes 或 gemini extensions uninstall hyperframes。独立技能的卸载，文档只让你去找自己的技能管理工具
  • 许可证：Apache-2.0，版权归 HeyGen, Inc. 所有。README 说渲染不按次收费。你加进来的媒体素材保留各自的许可

README 和文件

README

HyperFrames by HeyGen：安装说明

这个工具包里只有安装说明，由 Mindket 编写。HyperFrames 和它的智能体技能要从 HeyGen 的仓库安装，地址是 https://github.com/heygen-com/hyperframes

这些说明不是 HeyGen 写的，也没有得到它的认可。仓库的 README 注明制作方是 HeyGen，插件清单也把 HeyGen 列为作者。

许可证：Apache-2.0。LICENSE 文件写的是“Copyright 2026 HeyGen, Inc.”。来源见 https://github.com/heygen-com/hyperframes/blob/main/LICENSE

FAQ 说，你加进视频的媒体素材，比如字体、音乐或视频片段，保留各自的许可。来源见 https://hyperframes.heygen.com/faq

会安装什么

  • 技能：README 说 HyperFrames 一共有 8 个技能。核心的一组是 /hyperframes、/hyperframes-cli、/hyperframes-registry 和 /media-use。/figma、/slideshow、/remotion-to-hyperframes 和 /reverse-any-video 按需安装。README 里 /reverse-any-video 那一行的末尾写着“HyperFrames Pro”。
  • 插件把全部技能打包在一起，由你的智能体的插件管理器负责更新。另一种途径是独立技能。
  • 技能通过 npx hyperframes <command> 运行 HyperFrames CLI，也就是 npm 上的 hyperframes 包。在插件里，一个捆绑的启动器会运行插件清单里写明的 CLI 版本，第一次调用时可能会通过 npm 下载这个确切的版本。来源见 https://github.com/heygen-com/hyperframes/blob/main/skills/hyperframes/references/plugin-installation.md
  • 按 HeyGen 文档的说法，独立技能的存放位置是：用户级的 Codex 安装放在 ~/.agents/skills，Cursor 放在 ~/.cursor/skills，IBM Bob 放在 ~/.bob/skills，项目级安装放在项目里的 .agents/skills。
  • 登录之后，凭据保存在 ~/.hyperframes/credentials。来源见 https://hyperframes.heygen.com/guides/authentication

事先需要准备

  • README 要求 Node.js 22 或更高版本以及 npm。npm 上 hyperframes 的 engines 字段写的是 Node >=22，见 https://registry.npmjs.org/hyperframes/latest
  • 安装器 npx skills add 是 npm 上的 skills 包。它在注册表里的条目写的是 Node >=22.20.0，比 CLI 自己的最低版本更新，见 https://registry.npmjs.org/skills/latest
  • FFmpeg，用于渲染 MP4 文件。用 npx hyperframes doctor 检查电脑。
  • Chrome，渲染时会以无头方式驱动它。npx hyperframes browser ensure 会找到一个，或者下载一个。
  • 可选：Docker，用于 --docker 渲染。HeyGen 账号，用于 HeyGen 声音、音乐和云端渲染。Python，用于本地的 Kokoro 声音。来源见 https://hyperframes.heygen.com/guides/authentication
  • GPU：HeyGen 的文档没有把它列为要求。能用上主机 GPU 时 Chrome 会用它，--gpu 会打开 FFmpeg 的硬件编码。见 setup/ffmpeg-and-rendering.md。

主安装命令

npx skills add heygen-com/hyperframes

在你的视频项目文件夹里运行它，并在选择器里选 Core Skills。然后在这个文件夹里打开或重启你的智能体。来源：README 的 Quick Start 一节，以及 https://hyperframes.heygen.com/guides/skills

在 Claude Code 里，README 改为安装带版本号的插件：

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

对于没有选择器的智能体或 CI 运行，HeyGen 的文档给出的是：

npx hyperframes skills update

文档说，每个智能体只选一种安装方式。

各智能体的说明

  • setup/claude-code.md
  • setup/github-copilot-cli.md
  • setup/vscode.md
  • setup/cursor.md
  • setup/gemini-cli.md
  • setup/codex.md
  • setup/opencode.md
  • setup/antigravity.md
  • setup/ibm-bob.md
  • setup/studio-app.md
  • setup/hosted-connector.md
  • setup/ffmpeg-and-rendering.md

检查是否装好

新开一个智能体会话，让它做一个视频，例如：

Using /hyperframes, make a 10-second product intro for https://example.com.

如果智能体看不到这个技能，HeyGen 的文档说，新开一个会话，再运行 npx hyperframes skills check。来源见 https://hyperframes.heygen.com/guides/skills

更新或卸载

每个智能体的文件里都列出了官方的更新和卸载命令。对于独立技能，文档说 npx hyperframes skills update 从不删除技能，卸载则让你去找自己的独立技能管理工具。skills CLI 自己的 README https://github.com/vercel-labs/skills 列出了 npx skills list、npx skills update 和 npx skills remove。技能文件夹的名字是 hyperframes、hyperframes-cli、hyperframes-registry 和 media-use。删除之前先看看这些文件夹，因为别的智能体可能共用同一个全局技能文件夹。

哪些内容会离开你的电脑

来源

  • README：https://github.com/heygen-com/hyperframes/blob/main/README.md
  • LICENSE：https://github.com/heygen-com/hyperframes/blob/main/LICENSE
  • 插件指南：https://hyperframes.heygen.com/guides/plugins
  • 技能指南：https://hyperframes.heygen.com/guides/skills
  • FAQ：https://hyperframes.heygen.com/faq
  • CLI 参考：https://hyperframes.heygen.com/packages/cli
文件
README.md  6 KB
setup/antigravity.md  1 KB
setup/claude-code.md  3 KB
setup/codex.md  2 KB
setup/cursor.md  2 KB
setup/ffmpeg-and-rendering.md  5 KB
setup/gemini-cli.md  1 KB
setup/github-copilot-cli.md  1 KB
setup/hosted-connector.md  3 KB
setup/ibm-bob.md  754 B
setup/opencode.md  2 KB
setup/studio-app.md  3 KB
setup/vscode.md  918 B

13 个文件，共 31 KB，以 zip 压缩包下载。

更新内容

  • 第 2 版 · 2026-11-09

    Updated by Mindket to the current version of this kit.

  • 第 1 版 · 2026-11-03

同类产品对比

同一分类里与本产品共有主题最多的已上架 GitHub 项目。

产品星标活跃度语言许可证最近更新
HyperFrames by HeyGen 视频框架 本页83,969活跃TypeScriptApache-2.0
rails共有 html · framework59,032活跃RubyMIT
Chrome DevTools for agents 浏览器调试与自动化共有 puppeteer · mcp55,482活跃TypeScriptApache-2.0
AutoGen 多智能体框架共有 framework · ai61,752——CC-BY-4.0—
Crawl4AI 开源网页爬虫共有 mcp · ai · ai-agents87,016——Apache-2.0—
goose 开源 AI 智能体共有 mcp · ai · ai-agents56,377——Apache-2.0—
数据为 Mindket 在 2026-11-07 至 2026-11-14 期间读取的数值。 活跃度依据各项目在 GitHub 上的最近更新：30 天内为活跃，180 天内为更新较少，超过 180 天为久未更新。

评价

还没有评分

写评价

还没有评价。

大家怎么说

Hacker News、Bluesky、X、Reddit、Facebook 和 YouTube 上提到这个项目的帖子和评论，来自每周一次的搜索和 Trendshift。它们不是 Mindket 写的，也未经核实，点开即可在原帖处阅读。

bored_hackerShow HN: HyperFrames – Render Video from HTML via Chrome's BeginFrame API6 分Olivier Poncet 🦝HyperFrames est un framework open-source sous licence Apache-2.0 qui permet de créer des vidéos MP4 à partir de HTML, CSS, médias et animations, puis de les générer localement ou avec des agents IA ⬇️ github.com/heygen-com/h...8 赞nastrofaHas anyone tried using Hyperframes?2 分 · 1 条回复@prosperflowio.bsky.socialYour AI agent writes HTML, HyperFrames renders it into a pixel-perfect MP4, no video editor required. 🔗 github.com/heygen-com/hyperframes Credits: github.com/heygen-com/hyperframes #hyperframes #typescript #opensource2 赞steveharmanHyperframes – AI Video Creation for Agents1 分 · 1 条回复Chris PirilloHeyGen ships Hyperframes v0.9.13: write HTML, render video, built for agents. https://github.com/heygen-com/hyperframes/releases/tag/v0.9.13 Show HN: Codemap builds a one-page interactive map of any Go repository. https://github.com/peterretief/codemap IEEE Spectrum: AI is forcing teams to pay […]1 条回复mvWrite HTML. Render video. Built for agents1 分GitHub Trending JS/TS🎉 Celebrating！ 🎉 (500+ new stars) 📦 heygen-com / hyperframes ⭐ 74,440 (+934) 🗒 TypeScript Write HTML. Render video. Built for agents.1 条回复stronxyoShow HN: Quarter – A TUI launcher to browse, search and launch your gamesHello panglesd, glad you like it, enjoy. The video was made by me. With real recordings, capturing the screen running Quarter in Windows Terminal at 4K, so the zoom looks nice when downscaled to 1080p. Then edited with HyperFrames where videos are written as HTML, then rendered to MP4. Claude Code…GitHub Trending JS/TS🎉 Celebrating！ 🎉 (500+ new stars) 📦 heygen-com / hyperframes ⭐ 71,122 (+777) 🗒 TypeScript Write HTML. Render video. Built for agents.1 条回复vunderbaCreating an animated manga with GPT Image 2.0 and Claude CodeSo just to be clear, the technical postmortem is very interesting. I’d never heard of hyperframes [1] either, so I’ll have to check that out. But (and again, I know this isn’t the point of the article) the big problem is that its practically a bingo-card of all the standard AI catchphrases. The…GitRanksheygen-com/hyperframes gained 10.1k stars in two weeks, up 17% (now 68.1k). The idea: write HTML, render it as video, with the tool built for agents. #github1 条回复

搜索日期

Mindket 的更多商品

查看 Mindket 的全部商品

Bonsai-27B-GGUF

lmstudio-community · 工具包

面向 LM Studio 的 27B Bonsai 模型 GGUF 转换版，含 3.80 GB 的 Q1_0 语言文件和 0.93 GB 的 BF16 视觉投影器。已测试文本、视觉和并行工具调用。

新上架

DeepSeek-V4.1-Flash-1017 EXL3 2.9 bpw

LibertAIDAI · 工具包

以每权重 2.9 位的 EXL3 量化运行 DeepSeek-V4.1-Flash-1017，这是一份 196 GiB 的副本，适合在自己硬件上部署大模型的人。困惑度与原模型相差不大。

新上架

MusicGen Small

facebook · 工具包

根据文字描述或音频提示生成短音乐片段，是 facebook MusicGen 的 small 检查点。适合想在自己电脑上试用文字生成音乐的开发者和音乐爱好者。

新上架

相似项目

查看开发类的全部商品

REA: Reverse Engineer Anything

morluto · MCP 服务器

精选

morluto 做的 MCP 服务器和 CLI，让你的编程智能体在你自己的电脑上研究二进制文件、桌面和 Android 应用、网站和固件，并为每条发现附上证据。

新上架458k

YouTube AI Motion Graphics

sirioberati · 技能

提供 74 个 HTML 动画讲解画板，用于 YouTube 视频，另附全部提示词和三个 Claude 技能，可把画板同步到你的声音并导出 MP4。

新上架159

ECC（affaan-m 出品）

affaan-m · 技能

Affaan Mustafa 做的插件，包含智能体、技能、命令和钩子。它给 Claude Code、Codex 等编程智能体一套固定流程：先做规划、测试先行、在全新上下文中审查、保存会话记忆，以及安全扫描。

新上架299k