Product Promo Video 是一个把产品做成 30–60 秒宣传片的 Skill。整体流程为：脚本（brief.json）→ 配音 → HTML 动效 → 逐帧渲染 → 混音 → MP4。
【画面实现】 画面全部是 HTML/CSS，由一个按时间推进的运行时驱动，无头 Chrome 逐帧截图，所以文字清晰、每一帧都能复现，换风格、换品牌色、换横竖版都不用重做素材。
【与 store-release-kits 的关系】 store-promo-shots 做商店静态宣传图，这个 Skill 做动态宣传片，两者用的截图可以通用。
【硬性规则】
- 界面必须是真的：产品截图来自官网或用户给的真实截图，不画产品里没有的界面。
- 数字必须有出处：用户量、增长率这类数字要么用户给，要么查财报或官方公告，并在 kicker 里写上时间（如「2026 年第二季度」）；查不到就不放 stats 场景。
- logo 用原件：优先用矢量 SVG，其次是透明底的 PNG 原图；不要拿带背景的截图当 logo，也不要自己画。
- 不用 emoji：标题、旁白、标签、卡片里都不能出现 emoji；卡片图标用 Lucide 线性图标按名字引用（"icon": "gamepad-2"），颜色自动跟随风格。make.py 渲染前会扫描整份 brief，发现 emoji 直接报错并列出位置。颜文字和箭头不算 emoji。
- 做别人家的产品（比如拿 B 站当示例）只能用于演示和内部提案，不要冒充官方发布。
【使用流程】
- 收集产品资料：用户给了就用用户的；没给就从官网抓取，先在 Skill 目录 scripts 下 npm install --silent 安装 puppeteer-core 和 lucide-static，再运行 node fetch_brand.mjs https://example.com <工作目录>/brand，抓回 brand.json、logo 图、icon、桌面与移动端截图以及正文配图。抓完需人工检查（常见坑见 references/brand-extraction.md，包括产品首页常只有登录框、logo 截图带 banner、主色候选排序、slogan 需查证、Cloudflare 验证等）。从宣传图里抠 logo 可用 scripts/extract_logo.py，支持 white / on-dark / on-light 模式。必须出现在片子里的：logo、slogan、主色、核心使用场景、真实界面。
- 写脚本 brief.json：照抄 assets/brief.template.json，每个场景一个对象，say 是该场旁白，场景时长由旁白长度自动决定。可用场景类型包括 logo、slogan、feature、cards、stats、tags、gallery、end。常规结构约 40 秒、6–8 场：logo → slogan → 2~3 个 feature/cards → stats 或 tags → end。脚本与配音写法见 references/script-writing.md。
- 选风格：八种风格——apple-keynote（黑底大字，适合硬件、旗舰功能、高端品牌）、saas-glow（深色光斑网格，适合软件、AI、开发者工具、B 端）、kinetic（巨字砸入闪切，适合短视频投放、活动、年轻品牌）、flat-mg（几何漂浮，适合消费 App、社区、教育）、editorial（纸感衬线，适合内容、文化、生活方式）、neo-brutal（粗描边硬投影，适合独立开发、创意工具、潮牌）、cyber-glitch（霓虹故障，适合游戏、电竞、潮流科技）、bento（浅灰圆角卡片，适合功能多的产品、效率工具）。详见 references/styles.md。用户没指定时，按产品调性挑 2–3 个差别大的风格各出一版让用户选；品牌色会自动覆盖风格的强调色。
- 先出静帧再渲染：make.py 支持 --style、--preview（只出 HTML 和每场静帧）、--format 9:16（竖版）、--remix（只改配乐/音量时不重渲画面）。每次都先用 --preview，再用 ffmpeg 拼总览图检查文字溢出、标题遮挡、字幕挡内容、截图登录弹窗、logo 可辨识度等问题，改完再出成片。成片后再抽帧检查入场时刻与转场中间，场景起止时间在 timeline.json 里。
- 交付：产出在 brief 所在目录 out/<style>-<format>/，含 MP4 成片（H.264 + AAC）、可直接打开的 index.html（?t=12.5 可停在某一秒）、stills/、timeline.json、voice/、bgm.wav。需告知用户用了哪个配音引擎、配乐为合成临时曲（正式投放建议换授权音乐）、数据出处。
【配音与配乐】 配音引擎按顺序尝试 edge-tts（微软在线音色，最自然）→ macOS say（婷婷，机械感较重）；voice.engine 可指定 edge / say / kokoro / none，每场也可用 voiceFile 换真人录音。edge-tts 偶尔被拒（403）会自动退回 say，交付时要说明用的是哪个。每种风格有默认音色和语速，可用 voice.voice / voice.rate 覆盖。配乐 "bgm": "auto" 会按风格合成一段无版权临时曲（五种情绪）；正式片写 "bgm": "music/xxx.mp3" 使用授权音乐；旁白响起时配乐自动压低。
【改造和扩展】 单场可写 "transition" 指定转场（cut fade blur push pushUp zoom circle shapeWipe flash glitchCut stripes）；brief 的 css 字段可加额外 CSS 换底色主题；支持 "fontFile" 品牌字体；可用 product.colors.accent / accent2 或 tokens 覆盖任意变量；新增风格需改 templates/styles.js、templates/styles.css、make.py 的 STYLE_META 及 references/styles.md；新增动效预设改 templates/runtime.js。
【案例】 examples/ 里有五个真实产品的完整案例（brief.json + 总览图）：哔哩哔哩（flat-mg / kinetic / saas-glow / cyber-glitch / kinetic 竖版）、Meta Muse（bento）、SpaceXAI Grok Bot（editorial）、OpenAI dots（apple-keynote）、Manus Cue（neo-brutal）。
【依赖】 Node 18+、ffmpeg、Chrome（或 puppeteer 缓存的 chrome-headless-shell）、Python 3 + numpy（合成配乐用）；可选 uvx（edge-tts）。不调用任何图像生成 API。
【边界】 不生成产品界面，不做实拍；需要演示交互流程时，需用户录屏后放进 feature（目前只支持静态图，录屏需先截关键帧）。合成配乐只是临时曲，不能替代正式配乐。中文字体用系统的 PingFang（最粗为 Semibold），想要更重的字需在 brief 里用 fontFile 指定字体文件。