website-to-hyperframes

Website to HyperFrames

采集网站，然后根据它制作专业视频。

用户可能会这样说：

• “采集 https://...，然后为我制作一段 25 秒的产品发布视频”
• “把这个网站改成一段适合 Instagram 的 15 秒社交广告”
• “根据 https://... 制作一段 30 秒的产品导览视频”

工作流分为 7 个步骤。每一步都会生成一个产物，作为下一步的门槛。默认采用协作模式——标记为 💬 的门槛会暂停并询问用户。如果用户表示要使用自主模式（“替我决定”“给我惊喜”），则跳过 💬 用户偏好门槛；请参阅 step-2-brief.md，了解该设置如何传递。

**自主模式不等于“跳过所有门槛”。**自动模式适用于用户偏好问题（TTS 提供商、语音、颜色强调、节拍数量、是否配乐、是否添加字幕——由 Agent 代替用户决定）。它不适用于质量验证门槛。以下门槛在自动模式下仍不可跳过：

• 资源审查（步骤 3）——查看联系表，并说明每项资源是使用还是跳过
• 按节拍读取 HTML（步骤 5）——每个节拍都要提供结构化证据块
• DoD 清单（步骤 6）——包括动画映射、逐项警告的 WCAG 验证，以及音频／动画播放检查
• 诚实披露部分（步骤 6）——最终摘要中必须包含“我未验证的内容”

如果你发现自己在想“自动模式提倡优先采取行动，所以我会跳过 X”，而 X 是验证门槛而非偏好问题，那么这种推理就是错误的。优先采取行动适用于决定_构建什么_，而非决定_是否验证_。

---

步骤 0：采集并了解品牌

阅读：references/step-0-capture.md

采集网站，然后阅读提取的数据，了解品牌和产品——产品的功能、目标用户、品牌语调和整体氛围。采集到的资源是供后续使用的品牌工具包，而非制作视频的素材。

**门槛：**打印网站摘要——先介绍策略（产品功能、目标用户、品牌语调），再列出资源、颜色和字体清单。

---

步骤 1：品牌标识

阅读：references/step-1-design.md

编写 DESIGN.md——一份涵盖视觉标识的品牌速查表，包括颜色、排版、组件样式和布局原则。使用 design-styles.json 获取精确的计算值。

**提速选项：**对于快节奏视频（每个节拍呈现一个广告牌式画面），DESIGN.md 可以用 50 行总结颜色、字体、注意事项和禁忌，无需写成 300 行的文档。步骤 5 中的子 Agent 提示词会直接粘贴品牌值，因此只有在构图复杂时，DESIGN.md 的详尽程度才重要。

门槛：DESIGN.md 已存在（长度不限），且至少包含：调色板、字体选择，以及注意事项和禁忌。

---

步骤 2：策略与信息传达

阅读：references/step-2-brief.md、references/capabilities.md（浏览目录；仅在需要时深入阅读相关章节）

在讨论视觉效果或资源之前，先与用户确定视频必须传达什么。解析用户的提示词——他们很可能已经说明了视频类型和风格。只询问缺失的信息：这段视频必须表达的核心内容、叙事弧线和目标受众。

**门槛：**视频类型、时长、格式，以及最关键的信息和叙事弧线都已确定。缺少这些信息，步骤 3 就无法编写以概念为先的分镜脚本。

---

步骤 3：分镜脚本与文案 💬

阅读：references/step-3-storyboard.md

先以概念为先编写分镜脚本：信息 → 叙事弧线 → 服务于叙事弧线的节拍 → 每个节拍的技巧 → 最后添加品牌点缀。然后编写相匹配的旁白文案。向用户展示两者，并提供逐节拍摘要。反复迭代，直至用户批准。

门槛：STORYBOARD.md 和 SCRIPT.md 均已存在，且用户已批准方案。

---

Step 4：配音、时间安排与字幕 💬

阅读： references/step-4-vo.md

