技能介绍

要解决什么问题

同一套「深蓝黑 + 鎏金」P0 模板能保底出片，但教学科普、大促、多品目录、走心种草对画面气质的要求完全不同。若只靠 ImageGen 静态产品图（如 Word Buddy 的 product-infographic-styles），朋友圈和公众号封面有了，视频号 / 抖音 仍缺与 16 种信息图语言一致的竖屏动效成片。

本技能把 16 种产品信息图视觉特征拆成可渲染的 HTML/CSS + GSAP 模块，输出 1080×1920、约 25 秒（可按内容缩短）的 HyperFrames 视频，并与钩子、信息、配音等模块化流程对接。

技能如何工作

视觉风格选择：用户用自然语言指定风格（如「黑板粉笔」「孟菲斯扁平」），AI 映射到风格 ID 并加载对应模板（如 VS05、VS09）。

每种风格由一套固定要素组成：

CSS 变量、背景纹理、字体与卡片样式
装饰元素与 GSAP 3.12.5 动画节奏
竖屏 y 轴进出场转场；渲染需避免 Math.random() 与 repeat:-1 等不确定/无限循环

16 种风格覆盖不同场景，例如 VS05 黑板粉笔 / VS18 实验室蓝图 偏科普与参数，VS07 漫画波普 / VS09 孟菲斯 偏大促与数据卡，VS16 排列平铺 适合多品目录。文档还提供按内容类型（科普、促销、旗舰、种草）与发布平台（视频号、抖音、朋友圈）的选型表，并与 P0 的关系是：批量与紧急用 P0，单条精品或系列轮换用新风格。

典型流水线：选内容模块 → 选视觉风格 → 加载 templates/vsXX-*.html → 替换文案 → 配音（Edge-TTS）→ HyperFrames 渲染 → FFmpeg 混音。

适用边界与注意点

与 product-infographic-styles 互补：前者出静态 PNG，本技能出动态 MP4，视觉语言同源。
静态 skr 横屏单页 HTML 不能直接当视频模板；竖屏需多 scene 时间线，新风格通常从零写模板。
HyperFrames 对 DOM 体量、CSS transform 与 GSAP 冲突、复杂背景导致体积膨胀较敏感；文档记录了 0.7.37 版本兼容、低内存模式、字号下限（正文建议 ≥36px）等坑。
Phase 1 已验证 VS05 / VS07 / VS09 / VS16 / VS18 等模板；其余风格在路线图内，实施前以仓库内模板与 references 为准。

截图预览

使用场景

视频号要发曲面膜翘边等参数科普，需指定 VS05 黑板或 VS18 蓝图竖屏模板，替换模块化文案后 HyperFrames 出片并混中文配音。
大促节点要做晶钻膜等促销短视频，固定 VS07 漫画或 VS09 孟菲斯 HTML 模板，批量只换产品与话术、保持大声量视觉。
多系列钢化膜/配件需目录式展示，用 VS16 排列平铺模板做 1080×1920 多品并列视频，避免连续多条都用同一 P0 画面。
走心种草或贴膜教程发朋友圈视频，选手工纸艺 VS01 或莫兰迪手账 VS19，与静态 product-infographic 配图保持同一套 16 风格语言。

适合人员

负责 3C 贴膜/配件电商短视频的运营，要把钩子、参数、卖点模块拼成带 Edge-TTS 配音的竖屏成片并按平台选风格。
主攻视频号、老板向受众的内容编导，需要孟菲斯/蓝图/黑板等教学或数据感画面，而不是长期只用深蓝鎏金 P0。
维护 Hermes 或模块化视频流水线的前端/动效工程师，编写 `templates/vsXX-*.html`、GSAP 场景转场并规避 HyperFrames DOM 与版本坑。
已用 Word Buddy product-infographic-styles 出静态产品图的创作者，希望朋友圈静图与抖音/视频号动效视频共用 16 种视觉语言。