HyperFrames — 从这里开始
HyperFrames 从 HTML 渲染视频 —— 一个合成就是一份 HTML 文件，其 DOM 使用 data-* 属性声明时间线，动画运行时是可调式的，并且媒体播放由框架管理。
此技能是 技术使用指南 —— 它特意不涉及设计。有关动态 / 动画配方，请参阅 /hyperframes-motion。有关设计方向（调色板、字体、帧预设），请参阅 /hyperframes-design。下文包括：HyperFrames 所有主题的 能力图谱、此技能内的 主题指南索引，以及用于选择工作流程的 意图路由器。
能力图谱 — HyperFrames 技能
三个技能，各司其职。此技能是技术使用指南。另外两个技能涵盖设计。
| 你想要… | 技能 |
|---|---|
| 如何使用 HyperFrames —— 合成协议、CLI 开发循环、安装注册表块 / 组件（此技能） | /hyperframes |
| 动态 / 动画 —— 原子动作规则、场景蓝图、转场、运行时适配器（GSAP / Lottie / Three.js） | /hyperframes-motion |
| 设计 —— 调色板、字体、帧预设、节拍规划、品牌 / 风格决策（无动画配方） | /hyperframes-design |
主题指南 — 此技能包含的内容
技术使用指南分为三个子主题。每个子主题都有自己的 SKILL.md 和 references/ 文件夹：
| 子主题 | 路径 | 阅读目的 |
|---|---|---|
| 合成核心 | core/SKILL.md | 合成协议 —— data-* 属性、片段、轨道、子合成、变量、确定性规则 |
| CLI 开发循环 | cli/SKILL.md | npx hyperframes init / lint / validate / inspect / preview / render + AWS Lambda 云渲染 |
| 注册表添加 | registry/SKILL.md | hyperframes add <block-or-component> —— 安装位置、接线块、接线组件、贡献新项目 |
每个主题的详细信息位于各子主题的 references/ 文件夹中。有关动画运行时的具体信息（GSAP API、Lottie、Three.js 等），请参阅 /hyperframes-motion → adapters/<runtime>.md。
意图路由 — 选择工作流程
此部分仅了解顶层工作流程；它不会加载其内部引用或上面的主题指南。
路由前 —— 确认输入，而非规格
路由需要知道 视频是关于什么的 —— 其输入和主题。如果未指定（“制作关于我们产品的视频”且没有 URL、产品、话题或素材），请在进入任何工作流程前询问 —— 承诺一个工作流程本身就是路由决策。最多问两个问题：
- 输入 —— 一个产品（URL / 简报）、一个普通网站、一个 GitHub PR、一个要解释的话题，或一个现有的对口型视频？
规格默认值 —— 声明，不要问（它们从不改变路由）：宽高比 16:9（仅当命名的垂直目的地 —— TikTok / Reels / Shorts 时使用 9:16）；字幕 语言 = 用户的语言。所选工作流程将在其第一步重新确认其自己的具体细节。
工作流程速查表
| 工作流程 | 用途 |
|---|---|
/faceless-explainer | 从文本解释一个话题 / 概念 —— 无产品、无 URL；每个画面均由 LLM 发明 |
/pr-to-video | 一个 GitHub PR / 代码变更 → 变更日志 / 功能揭示 / 修复 / 重构解说 |
/embedded-captions | 为现有 对口型视频 添加 字幕 / 副标题（视频素材保持不变） |
/talking-head-recut | 为现有 对口型视频 包装 设计好的图形叠加 —— 下方三分之一、数据标注、动态标题、引用语 |
/motion-graphics | 一个简短的、以设计为主导的动态图形 —— 动态排版、数据 / 图表冲击、徽标星爆、下方三分之一叠加 |
/slideshow | 一个演示文稿 / 投融资文档 / 交互式投融资文档 —— 离散幻灯片、片段、分支、热点；输出是可导航的投融资文档，而非渲染视频 |
/general-video | 其他任何内容 —— 较长或多场景作品、静态循环 / 海报、自定义合成 |
消歧（仅在易混淆时）：
- 动态优先（约 10 秒以内，动态本身就是信息）→
/motion-graphics，不论输入为何。 - URL 或脚本 —— GitHub PR 链接 →
/pr-to-video；解释概念且无产品 / 网站 →/faceless-explainer。确实不清楚的输入 → 问一个问题。 - 现有素材 —— 纯口语字幕 →
/embedded-captions；设计好的叠加卡片 →/talking-head-recut。两者均不编辑素材本身（重新计时 / 重新着色 / 重新构图 / 重新排序属于非线性编辑 —— 不在范围之内）。 - 演示文稿 / 投融资文档 / 交互式投融资文档（离散幻灯片、导航、演示者模式）→
/slideshow—— 输出是可导航的投融资文档，而非渲染视频。明确的“幻灯片”请求直接进入；相邻触发（“投融资文档 / 幻灯片 / 演示文稿 / 转换此页面”）会让/slideshow在创作前确认是否为幻灯片，如果不是则切换到适当的非幻灯片工作流程。 - 时长是指导，而非限制 —— 意图选择工作流程；仅当作品明显超过约 3 分钟，或是静态 / 循环 / 自定义格式时，才进入
/general-video。
如果匹配的工作流程未安装
一旦你选择了工作流程，请检查它是否实际可用。如果匹配的工作流程技能未安装，不要退回到猜测 —— 告诉用户先安装它：
- 仅此工作流程：
npx skills add heygen-com/hyperframes --skill <workflow-name>（例如--skill pr-to-video—— 裸名称，无前导/）。 - 一次安装所有工作流程：
npx skills add heygen-com/hyperframes --all（核心 + 每个工作流程，跳过选择器）。
用户运行命令后，重新读取该工作流程的技能并继续。
工作流程详情
/faceless-explainer
- 输入： 任意文本 —— 一个话题、文章或笔记 —— 被解释，无产品营销或需捕获的网站。
- 输出： 无脸解说 → MP4，每个画面均根据场景 LLM 发明（排版 / 抽象 / 图表 / 数据可视化）；附带
pin-and-paper预设。（最佳时长 30–90 秒）。 - 触发词： “关于 X 的无脸解说”、“解释 DNS 如何工作成视频”、“把这篇文章变成解说”、“从我的笔记生成解说”。
/pr-to-video
- 输入： 一个 GitHub 拉取请求 —— PR URL、
owner/repo#N引用或“此 PR” —— 通过ghCLI 读取（不是抓取的网站）。 - 输出： 代码变更解说（变更日志 / 功能揭示 / 修复 / 重构） → MP4 —— diff 高亮、之前/之后、文件树 + 影响场景。≤（最佳时长 30–90 秒）。
- 触发词： “为这个 PR 制作视频”、“把 PR #1187 变成变更日志视频”、“从 github.com/org/repo/pull/123 制作发布说明视频”。
/embedded-captions
- 输入： 一段现有的对口型视频（MP4）进行字幕添加 —— 实际素材，非 URL 或简报。本地转录（Whisper，无需 API 密钥）并蒙版处理（RVM），以便主体可以遮挡字幕。
- 输出： 相同的素材保持不变，带一个字幕层 —— 标准（逐字下方三分之一轨道 + 主体后嵌入的高潮）或 电影（每个字幕合成在主体后）。任何时长。
- 触发词： “为此视频添加字幕 / 副标题”、“主体后的字幕”、“我的视频的电影字幕”。
/talking-head-recut
- 输入： 一段现有的对口型 / 采访 / 播客视频（MP4）进行包装，带屏幕图形 —— 实际素材。本地转录（Whisper）。视频片段在下方完整播放，保持不变。
- 输出： 相同的素材，带定时图形叠加卡片 —— 动态标题、下方三分之一、数据标注、引用语、侧边面板、画中画 —— 与转录同步。任何时长。
- 触发词： “包装此视频”、“为我的演讲添加图形叠加 / 下方三分之一 / 数据标注”、“将此采访变成图形包装版本”。
/motion-graphics
- 输入： 一个简短的、以设计为主导的动态图形，其中动态本身就是信息 —— 通常约 10 秒以内。类型：动态排版、统计 / 数字计数、图表冲击、徽标星爆、下方三分之一 / 叠加层，或搜索驱动的页面 / 推文 / 标题截图。
- 输出： 一个简短的动态图形 → MP4 或透明叠加层（alpha WebM / MOV）用于下方三分之一 / 标注。
- 触发词： “一个 8 秒的徽标星爆”、“动画化此统计数据”、“一个动态排版片头”、“将此推文变成动态图形”、“一个透明的下方三分之一叠加层”。
/slideshow
- 输入： 一个演示文稿 / 投融资文档 / 交互式投融资文档 进行创作 —— 一个简报、一个大纲或一个要转换为幻灯片的现有页面。不是渲染视频的请求；如果意图不明确，该技能会在创作前确认“您是否希望将其作为 HyperFrames 幻灯片？”
- 输出： 一个可运行的 HyperFrames 合成 + 一个 JSON 专有格式，播放器的
SlideshowController会读取它，将 GSAP 时间线变成可导航的投融资文档 —— 离散幻灯片、片段揭示、分支序列、热点导航、演示者模式和演讲者备注。交付件是投融资文档，而非 MP4。 - 触发词： “制作投融资文档 / 演示文稿 / 幻灯片投融资文档”、“一个交互式投融资文档”、“将此页面转换为幻灯片”、“带演示者模式的幻灯片”。
/general-video
- 输入： 上述未涵盖的任何内容 —— 一个创意简报、一个要动画化的元素、对正在构建的合成所做的编辑。输入和时长无关。
- 输出： 一个 HyperFrames 合成（任意时长 / 格式），通过原始流程：设计系统 → 提示扩展 → 计划 → 动画前布局 → 构建（委托给
hyperframes-* 技能）→ 验证。 - 触发词： “制作一个标题卡”、“动画化这个”、“一个较长的品牌 / 集锦样片”、“一个多场景合成”、“一个静态循环 / 海报”，任何不适合上述行且包含“制作视频”的请求。