website-to-video

media-use: 在获取音频/图片前，请调用 /media-use 从 HeyGen 资源库中选择 BGM/音效/图片。先运行 --adopt 注册已有资产。参考 /media-use Skill。

Website to HyperFrames

抓取网站，然后基于网站内容制作专业视频。

在 Step 0 之前确认路由方向。 本 Skill 用于为通用网站制作展示视频/基于网站素材制作视频。如果用户的实际意图是推广/发布/宣传产品（即使提供了该 URL，即使称其为“我们网站的宣传片”） → 应该使用 /product-launch-video。没有网站的主题解说 → 使用 /faceless-explainer；GitHub PR 演示 → 使用 /pr-to-video；对现有视频文件进行重新剪辑/调色/重排 → 超出本 Skill 范围。如果是因模糊的“做个视频”而被路由到这里，或不确定属于产品发布还是通用网站展示？请先阅读 /hyperframes（查看完整路由表及 § HyperFrames 无法实现的功能）。

用户的典型需求说法：

• “把这个网站做成一个 15 秒的 Instagram 社媒短片”
• “基于 https://... 做一个 30 秒的网站巡览 / 展示视频”
• “抓取我们首页的画面，用它自己的视觉素材拼一个视频”

整个工作流分为 7 个步骤。每一步都会产出相应的文档/资产作为下一步的关卡（Gate）。默认采用协作模式——标有 💬 的关卡会暂停并询问用户。如果用户明确指示自主模式（如“帮我决定”、“给我个惊喜”），则会跳过 💬 标记的用户偏好关卡；详见 step-2-brief.md 了解自主模式的传递逻辑。

自主模式并不等于“跳过所有关卡”。 自主模式仅涵盖用户偏好类问题（TTS 供应商、音色、配色倾向、节拍数、是否加背景音乐、是否加字幕——由 Agent 代替用户决策）。它绝对不涵盖质量校验类关卡。以下关卡在自主模式下依然不可跳过：

• 资产审计（Step 3）——查看联络图（contact sheets），并为每个资产给出使用或跳过的理由（USE/SKIP）
• 逐节拍（beat）HTML 审查（Step 5）——为每个节拍提供结构化的证据块
• DoD（完成定义）检查清单（Step 6）——包含动画映射表（animation-map）、逐条警告的 WCAG 可访问性校验、音频/动效播放验证
• 诚实披露章节（Step 6）——最终总结中必须包含“我未验证的内容（What I did NOT verify）”

如果你发现自己的推理逻辑是“自主模式鼓励积极行动，所以我跳过了 X”——而 X 是一个校验关卡而非偏好问题——那么这种推理是错误的。积极行动（Bias toward action）适用于决定构建什么，而不适用于决定是否进行验证。

---

Step 0：抓取并理解品牌

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

抓取网站，然后读取提取的数据以深入理解品牌与产品——它做什么、目标受众是谁、品牌语气风格如何、整体视觉基调怎样。抓取到的资产是后续使用的品牌工具包，而不是直接拿来拼接视频的现成积木。

在生成 Brief 之前展示登录状态——运行 npx hyperframes auth status 并原样转发其输出（切勿改述或重写）。 该命令会报告 Voice/BGM 是使用 HeyGen 还是本地引擎；未登录时会提示如何登录。如果未登录，请暂停并等待用户选择——登录，或者回复“继续”/“offline”使用本地引擎——然后再询问 Brief 或其他任何内容。 请将其视为真正的决策点，而不是顺带一提的提示；不要把该选项混入 Brief 问题中，也不要在每个仓库的 .env 中硬编码 Key。（在自主模式下，记录该状态并直接以离线模式继续。）详见 ../hyperframes-media → Preflight 获取规范指引。

关卡目标： 输出网站策略优先的总结（先阐述产品用途、受众、品牌语气，再列出资产/颜色/字体清单）；且已展示登录状态（已登录，或确认离线继续）。

---

Step 1：品牌视觉标识

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

撰写 DESIGN.md——一份涵盖视觉标识的品牌速查手册：颜色、字体、组件样式、布局原则。使用 design-styles.json 获取精确的计算值。

快速模式选项： 对于快节奏视频（每个节拍展示单张看板/billboard 样式），DESIGN.md 可以是一份 50 行左右的颜色 + 字体 + 注意事项（do's/don'ts）精简总结，无需写成 300 行的详尽文档。Step 5 的 Sub-agent 提示词会自动粘贴品牌数值，因此 DESIGN.md 的深度仅对复杂合成效果有影响。

关卡目标： DESIGN.md 已存在（长短不限），且至少包含：配色方案、字体选择以及注意事项（do's/don'ts）。

---

Step 2：策略与核心信息

阅读： references/step-2-brief.md、references/capabilities.md（快速浏览目录——仅在需要时深入阅读具体章节）

在讨论视觉效果或资产之前，先与用户对齐视频必须传递的核心信息。解析用户的 Prompt——他们可能已经给出了视频类型和风格。只询问缺失的信息：视频必须传达的唯一核心要点、叙事框架（narrative arc）以及目标受众。

