floatboat
打开导航菜单

HyperFrames Skill by HeyGen

使用 HeyGen 的 HyperFrames Skill，配合 CLI、素材注册表与媒体指引创建和编辑 HTML 视频。先安装核心指令集合，再围绕具体需求组织场景，通过命令检查、真实画面和预览核对结果，最后按交付要求渲染并验证文件。

安装与快速上手

选择你使用的 Agent，查看对应的安装或使用方式。在 Floatboat 中，可复制请求让 Agent 读取原始说明；其他选项会显示该 Skill 的安装命令或发布者提供的原生步骤。

选择 Agent

在 Floatboat 中开始

复制请求，粘贴到 Floatboat 对话

请阅读 https://github.com/heygen-com/hyperframes/blob/main/skills/hyperframes/SKILL.md 中的 HyperFrames Skill 原始说明，介绍它的用途、所需工具和安装方式，再协助我使用。

由 Agent 读取原始说明，再确认当前环境的使用方式。

下载 Floatboat ↗

试试这样提问

使用 HyperFrames Skill，将这些产品截图制作成 15 秒演示。保留现有品牌素材，先展示预览；采用可选媒体服务前说明所需条件。

关于 HyperFrames Skill

HyperFrames Skill 指导 Agent 制作和编辑 HTML 视频项目，HyperFrames CLI 则执行初始化、检查、预览与渲染。常规流程结合四项核心指令：hyperframes 负责合成，hyperframes-cli 负责工具操作，hyperframes-registry 负责复用视觉部件，media-use 负责媒体任务。应一并安装这套核心集合，保留跨 Skill 调用与相对参考路径。本指南将这些职责串成一条制作流程；软件及渲染依赖仍需另行准备。使用时明确题材、素材、时长和输出格式，检查真实场景画面与预览，再在需要交付文件时导出，并核对最终结果。

HyperFrames Skill 的使用场景

探索适合结合可编辑 HTML 场景与工具流程完成的视频任务：制作产品演示、调整已有场景，或准备可重复生成的版本。通过核心 Skills 连接合成决策、CLI 检查、预览与最终交付，明确每一步需要核对的内容。

将产品界面制作成视频

使用真实截图与品牌素材，复用合适的视觉部件，在请求导出前通过预览检查场景顺序。

修改并检查已有视频

先检查项目信息与时间轴，再修改指定场景，结合 CLI 发现与真实画面快照核对影响。

交付可重复生成的视频版本

通过合成变量替换标题或内容，检查代表版本，并在交付前核对请求导出的文件。

如何使用 HyperFrames Skill

先安装四项核心 Skills，并准备项目工具环境，再开始制作或编辑视频。向 Agent 提供具体需求，迭代时结合对应 CLI 检查、画面快照和预览确认结果；需要文件交付时再渲染，并检查导出内容。

  1. 01

    准备核心集合与需求

    一并安装四项核心 Skills，并准备 CLI 环境。提供真实题材、原始素材、时长与输出格式，或指定已有项目。

  2. 02

    制作、检查与预览

    已有项目先用 info 与 timeline --json 检查。按合成、注册表与媒体指引制作，运行 npx hyperframes check --json，查看 snapshot 画面与 preview 预览，并修正发现的问题。

  3. 03

    导出并核对文件

    需求要求文件或用户确认导出后，使用 npx hyperframes render。确认文件可打开、时长正确，并将画面与声音同已审阅预览核对。

探索更多 Agent Skills

查看其他 Skill 指南，并在使用前核对原始来源。

HyperFrames Skill 常见问题

HyperFrames Skill 和 HyperFrames 应用是同一个东西吗？
不是。Skill 指导 Agent，软件提供合成预览、时间轴工具与渲染；安装指令不等于准备好全部工具依赖。
它使用什么类型的项目？
原始流程使用 HTML 根合成，配合场景、素材、变量与可定位时间轴；修改前需要检查已有项目结构。
为什么要一起安装四项核心 Skills？
合成、CLI、注册表和媒体指令会互相引用，CLI Skill 还会读取 hyperframes 目录中的参考文件。只安装一项可能缺少预期流程或相对路径文件。
安装这个 Skill 会同时安装 HyperFrames CLI 吗？
安装的是操作指令；CLI 和渲染环境仍需按项目支持的方式准备。
本地渲染需要什么环境？
CLI 来源列出 Node.js 22+、FFmpeg，以及适合的浏览器环境；托管渲染属于另一条路径，有独立设置与服务要求。
每个视频都需要数字人或配音吗？
不需要。媒体由需求决定；原始说明区分用户要求与可选添加，并通过关联流程处理媒体。
安装 Skill 是否包含可选 HeyGen 服务？
不包含。媒体生成或托管功能可能需要账户、套餐用量或其他条件，选择相关路径前应分别核对。
所有命令都必须用 npx hyperframes 吗？
原文默认使用 npx hyperframes；项目提供包装命令时应采用项目方式。选择参数前要读取相关参考。
Agent 应在什么时候渲染文件？
审阅使用预览，用户要求文件交付时再渲染。检查通过本身并不表示用户希望立即导出。
检查通过可以替代观看视频吗？
不能。需要查看真实场景画面、转场与预览，也要打开最终文件核对时间、声音和内容。
可以使用云端渲染吗？
来源在独立参考中描述托管与自建云端路径，需要分别确认设置、账户访问和费用。
导出后应检查什么？
确认文件存在且非空，对比合成时长，并将解码画面和声音与已审阅预览核对。