AI Skills
slideshow

slideshow

热门

编写 HyperFrames slideshow 合成组件 —— 包含独立幻灯片、分步渐显（fragment reveals）、分支序列（branching sequences）以及热点导航（hotspot navigation）的演示文稿、Pitch Deck（商业计划书）或交互式 Slide 幻灯片。当用户请求制作演示文稿、Pitch Deck、幻灯片（slide deck）、交互式 Deck 或将网页转换为幻灯片且可能需要制作成 slideshow 时，用作意图确认；如果用户没有明确要求制作 slideshow / slide show，在开始编写前需先向用户确认。

3.1万Star
3036Fork
更新于 2026/6/25
获取 Skill源代码

相关 Skills

ui-demo23万chrome-devtools3.6万seo-dataforseo1.2万
SKILL.md
只读
名称
slideshow
描述

编写 HyperFrames slideshow 合成组件 —— 包含独立幻灯片、分步渐显（fragment reveals）、分支序列（branching sequences）以及热点导航（hotspot navigation）的演示文稿、Pitch Deck（商业计划书）或交互式 Slide 幻灯片。当用户请求制作演示文稿、Pitch Deck、幻灯片（slide deck）、交互式 Deck 或将网页转换为幻灯片且可能需要制作成 slideshow 时，用作意图确认；如果用户没有明确要求制作 slideshow / slide show，在开始编写前需先向用户确认。

Slideshow 编写契约

HyperFrames slideshow 本质上就是一个标准的 HyperFrames 组合（包含场景 Scene、剪辑 Clip 和 GSAP 时间轴），只不过多了一个关键元素：一个声明“哪些场景是幻灯片以及它们如何衔接”的 JSON island。播放器的 SlideshowController 会读取这个 island，将原本连续的 GSAP 时间轴转换为离散且可导航的演示文稿。

基础组合契约（Clip、Track、data-* 属性、确定性规则）请先阅读 /hyperframes-core。本 Skill 仅涵盖增量内容：Island 的 Schema 规范、幻灯片编写规则、Fragment 分步展示、分支控制、校验规则以及外层封装组件。

意图确认

如果用户明确要求制作 slideshow、slide show 或 HyperFrames slideshow，直接使用本 Skill 执行。

如果本 Skill 是由相近请求触发的（例如“演示文稿”、“pitch deck”、“deck”、“交互式幻灯片”或“把这个页面转换一下”），在开始编写前需先暂停，梳理好选项并向用户确认。简要说明 HyperFrames slideshow 意味着一个可运行的演示文稿，具备离散幻灯片、内置导航与演讲者模式、可编辑的演讲者备注、共享媒体处理以及交付前校验等特性。如果是从源网页转换，还要说明目标是在保留原页面视觉设计、交互、动态效果和媒体行为的同时，将页面滑动/切页转换为幻灯片之间的平滑过渡。

随后提出一个简短的确认问题：

您希望将其制作成 HyperFrames slideshow 吗？

如果环境支持单选/确认 UI（Yes/No），优先使用 UI 进行确认；否则直接输出纯文本询问。

在用户明确回答“是”之前，不要直接编写 slideshow。如果用户回答“否”，请停止使用本 Skill，切换到非 slideshow 的对应工作流。

两个核心组成部分

1. 场景（Scene）—— 采用常规方式声明

每张幻灯片背后都有一个场景支撑。通过 data-composition-id、data-start、data-duration 和 data-label 来声明场景：

<div
  data-composition-id="problem"
  data-start="0"
  data-duration="8"
  data-label="The problem"
  data-width="1920"
  data-height="1080"
>
  <!-- clips 写在这里 -->
</div>

分支幻灯片（仅能通过热点访问、排除在主线之外）的声明方式完全相同 —— 区别仅在于它们只出现在 Island 的 slideSequences 条目中，而不会出现在主线的 slides 数组里。

2. JSON island —— 每个组合包含一个脚本块

在组合的 HTML 中添加且仅添加一个 <script type="application/hyperframes-slideshow+json"> 脚本块。它承载了该 slideshow 的所有元数据：

