将产品、营销URL、粘贴的脚本或简报转化为产品发布视频，包括SaaS宣传片、功能展示、应用发布、公司宣传和产品营销视频。当用户想要营销、发布、推广或展示产品时使用此技能。请勿用于一般的非发布类网站导览、非产品主题的解说视频、GitHub拉取请求、为现有素材添加字幕或短篇无旁白动态图形。如果意图不明确，请先通过/hyperframes路由。
media-use：在获取音频/图片之前，先调用
/media-use从HeyGen目录中解析BGM/SFX/图片。先运行--adopt注册现有资源。参见/media-use技能。
产品发布到HyperFrames
使用此技能捕获产品、理解其品牌、规划发布视频，并在HyperFrames中逐帧构建。
在步骤0之前确认路由。 你是编排者。运行每个步骤，验证其关卡，然后才继续下一步。此技能适用于正在被营销、发布、推广或展示的产品，包括诸如“为我们网站做宣传”等具有推广目的的请求。将其他意图路由到别处：一般的非发布类网站导览 ->
/website-to-video；无产品的主题解说 ->/faceless-explainer；GitHub PR ->/pr-to-video；为现有素材添加字幕 ->/embedded-captions；短篇无旁白动态图形 ->/motion-graphics。如果用户只说“做个视频”或路由不确定，先阅读/hyperframes。
你是编排者。在videos/<project>/中工作。按顺序运行步骤，并在继续之前通过每个关卡。用户关卡为步骤0、步骤3和步骤6。除步骤5（为每帧分派一个子代理）外，每个步骤都由你亲自完成。不要在此处放置设计或运动规则；这些存在于帧工作子代理、hyperframes-creative和hyperframes-animation中。
工作流程：步骤0设置 -> hyperframes.json；步骤1捕获 -> capture/；步骤2设计系统 -> frame.md；步骤3故事板/脚本 -> STORYBOARD.md和SCRIPT.md；步骤3.1音频 -> audio_meta.json；步骤4视觉设计 -> 增强的STORYBOARD.md；步骤5帧 -> compositions/frames/NN-*.html和index.html；步骤6最终渲染 -> renders/video.mp4。
步骤0：设置与简报
目标：锁定核心视频简报，并在需要时创建HyperFrames项目。
仅在hyperframes.json缺失时初始化。根据品牌或域名以kebab-case命名<project>，例如acme-promo；切勿使用工作区名称或时间戳。
npx hyperframes init "videos/<project>" --non-interactive --skip-skills --example=blank
在简报前显示登录状态 — 运行npx hyperframes auth status并逐字输出其内容（不要转述或重写）。 它会报告语音/BGM将使用HeyGen还是本地引擎，以及未登录时如何登录。如果未登录，则停止并等待用户选择 — 登录，或说“go”/“offline”以继续使用本地引擎 — 然后再询问简报或任何其他内容。 将其视为一个真正的决策点，而非一个简单的注释；不要将选择折叠到简报问题中，也不要将密钥写入每个仓库的.env。（在自主模式下，记录状态并继续离线。）参见../hyperframes-media → Preflight以获取规范指导。
关卡： hyperframes.json存在，且角度、时长、宽高比和语言已锁定；登录状态已显示（已登录，或继续离线）。
步骤1：捕获资源
目标：收集视频的源材料、品牌信号和可用资源。
对输入进行分类并选择路径。明确的URL -> 捕获它，并使用网站进行旁白和资源。粘贴的脚本/简报 -> 逐字保存为user_script.txt，询问一次“逐字使用还是重新组织？”，将答案存储为VO_MODE，然后解析捕获目标：文本中的URL -> 使用它；仅有品牌名称 -> WebSearch，在一行中确认URL，然后爬取；无URL/网站 -> 无捕获路径。
使用以下命令运行捕获：npx hyperframes capture "<URL>" -o ./capture
如果存在GEMINI_API_KEY、GOOGLE_API_KEY或OpenRouter密钥，捕获会自动将资源标注到capture/extracted/asset-descriptions.md中。这不是一个审查关卡。如果没有视觉密钥，则使用DOM上下文并继续。
无捕获路径：手动创建capture/extracted/tokens.json、capture/extracted/visible-text.txt、capture/extracted/asset-descriptions.md和capture/assets/。tokens.json应为{ "title": "", "description": "", "colors": [], "fonts": [] }；尽可能从简报中填写标题/描述。visible-text.txt包含完整的简报或脚本。asset-descriptions.md应说明未捕获任何资源，除非用户提供了资源说明。
关卡： capture/extracted/tokens.json、capture/extracted/visible-text.txt、capture/extracted/asset-descriptions.md和capture/assets/存在；你能用一句清晰的话说明品牌。将asset-descriptions.md视为主资源清单。如果在实际捕获后它缺失，则停止并报告捕获不完整。如果存在capture/BLOCKED.md，则遵循它。
步骤2：设计系统
目标：选择一个已发布的帧预设；脚本将其转化为此视频的frame.md + 字幕皮肤。
你做出一个判断 — 选择哪个预设。阅读../hyperframes-creative/references/design-spec.md，选择外观最符合品牌和简报的预设。然后运行：
node <SKILL_DIR>/scripts/build-frame.mjs --preset <name> --hyperframes .
脚本确定性地完成其余工作：将预设的FRAME.md复制为frame.md，并重新混合到capture/extracted/tokens.json中的品牌令牌上（品牌颜色按角色映射到预设的颜色键 — 墨水、画布、强调色 — 保持键/结构/组件；预设的显示+正文字体替换为品牌的字体），将预设的字幕皮肤复制到.hyperframes/caption-skin.html，并自我验证（映射错误时退出1）。一旦退出0，立即进入下一步 — 无需手动编辑规范。
tokens.json中没有品牌颜色/字体（例如无捕获） -> 脚本保留预设自己的调色板，一个完整的可发布设计。如果简报提到了捕获遗漏的品牌颜色/字体，在运行前将它们添加到capture/extracted/tokens.json中（或使用用户的design.md填充它）；之后仅在映射确实需要时才手动调整frame.md。
关卡： build-frame.mjs退出0 — frame.md来自一个命名预设，并且（当预设附带字幕皮肤时）.hyperframes/caption-skin.html作为字幕皮肤源存在。
步骤3：故事板和脚本
目标：将简报和捕获的材料转化为一个经批准的逐帧故事计划。
阅读references/story-design.md、../hyperframes-core/references/storyboard-format.md和../hyperframes-core/references/script-format.md。使用它们编写STORYBOARD.md，并在需要旁白时编写SCRIPT.md。
使用story-design.md获取故事原型、钩子、说服逻辑、节拍、VO_MODE和资源选择。从capture/extracted/asset-descriptions.md（规范清单）中选择每个视觉帧的asset_candidates — 不要浏览原始的capture/assets/。除非该清单缺失或不可用，否则不要要求用户选择资源。使用故事板和脚本参考中要求的精确字段。
草拟后，显示逐帧摘要。在同一消息中询问用户两件事：(a) 批准或请求更改，(b) 是否想要故事板框架的实时预览（npx hyperframes preview） — 仅在得到肯定回答时打开它。迭代直到获得批准，并将预览选择带到步骤6。
关卡： STORYBOARD.md存在，每个视觉帧都有asset_candidates，需要旁白时SCRIPT.md存在，并且用户批准了逐帧计划。
步骤3.1：音频
目标：从批准的脚本生成旁白、单词时间戳、音乐和音频元数据。
在步骤3批准后开始音频。在后台运行它，然后继续步骤4。
node <SKILL_DIR>/scripts/audio.mjs --script ./SCRIPT.md --storyboard ./STORYBOARD.md --hyperframes . --out ./audio_meta.json &
音频脚本处理旁白、单词时间戳、从HeyGen音乐库查找BGM以及时间元数据。BGM情绪来自故事板的music:字段。这使用HeyGen音频API进行检索，而非生成，并使用与TTS相同的~/.heygen凭据。有关提供商的详细信息，请阅读../hyperframes-media/references/tts.md。
如果没有旁白且没有SCRIPT.md，则跳过语音生成。如果故事板有音乐情绪，BGM仍可能运行。
关卡： 音频作业已启动，或项目标记为静音。
步骤4：帧视觉设计
目标：为每个故事板帧添加视觉方向、布局意图和运动选择。
原地编辑STORYBOARD.md。不要创建另一个故事板。使用frame.md作为颜色、字体、布局感觉和风格的真理来源。
阅读references/visual-design.md、references/composition.md、references/motion-language.md和../hyperframes-animation/。使用visual-design.md获取必需的帧字段和必需的## Video direction块。使用composition.md获取布局、层次结构、焦点和视觉角色。使用motion-language.md和../hyperframes-animation/获取有效的效果和蓝图ID。不要发明效果名称或蓝图ID。
对于每个视觉帧，添加必需的视觉和运动字段，包括effects和focal和/或roles。添加一个视频范围的## Video direction块，用于整体视觉方向、运动风格、节奏和设计规则。
不要更改故事、脚本、资源选择、asset_candidates、transition_in或捕获的源材料。不要在此步骤中编写HTML。
在视觉设计锁定后，暂存命名的资源：
node <SKILL_DIR>/scripts/stage-assets.mjs --storyboard ./STORYBOARD.md --hyperframes .
关卡： 每个视觉帧都有effects加上focal和/或roles；## Video direction存在；assets/包含命名的资源。
步骤5：构建帧
目标：将每个故事板帧构建为HTML合成，并组装可播放的视频。
如果音频已启动，等待步骤3.1的音频完成。然后同步时长并获取音效；如果静音则跳过两者。
node <SKILL_DIR>/scripts/audio.mjs sync-durations --audio-meta ./audio_meta.json --storyboard ./STORYBOARD.md
node <SKILL_DIR>/scripts/audio.mjs fetch-sfx --storyboard ./STORYBOARD.md --hyperframes .
时长同步是机械的：真实语音时长优先；静音帧保留估计值；切勿手动编辑同步后的时长。
在分派之前，阅读sub-agents/frame-worker.md和../hyperframes-core/references/subagent-dispatch.md。为每帧分派一个子代理，如果可能则并行；否则分批运行工作器。每个工作器只处理一帧。
每个工作器上下文必须包含PROJECT_DIR、frame_id、画布大小、字幕状态和保留带（如果启用了字幕），以及ANIM_DIR作为../hyperframes-animation/的绝对路径。每个工作器读取frame.md、来自STORYBOARD.md的自己的## Frame N块，以及每个引用的效果或蓝图ID的配方主体。每个工作器只写入compositions/frames/NN-*.html。工作器绝不能编辑STORYBOARD.md。
当每个工作器返回时，编排者在STORYBOARD.md中将该帧标记为animated。
在音频时间存在后，在后台构建字幕并组装索引：
node <SKILL_DIR>/scripts/captions.mjs build --storyboard ./STORYBOARD.md --audio-meta ./audio_meta.json --hyperframes . --out ./caption_groups.json &
node <SKILL_DIR>/scripts/assemble-index.mjs --storyboard ./STORYBOARD.md --hyperframes .
captions.mjs使用项目的.hyperframes/caption-skin.html（在步骤2中复制）作为字幕外观，从frame.md注入品牌令牌；如果没有皮肤，则渲染内置的默认药丸形状。captions: skipped (<reason>)是有效的。当明确跳过时，继续无字幕。
关卡： 每帧都标记为animated，index.html存在，并且字幕已构建或明确跳过。
步骤6：最终确定
目标：验证组装的视频，获得用户批准，并渲染最终的MP4。
注入转场，运行检查，暂停以供审查，然后渲染。
node <SKILL_DIR>/scripts/transitions.mjs inject --storyboard ./STORYBOARD.md --hyperframes .
node <SKILL_DIR>/scripts/transitions.mjs verify --storyboard ./STORYBOARD.md --index ./index.html
npx hyperframes lint
npx hyperframes validate
npx hyperframes inspect
npx hyperframes snapshot --at <frame-midpoints>
snapshot将捕获的帧拼接成一个联系表（snapshots/contact-sheet.jpg）。快速浏览一下；如果没有明显问题，继续 — 不要在此停留。
如果命令失败，显示stderr并停止 — 不要堆积恢复命令。自行修复：对compositions/frames/NN-*.html进行最便宜的安全编辑，然后重新运行失败的检查。
已知误报 — 不要追查。 inspect可能会报告少量text_box_overflow错误，大约1–4px，出现在字幕高亮词上（选择器#caption-word-* / .caption-line）。字幕药丸使用故意紧凑的line-height（在scripts/captions.mjs中设置一次），并且没有overflow:hidden，因此重显示字形的墨水会溢出几像素到药丸自己的内边距中 — 实际上没有内容被裁剪。将这些视为预期并继续。不要增大字幕的line-height（这会使药丸膨胀，更糟糕）。仅在text_box_overflow命名一个帧元素（#el-NN-*）时才采取行动，而不是字幕词。
检查通过后，暂停以供用户审查。视频已组装、可查看，并可在Studio中编辑。仅在步骤3和步骤6之间管理一次预览：如果用户之前要求则打开，如果之前拒绝则提供，如果用户已在Studio中审查则不再询问。
预览：npx hyperframes preview
仅在用户批准后渲染：
npx hyperframes render --skill=product-launch-video --quality high --output renders/video.mp4
除非用户要求，否则不要在渲染后重新运行lint、validate、inspect或snapshot。
关卡： lint、validate和inspect在渲染前通过；用户在审查暂停时批准；renders/video.mp4存在。最终回复说明MP4路径和最终时长。
快速参考
格式： 默认横向1920x1080；纵向1080x1920；方形1080x1080。在故事板前置元数据中设置一次格式。
后台脚本： 工作流仅包含以下scripts/下的脚本：build-frame用于采用并品牌重新混合帧预设到frame.md（+字幕皮肤）；audio用于TTS、转录、BGM、SFX和时长同步；captions；transitions用于注入和验证；stage-assets用于将帧命名的资源复制到assets/；以及assemble-index。其他所有内容由hyperframes CLI处理。
| 阅读 | 时机 |
|---|---|
[../hyperframes-creative/frame-presets/](../hyperframes-creative/frame-presets/) |
步骤2：选择并采用帧预设。 |
[../hyperframes-creative/references/design-spec.md](../hyperframes-creative/references/design-spec.md) |
步骤2：正确应用品牌令牌。 |
[references/story-design.md](references/story-design.md) |
步骤3：规划产品发布故事。 |
[../hyperframes-core/references/storyboard-format.md](../hyperframes-core/references/storyboard-format.md) |
步骤3：编写STORYBOARD.md。 |
[../hyperframes-core/references/script-format.md](../hyperframes-core/references/script-format.md) |
步骤3：编写SCRIPT.md。 |
[../hyperframes-media/references/tts.md](../hyperframes-media/references/tts.md) |
步骤3.1：选择或了解TTS提供商和语音。 |
[references/visual-design.md](references/visual-design.md) |
步骤4：在视觉上丰富故事板。 |
[references/composition.md](references/composition.md) |
步骤4：判断构图。 |
[references/motion-language.md](references/motion-language.md) |
步骤4：判断运动语言。 |
[../hyperframes-animation/](../hyperframes-animation/) |
步骤4：引用效果和蓝图ID。 |
[sub-agents/frame-worker.md](sub-agents/frame-worker.md) |
步骤5：分派每帧工作器。 |
[../hyperframes-core/references/subagent-dispatch.md](../hyperframes-core/references/subagent-dispatch.md) |
步骤5：安全分派子代理。 |
