用途
website-to-video 用于把一个通用网站或 URL 捕获下来，并转化为 HyperFrames 视频，产出形式包括站点导览、产品展示或使用站点自身视觉素材制作的社交短片。它在需要先确认路线时使用：如果用户真正要做的是产品营销、发布或推广（即使给出的是某个网址，或说“给我们的网站做个宣传片”），应改用产品发布视频技能；无站点依托的主题讲解、GitHub PR 转视频、对已有视频文件重剪或调色，都不在本技能范围内。
主要能力与工作流
该技能由 7 个步骤组成，每一步产出工件并作为下一步的门槛。默认是协作模式，标记 💬 的偏好关卡会停下来询问用户；当用户表示“你来决定”“给我惊喜”等自主模式信号时，跳过用户偏好类关卡，但质量校验类关卡（素材审计、逐镜头 HTML 阅读、DoD 检查清单、诚实披露未验证内容）在自主模式下仍不可跳过。
Step 0：捕获并理解品牌。 捕获网站后读取抽取数据，理解产品做什么、面向谁、品牌语气与氛围。抓取的素材是品牌工具包，而不是视频的直接积木。在简报前显示登录状态：运行 npx hyperframes auth status 并原样转述输出，说明语音/BGM 将使用 HeyGen 还是本地引擎；未登录时停下等待用户选择登录或继续离线，不能把该选择并入简报提问，也不要把密钥写入仓库级 .env。门禁：打印以策略为先的站点摘要，并展示登录状态。
Step 1：品牌识别。 编写 DESIGN.md，作为品牌速查表，涵盖颜色、字体、组件样式与布局原则；精确计算值参考 design-styles.json。快节奏（逐拍 billboard 式）视频可用 50 行左右的颜色+字体+注意事项摘要。门禁：DESIGN.md 至少包含调色板、字体选择与注意事项。
Step 2：策略与信息。 在讨论视觉与素材前，先与用户对齐视频必须传达的内容。解析用户提示，通常已给出视频类型和风格，只询问缺失项：这条视频必须说清的 ONE 件事、叙事弧线、目标受众。门禁：视频类型、时长、格式以及信息与叙事弧线锁定。
Step 3：分镜与脚本 💬。 以概念为先写分镜：信息 → 叙事弧线 → 服务弧线的镜头 → 每个镜头的技术 → 最后做品牌点缀；再写匹配的旁白脚本，向用户逐镜头呈现并迭代至批准。门禁：STORYBOARD.md 与 SCRIPT.md 存在且用户已批准。
Step 4：配音、时间与字幕 💬。 若 Step 2 确定无需旁白，则询问背景音乐后跳到 Step 5；否则询问 TTS 提供商（HeyGen TTS、ElevenLabs 或 Kokoro），生成音频、转写、把时间戳映射到镜头，再询问字幕。门禁：无旁白且有手工镜头时长，或存在 narration.wav + transcript.json 且镜头时长已按真实时长更新。
Step 5：构建合成。 加载 hyperframes 技能（每条规则都重要），按分镜确定的架构与节奏构建 index.html 和 compositions；子代理在每个镜头上运行 hyperframes lint 与 hyperframes snapshot 后再汇报。门禁：主代理对照 DESIGN.md 与 STORYBOARD.md 逐行阅读每个 compositions/beat-N.html。
Step 6：校验与交付。 运行 lint、validate，按视频长度生成快照（公式：max(beats × 3, ceil(duration_seconds / 2))）并逐一检查，修复后交付本地 Studio 项目 URL；仅在用户明确要求时渲染 MP4。Studio URL 只在交接时给出，它是最终稳定预览，构建阶段的快照是无头模式，不要中途弹出预览。最终回复需包含“我未验证的内容”这一诚实披露部分。门禁：npx hyperframes lint 与 npx hyperframes validate 零错误，且最终回复包含有效的 Studio 项目 URL。
视频类型与格式参考
常见约束（仅作起点，镜头数应由内容与旁白决定）：社交广告（IG/TikTok）10–15 秒，时长由平台限制驱动，旁白可选；产品演示 30–60 秒，时长由脚本长度驱动，全程旁白；功能发布 15–30 秒，由功能复杂度驱动，全程旁白；品牌短片 20–45 秒，由音乐曲目驱动，旁白可选、以音乐为主；发布预告 10–20 秒，由钩子能量驱动，旁白极少。格式支持横屏 1920x1080（默认）、竖屏 1080x1920（Instagram Stories、TikTok）与方形 1080x1080（Instagram 动态）。
使用方式
技能内置多个参考文件：step-0-capture.md（抓取与品牌理解）、step-1-design.md（DESIGN.md 写法）、step-2-brief.md（信息与叙事对齐）、capabilities.md（HyperFrames 能力清单，24 节）、step-3-storyboard.md（分镜+脚本）、step-4-vo.md（TTS 选择与计时）、step-5-build.md（构建）、step-6-validate.md（校验与预览）、techniques.md（13 种基础动画技术及代码模式，需改编而非复制粘贴）、html-in-canvas-patterns.md（HTML-in-Canvas 效果代码模式）。此外，在引用音频/图片前需调用 /media-use，从 HeyGen 目录解析 BGM/音效/图片，并先运行 --adopt 注册已有素材。
适用场景与限制
适用于已有网站、希望用其现有视觉快速产出社交短片、站点导览或展示视频的场合。限制包括：不处理产品发布类营销路线、无站点主题讲解、PR 转视频和已有视频重剪；依赖 Headless Chrome 抓取与 HyperFrames 生态；需要登录状态确认；一次完整流程涉及多道人工确认与质量门禁，不适合完全无监督的自动产出。关于收费、价格与成品效果，资料未提供，暂未提供相关信息。