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、SFX、图片、图标到 .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 | 推广产品 (SaaS、应用、公司/产品网站) — 从 URL、简介或脚本 → 宣传片。任何商业 URL 的默认选项，即使只是提及了网站名。 |
/website-to-video | 展示网站本身 — 基于网站本身截图的导览/展示。适用于非商业网站（作品集、博客、文档、个人、活动），或用户只想要导览而非宣传片。 |
/faceless-explainer | 解释一个主题/概念 — 基于文本，无产品，无 URL；所有视觉内容由 LLM 创造 |
/pr-to-video | GitHub PR / 代码变更 → 变更日志/功能展示/Bug 修复/重构解说 |
/embedded-captions | 为现有对话式视频添加字幕/说明文字（不修改原视频画面） |
/talking-head-recut | 为现有对话式视频包装设计好的图形叠加层 — 下方三分之一栏、数据标注、动态标题、引用高亮 |
/motion-graphics | 一个简短的、不配音、以设计为主导的动态图形 — 动态文字、数据/图表冲击、Logo 片头、下方三分之一叠加层 |
/music-to-video | 音乐轨道 → 节拍同步视频 — 歌词视频、幻灯片或动态宣传片；音乐驱动节奏（可选的用户图片/视频按节拍网格剪辑） |
/slideshow | 演示文稿/路演/交互式演示 — 离散幻灯片、碎片化内容、分支、热点；输出为可导航的展示，而非渲染的视频 |
/general-video | 其他任何情况 — 较长或多场景作品、静态循环/海报、自定义合成 |
/remotion-to-hyperframes | 将现有的 Remotion (React) 合成迁移到 HyperFrames（迁移，非新建） |
歧义消除（仅针对易混淆的情况）：
- 运动优先且无旁白（约 10 秒以下，运动本身就是信息）→
/motion-graphics，不论输入为何。 - 一个 URL 或脚本 — 问一件事：这个网站是在卖产品吗？ 是（SaaS / 应用 / 产品 / 公司网站）→
/product-launch-video— 宣传片，任何商业 URL 的默认选项，即使只是提及了网站名。否，或用户只想按原样展示网站（作品集/博客/文档/个人/活动）→/website-to-video— 导览。GitHub PR 链接 →/pr-to-video；没有产品或网站的概念 →/faceless-explainer。 - 现有视频素材 — 纯文本字幕 →
/embedded-captions；设计好的叠加卡片 →/talking-head-recut。两者都不会编辑原始素材本身（重新计时/重新着色/重新构图/重新排序/音频属于非线性编辑——超出了范围）。 - 输入是一个音乐轨道（音频文件，或提取音频的视频）并且没有旁白 →
/music-to-video— 音乐的节拍/能量驱动节奏。（有旁白的作品仍使用上面输入匹配的工作流；/motion-graphics用于简短、无旁白、非音乐驱动的运动图形。） - 演示文稿 / 路演 / 交互式演示（离散幻灯片、导航、演示者模式）→
/slideshow— 输出是可导航的展示，而非渲染的视频。明确的“幻灯片”请求直接进入；相近的触发词（“deck / slides / presentation / convert this page”）会使/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 进行脚手架搭建，因此启动新项目时始终会运行此检查，并在技能过期时从 GitHub 拉取我们的最新技能。--skip-skills 标志目前已被禁用（这是在 skills.sh 注册表追赶进度时的临时措施）：传递该标志不再跳过检查，因此每次 init 都会检查 GitHub。CI/测试通过 HYPERFRAMES_SKIP_SKILLS=1 环境变量选择退出。
如果任务行为异常，或在进行长时间构建之前，请确认已安装的技能是最新的：
- 检查：
npx hyperframes skills check（添加--json可获取机器可读的结论；在任何技能过时或缺失时以非零退出码退出）。 - 更新：
npx hyperframes skills update— 拉取完整技能集至最新版本，安装任何尚未存在的技能（与 init 的安装步骤相同）。
当 render / lint / validate 运行时检测到过时的技能时，CLI 还会显示一行提醒。
工作流详情
/product-launch-video
- 输入： 一个正在被营销的产品 — (a) 一个产品 URL（使用无头 Chrome 抓取资源和品牌标记）、(b) 一个提到产品网站（即使没有链接）的脚本/简介（PLV 会解析并抓取该网站，除非用户选择退出）、或 (c) 一个无法推导出网站或“不要抓取”的脚本（无捕获模式——选择一个提供调色板和设计系统的样式预设）。提供的脚本可以是逐字画外音，也可以是按场景重构的——PLV 会询问。
- 输出： 一个产品发布 / SaaS 宣传片，作为 HyperFrames 合成物 → MP4（最佳时长 30–90 秒）——主题是产品的价值，而非网站的导览。如需纯粹的网站导览，请使用
/website-to-video。 - 触发词： “为 X 制作启动视频”、“我们网站的宣传片”、“一分钟解释我的 SaaS”、“将我的脚本变成 60 秒宣传片”、“纯文本启动视频，不要抓取”。
/website-to-video
- 输入： 一个网站/URL，其目标是展示网站本身，而非推销产品。最适合非商业网站（作品集、博客、文档、个人、活动），或者用户明确希望按原样导览网站时。使用无头 Chrome 捕获真实截图和品牌素材。