该技能是一套端到端的引导式工作流,用于制作产品发布或版本升级的公告视频。
用途:围绕品牌自身的仓库或官网,生成一段具有电影感、节奏与音乐同步的发布公告视频,覆盖从品牌调研、创意规格、动画实现到渲染输出。
使用方式:
- 先与用户确认两件事:是在品牌仓库内工作,还是提供 URL 供在线调研;是否需要生成背景音乐(如需要,环境中需有 ELEVEN_LABS_API_KEY,可在 https://elevenlabs.io → Profile → API Keys 获取)。不要自行读取 .env 或验证密钥。
- 安装运行时依赖:npm install @helios-project/core @helios-project/renderer @helios-project/cli,使用 DOM 模式渲染。
- 提取品牌信息:分析 Tailwind 配置或 CSS 变量、全局样式、设计令牌、Logo、favicon、变更日志、版本号、新功能实现、Hero 区、营销文案、产品名与标语等;若提供 URL,则从线上站点提取可见品牌元素。据此构建品牌画像(价值主张、目标受众、语气、视觉密度、主色与强调色、字体特征、产品成熟度、公告量级)。
- 可选生成音乐:用 ElevenLabs 生成与发布会氛围匹配的器乐音轨(铺垫、渐强、高潮揭晓、凯旋收尾),并本地保存。
- 用 ffmpeg 分析音频,提取 BPM、节拍时间戳、强拍、能量峰值与渐强峰值,形成节拍映射;揭晓时刻须落在渐强峰值,功能亮点对齐揭晓后的节拍。
- 阅读并遵循 skills/guided/motion-design-rules 中的全部规则。
- 产出创意规格(单一代码块,无额外解释),包含时长、16:9 比例、品牌摘要、发布内容、运动语言、按节拍分场的场景与精确时间戳、旁白脚本、屏幕文字(版本号、功能名、标语、日期)、视觉构图、motion.dev 动画行为、转场逻辑、图层顺序、音频方向与素材需求。结构上分为四幕:张力(前 30%)、揭晓(接下来 20%)、展示(接下来 35%)、行动号召(最后 15%)。
- 实现 composition.html:使用 HTML + CSS + motion.dev,通过 WAAPI/CSS/motion.dev 做动画,揭晓对齐音频高潮,包含氛围元素(粒子、光晕、渐变)与生成的音频;暴露 Helios 运行时并调用 helios.bindToDocumentTimeline({ autoSyncAnimations: true }),要求确定性计时、无随机性,功能卡片依次而非同时出现。
- 用官方 CLI 渲染:npx @helios-project/cli render ./composition.html -o output.mp4,输出 16:9、正确时长、带音频的高质量 MP4,文件名为 output.mp4。
限制与规则:时长不超过 15 秒时跳过第一幕、直接揭晓、最多展示 2 个功能;未指定时长默认 30 秒;任何时长下功能亮点最多 5 个;版本号与日期需醒目;不得猜测品牌识别;不读取或验证环境密钥。