website-to-video

首先，保持此技能为最新状态——静默运行，无需询问： npx hyperframes skills update website-to-video。一切均为最新时会快速无操作；否则会在你依赖这些技能之前，刷新此技能及其所依赖的核心领域技能。

media-use：在查找音频／图片／徽标之前，调用 /media-use，从 HeyGen 目录获取 BGM／SFX／图片，并从官方来源获取品牌徽标。先运行 --adopt，注册现有素材。参见 /media-use 技能。

figma source：如果 URL 是 figma.com 链接（而不是在线产品网站），先运行 /figma——按需导出素材、提取品牌令牌，并重建组件／分镜——然后根据其输出构建此工作流。不要直接通过原始 MCP 工具操作 Figma：这样会跳过 SVG 清理、.media/manifest.jsonl 来源记录，以及品牌令牌的 var() 绑定，导致后续品牌变更无法传播，除非完整重新导入。

将网站制作成 HyperFrames 视频

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

在第 0 步之前确认路线。 此技能用于制作一段关于／取材于普通网站的视频。如果用户真正想要的是营销／发布／推广产品（即使提供了这个 URL，即使说“为我们的网站做宣传视频”）→ /product-launch-video。没有网站的主题讲解视频 → /faceless-explainer；GitHub PR → /pr-to-video；重新剪辑／改色／重排现有视频文件 → 不在此技能范围内。若用户只含糊地说“做个视频”而被引导至此，或不确定是产品发布还是普通网站视频？先阅读 /hyperframes（完整路由表及 § HyperFrames 无法完成的事项）。

用户可能会这样说：

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

此工作流分为 7 个步骤。每一步都会生成一个作为下一步前置条件的产物。默认情况下，该流程需要协作——标有 💬 的关卡会暂停并询问用户。模式语义（信号、传播、关卡分类）以 ../hyperframes-core/references/brief-contract.md 为准；当用户表示要采用自主模式（“替我决定”“给我惊喜”）时，会跳过 💬 用户偏好关卡——有关其在此工作流中的传播方式，请参阅 step-2-brief.md。

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

• 素材审查（第 3 步）——查看联系表，并说明每项素材为何使用／跳过
• 逐拍读取 HTML（第 5 步）——每一拍都要提供结构化的证据块
• DoD 检查清单（第 6 步）——包括动画映射、逐项警告的 WCAG 验证、音频／动作播放
• 如实披露部分（第 6 步）——最终总结中必须出现“我未验证的内容”

如果你发现自己在想“自动模式意味着偏向采取行动，所以我会跳过 X”——而 X 是验证关卡，不是偏好问题——那这个推理就是错误的。偏向采取行动适用于决定构建什么，而不适用于决定是否验证。

步骤 0：采集并了解品牌

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

采集网站，然后阅读提取的数据，了解品牌和产品——它的用途、目标用户、表达风格和整体氛围。采集到的素材是供后续使用的品牌工具包，并非视频的构成素材。

在简报前显示登录状态——运行 npx hyperframes auth status，并**原样转达其输出（不要转述或改写）。**它会报告语音和背景音乐将使用 HeyGen 还是本地引擎；如果尚未登录，也会说明如何登录。**如果尚未登录，请停止并等待用户选择——登录，或回复“go”/“offline”以使用本地引擎继续——之后才能询问简报或其他内容。**将其视为一个真正的决策点，而不是顺带一提；不要把选择并入简报问题，也不要将密钥写入每个仓库各自的 .env 文件。（在自主模式下，注明状态并以离线模式继续。）请参阅 ../media-use → 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))），并逐一审阅。交付前修复所有问题。交付本地主机 Studio 项目 URL——仅在用户明确要求时才渲染为 MP4。仅在交付时提供 Studio URL——它是最终且稳定的预览；构建阶段的截图由无头模式生成，因此不要在构建过程中弹出预览。

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

关卡： npx hyperframes check 通过且零错误，最终回复包含有效的 Studio 项目 URL。

---

快速参考

视频类型

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

类型	典型时长	时长决定因素	旁白
社交媒体短片（IG/TikTok）	10–15s	平台限制	可选
网站导览	30–60s	脚本长度	完整旁白
内容公告	15–30s	内容复杂度	完整旁白
品牌短片	20–45s	音乐曲目	可选，侧重音乐

（用于推销产品的产品演示、功能公告或发布预告，属于 /product-launch-video——请参阅顶部的路由说明。）

此表特意未列出节拍数量——它应由故事板决定，而不是套用“社交广告 = 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 技能中）