<script type="application/hyperframes-slideshow+json">
  {
    "slides": [...],
    "slideSequences": [...]
  }
</script>

Island 是幻灯片顺序、演讲者备注、Fragment 停留点、热点以及分支序列的唯一事实来源（Single Source of Truth）。建议将其放置在靠近 <body> 顶部、Scene div 之前的位置，方便查找。

切勿将 slideshow 清单隐藏在替代的 <script type="application/json"> 块以及动态创建 Island 的运行时代码后面。present 命令会静态读取组合 HTML，并要求真正的 application/hyperframes-slideshow+json island 本身就已经存在。

Schema 结构

SlideshowManifest（Island 顶层对象）

{
  "slides": [
    /* SlideRef[] — 按顺序排列的主线幻灯片 */
  ],
  "slideSequences": [
    /* SlideSequence[] — 支线/分支序列 */
  ]
}

SlideRef

{
  "sceneId": "problem",
  "notes": "开门见山点出痛点，不要先讲公司。",
  "fragments": [3.5, 5.2, 7.0],
  "hotspots": [
    /* SlideHotspot[] */
  ],

  "ttsScript": null,
  "ttsAudioUrl": null,
  "ttsDurationMs": null
}
字段 必填 备注
sceneId 是 必须与场景的 data-composition-id 完全一致（或者显式提供 startTime/endTime）。Lint 规则会通过 data-composition-id 匹配场景。
notes 否 仅演讲者可见的文本，绝不会展示给观众。
fragments 否 幻灯片 [start, end] 时间范围内的点位数组（单位：秒）—— 详见下文 Fragments 部分。
hotspots 否 触发分支跳转的交互式覆层 —— 详见下文 Branching 部分。
startTime 否 可选。覆盖匹配场景的时间边界；默认取场景的起止时间。
endTime 否 可选。覆盖匹配场景的时间边界；默认取场景的起止时间。
ttsScript, ttsAudioUrl, ttsDurationMs 否 保留字段。 Schema 中存在这些字段，但 TTS 播放尚未接入。除非你在为未来的构建预填数据，否则请直接省略。

SlideHotspot

{
  "id": "h1",
  "label": "这个数据是怎么计算出来的？",
  "target": "market-deep-dive",
  "region": { "x": 60, "y": 10, "w": 35, "h": 20 }
}
字段 必填 备注
id 是 幻灯片内唯一。
label 是 展示给观众的 Tooltip / 按钮文本。
target 是 必须匹配 slideSequences 中的某个 SlideSequence.id。
region 否 占幻灯片百分比的包围盒：0–100 范围内的 {x, y, w, h}。省略此项则将热点渲染为整页带有标签的按钮。

SlideSequence

{
  "id": "market-deep-dive",
  "label": "市场规模测算方法论",
  "slides": [{ "sceneId": "mkt-1" }, { "sceneId": "mkt-2" }]
}

序列（Sequence）内部的 slides 使用与主线相同的 SlideRef 结构。允许使用 Fragment 和嵌套热点。

幻灯片编写规则

这些是硬性约束，而非建议。任何违反这些规则的幻灯片在 Code Review 时都会被直接重写或替换。

  • 标题必须是完整的表述性观点的句子，而不是简短的标签。 应该写“中小企业每周耗费 14 小时在手动排期上”，而不是写“排期痛点”。即使忽略视觉图表，这句话本身也能独立成立。
  • 每张幻灯片只承载“一个核心观点 + 一个视觉元素”。 如果你想添加第二个 Bullet 列表或第二个图表，请直接拆分幻灯片。
  • 结论先行（开门见山）。 最核心的观点要放在最前面 —— 无论是在单张幻灯片上还是在整个 Deck 的排列顺序中。投资人看 PPT 的习惯是从左到右、从上到下，而且随时会停下来。
  • 市场规模仅允许自下而上（Bottom-up）测算。 绝不要在没有给出推导过程的情况下直接写“$50B TAM”。必须从单元经济学（Unit Economics）逐层推导：客户数 × 单客价值（ACV），或者交易笔数 × 抽成率（Take-rate）。
  • 字号等效不低于 30pt。 在 1920×1080 分辨率下，标题字号为 72–96px，正文为 48px。任何需要观众阅读的文本字号切勿低于 40px。