如果 Step 2 中选择了不需要旁白，请询问是否需要背景音乐，然后跳到 Step 5。否则，询问用户选择哪种 TTS 提供商（HeyGen TTS、ElevenLabs 或 Kokoro），生成音频、转录内容，并将时间戳映射到节拍。然后询问是否需要字幕。

门槛： 满足以下条件之一：(a) 未要求添加旁白，且分镜脚本中有手动设置的节拍时间；或 (b) narration.wav + transcript.json 已存在，且节拍时间已根据实际时长更新。

---

Step 5：构建合成内容

阅读： hyperframes 技能（加载它——每条规则都很重要） 阅读： references/step-5-build.md

根据分镜脚本（Step 3）中选择的架构和节奏，构建 index.html 和合成内容。在汇报之前，子 Agent 会对每个节拍运行 hyperframes lint 和 hyperframes snapshot。

门槛： 主 Agent 已逐行阅读每个 compositions/beat-N.html，并对照 DESIGN.md 和 STORYBOARD.md 进行检查。每个节拍的检查清单见 step-5-build.md。

---

Step 6：验证并交付

阅读： references/step-6-validate.md

运行 lint 和验证，按视频长度调整快照数量（公式：max(beats × 3, ceil(duration_seconds / 2))），并逐一检查。交付前修复所有问题。交付 localhost Studio 项目 URL——只有在用户明确要求时才渲染为 MP4。

交付让你引以为傲的作品。 交付前，问问自己：我愿意用自己的名字在社交媒体上发布这个作品吗？如果不愿意，就修复问题。

门槛： npx hyperframes lint 和 npx hyperframes validate 均通过且没有错误，最终回复中包含有效的 Studio 项目 URL。

---

快速参考

视频类型

各类视频的典型限制——将其作为起点，而非固定公式。节拍数量应根据内容和旁白确定，而非根据目标范围决定。

类型	典型时长	时长决定因素	旁白
社交广告（IG/TikTok）	10–15s	平台限制	可选
产品演示	30–60s	脚本长度	完整旁白
功能公告	15–30s	功能复杂度	完整旁白
品牌短片	20–45s	音乐曲目	可选，以音乐为主
发布预告	10–20s	吸引力	少量

此表有意不列出节拍数量——节拍数量应根据分镜脚本确定，而不是套用“社交广告 = 3-4 个节拍”。复杂产品的社交广告可能需要 5 个节奏把控得当的节拍。围绕一个鲜明视觉主题展开的品牌短片可能只需要 3 个节拍。

格式

• 横屏：1920x1080（默认）
• 竖屏：1080x1920（Instagram Stories、TikTok）
• 方形：1080x1080（Instagram 信息流）

参考文件

文件	阅读时机
step-0-capture.md	步骤 0 — 收集信息，了解品牌和产品，撰写以策略为先的网站摘要
step-1-design.md	步骤 1 — 编写 DESIGN.md 品牌速查表（5 个部分，250-350 行；适用于广告牌风格社交广告的 50 行快速版）
step-2-brief.md	步骤 2 — 与用户就信息、叙事脉络和受众达成一致
capabilities.md	步骤 2 和 5 — HyperFrames 功能完整清单（24 个部分）。制定简报时浏览目录，构建过程中深入查看特定部分
step-3-storyboard.md	步骤 3 — 与用户结合制作分镜和脚本，并设置审核关卡
step-4-vo.md	步骤 4 — 选择 TTS 提供方、生成语音、设置时序
step-5-build.md	步骤 5 — 构建 index.html 和合成
step-6-validate.md	步骤 6 — 检查、验证、生成快照（按视频时长调整）并预览
techniques.md	步骤 3 和 5 — 13 种基础动画技巧及代码模式（灵活改编，不要直接复制粘贴）
html-in-canvas-patterns.md	步骤 5 — HTML-in-Canvas 效果的完整代码模式（位于 hyperframes 技能中）