HyperFrames 官网入口在哪：下载页、文档与 Agent 安装

HyperFrames 是把 HTML、CSS 和动画渲染成 MP4 的开源框架，本指南帮助读者找到官网、下载 Studio、定位文档，并给 AI 编程工具安装技能。

截至 2026-10-25 抓取时，HyperFrames 的 Studio 安装页已明确区分 Mac、Windows 和 Linux 下载入口，仓库还同时提供 Claude Code、Codex、Cursor 等工具的接入方式。现在值得动手确认入口，是因为官网、桌面端、代码仓库和 Agent 技能并不是同一个页面；下文只把官方明确写出的内容与实际路径放在一起，不把社区整理页当作官方文档。

先认准三个官方入口

搜索“hyperframes 官网入口”时，最容易混淆的是产品官网、桌面版下载页和 GitHub 代码仓库。

要找的内容	准确入口	页面里能看到什么
产品官网	https://hyperframes.heygen.com	HyperFrames 的产品入口
Studio 下载页	https://hyperframes.heygen.com/studio-app/index	Mac、Windows、Linux 下载入口及登录说明
官方代码仓库	https://github.com/heygen-com/hyperframes	README、安装命令、文档目录、示例和下载链接
GitHub 使用说明	https://docs.github.com/en	GitHub 本身的文档与操作帮助

其中，桌面应用应从 Studio 安装页下载，而不是只凭仓库首页判断版本。官方安装页写明：下载 Mac、Windows 或 Linux 版本后，首次打开需要使用 HeyGen 账号登录。

仓库主页的 About 区域也列出了 hyperframes.heygen.com，但这里更像统一入口。真正的安装操作仍要进入对应页面：桌面版走 Studio 安装页，开发者看仓库 README，AI 编程工具则按仓库里的插件或技能命令安装。

按用途选择安装方式

HyperFrames 的关键区别不是“功能不同”，而是你准备从哪里使用它。

使用 AI 编程工具

Claude Code 用户先添加官方插件市场，再安装 HyperFrames 插件：

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

安装完成后，在 Claude Code 终端界面输入：

/plugin

然后依次选择 Marketplaces → hyperframes → Enable auto-update。官方说明显示，此后可以使用 /hyperframes:hyperframes。

如果使用 OpenCode，或者不希望启动交互式技能选择器，可执行：

npx skills add heygen-com/hyperframes

对于代理程序或无人值守任务，官方更推荐：

npx hyperframes skills update

只使用桌面版

进入官方 Studio 安装页 hyperframes.heygen.com/studio-app，按系统对号入座（README 下载区列的三个入口）：

• macOS：取 Mac 版安装包，打开后用 HeyGen 账号完成首次登录；
• Windows：取 Windows 版安装包，同样以 HeyGen 账号登录首启；
• Linux：官方提供 .deb 包（README 原文 Linux (.deb)），按你的发行版装好后登录。

下载完成后打开应用，并使用 HeyGen 账号完成首次登录——登录界面出现即安装成功，这一步与 AI 编程工具的技能安装互不替代（见下）。

这里需要注意：桌面版下载与 AI 编程工具的技能安装是两条不同路径。只下载 Studio，不会自动让 Claude Code、Codex 或 Cursor 获得 HyperFrames 技能。

只查看代码和文档

进入官方仓库：

https://github.com/heygen-com/hyperframes

仓库首页的 README 提供快速开始和不同 Agent 的安装方式；文件列表中的 docs 是文档目录，examples 是示例目录，releases 用于查看发布内容。需要看完整命令时，不要只阅读首页摘要，继续向下滚动 README。

文档和示例具体放在哪里

官方仓库首页已经给出可点击的 Docs、Quickstart、Showcase、Playground 和 Catalog 入口。直接在 GitHub 文件区操作时，可以按下面的路径定位：

1. 打开官方仓库 heygen-com/hyperframes。
2. 在文件列表中进入 docs，查看概念、配置和命令说明。
3. 进入 examples，选择可运行的 HTML 视频示例。
4. 打开根目录的 README.md，按 Quick Start 选择 CLI、Agent 或 Studio 路径。
5. 查看根目录 package.json、bun.lock 和 .env.example，确认项目使用的包管理方式、依赖与环境变量模板。

