工作流水线

每个结构良好的 Hyperframes 视频都经历相同的 7 个步骤，无论它源自网站、PDF、CSV 还是空白页。每个步骤产生一个命名的产物，供下一步使用，因此你的 AI 代理（和你）始终知道什么已完成、什么接下来进行、以及创意决策存储在磁盘的什么位置。

这个流水线是网站转视频工作流的核心，但它同样适用于从零开始编写品牌宣传视频、将研究笔记转化为发布预告片，或首次学习 Hyperframes。大多数生产级发布视频都是按此方式组织的。

七个步骤

每个步骤产生一个供下一步使用的产物：

💡 Tip

并非每个项目都使用每个步骤。无旁白的品牌宣传视频跳过步骤 5；手工编写的合成跳过步骤 1-2。但顺序很重要：场景时长来自旁白，动画选择来自故事板，故事板依赖设计参考。只有当你不需要下游使用其产物时才跳过某个步骤。

项目目录结构

流水线运行后典型的项目目录：

my-video/
├── capture/                    # Step 1, only present when capturing a source
│   ├── screenshots/            # scroll-000.png, scroll-001.png, …
│   ├── assets/                 # downloaded images, SVGs, fonts
│   ├── extracted/              # tokens.json, visible-text.txt, asset-descriptions.md
│   ├── AGENTS.md               # capture summary for AI agents
│   └── CLAUDE.md
├── DESIGN.md                   # Step 2, brand cheat sheet
├── SCRIPT.md                   # Step 3, narration backbone
├── STORYBOARD.md               # Step 4, beat-by-beat creative plan
├── narration.wav               # Step 5, TTS audio
├── narration.txt               # Step 5, exact spoken text (with pronunciation subs)
├── transcript.json             # Step 5, word-level timestamps
├── compositions/               # Step 6, one HTML file per beat
│   ├── beat-1-hook.html
│   ├── beat-2-story.html
│   └── …
├── snapshots/                  # Step 7, visual verification PNGs
├── renders/                    # optional final MP4 outputs
└── index.html                  # root project file wiring compositions into a timeline

采集产物保留在 capture/ 中，与构建输出清晰分离。所有下游内容位于项目根目录。

步骤 1：采集

输出： capture/

当视频基于现有源（网站、品牌站点、竞品参考）时，从采集开始。Hyperframes 内置了一个用于网站的采集命令：

npx hyperframes capture https://example.com -o my-video/capture

这会在每个滚动深度提取截图、像素采样的调色板、CSS 字体栈（及下载的 woff2 文件）、带语义名称的图片和 SVG、Lottie 动画以及页面上检测到的动画。可选的 Gemini 视觉增强为每个采集的素材添加 AI 驱动的描述。

对于非网站源（PDF、演示文稿、CSV、笔记），采集不是字面意义上的命令。它是你将素材收集到 capture/ 的步骤，以便后续步骤可以引用路径而不是内联内容。

**完成标准：**你可以用一两句话描述源的视觉识别，并说出其主要颜色、字体和突出素材。

步骤 2：设计

输出： 项目根目录中的 DESIGN.md

DESIGN.md 是品牌速查表。它客观编码视觉识别，使每个下游决策都可以引用确切的颜色、字体和组件，而不是自行发明。它是参考文档，不是创意计划。创意工作在故事板中进行。

典型的 DESIGN.md 有六个部分：

DESIGN.md 也是 Open Design 和 Claude Design 的输入格式；两者都生成你可以直接放入 Hyperframes 项目的 DESIGN.md。

完成标准：DESIGN.md 存在，所有六个部分都用真实采集数据填充（或为全新项目刻意选择）。

步骤 3：脚本

输出： 项目根目录中的 SCRIPT.md

SCRIPT.md 是旁白骨架。场景时长来自旁白而非猜测，因此在故事板之前编写脚本，并按口头用语为拍定时间。

典型结构：开头钩子（一句话赢得注意力）、故事（产品或主题是什么）、证据（数字、组件、客户）、CTA（一个明确的动作）。引用 capture/extracted/visible-text.txt 中的真实功能、真实统计数据和真实组件。不要编造源不支持的声明。