关卡目标： 视频类型、时长、画幅比例，以及最关键的——核心信息和叙事框架已被锁定。缺少这些，Step 3 将无法撰写“理念优先”的分镜脚本。

---

Step 3：分镜脚本 + 旁白脚本 💬

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

以理念优先的方式撰写分镜脚本：核心信息 → 叙事框架 → 服务于框架的节拍（beats） → 每个节拍的技术手法 → 最后加上品牌设计亮点。然后撰写与之匹配的旁白脚本。将两者连同逐节拍摘要一起呈现给用户。反复迭代直至用户批准。

关卡目标： STORYBOARD.md + SCRIPT.md 已生成，且方案已获得用户批准。

---

Step 4：配音 (VO)、时间轴 + 字幕 💬

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

如果 Step 2 确定不需要旁白——询问背景音乐要求，然后直接跳到 Step 5。否则：询问用户使用哪种 TTS 供应商（HeyGen TTS、ElevenLabs 或 Kokoro），生成音频，进行转录，并将时间戳映射到各个节拍。随后询问字幕相关需求。

关卡目标： 满足以下任一条件：(a) 明确不需要旁白，且分镜脚本包含手动设置的节拍时间轴；(b) narration.wav + transcript.json 已生成，且节拍时间轴已根据实际音频时长更新。

---

Step 5：构建合成页面 (Compositions)

阅读： hyperframes Skill（加载它——其中的每一条规则都至关重要）
阅读： references/step-5-build.md

按照分镜脚本（Step 3）中确定的架构和节奏，构建 index.html 与各节拍合成页面。Sub-agents 在汇报前需针对每个节拍运行 hyperframes lint 和 hyperframes snapshot。

关卡目标： 主 Agent 已根据 DESIGN.md 和 STORYBOARD.md 从头到尾完整审查了每个 compositions/beat-N.html。逐节拍检查清单详见 step-5-build.md。

---

Step 6：验证与交付

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

进行代码检查（Lint）、验证，按视频时长比例提取快照（公式：max(beats × 3, ceil(duration_seconds / 2))），并仔细审查每一张快照。在交付前修复所有问题。交付本地 Studio 项目 URL——仅在用户明确要求时才渲染导出为 MP4。仅在最终交付时展示该 Studio URL——它是最终且稳定的预览链接；构建阶段的快照属于无头模式截图，切勿在构建中途弹出预览。

交付让你引以为傲的作品。 在交付前问问自己：我会愿意署名并将这个视频发布到社交媒体上吗？如果不会，修好不满意的地方。

关卡目标： npx hyperframes lint 与 npx hyperframes validate 运行通过且零错误，最终回复中包含了可用的 Studio 项目 URL。

---

快速参考

视频类型

按视频类型划分的典型约束条件——用作起点，而非固定公式。节拍数量应取决于内容和旁白，而不是预设的目标范围。

类型	典型时长	时长决定因素	旁白 (Narration)
社媒广告 (IG/TikTok)	10–15 秒	平台限制	可选
产品演示	30–60 秒	脚本长度	完整旁白
功能发布	15–30 秒	功能复杂度	完整旁白
品牌宣传片 (Reel)	20–45 秒	音乐轨道	可选，以音乐为主
上线预告片	10–20 秒	悬念/吸引力力度	极少

本表故意未包含节拍数量——它应当源自分镜脚本，而不是硬性规定“社媒广告 = 3-4 个节拍”。复杂产品的社媒广告可能需要 5 个节奏精准的节拍；而只有一个强视觉主题的品牌宣传片可能只需 3 个。

画幅格式

• 横屏 (Landscape): 1920x1080（默认）
• 竖屏 (Portrait): 1080x1920（Instagram Stories、TikTok）
• 方屏 (Square): 1080x1080（Instagram 动态流）

参考文件

文件	何时阅读
step-0-capture.md	Step 0 —— 抓取、理解品牌与产品，撰写策略优先的网站总结
step-1-design.md	Step 1 —— 撰写 DESIGN.md 品牌速查手册（5 个章节，250-350 行；看板式社媒广告可用 50 行快速通道）
step-2-brief.md	Step 2 —— 与用户就核心信息、叙事框架和目标受众达成一致
capabilities.md	Step 2 & Step 5 —— HyperFrames 功能全景清单（24 个章节）。在确定 Brief 时浏览目录，在构建时深入研读具体章节
step-3-storyboard.md	Step 3 —— 分镜脚本 + 旁白脚本（合并），含用户审核关卡
step-4-vo.md	Step 4 —— 选择 TTS 供应商、生成音频、确定时间轴
step-5-build.md	Step 5 —— 构建 index.html + 各合成页面
step-6-validate.md	Step 6 —— 代码检查、验证、抓取快照（按视频时长按比例确定数量）、预览
techniques.md	Step 3 & Step 5 —— 13 种基础动画技术及代码范式（灵活套用，请勿机械复制粘贴）
html-in-canvas-patterns.md	Step 5 —— Canvas 中内嵌 HTML 效果的完整代码范式（位于 hyperframes Skill 中）

<!-- truncated for translation batch; full body continues in source -->