HyperFrames — 从这里开始
HyperFrames 通过 HTML 渲染视频 — 一个合成就是一个 HTML 文件，其 DOM 通过 data-* 属性声明时间控制，动画运行时是可查找的，媒体播放由框架管理。完整的创作规范位于 /hyperframes-core；在编写合成 HTML 之前，请先阅读它。
以下是：能力地图（按需加载的领域技能）和意图路由器（为任意“帮我制作一个视频”的请求选择工作流）。
能力地图 — 领域技能
按需加载的原子级能力 — 并非完整的视频工作流。对于“帮我制作一个视频”的请求，请使用下面的意图路由器。
| 你想要… | 技能 |
|---|---|
创作/编辑 HTML 合成 — data-* 规范、片段、轨道、子合成、变量 | /hyperframes-core |
| 动画 — 原子运动、场景蓝图、过渡、运行时适配器（GSAP / Lottie / Three.js / Anime.js / CSS / WAAPI / TypeGPU） | /hyperframes-animation |
创意指导 — frame.md / design.md、调色板、字体设计、旁白、节拍规划、音频响应 | /hyperframes-creative |
| 媒体 — TTS 配音、背景音乐、转录、背景移除、字幕 | /hyperframes-media |
媒体解析 — 从 HeyGen 目录中查找并固定 BGM、音效、图片、图标到 .media/，并附带清单追踪 | /media-use |
| CLI 开发循环 — 初始化、lint、验证、检查、预览、渲染、发布、诊断 | /hyperframes-cli |
安装注册表块/组件（hyperframes add） | /hyperframes-registry |
意图路由 — 选择工作流
本节仅了解顶层工作流；不加载其内部引用或上述领域技能。
路由前 — 确认输入，而非规范
路由需要知道视频是关于什么的 — 其输入和主题。如果未指定（“制作一个关于我们产品的视频”，没有 URL、产品、主题或素材），在进入任何工作流之前先询问 — 承诺使用某个工作流本身就是路由决策。最多两个问题：
- 输入 — 一个产品（URL / 简介）、一个通用网站、一个 GitHub PR、一个要解释的主题，或一个现有的对话式视频？
规范默认值 — 陈述，而非询问（它们从不改变路由）：画面比例 16:9（仅当指定了垂直平台 — TikTok / Reels / Shorts 时，才使用 9:16）；旁白/字幕 语言 = 用户的语言。所选工作流在其第一步会重新确认自己的具体细节。
工作流速查表
| 工作流 | 适用于 |
|---|---|
/product-launch-video | 营销 / 发布 / 推广一个产品 — 基于其 URL、简介或脚本（即使只提到了网站名称） |
/website-to-video | 将一个通用网站变成视频 — 站点导览、作品集 / 登陆页展示、从网站视觉效果中制作社交片段 |
/faceless-explainer | 从文本解释一个主题 / 概念 — 没有产品、没有 URL；每个视觉都由 LLM 发明 |
/pr-to-video | 一个 GitHub PR / 代码变更 → 更新日志 / 功能展示 / 修复 / 重构讲解器 |
/embedded-captions | 为现有对话式视频添加字幕 / 标题（素材本身不变） |
/talking-head-recut | 包装一个现有对话式视频，添加设计的图形覆盖层 — 下方三分之一、数据标注、动态标题、引用提取 |
/motion-graphics | 一个简短、无旁白、设计驱动的动态图形 — 动态文字、统计/图表亮点、Logo 开场、下方三分之一覆盖层 |
/music-to-video | 一个音乐曲目 → 节拍同步视频 — 歌词视频、幻灯片或动态推广；音乐驱动节奏（可选的用户图片/视频按节拍网格剪辑） |
/slideshow | 一个演示文稿 / 推介报告 / 交互式演示 — 离散幻灯片、分片、分支、热区；输出是一个可导航的演示，而非渲染的视频 |
/general-video | 其他任何内容 — 较长或多场景作品、静态循环 / 海报、自定义合成 |
/remotion-to-hyperframes | 将现有 Remotion (React) 合成移植到 HyperFrames（迁移，而非创作） |
消歧 (仅当容易混淆时):
- 运动优先且无旁白 (大约 10 秒以内，运动本身就是信息) →
/motion-graphics，无论输入是什么。 - 一个 URL 或脚本 — 营销特定产品（即使只提到网站名称）→
/product-launch-video；通用的非产品网站 →/website-to-video；一个 GitHub PR 链接 →/pr-to-video；解释一个概念，没有产品/网站 →/faceless-explainer。确实分不清是产品还是主题，或者是发布还是通用网站 → 问一个问题。 - 现有视频素材 — 纯口语字幕 →
/embedded-captions；设计的覆盖层卡片 →/talking-head-recut。两者都不编辑素材本身（重新定时/调色/取景/排序/音频属于 NLE 编辑 — 非本框架范围）。 - 音乐曲目是输入（一个音频文件，或一个用于提取音频的视频），无旁白 →
/music-to-video— 音乐的节拍/能量驱动节奏。（有旁白作品保持在输入匹配的工作流之上；/motion-graphics用于非音乐驱动的简短无旁白运动。） - 一个演示文稿 / 推介报告 / 交互式演示（离散幻灯片、导航、演示者模式）→
/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（核心 + 每个工作流，跳过选择器）。
用户运行命令后，重新读取工作流的技能并继续。
保持技能最新
HyperFrames 技能有版本控制。npx hyperframes init 检查已安装技能是否与 GitHub 上的最新版本一致，并在任何内容过时或缺失时安装/刷新完整集合 — 因此一个新初始化的项目始终拥有完整、最新的集合（在最新的项目上重新运行 init 是空操作）。检查是一个快速的 GitHub 往返；离线（或限速）时，它会在短暂超时后回退到安装，因此 init 永远不会因网络问题而硬失败。使用 init --skip-skills 完全退出。
如果任务行为异常，或在长时间构建之前，确认已安装的技能是最新的：
- 检查：
npx hyperframes skills check（添加--json以获取机器可读的判断；当任何内容过时或缺失时，退出码非零）。 - 更新：
npx hyperframes skills update— 将完整集合拉取到最新，安装任何尚未存在的（与 init 的安装步骤相同）。
CLI 还会在 render / lint / validate 运行检测到过期技能时显示一行提示。
工作流详情
/product-launch-video
- 输入： 正在营销的一个产品 — (a) 产品 URL（使用无头 Chrome 抓取素材 + 品牌标记），(b) 一个脚本/简介，即使没有链接也列出了产品的网站名称（PLV 解析并抓取它，除非用户选择退出），或 (c) 没有可推导网站/“不要抓取”的脚本（无捕获模式 — 选择一个提供调色板 + 设计系统的样式预设）。提供的脚本可以作为逐字配音或按场景重构 — PLV 会询问。
- 输出： 产品发布/SaaS 推广作为 HyperFrames 合成 → MP4。（最佳长度 30–90 秒）。
- 触发词： “X 的发布视频”、“我们网站的推广”、“在一分钟内解释我的 SaaS”、“将我的脚本变成 60 秒推广”、“纯文本发布视频，不要抓取”。
/website-to-video
- 输入： 要将一个通用网站 / URL 变成视频 — 当目标是做一个网站的视频，而非产品发布时。使用无头 Chrome 捕获实际截图 + 品牌素材。
- 输出： 基于网站自身视觉构建的站点导览 / 作品集 / 登陆页展示 / 社交片段 → MP4。
- 触发词： “将此网站变成视频”、“从 进行站点导览”、“从我们首页制作社交片段”、“我只有一个 URL — 做点什么”。
/faceless-explainer
- 输入： 任意文本 — 一个主题、文章或笔记 — 被解释，没有产品在营销，也没有网站可捕获。（从
/product-launch-video分叉而来；无无头 Chrome。） - 输出： 无面讲解器 → MP4，每个视觉 LLM 按场景发明（排版 / 抽象 / 图表 / 数据可视化）；附带
pin-and-paper预设。（最佳长度 30–90 秒）。 - 触发词： “关于 X 的无面讲解器”、“解释 DNS 如何工作的视频”、“将此文章变成讲解器”、“从我的笔记制作讲解器”。
/pr-to-video
- 输入： 一个 GitHub pull request — 一个 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 秒以内，无旁白。类型：动态排版、统计/数字计数、图表亮点、Logo 开场、下方三分之一/覆盖层，或搜索驱动的页面/推文/标题镜头。
- 输出： 一个简短的动态图形 → MP4 或透明覆盖层（alpha WebM / MOV）用于下方三分之一/标注。
- 触发词： “8 秒 Logo 开场”、“动画化这个统计数字”、“动态排版介绍”、“将此推文变成动态图形”、“一个透明的下方三分之一覆盖层”。
/music-to-video
- 输入： 一个音乐曲目 — 一个音频文件，或一个用于提取音频的视频 — 无旁白且无网站捕获。可选地，用户提供的图片/视频可以融入。曲目被一次性分析成确定性的节拍/能量映射（
audiomap.json），整个视频基于此构建。 - 输出： 一个节拍同步的 HyperFrames 合成 → MP4，其中音乐驱动节奏。排版和模板是基础（完整视频需要零素材）；任何提供的媒体都按相同的节拍网格剪辑（节拍剪切 / ken-burns）。类型 — 歌词视频、幻灯片、动态推广 — 从逐帧选择中涌现；流程从不因此分支。
- 触发词： “为此歌曲制作视频”、“从此曲目制作节拍同步视频”、“歌词视频”、“将这段音乐变成视频”、“音乐可视化器 / 动态推广到此节拍”。
/slideshow
- 输入： 一个演示文稿 / 推介报告 / 交互式演示 需要创作 — 一个