guided-explainer-video 是一个引导式的讲解视频制作工作流，属于 bintzgavin/helios 技能集合。它把“从零到成片”的过程拆成若干明确步骤，适合需要制作产品说明、操作演示或流程讲解视频的场景。
用途 该技能用于端到端生成讲解或演练视频。用户只需给出主题（例如“用 60 秒解释我们的结账流程”），工作流会先确认品牌信息来源，再依次完成品牌分析、音乐生成与分析、创意规格编写、页面实现和渲染输出。
主要能力
- 品牌信息提取：若用户在品牌仓库内，则分析 Tailwind 配置、CSS 变量、全局样式、设计令牌、Logo、favicon、文档结构、功能描述、引导流程、帮助文案、信息架构、UI 组件和已有动效等；若用户提供网址，则抓取该网站并提取可见的品牌元素。据此构建内部品牌画像，包括核心价值主张、目标受众、语气、视觉密度、主色与强调色、字体特征、信息层级和解释风格。
- 音乐生成（可选）：使用 ElevenLabs 生成器乐背景音乐，要求平稳、支持性语气、无明显戏剧性峰值、不压过旁白，并按目标时长保存到本地。
- 音频节拍分析（可选）：用 ffmpeg 提取 BPM、节拍时间戳、下拍和能量峰值，形成节拍时间图，使分区转场对齐下拍、文字出现对齐节拍。
- 创意规格：输出一份结构化创意规格，包含时长、16:9 画幅、品牌摘要、叙事弧（引入→问题→方案→运作方式→行动号召）、动效语言、节拍同步分区、精确时间戳、旁白脚本、屏幕文字、视觉构图、motion.dev 动画行为、转场逻辑、图层顺序、音频方向、素材需求和进度标记。
- DOM 合成实现：创建 composition.html，使用 HTML、CSS 和 motion.dev，通过 WAAPI/CSS/motion.dev 实现动画，并确保 window.helios 已定义、调用 helios.bindToDocumentTimeline() 且启用 autoSyncAnimations，保证确定性时间、无随机性。
- 官方 CLI 渲染：执行 npx @helios-project/cli render ./composition.html -o output.mp4，输出带音频的 16:9 MP4。
使用方式 流程要求先向用户提出两个问题并等待回答：一是品牌信息来源（仓库还是网址），二是是否需要生成背景音乐；若需要音乐，则环境中需有 ELEVEN_LABS_API_KEY（可从 https://elevenlabs.io 的 Profile → API Keys 获取）。随后安装依赖：npm install @helios-project/core @helios-project/renderer @helios-project/cli。之后按步骤提取品牌、生成与分析音乐、读取强制性的动效设计规则（skills/guided/motion-design-rules）、产出创意规格、实现页面并渲染。渲染使用 DOM 模式。
适用场景 适用于产品功能讲解、结账或注册等流程说明、上手引导、功能介绍、操作演练等需要品牌一致性和旁白配合的短视频。若无指定时长，默认 60 秒；时长不超过 30 秒时压缩为“钩子→核心概念→行动号召”；任何时长最多 5 个分区，每个分区需有屏幕标题，节奏不得过快，关键信息文字至少停留 3 秒。
限制 工作流要求不猜测品牌身份，必须分析代码库或研究给定网址；不自行读取 .env 或验证密钥。音乐功能依赖 ElevenLabs 密钥，用户拒绝音乐时跳过相应步骤。渲染依赖 Helios CLI 和 DOM 模式。创意规格需放在单个代码块中，不输出推理过程。脚本须清晰、对话式，动效须与节拍对齐且确定可复现。