SuperAPI AI 工具集

slideshow

设计与创作

查看项目

更新于 10-19 17:58

技能介绍

用途

本技能用于在 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(会静默截断)。

使用方式

  1. 安装与保鲜:在 HyperFrames 插件内时遵循插件执行规则;独立安装时,运行前先与用户确认执行 npx hyperframes skills update slideshow 以刷新该技能及其依赖的核心领域技能。
  2. 先阅读 /hyperframes-core 了解基础合成契约(clips、tracks、data-* 属性、确定性规则);本技能只覆盖新增内容。
  3. 意图确认:用户明确要求 slideshow 时直接进行;从 presentation、pitch deck、deck、interactive deck 或“转换此页面”等相邻请求触发时,先暂停并询问是否要做成 HyperFrames 幻灯片,用户确认后再实施。
  4. Figma 来源:如果 Deck 内容或故事板来自 figma.com URL,先运行 /figma(资产导出、品牌令牌、故事板重建),再从输出构建;不要直接用原始 MCP 工具驱动 Figma。
  5. 写作:按幻灯片写作规则撰写,先搜索实时目录 npx hyperframes catalog --query "<视觉描述>" --json 查找命名可视化块,再用 npx hyperframes add <name> 把块源码加入 Deck 并就地定制。
  6. 移植源页面:保持原页面的视觉设计、动效语言、交互行为、媒体行为和演示可供性;为复制过来的 <video>/<audio> 添加 data-start、data-duration,必要时加 data-has-audio="true";媒体不要保留 preload="none";解析字体令牌为具体回退栈;检查内容证据类图片的裁剪语义;确保堆叠场景帧正确隐藏并阻止指针事件。
  7. 校验后交付:用 hyperframes present 现场演示,或生成单页快照。

适用场景

  • 路演 Deck、销售演示、交互式演示文稿。
  • 需要演讲者备注、分支深入内容、热点导航的演示。
  • 把现有网页转换为保留原视觉、动效和交互行为的幻灯片。

限制

  • 不要把幻灯片渲染成单个线性 MP4;这样只会解析第一个合成并输出静默截断的 MP4。线性主线的导出(仅主线幻灯片、排除分支序列)暂未提供;当前支持的输出是现场演示 Deck 和单页快照。
  • 碎片是绝对合成时间线上的时间(秒),必须落在幻灯片的 [start, end] 范围内。
  • 分支场景 ID 不能加入主 slides 数组,只能出现在 slideSequences 条目内。
  • TTS 相关字段(ttsScript、ttsAudioUrl、ttsDurationMs)为预留,播放尚未接通。
  • 幻灯片写作规则是硬约束:标题为完整句子、一页一个观点、先给最强调、自下而上市场规模测算、字号不低于约 30pt 等效(1920×1080 下正文 48px,任何观众必读文字不低于 40px)。