从素材与时间轴，到预览、成片和可继续编辑的源码

HyperFrames

把 HTML 工程做成可检查的视频

用 HTML、CSS 与可跳转动画描述视频；7 个配套技能指导助手创建工程、使用素材和组件、检查画面并调用 CLI 导出。

作者 heygen-com

安装与上手查看 GitHub
项目演示

项目演示

查看示例出处

作者列出的使用环境

  • Claude Code
  • Codex
  • Cursor
  • Gemini CLI
  • GitHub Copilot
  • OpenCode
GitHub Star
75,550
版本
0.8.220
资料核对
分类
设计与视频工程开发

先完成一段 10 秒、无声的产品开场

准备一张真实截图、一份标志和一句已确认的文案。先把工程、关键帧、Studio 预览与最终 MP4 连起来，再增加配音、动态数据或外部服务。

选一个任务，开始使用

先在系统终端执行下面三行，完成市场登记、插件安装和清单检查；随后进入工作目录中的 Claude Code 会话，发送以 /hyperframes:hyperframes 开头的任务。斜杠入口不是系统终端命令。

按手头材料选择任务

输入一张截图、标志、品牌色与短文案。得到无声的横版短片和可继续修改的场景工程。

  1. 安装 HyperFrames 插件

    在已装 Claude Code 的系统终端执行。第一行只添加市场，第二行才安装插件，第三行检查清单；默认用户范围。所核插件与 CLI 为 0.8.220，命令取得运行时市场提供的版本，加载后核对实际版本。

    claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes
claude plugin details hyperframes
    查看作者安装说明

    确认插件入口，再使用同一版本的 CLI

    安装后开启新会话，或在现有会话运行 /reload-plugins。确认能看到 /hyperframes:hyperframes，并让助手核对 hyperframes、hyperframes-cli、hyperframes-registry、media-use 等技能来自同一插件目录。后续 CLI 命令应在视频工作目录中，通过 node "<PLUGIN_ROOT>/skills/hyperframes/scripts/plugin-cli.mjs" 调用；<PLUGIN_ROOT> 由助手从已加载技能定位，不要照抄占位符。启动器会按插件清单选择 CLI，第一次可能通过 npm 下载。先读 doctor --json 的逐项结果；命令成功退出不代表环境全好，缺少可选配音、音乐或 Docker 也不必为本页任务全部安装。

    查看插件启动器与版本约定

  2. 把这段话发给 AI

    以下提示词由本站根据固定提交编写，尚未制作或渲染这些示例。替换方括号中的材料；前三条明确要求本地 MP4，第四条先诊断、再由你选择是否修复。

    /hyperframes:hyperframes 在 [工作目录] 新建 product-intro，制作一段 10 秒、1920×1080、30 fps、无声的产品开场，并交付本地 MP4。我提供 [真实截图路径]、[标志路径]、[已获许可的字体文件]、[品牌色]，片中文字为 [已确认的产品名与一句短文案]。这些材料是本次内容依据。 先读取已加载插件的主技能及 launch、format、review 参考，定位插件根目录。所有 CLI 操作通过 node "<PLUGIN_ROOT>/skills/hyperframes/scripts/plugin-cli.mjs" 执行，不混用独立技能更新。检查 Node、FFmpeg、FFprobe、可用浏览器与剩余空间；缺少必需条件时报告具体缺口。 在工作目录运行启动器，参数为 init product-intro --non-interactive；目标 product-intro 应不存在或为空，然后进入这个新工程。将本地素材和字体放进 assets/。先核对截图展示了什么功能，使用真实画面做揭示或局部放大，不编造产品操作、效果或数据；如需要目录组件，先按视觉目的用英文 catalog 查询，再阅读并接入合适源码。 给出并实现简短节奏，例如 0–3 秒建立产品名与截图、3–7.5 秒引导看一个真实细节、7.5–10 秒稳定显示一句收尾。建立 index.html 与独立场景，声明根时长和画布，场景时间轴可向前和向后跳转；收尾在 10 秒前到位，不等到片段结束瞬间才显示。 完成后运行 check --snapshots --json，读取实际结果和 browserSkipped，再用 snapshot --review 检查画面、切换和手机宽度预览。用 preview --background 返回实际 Studio 工程链接；检查首帧、两个场景切换及末帧的阅读时间和中文字体。 解决阻断问题后，用 render --format mp4 --fps 30 --quality delivery --strict --no-best-effort 导出，使用默认带时间的文件名并记录实际路径。核对文件非空、10 秒/1920×1080/30 fps 与 300 帧，打开真实 MP4 检查关键时刻；不能播放或检查的部分如实列出。交付工程、视频与 REVIEW.md，写清哪些是测量、哪些看过。只做本地交付，不发布、发送 feedback 或使用外部生成服务。

  3. 检查你拿到的结果

    • 可编辑的入口 HTML、场景、截图与字体，以及一个记录了实际路径的 MP4。
    • 检查 10 秒 × 30 fps = 300 帧；最后一帧约在 9.967 秒，收尾文字应在此前已经落稳。
    • 核对截图没有被改造成不存在的功能；关键帧与真实视频都能读清标题，保留未完成的检查。
    阅读本任务的作者说明
进一步了解这个 Skill

HyperFrames 是 HeyGen 开源的视频框架，也提供一套给编程助手使用的技能。视频由 HTML、CSS、媒体和可跳转的动画组成，不要求 React。CLI 让 Chrome 按时间点取得画面，再由 FFmpeg 编码；Studio 则提供浏览器里的预览与编辑界面。安装技能并不等于已经具备浏览器、编码器和素材。

所核版本包含 7 个公开技能。主入口 hyperframes 负责制作约定与工作顺序，hyperframes-cli 解释命令，hyperframes-registry 查找并接入可编辑的组件，media-use 处理素材与声音。另有 Figma 导入、可导航幻灯片和既有视频工程迁移三个专门入口。Claude Code 插件打包全部 7 个；独立技能安装可只取前四个。

它适合需要反复改文案、换数据、调整某个时刻的产品短片、动态图表和字幕视频。关键交付不仅是一个 MP4，还包括能重开、定位和继续修改的工程。按时间取帧让问题更容易复现，但素材、字体、浏览器和运行版本也会影响画面，不能把“可重复渲染”理解为换到任意环境都会得到完全相同的像素。

来源与核验

资料核对

依据固定提交、发布元数据与实际命令源码整理；7 个技能入口及本文涉及参考已阅读全文，较大的 CLI 实现只核对了所用部分。未运行视频任务。

作者说明技能原文插件安装与更新HTML 与时间轴约定检查与成片复核

如果已有 React 视频工程

Remotion 的技能适合继续维护 React 组成的视频；迁移到 HyperFrames 前，先决定需要保留到哪一层可编辑性。

Remotion 官方技能12 个官方入口覆盖建工程、动画、字幕、地图和导出，把 React 视频做成可验收的工程。Taste Skill让 AI 从品牌材料或业务数据出发，确定设计方向、实现网页，并用浏览器截图检查官网与应用界面。Stitch Skills三个插件串联本地设计文档、Stitch 生成与导入、前端转换。先按输入选技能，再准备该路径需要的服务和工具。Emil16 条设计工程技能，分别处理动效实现、审查与计划、原型比较、极端数据测试，以及移动端和组件库问题。