七个步骤
每个步骤都会产生一个工件，为下一步提供支持：项目布局
管道运行后的典型项目目录：capture/ 中，因此它们与构建输出完全分离。下游的所有内容都位于项目根目录中。
第 1 步：捕获
输出：capture/
当视频基于现有来源（网站、品牌网站、竞争对手参考）时，请从捕获开始。 Hyperframes 为网站提供了内置捕获命令：
capture/ 的步骤，因此后续步骤可以引用路径而不是内联内容。
门： 您可以用一两句话描述源的视觉标识，并命名其顶级颜色、字体和突出资产。
第二步：设计
输出： 项目根目录中的DESIGN.md
DESIGN.md 是品牌备忘单。它对视觉标识进行实际编码，因此每个下游决策都可以引用确切的颜色、字体和组件，而不是发明它们。这是一份参考文件，而不是创意计划。创造性的工作发生在故事板中。
典型的 DESIGN.md 有六个部分：
DESIGN.md也是开放设计和克劳德设计的输入格式；两者都会生成一个 DESIGN.md ，您可以将其放入 Hyperframes 项目中。
门： DESIGN.md 存在，所有六个部分均由实际捕获的数据填充（或为新建项目故意选择）。
第 3 步：脚本
输出： 项目根目录中的SCRIPT.md
SCRIPT.md 是叙述的主干。场景持续时间来自旁白，而不是猜测，因此在故事板和时间节拍之前写好剧本。
典型的结构：挂钩（引起注意的一句话），故事（产品或主题是什么），证据（数字、组件、客户），CTA（一项明确的行动）。参考 capture/extracted/visible-text.txt 中的真实功能、真实统计数据和真实组件。不要发明来源不支持的主张。
对于没有旁白的视频（品牌卷轴、音乐驱动的预告片），SCRIPT.md 变成了按节拍的复制计划：屏幕上的文本和标题，以及时间说明。
Gate: SCRIPT.md 存在于项目根目录中。
第四步：故事板
输出： 项目根目录中的STORYBOARD.md
STORYBOARD.md 告诉工程师（人类或代理）具体要为每个节拍构建什么：情绪、相机、动画、过渡、资产、深度层、音效。这是确定创意选择的地方。
STORYBOARD.md 中的每个节拍通常涵盖：
故事板通常以全局方向块开始：格式、画外音方向、风格基础以及适用于每个节拍的护栏。
Gate：
STORYBOARD.md 存在，具有逐节拍方向和命名每个使用的文件的资产审核。
第 5 步：VO 和计时
输出：narration.wav（或 .mp3）、narration.txt、transcript.json
生成 TTS 旁白，然后将其转录为单词级时间戳。这些时间戳是下游每个节拍持续时间的真相来源。
Hyperframes 附带多个 TTS 适配器（Kokoro、ElevenLabs、HeyGen）；请参阅
/hyperframes-media 了解选择一项的技能。生成音频后，使用 transcript.json 中的真实节拍边界更新 STORYBOARD.md。
门： narration.wav、narration.txt 和 transcript.json 存在。 STORYBOARD.md 节拍计时参考真实时间戳，而不是估计值。
第 6 步：构建
输出：compositions/<beat-name>.html，每个节拍一个 HTML 文件
这是故事板变成可运行 HTML 的地方。每个合成都是一个独立的文件，通过路径导入捕获的资源，使用 DESIGN.md 中的确切颜色和字体，并使用故事板选择的技术制作动画。
对于多节拍视频，每个节拍生成一个聚焦的子代理。每一个都有新鲜的背景、其节拍的故事板部分、其所需的资产路径以及相关的技术参考。与在一个长期运行的上下文中构建每个节拍相比，这会产生明显更好的输出。
每个作品构建完成后，对布局、资源放置和动画质量进行自我审查。 /hyperframes 技能对组合规则进行编码：所需的 class="clip" 属性、GSAP 时间线注册、data-* 属性语义和适配器注册表。
门： 每篇作文都是自我审查的。没有重叠的元素，没有错位的资源，没有没有动画的静态图像。
第 7 步：验证
输出：snapshots/frame-*.png，lint 并验证零错误通过
发货前三检查：
lint 捕获丢失的属性、时间线注册问题、补间冲突以及 CSS 转换与 GSAP 冲突。 validate 在无头 Chrome 中加载每个组合并显示运行时 JS 错误、缺少资源和失败的网络请求。 snapshot 在特定时间戳捕获帧，以便您无需完整渲染即可“查看”输出。
管道提供 localhost Studio URL 作为切换。您的 AI 代理运行 npx hyperframes preview 并共享项目 URL。按需渲染为 MP4：
lint 和 validate 通过零错误。快照帧看起来不错。 Studio 预览 URL 已准备好共享。
迭代
该管道是围绕磁盘上的命名工件构建的，因此您可以重新进入任何地方，而无需重新运行所有内容：- 要重新制定创意计划，请编辑
STORYBOARD.md：更改节拍的情绪、交换资产、重新安排入口时间，然后要求代理重建该节拍。 - 对于外科手术调整，直接打开合成文件（例如
compositions/beat-3-proof.html）并调整动画、颜色或布局。npx hyperframes preview实时显示更改。 - 要从头开始重建一个节拍，请提示代理：“用更多能量重建节拍 2。使用产品屏幕截图作为全屏背景。” 它读取
STORYBOARD.md、DESIGN.md和转录本，然后仅重新生成该文件。 - 要交换语音而不重做步骤 3，请针对
narration.txt重新运行 TTS，其中已包含发音替换。
何时使用管道
管道是推荐的结构：- 使用 /website-to-hyperframes 技能捕获网站，该技能端到端跟踪该网站。
- 发布产品发布会。大多数 HeyGen 发布视频 都使用此工件布局。
- 任何具有三个或更多节拍的叙事视频，其中故事板本身就可以收回成本。
- 学习HyperFrames，因为这些工件可以在磁盘上检查每个创意决策。
STORYBOARD.md 中。
后续步骤
网站到视频
在此管道上构建的完整网站到视频工作流程。
提示
如何通过 AI 代理调用管道。
发布视频
围绕该管道组织的实际生产项目。
CLI 参考
管道调用的每个命令。