技能介绍

解决什么问题

把“AI Agent 或产品如何用 N 个能力模块完成不同任务”拍成广告片时，最容易翻车的不是没有文案，而是三件事混在一起：每个能力看起来差不多；真实能力与模拟演示边界不清；配色和动效靠手工改 CSS。结果就是观众只记得“很炫”，不记得哪个模块能干什么、是真的还是 demo。

核心做法

它把 hyperframes-video 的通用文章转视频流程固化成广告片模板，并内置《中文优化设计规范包》的 9 套配色、8 种视觉风格与中文硬约束。你只需要描述“白紫发布会”“暗黑数据感”“清爽商务”“珠宝高端”等感觉，agent 负责映射到 CONFIG.theme、CSS 变量和 GSAP 缓动；命中内置预设时直接切换，命中自定义风格时在 <style> 末尾追加 [data-theme] 块与 THEME_META，HTML 结构不动。

成品按 6 个场景组织：开场点题，N 个能力模块各一段，收尾串成流水线，总时长 60–70s 最佳。每个能力场景采用左侧固定版式：名称加核心能力；右侧按模块类型变化：真实案例放成片截图或真实代码打字，模拟演示放重新设计的流程、分镜或提示词。两类场景都强制带 .badge.real 或 .badge.demo 与说明，避免观众误以为演示截图是真实产品。

工程约束

视觉变量必须走 CSS 变量，风格切换只改主题，不写死颜色。全局运动母题包括 3 个 blur: 60px 的漂浮 blob、-9° 胶片条、mulberry32 种子化上升光点和顶部进度条。字幕 28px、bottom: 28px、max-width: 1200px，必要时上移到 70px 避开右侧结果。中文交付前要量文本溢出、检查 AA 对比度、执行 grep 确认 badge 与 note 齐全，并避免 Math.random()。渲染需在系统终端手动跑，沙箱可能拦 Chrome 的 macOS Mach 权限。

适用边界

它不是通用故事转视频工具，而是矩阵能力展示器；主题继承模板变量，只覆盖 --bg1、--bg2、--accent、--accent-soft、--fg、--sub-bg、--sub-fg 等有限变量，新增风格仍需按 references/styles.md 第四节生成主题块与缓动签名。示例是白紫成品，其他风格需要 agent 按自然语言扩展，不能期待所有配色都开箱即用。