website-to-video

media-use：在获取音频／图片前，先调用 /media-use，从 HeyGen 素材库解析 BGM／SFX／图片。先运行 --adopt，注册已有素材。参见 /media-use 技能。

将网站转为 HyperFrames

捕获网站，然后据此制作专业视频。

请在步骤 0 前确认路由。 此技能用于制作一段关于／取材自一般网站的视频。如果用户实际上是在营销／发布／推广产品（即使使用的是此 URL，即使是“为我们的网站制作宣传视频”）→ /product-launch-video。没有网站的主题讲解视频 → /faceless-explainer；GitHub PR → /pr-to-video；重新剪辑／调色／调整现有视频文件顺序 → 不在范围内。如果用户只含糊地要求“制作视频”，因此被引导到此处，或不确定是产品发布还是一般网站？先阅读 /hyperframes（完整路由表和 § HyperFrames 无法完成的任务）。

用户可能会这样说：

• “把这个网站制作成一段 15 秒的 Instagram 社交短片”
• “用 https://... 制作一个 30 秒的网站导览／展示视频”
• “捕获我们的主页，并用它自己的视觉素材制作视频”

工作流分为 7 个步骤。每一步都会产出一个作为下一步前置条件的产物。默认采用协作模式——标记为 💬 的关卡会暂停并询问用户。如果用户表示采用自主模式（“替我决定”“给我个惊喜”），则跳过 💬 用户偏好关卡；有关其影响方式，请参阅 step-2-brief.md。

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

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

如果你发现自己在想“自动模式要求积极行动，所以我会跳过 X”，而 X 是验证关卡而不是偏好问题，那么这种想法就是错的。积极行动适用于决定制作什么，而不适用于决定是否验证。

---

步骤 0：捕获并了解品牌

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

捕获网站，然后阅读提取的数据，了解品牌和产品——它的功能、目标受众、表达风格和整体氛围。捕获的素材是后续使用的品牌工具包，而不是制作视频所用的构成素材。

在询问需求简报前显示登录状态——运行 npx hyperframes auth status，并原样转达其输出（不要改述或改写）。该输出会说明语音／BGM 将使用 HeyGen 还是本地引擎；如果尚未登录，也会说明如何登录。如果尚未登录，请停止并等待用户选择——登录，或回复“go”／“offline”以继续使用本地引擎——然后再询问需求简报或其他内容。 应将其视为真正的决策点，而非顺带一提；不要把此选择合并到需求简报的问题中，也不要将密钥写入每个代码仓库的 .env。在自主模式下，说明当前状态，然后离线继续。规范指南请参阅 ../hyperframes-media → Preflight。

关卡： 已打印网站摘要——先说明策略信息（产品功能、目标受众、品牌语气），再列出素材／颜色／字体清单；已显示登录状态（已登录，或选择离线继续）。

---

步骤 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 已存在，且用户已批准方案。

---

步骤 4：旁白、时间安排 + 字幕 💬

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

如果第 2 步确定不需要旁白——询问背景音乐需求，然后跳至第 5 步。否则：询问用户使用哪种 TTS 服务商（HeyGen TTS、ElevenLabs 或 Kokoro），生成音频、转录内容，并将时间戳映射到各个节拍。然后询问是否需要字幕。

检查点： 满足以下任一条件：(a) 用户要求不加旁白，且分镜脚本包含手动设置的节拍时长；或 (b) narration.wav + transcript.json 已存在，且节拍时长已根据实际时长更新。

---

步骤 5：构建构图

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

按照分镜脚本（第 3 步）确定的架构和节奏，构建 index.html 和各个构图。子 Agent 会在汇报前，对每个节拍运行 hyperframes lint 和 hyperframes snapshot。

检查点： 主 Agent 已根据 DESIGN.md 和 STORYBOARD.md，从头到尾审阅每个 compositions/beat-N.html。逐拍检查清单见 step-5-build.md。

---

步骤 6：验证与交付

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

运行 lint、验证，并按视频长度生成快照（公式：max(beats × 3, ceil(duration_seconds / 2))），然后逐一审阅。交付前修复问题。交付 localhost Studio 项目 URL——只有用户明确要求时才渲染为 MP4。仅在交接时提供 Studio URL——这是最终且稳定的预览；构建阶段的快照以无头模式生成，因此不要在构建过程中弹出预览。

交付令自己引以为豪的作品。 交接前问问自己：我会署上自己的名字，把它发布到社交媒体吗？如果不会，就修正问题。

检查点： 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 feed）

参考文件

文件	阅读时机
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 技能中）