用途
本技能用于在 HyperFrames 中撰写幻灯片(slideshow)——演示文稿、路演 Deck 或交互式 Deck。幻灯片被声明为普通的 HyperFrames 合成:场景、片段、GSAP 时间线,外加一个 JSON 岛屿,声明哪些场景是幻灯片以及它们如何连接。播放器的 SlideshowController 读取岛屿,把连续的 GSAP 时间线变成可离散导航的 Deck。
主要能力
- 离散幻灯片:每个幻灯片由一个场景支撑,用 data-composition-id、data-start、data-duration、data-label 声明。
- JSON 岛屿:一个
<script type="application/hyperframes-slideshow+json">块,作为幻灯片顺序、备注、碎片停留点、热点和分支序列的唯一事实来源。 - 碎片(fragments):幻灯片内的逐步揭示停留点,导航是 seek 驱动而非播放驱动。
- 分支与热点:点击热点进入分支序列,支持返回父幻灯片和返回主 Deck,面包屑与幻灯片计数器按序列作用域显示。
- 演讲者备注:仅演讲者可见,观众不可见。
- 校验:lint 规则检查 sceneId 匹配、碎片时间范围、主 slides 数组与分支序列的重叠等。
- 输出形态:可现场演示的 Deck(通过 hyperframes present <project-dir> 或 Studio present 模式)以及单页快照;不支持把整个 Deck 渲染成单个 MP4(会静默截断)。
使用方式
- 安装与保鲜:在 HyperFrames 插件内时遵循插件执行规则;独立安装时,运行前先与用户确认执行
npx hyperframes skills update slideshow以刷新该技能及其依赖的核心领域技能。 - 先阅读 /hyperframes-core 了解基础合成契约(clips、tracks、data-* 属性、确定性规则);本技能只覆盖新增内容。
- 意图确认:用户明确要求 slideshow 时直接进行;从 presentation、pitch deck、deck、interactive deck 或“转换此页面”等相邻请求触发时,先暂停并询问是否要做成 HyperFrames 幻灯片,用户确认后再实施。
- Figma 来源:如果 Deck 内容或故事板来自 figma.com URL,先运行 /figma(资产导出、品牌令牌、故事板重建),再从输出构建;不要直接用原始 MCP 工具驱动 Figma。
- 写作:按幻灯片写作规则撰写,先搜索实时目录
npx hyperframes catalog --query "<视觉描述>" --json查找命名可视化块,再用npx hyperframes add <name>把块源码加入 Deck 并就地定制。 - 移植源页面:保持原页面的视觉设计、动效语言、交互行为、媒体行为和演示可供性;为复制过来的
<video>/<audio>添加 data-start、data-duration,必要时加 data-has-audio="true";媒体不要保留 preload="none";解析字体令牌为具体回退栈;检查内容证据类图片的裁剪语义;确保堆叠场景帧正确隐藏并阻止指针事件。 - 校验后交付:用 hyperframes present 现场演示,或生成单页快照。
适用场景
- 路演 Deck、销售演示、交互式演示文稿。
- 需要演讲者备注、分支深入内容、热点导航的演示。
- 把现有网页转换为保留原视觉、动效和交互行为的幻灯片。
限制
- 不要把幻灯片渲染成单个线性 MP4;这样只会解析第一个合成并输出静默截断的 MP4。线性主线的导出(仅主线幻灯片、排除分支序列)暂未提供;当前支持的输出是现场演示 Deck 和单页快照。
- 碎片是绝对合成时间线上的时间(秒),必须落在幻灯片的 [start, end] 范围内。
- 分支场景 ID 不能加入主 slides 数组,只能出现在 slideSequences 条目内。
- TTS 相关字段(ttsScript、ttsAudioUrl、ttsDurationMs)为预留,播放尚未接通。
- 幻灯片写作规则是硬约束:标题为完整句子、一页一个观点、先给最强调、自下而上市场规模测算、字号不低于约 30pt 等效(1920×1080 下正文 48px,任何观众必读文字不低于 40px)。