对于无旁白视频（品牌宣传、音乐驱动的预告片），SCRIPT.md 变为逐拍文案计划：屏幕上的文本和标题，并附上时间说明。

完成标准：SCRIPT.md 存在于项目根目录。

步骤 4：故事板

输出： 项目根目录中的 STORYBOARD.md

STORYBOARD.md 告诉工程师（人类或代理）每个拍需要构建什么：氛围、镜头、动画、过渡、素材、深度层、音效。这是创意选择被确定的地方。

STORYBOARD.md 中每个拍通常涵盖：

故事板通常以全局方向块开头：格式、配音方向、风格基础以及适用于每个拍的保护措施。

完成标准：STORYBOARD.md 存在，包含逐拍方向和列出每个使用文件的素材审计。

步骤 5：配音和时序

输出： narration.wav（或 .mp3）、narration.txt、transcript.json

生成 TTS 旁白，然后转录以获取词级时间戳。这些时间戳是下游每个拍时长的真实来源。

npx hyperframes tts SCRIPT.md --voice af_nova --output narration.wav
npx hyperframes transcribe narration.wav

Hyperframes 提供多个 TTS 适配器（Kokoro、ElevenLabs、HeyGen）；参见 /hyperframes-media 了解选择适配器的 skill。生成音频后，用 transcript.json 中的真实拍边界更新 STORYBOARD.md。

完成标准：narration.wav、narration.txt 和 transcript.json 存在。STORYBOARD.md 的拍时间引用真实时间戳，而非估计值。

步骤 6：构建

输出： compositions/<beat-name>.html，每个拍一个 HTML 文件

这是故事板变为可运行 HTML 的地方。每个合成是一个自包含文件，通过路径导入采集的素材，使用 DESIGN.md 中确切的颜色和字体，并使用故事板选定的技法进行动画。

对于多拍视频，为每个拍启动一个专注的子代理。每个子代理获得新鲜的上下文、其拍对应的故事板部分、需要的素材路径以及相关的技法参考。这比在一个长时间运行的上下文中构建所有拍产生明显更好的输出。

每个合成构建完成后，运行自审查以检查布局、素材放置和动画质量。/hyperframes skill 编码了合成规则：必需的 class="clip" 属性、GSAP 时间轴注册、data-* 属性语义以及适配器注册表。

**完成标准：**每个合成都经过自审查。没有重叠的元素，没有错放的素材，没有未动画的静态图片。

步骤 7：验证

输出： snapshots/frame-*.png，lint 和 validate 零错误通过

交付前的三项检查：

npx hyperframes lint                              # static HTML structure checks
npx hyperframes validate                          # loads in headless Chrome, catches runtime errors
npx hyperframes snapshot my-video --at 2.9,10.4   # PNGs at beat midpoints

lint 捕获缺失属性、时间轴注册问题、补间冲突和 CSS 变换与 GSAP 的冲突。validate 在无头 Chrome 中加载每个合成，显示运行时 JS 错误、缺失素材和失败的网络请求。snapshot 在特定时间戳捕获帧，让你无需完整渲染即可_看到_输出。

流水线将 localhost Studio URL 作为交付物。你的 AI 代理运行 npx hyperframes preview 并分享项目 URL。渲染为 MP4 是按需的：

npx hyperframes render --output my-video.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 skill 采集网站，该 skill 端到端执行此流程。
• 发布产品发布。大多数 HeyGen 发布视频使用此产物布局。
• 任何有三个或更多拍的叙事视频，故事板在此情况下物有所值。
• 学习 Hyperframes，因为产物使每个创意决策在磁盘上可检查。

对于 5 秒的一次性动画，单个手工编写的合成就够了；流水线是你不需要的开销。大致的判断标准：如果非创作者需要理解_为什么_一个拍看起来是这样的，就把它写在 STORYBOARD.md 中。

下一步

• 网站转视频 基于此流水线构建的完整网站转视频工作流。
• 提示词 如何通过 AI 代理调用流水线。
• 发布视频 围绕此流水线组织的真实生产项目。
• CLI 参考 流水线调用的每个命令。