首先，在运行前与用户确认此技能是否为最新版本：
npx hyperframes skills update slideshow。如果所有内容都是最新的，则该操作为空操作；否则，它将刷新此技能及其依赖的核心领域技能，然后您才能依赖它们。
figma 来源：如果演示文稿的内容或故事板来自 figma.com URL，请先运行
/figma— 包括资源导出、品牌令牌，以及如果源是场景帧序列则进行故事板重建 — 然后从其输出开始构建。不要直接使用原始 MCP 工具驱动 Figma：这会跳过 SVG 清理、.media/manifest.jsonl来源追踪和品牌令牌var()绑定，因此后续的品牌变更无法在不完全重新导入的情况下传播。
幻灯片制作契约
HyperFrames 幻灯片是一个标准的 HyperFrames 合成作品 — 包括场景、剪辑、GSAP 时间线 — 但多了一个额外成分：一个 JSON 岛，它声明了哪些场景是幻灯片以及它们如何连接。播放器的 SlideshowController 读取该岛，并将连续 GSAP 时间线转换为离散、可导航的演示文稿。
首先阅读 /hyperframes-core 了解基础合成契约（剪辑、轨道、data-* 属性、确定性规则）。此技能仅涵盖新内容：岛的模式、幻灯片编写规则、片段、分支、验证和包装组件。
输出 — 可导航的演示文稿，而非线性 MP4
幻灯片的输出是 正在运行的演示文稿：使用 hyperframes present <project-dir>（或 Studio 演示模式）来运行它 — 播放器的 SlideshowController 读取岛并驱动导航、片段、分支和演示者模式。请参阅下方的 演示和交接。
不要对幻灯片运行 hyperframes render 以生成单个 MP4。 演示文稿被编写为几个顶级场景合成（每个幻灯片一个 data-composition-id），没有包装它们的主根合成，因此 render 仅解析 第一个 合成并输出一个 静默截断 的 MP4（例如，一个 40 秒的演示文稿只有 6 秒）。线性主线导出（仅主要幻灯片，不包含分支序列）已推迟 — 在该功能发布之前，支持的输出是实时的 present 演示文稿和每张幻灯片的 snapshot 静态图像。如果用户需要线性 MP4，请指出此限制，而不是将 render 指向演示文稿。
意图确认
如果用户明确要求幻灯片、幻灯片放映或 HyperFrames 幻灯片，则继续使用此技能。当请求通过 /hyperframes 到达时，意图层的分类负责此确认 — 路由到此意味着已确认，因此不要重新询问；该层的运行形状问题不适用（交付物是演示文稿，而非渲染视频）。如果存在 BRIEF.md，则它包含已确认的意图 — 请读取它。
如果此技能是从类似“演示”、“pitch deck”、“deck”、“交互式演示文稿”或“转换此页面”的相邻请求触发的，请在编写前暂停并在请求确认前提出选择。简要解释 HyperFrames 幻灯片是一个可运行的演示文稿，具有离散的幻灯片、内置导航和演示者模式、可编辑的演讲者备注、共享媒体处理以及交接前的验证。对于源页面转换，还要说明目标是保留原始页面的视觉设计、交互、动作和媒体行为，同时将页面移动转换为幻灯片到幻灯片的过渡。
然后提出一个简短的确认问题：
您是否希望将此作为 HyperFrames 幻灯片？
在环境提供的情况下使用是/否选择 UI；否则用纯文本提问。
在用户回答是之前不要实现幻灯片。如果他们说不，则停止使用此技能 — 读取 /hyperframes 并让意图层重新路由。此确认是一个 路由决策，而非偏好门控 — 根据 ../hyperframes/references/brief-contract.md § 1，它在自主模式下也适用（“surprise me”并不跳过它）：构建错误的交付物类型是质量失败，而非创意决定。
两个部分
1. 场景 — 以标准方式声明
每张幻灯片都由一个场景支持。使用 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"
>
<!-- 剪辑放在这里 -->
</div>
分支幻灯片（仅通过热点可访问，从主线上排除）以完全相同的方式声明 — 它们仅出现在岛的 slideSequences 条目中，而不会出现在主 slides 数组中。
2. JSON 岛 — 每个合成一个脚本块
在合成 HTML 中精确添加一个 <script type="application/hyperframes-slideshow+json"> 块。它包含所有幻灯片元数据：
<script type="application/hyperframes-slideshow+json">
{
"slides": [...],
"slideSequences": [...]
}
</script>
该岛是幻灯片顺序、备注、片段保持点、热点和分支序列的单一事实来源。将其放在 <body> 顶部附近，在场景 div 之前，以便易于查找。
不要将幻灯片清单隐藏在备用 <script type="application/json"> 块加上创建岛的运行时代码之后。present 命令静态读取合成 HTML，并期望真实的 application/hyperframes-slideshow+json 岛已经存在。
模式
SlideshowManifest（顶级岛对象）
{
"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] 范围内的时间（秒）数组 — 请参阅下方的片段。 |
hotspots | 否 | 触发分支的交互式覆盖层 — 请参阅下方的分支。 |
startTime | 否 | 可选。覆盖匹配场景的时间边界；默认为场景的开始/结束。 |
endTime | 否 | 可选。覆盖匹配场景的时间边界；默认为场景的开始/结束。 |
ttsScript, ttsAudioUrl, ttsDurationMs | 否 | 保留。 模式字段存在但 TTS 回放尚未接线。除非您正在为未来构建预填充，否则请忽略。 |
SlideHotspot
{
"id": "h1",
"label": "我们是如何计算这个的？",
"target": "market-deep-dive",
"region": { "x": 60, "y": 10, "w": 35, "h": 20 }
}
| 字段 | 必需 | 说明 |
|---|---|---|
id | 是 | 在幻灯片内唯一。 |
label | 是 | 向观众显示的工具提示/按钮文本。 |
target | 是 | 必须匹配 slideSequences 中的 SlideSequence.id。 |
region | 否 | 幻灯片百分比边界框：{x, y, w, h} 在 0–100 范围内。省略以将热点呈现为全幻灯片标签按钮。 |
SlideSequence
{
"id": "market-deep-dive",
"label": "市场规模方法",
"slides": [{ "sceneId": "mkt-1" }, { "sceneId": "mkt-2" }]
}
序列中的 slides 使用与主线相同的 SlideRef 形状。允许使用片段和嵌套热点。
幻灯片编写规则
这些是硬性约束，而非建议。违反规则的幻灯片在被审查者看到时将直接被替换。
- 标题是一个完整句子声明，而非标签。 写“中小企业每周花费 14 小时在手动排班上”而不是“排班问题”。该句子在忽略视觉效果时也应能独立存在。
- 每张幻灯片一个想法 + 一个视觉效果。 如果您想添加第二个项目符号集群或第二个图表，请拆分幻灯片。
- 以结论先行。 最有力的点放在最前面 — 在幻灯片上和演示文稿顺序中。投资者从左到右、从上到下阅读，并且会停下来。
- 仅限自下而上的市场规模估算。 不要在不显示计算过程的情况下写“500 亿美元 TAM”。从单位经济学开始向上构建：账户数 × ACV，或交易数 × 费率。
- 字体最小等效 30pt。 在 1920×1080 分辨率下，标题为 72–96px；正文为 48px。观众必须阅读的任何文本都不得低于 40px。
- 在手动构建任何命名视觉之前，搜索实时目录。 对于幻灯片所需的每种外观、效果、图表、处理或过渡 — “CRT 扫描线”、“故障”、“条形图竞赛”、“微光扫掠”、“终端窗口” — 在编写幻灯片剪辑之前运行
npx hyperframes catalog --query "<视觉，用简单英文>" --json并阅读顶部结果。搜索无需安装任何内容：无需项目、无需先前的add、无需账户。它从任何目录对整个托管注册表（约 400 个块和组件）进行排序。npx hyperframes add <name>将块的源代码放入演示文稿，然后您可以在其中进行自定义。这在移植源页面时尤其适用：真实块胜过下面移植规则所禁止的简化近似。
移植源页面
当将现有页面转换为幻灯片时，源保真度是契约的一部分。除非用户明确要求重新设计，否则不要用简化近似替换源特定的小部件。
- 尽可能精确地保留原始页面的视觉设计、动作语言、交互行为、媒体行为和展示能力。当幻灯片系统支持演示者模式时，使用共享的可编辑备注行为（而非演示文稿特定的实现）包含演讲者备注。
- 尽可能精确地从源 DOM/CSS/JS 移植机械视觉效果：自定义播放器、Canvas 可视化工具、时间线、播放头、音轨、展开圆圈、悬停状态和其他交互细节应能在转换中存活。
- 将原生
<video>/<audio>元素视为任何自定义媒体界面、Canvas 可视化工具、波形、节拍网格或播放头的事实来源。连接源的媒体事件（play、pause、timeupdate、seeking、seeked、ended、ratechange、volumechange）并从media.currentTime派生视觉状态；不要运行可能与实际回放漂移的单独计时器。 - 每个带有
src的复制<video>或<audio>在 lint 之前必须具有 HyperFrames 定时属性：data-start和data-duration，再加上当应保留可听的本地音频时为data-has-audio="true"。对幻灯片特定媒体使用场景的时间范围；对于可能从多个焦点幻灯片播放的用户控制证据视频，使用演示文稿范围的时间范围。不要在媒体上保留preload="none"；使用metadata或auto。 - 在验证之前解析源字体令牌。如果要保留自定义源字体，请为本地/捕获的字体文件添加
@font-face规则。如果使用系统后备字体，将令牌化声明（如font-family: var(--f-body)）替换为具体的渲染安全栈（如system-ui, sans-serif或ui-monospace, monospace）；不要将var(...)保留为字体族值。 - 审计源中非典型的页面移动，特别是由滚动、滚轮、触摸、哈希状态、调整大小或 requestAnimationFrame 循环驱动的行为。将固定视口与平移/缩放的“世界”层、视差、固定面板、水平滚动器、滚动擦洗时间线、部分捕捉和缩放到元素的相机视为源行为。滚动通常是源的过渡触发器，因此通过提取其进度停止、缓动和相机/焦点状态来保留过渡，然后通过时间线位置、片段或可重用的播放器/工具钩子将该运动重新托管在幻灯片导航上。跳转到幻灯片保持点的独立包装器仍然需要一个显式的导航-相机过渡钩子；计算每张幻灯片的相机变换是不够的。不要在幻灯片内部模拟字面的页面向下滚动过渡；观看者应感受到从一个焦点到另一个焦点的相机移动/缩放，而不是看到网页被滚动。保持每张幻灯片到幻灯片相机移动的连续性：避免中间路由站点的 x/y 方向反转或缩放到远距离。
[原文在此截断]