迁移/转换源页面

将已有网页转换为 slideshow 时，忠实还原源页面也是契约的一部分。除非用户明确要求重新设计，否则不要用简化版近似实现来替换源页面的特定 Widget。

  • 在实际可行的前提下，尽可能精准地保留原页面的视觉设计、动效语言、交互行为、媒体行为和演示特性。当 slideshow 系统支持演讲者模式时，应使用共享的可编辑备注行为添加演讲者备注，而不是针对具体 Deck 做特殊实现。
  • 尽可能精准地从源 DOM/CSS/JS 中移植机械式的视觉组件：自定义播放器、Canvas 视觉发生器、时间轴、播放头（playhead）、音频分轨（stems）、扩散圆环、悬停状态及其他交互细节都应在转换后完好保留。
  • 将原生 <video> / <audio> 元素视为所有自定义媒体 Chrome 皮肤、Canvas 视觉发生器、波形图、节拍网格或播放头的事实来源。绑定源媒体的事件（play、pause、timeupdate、seeking、seeked、ended、ratechange、volumechange），并基于 media.currentTime 推导视觉状态；切勿运行独立的定时器，否则会导致与实际播放不同步。
  • 每一个带有 src 的复制版 <video> 或 <audio> 在执行 Lint 前都必须包含 HyperFrames 的时间属性：data-start 和 data-duration，且在需要保留有声原生音频时添加 data-has-audio="true"。幻灯片专属媒体使用对应场景的时间范围；对于可能在多个聚焦幻灯片中播放的用户控制证物视频，使用跨 Deck 的通用时间范围。不要在媒体上保留 preload="none"，应使用 metadata 或 auto。
  • 在校验前解析源页面的字体 Token。如果要保留自定义源字体，请为本地/捕获的字体文件添加 @font-face 规则；如果使用系统降级字体，请将诸如 font-family: var(--f-body) 之类的 Token 声明替换为确切的安全渲染 Stack，如 system-ui, sans-serif 或 ui-monospace, monospace；切勿将 var(...) 原封不动留在 font-family 值中。
  • 审查源页面中非典型的页面滚动/移动逻辑，特别是由 scroll、wheel、touch、hash 状态、resize 或 requestAnimationFrame 循环驱动的行为。将包含平移/缩放“世界”图层、视差、固定面板、水平滚动器、滚动刷新的时间轴、分段吸附以及聚焦元素的摄像机视口视为源页面的核心行为。滚动往往是源页面的过渡触发器，因此需要提取其进度节点、缓动（easing）以及摄像机/焦点状态来保留过渡效果，然后通过时间轴位置、Fragment 或可复用的播放器/Harness Hook 将该动画重新挂载到 slideshow 导航上。直接跳转到幻灯片停留点的独立 Wrapper 仍需要显式的导航摄像机过渡 Hook；仅计算每张幻灯片的摄像机 Transform 是不够的。切勿在幻灯片内部模拟字面意义上的“页面向下滚动”过渡；观众感受到的应当是摄像机从一个焦点移动/缩放到另一个焦点，而不是看到网页在被滚动。保持每张幻灯片之间的摄像机移动连续无断点：避免出现反向 x/y 方向或缩放的中间路线停靠点，除非源页面在该边界处确实有明确的视觉呈现。落地前忽左忽右乱晃的过渡比简单的直接焦点移动体验更差。
  • 保留源页面的媒体裁剪语义。将截图、Tweet/社交动态、产品 UI 截图、图表、文档、代码、排行榜以及任何带有可读文本的图像视为内容证物，而非装饰性媒体：在稳定的容器内使用源页面的宽高比（height: auto）或 object-fit: contain。仅在源页面本身就使用、或者意在作为装饰/背景/电影感缩略图时，才使用 object-fit: cover。