hyperframes-explainer-builder

HyperFrames 解说视频构建器

每款产品都需要一个 75 秒的答案，告诉人们“这是什么，为什么值得关注”。但大多数团队要么跳过这一步，要么花五位数请代理公司制作。本技能会利用现有的任何源材料，制作真正可渲染的解说视频。它负责叙事和组装；合成机制、字幕、转场和 TTS 则由 hyperframes 技能处理（hyperframes-cli 用于 init/lint/preview/render，hyperframes-media 用于配音；如果来源是要从中提取视觉素材的网站，则使用 website-to-hyperframes）。

步骤 1 -- 提炼故事

从 URL（获取并阅读）、文档或访谈中提炼：目标受众、痛苦的现状、产品能带来的结果（而非功能）、用于证明产品价值的 2-3 项能力，以及要采取的行动。如果源材料用行话掩盖了价值主张，就在脚本中把它说明白——写出客户会说的话，而不是“关于我们”页面上的措辞。

步骤 2 -- 编写脚本

解说视频的叙事弧线：约 150-190 个词，适合 60-90 秒的舒适语速配音：

1. 冷开场（0-5 秒）——用观众抱怨问题时的说法来呈现问题。不要用 Logo 开场；没人会等着看 Logo。
2. 转折（5-15 秒）——只提一次产品名称，用一句话说明它如何解决问题。
3. 工作原理（15-55 秒）——最多三个节拍，每个节拍展示一项能力带来的结果（例如“发票会自动跟进”），并配上相应的演示场景。
4. 佐证（55-70 秒）——一个数字或一句引言，不要堆砌信息。
5. 行动号召（70-85 秒）——只提供一个行动，并在配音和画面中呈现。

发布前要逐句朗读；解说视频的配音会立刻暴露书面表达的生硬之处。

步骤 3 -- 构建合成画面

• 每个节拍对应一个场景：问题和转折部分使用动态文字和简单的示意图动画；“工作原理”部分使用产品 UI 场景——用 HTML 重新干净利落地制作（清晰、符合品牌风格、始终易读），或根据源材料选择有目的地平移截图。
• 动效服务于理解：一次只让一个概念动起来；使用光标/流程动画描绘配音所描述的内容，并在佐证部分使用计数器。遵循 HyperFrames 规则，确保结果具有确定性且支持安全跳转。
• 遵循品牌设计令牌（复用 design-style-installer / 现有令牌集；不要用紫色或表情符号）；为静音观看同步字幕；通过媒体流水线制作配音——完整渲染音轨前，先提供两种声音选项。
• 声明完成前先运行 Lint 并预览；未运行流水线就绝不要声称视频可渲染。

步骤 4 -- 交付

交付主版本（16:9）、方形社交媒体版本，以及一个 30 秒精简版（开场 + 最佳能力 + 行动号召），用于广告和邮件嵌入。附上海报帧和一行嵌入建议（主页使用静音自动播放并显示字幕）。

规则

• 结果优先于功能，最多三个节拍——试图解释一切的视频，最终什么也解释不清。
• 所有声明都必须有源材料佐证；脚本绝不编造数字、客户或产品并不具备的能力。
• 使用观众的用语，而非行业用语：如果网站写的是“工作流编排”，而客户说“它会帮我跟进”，脚本就用后者。
• 90 秒是上限，不是目标——精简到几乎不忍心再删，然后预览。
• 展示的 UI 必须尽可能贴近产品当前的实际界面，让试用用户能够认出来。

快速命令

• “根据 [URL] 制作解说视频”——基于网站完成整个工作流
• “根据这段描述制作解说视频”——尚无网站时，通过访谈驱动制作
• “只要脚本”——先完成步骤 1-2，待批准后再开始构建
• “制作一个 30 秒版本”——从现有成片中剪出精简版