用途:slideshow 是 HyperFrames 体系中用于编写演示文稿的技能。它把常规 HyperFrames 合成(场景、片段、GSAP 时间线)转换为可导航的离散幻灯片,支持演示模式、演讲者备注、分步揭示、热点分支跳转与校验。
主要能力:
- 幻灯片声明:每个幻灯片都是一个场景,通过 data-composition-id、data-start、data-duration、data-label 声明。
- JSON 清单:在合成 HTML 中加入唯一的 application/hyperframes-slideshow+json 脚本块,声明 slides(主线顺序、备注、fragments、hotspots、可选 startTime/endTime)与 slideSequences(离线的分支序列)。
- 分步揭示(fragments):数组为幻灯片时间区间内的绝对合成时间(秒),播放器逐次跳转并停留在各揭示点。
- 分支导航:热点可带百分比区域框,点击后进入分支序列;导航栈支持返回父幻灯片与回到主线,并显示面包屑导航和分支内页码。
- 演讲者备注:notes 仅演讲者可见。
- 输出形态:以实时演示 Deck 呈现(hyperframes present 或 Studio 演示模式),也支持逐页快照静图;暂不支持将 Deck 渲染为单个线性 MP4。
使用方式:
- 安装:插件内按插件执行规则;独立安装可用 npx hyperframes skills update slideshow 保持技能更新(需先与用户确认)。
- 来源为 figma.com 时先运行 /figma 获取素材、品牌令牌与故事板,再据此构建。
- 先阅读 /hyperframes-core 了解基础合成约定;本技能只覆盖幻灯片清单结构、幻灯片写作规则、fragments、分支、校验与包装组件。
- 构建具名视觉(如 CRT 扫描线、故障效果、柱状图竞赛、终端窗口等)前,先用 npx hyperframes catalog --query "<视觉描述>" --json 检索在线目录,再用 npx hyperframes add <name> 引入并就地定制。
- 从网页转换时尽量保留原页视觉设计、动效语言、交互行为与媒体行为;每个带 src 的 video/audio 需补 data-start、data-duration,必要时加 data-has-audio="true",并将 preload 设为 metadata 或 auto。
适用场景:演示文稿、路演 Deck、交互式 Deck、将现有网页转换为幻灯片。
限制与注意:
- 暂不支持把 Deck 渲染为线性 MP4(render 只会解析第一个合成,产生截断视频);线性主线的导出功能尚未发布。
- TTS 相关字段(ttsScript、ttsAudioUrl、ttsDurationMs)为预留字段,播放尚未接入。
- 分支场景不得加入主线 slides 数组,只能出现在 slideSequences 中;校验规则会标记重叠。
- 文案规则:标题应为完整句子式论断;每页一个观点加一个视觉;要点先行;市场规模自下而上计算;正文最小字号约 30pt 等效;隐藏场景帧需同时设置 opacity、visibility、pointer-events。
- 若请求含糊(如“presentation”“deck”),需先向用户确认是否要 HyperFrames slideshow,确认后再实施。
分类:设计与创作(design)。