仓库还包含 AGENTS.md、CLAUDE.md、.claude-plugin、.codex-plugin 和 .cursor-plugin。这些文件分别面向仓库维护约定或不同 Agent 的插件集成，不等同于面向普通用户的入门文档。第一次使用先看 README.md 和 docs，需要修改工具集成时再看相应目录。

最容易卡住的三个地方

GitHub 登录页加载异常

官方 GitHub 登录页会显示原话：

Uh oh! There was an error while loading. Please reload this page .

遇到这条提示时，先重新加载当前登录页，再从官方仓库地址重新进入。若登录后需要返回项目，可使用 https://github.com/login?return_to=https%3A%2F%2Fgithub.com%2F%2Fheygen-com%2Fhyperframes 。如果尚未拥有 GitHub 账号，则进入官方注册页完成账号创建：

（需要新账号时，从 GitHub 登录页 进入注册即可——原注册直达链带转义参数、易被风控拦，按合规闸换稳定入口）

技能安装后版本对不上

官方 README 提醒：npx skills add 解析的是 skills.sh 注册表内容，可能比仓库 main 分支滞后数小时；npx hyperframes skills update 则安装与当前 CLI 版本对应发布标签的技能。

因此，需要让技能与 CLI 保持一致时，执行：

npx hyperframes skills update

不要只反复执行添加命令；关键是让已安装技能更新到与 CLI 版本匹配的发布标签。

技能选择器看起来是空的

运行 npx skills add heygen-com/hyperframes 后，选择器可能没有预选项目。官方说明指出，Core Skills 分组就是基础安装范围；/slideshow、/remotion-to-hyperframes、/reverse-any-video、/style-sampling 和 /figma 等技能可按需安装。

如果需要安装全部已发布技能，官方命令必须带仓库参数（此前漏写）：

npx skills add heygen-com/hyperframes --all

（官方说明：这条会跳过选择器、安装全部 9 个已发布技能；只装单个用 npx skills add heygen-com/hyperframes --skill <name>，名字不带斜杠。仓库内部的六个技能默认不在此列。）

仓库内部的六个技能默认不会全部公开安装；这是“只装核心技能”与“安装全部发布技能”之间的实际区别。

下载后怎样确认已经成功

命令行安装后，按下面这条可直接执行的验证链走（官方 README 的最小示例，前置要求 Node.js 22+ 与 FFmpeg）：

1. 先更新技能并确认命令正常退出、无报错：

   npx hyperframes skills update

2. 在所用 Agent 里确认入口：Claude Code 应能执行 /hyperframes:hyperframes，其他工具应能识别已添加的 HyperFrames 技能；
3. 跑官方最小示例路径（README “Manually with the CLI” 原文顺序）：

   npx hyperframes init my-video
   cd my-video
   npx hyperframes preview   # 浏览器实时预览
   npx hyperframes render    # 渲染出 MP4

成功的可观察标志：render 结束后 my-video 目录里出现 MP4 文件——这比“命令没报错”硬得多。若要确认官方资源是否已更新，重新打开官方仓库首页对照 main 分支与发布标签，而不是只看下载页。

桌面版的成功标志更直观：应用能够打开，并出现使用 HeyGen 账号登录的界面。完成登录后，按上面第 3 步的官方最小示例路径跑通一次即可。

官方入口与延伸阅读

本文涉及的官方页面如下：

• HyperFrames 官方产品入口
• Studio 应用安装页
• HyperFrames 官方 GitHub 仓库
• GitHub 官方文档

实际选择可以压缩成一句话：需要图形化桌面应用，就从 Studio 安装页下载；需要在 Claude Code、Codex、Cursor 或其他 Agent 中生成视频，就从官方仓库选择对应安装命令；需要理解参数和示例，再进入仓库的 docs 与 examples。这三条路径指向同一套 HyperFrames 工具，但不会互相替代。

参考来源

• Get the HyperFrames Studio app – HyperFrames
• Install the Studio app – HyperFrames