AI Skills
slideshow

slideshow

熱門

製作 HyperFrames 簡報檔（slideshow）作品 — 包含簡報（presentation）、募資簡報（pitch deck）或互動式簡報（interactive deck），具備獨立投影片、分段漸次顯現（fragment reveals）、分歧順序（branching sequences）與熱點導覽（hotspot navigation）等功能。當使用者要求製作簡報、募資簡報、簡報頁面、互動式簡報，或將網頁轉換為簡報且可能需要簡報檔型態時，請將此 Skill 用於意圖確認；若使用者未明確要求製作 slideshow / slide show，在開始製作前先進行確認。

3.1萬星標
3036分支
更新於 2026/6/25
獲取技能源代碼

相關技能

ordercli38萬ui-demo23萬browser-extension-builder4.5萬
SKILL.md
唯讀
名稱
slideshow
描述

製作 HyperFrames 簡報檔（slideshow）作品 — 包含簡報（presentation）、募資簡報（pitch deck）或互動式簡報（interactive deck），具備獨立投影片、分段漸次顯現（fragment reveals）、分歧順序（branching sequences）與熱點導覽（hotspot navigation）等功能。當使用者要求製作簡報、募資簡報、簡報頁面、互動式簡報，或將網頁轉換為簡報且可能需要簡報檔型態時，請將此 Skill 用於意圖確認；若使用者未明確要求製作 slideshow / slide show，在開始製作前先進行確認。

Slideshow 製作規範（authoring contract）

HyperFrames slideshow 本質上是普通的 HyperFrames 作品 — 包含 scenes（場景）、clips（剪輯片段）與 GSAP 時間軸 — 僅多了一個關鍵元素：用來宣告哪些 scene 是投影片以及它們如何連接的 JSON island。播放器的 SlideshowController 會讀取這個 island，並將連續的 GSAP 時間軸轉換為可獨立導覽的簡報作品。

請先閱讀 /hyperframes-core 以瞭解基礎作品規範（clips、tracks、data-* 屬性、確定性規則）。本 Skill 僅涵蓋新增的內容：island 的 schema、投影片撰寫規則、fragments、分歧（branching）、驗證以及外層包覆元件（wrapping component）。

意圖確認（Intent confirmation）

若使用者明確要求製作 slideshow、slide show 或 HyperFrames slideshow，請直接使用本 Skill 繼續進行。

若此 Skill 是由相近的請求觸發，例如「presentation」、「pitch deck」、「deck」、「interactive deck」或「將此頁面轉換為簡報」，在開始製作前請先暫停，並在詢問確認前先說明選項。簡要解釋 HyperFrames slideshow 代表一個可執行的簡報作品，具備獨立投影片、內建導覽與簡報者模式、可編輯的演講者備忘錄、共享媒體處理，並會在交付前進行驗證。若為來源網頁轉換，也請說明目標是在保留原始網頁視覺設計、互動、動態與媒體行為的同時，將網頁移動轉化為投影片之間的轉場。

接著提出簡短的確認問題：

Do you want this as a HyperFrames slideshow?

當執行環境提供 yes/no 選項 UI 時請優先使用；否則請以純文字提出問題。

在使用者回覆 yes 之前，請勿實作 slideshow。若使用者選擇 no，請停止使用本 Skill 並切換至合適的非 slideshow 工作流程。

兩個核心部分

1. Scenes — 以標準方式宣告

每張投影片都由一個 scene 支撐。宣告 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>

分歧投影片（Branch slides，僅能透過熱點點擊進入、排除在主線之外）的宣告方式完全相同 — 它們只是僅出現在 island 的 slideSequences 項目中，而不會出現在主 slides 陣列中。

2. JSON island — 每個作品包含一個 script 區塊

在作品 HTML 中新增恰好一個 <script type="application/hyperframes-slideshow+json"> 區塊。它保存了所有 slideshow 的中元資料（metadata）：

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

Island 是投影片順序、備忘錄、fragment 停留點（hold-points）、熱點（hotspots）與分歧順序（branch sequences）的唯一真實來源（single source of truth）。請將其放置在 <body> 頂部附近（scene div 之前），以便於查找。

請勿將 slideshow manifest 隱藏在替代的 <script type="application/json"> 區塊與動態建立 island 的執行期程式碼後方。present 命令會靜態讀取作品 HTML，並預期真實的 application/hyperframes-slideshow+json island 已經存在。

Schema

SlideshowManifest（頂層 island 物件）

{
  "slides": [
    /* SlideRef[] — 主線順序 */
  ],
  "slideSequences": [
    /* SlideSequence[] — 主線外的分歧順序 */
  ]
}

SlideRef

{
  "sceneId": "problem",
  "notes": "Lead with the pain, not the company.",
  "fragments": [3.5, 5.2, 7.0],
  "hotspots": [
    /* SlideHotspot[] */
  ],

  "ttsScript": null,
  "ttsAudioUrl": null,
  "ttsDurationMs": null
}
欄位 必填 說明
sceneId 是 必須與 scene 的 data-composition-id 完全匹配（或提供明確的 startTime/endTime）。Lint 規則會透過 data-composition-id 解析 scene。
notes 否 僅供簡報者查看的文字，絕不會顯示給觀眾。
fragments 否 投影片 [start, end] 時間範圍內的時間點（秒）陣列 — 詳見下方的 Fragments 說明。
hotspots 否 觸發分歧的互動式覆蓋層（overlays）— 詳見下方的 Branching 說明。
startTime 否 可選。覆寫匹配 scene 的時間邊界；預設為 scene 的 start/end。
endTime 否 可選。覆寫匹配 scene 的時間邊界；預設為 scene 的 start/end。
ttsScript, ttsAudioUrl, ttsDurationMs 否 保留欄位。 Schema 中存在這些欄位，但 TTS 播放功能尚未串接。除非您要為未來的版本預先填入資料，否則請省略。

SlideHotspot

{
  "id": "h1",
  "label": "How did we calculate this?",
  "target": "market-deep-dive",
  "region": { "x": 60, "y": 10, "w": 35, "h": 20 }
}
欄位 必填 說明
id 是 在投影片內必須唯一。
label 是 顯示給觀眾的 Tooltip / 按鈕文字。
target 是 必須匹配 slideSequences 中的某個 SlideSequence.id。
region 否 投影片百分比邊界框：{x, y, w, h} 範圍為 0–100。若省略，則會將熱點彩繪為帶有標籤的全投影片按鈕。

SlideSequence

{
  "id": "market-deep-dive",
  "label": "Market sizing methodology",
  "slides": [{ "sceneId": "mkt-1" }, { "sceneId": "mkt-2" }]
}

Sequence 內部的 slides 使用與主線相同的 SlideRef 結構。允許使用 fragments 與巢狀 hotspots。

投影片撰寫規則（Slide writing rules）

這些是硬性約束（hard constraints），而非建議。違反這些規則的投影片在審查時將會被直接替換。

  • 標題必須是完整的句子主張，而非分類標籤。 請寫「中小企業每週花費 14 小時處理手動排程」，而非「排程問題」。就算忽略視覺圖表，這句話也必須能獨立表達完整意思。
  • 每張投影片僅包含一個概念 + 一個視覺元素。 若您想加入第二個要點群組或第二張圖表，請拆分投影片。
  • 開門見山，先說結論（Lead with the punchline）。 最有力的論點放在最前面 — 在單張投影片上與整份簡報的排序皆然。投資人閱讀習慣是從左到右、從上到下，且隨時可能停止閱讀。
  • 僅限使用自下而上（Bottom-up）的市場規模估算。 絕不要在未呈現計算過程的情況下直接寫出「$50B TAM」。請從單元經濟效益（unit economics）向上建構：帳戶數 × ACV，或交易量 × 抽成率（take-rate）。
  • 字體最小相當於 30pt。 在 1920×1080 解析度下，標題為 72–96px，內文為 48px。觀眾必須閱讀的任何文字，大小絕不能低於 40px。

移植來源網頁（Porting source pages）

將現有網頁轉換為簡報時，保持來源忠實度（source fidelity）是合約的一部分。除非使用者明確要求重新設計，否則請勿將來源特定的元件替換為簡化的替代品。

  • 在實際可行範圍內，盡可能精準保留原始網頁的視覺設計、動態語言、互動行為、媒體行為與簡報呈現特性（presentation affordances）。當簡報系統支援簡報者模式時，請使用共享的可編輯備忘錄行為來包含演講者備忘錄，而非採用簡報專用的客製實作。
  • 在實際可行範圍內，極其精準地移植來源 DOM/CSS/JS 的機械性視覺效果：自訂播放器、canvas 視覺化工具、時間軸、播放頭（playheads）、分軌音訊（stems）、擴展圓圈、懸停狀態（hover states）與其他互動細節，都應在轉換後保留下來。
  • 將原生 <video> / <audio> 元素視為任何自訂媒體外觀（media chrome）、canvas 視覺化工具、波形圖、節奏網格（beat grid）或播放頭的唯一真實來源。請串接來源的媒體事件（play、pause、timeupdate、seeking、seeked、ended、ratechange、volumechange），並從 media.currentTime 推導視覺狀態；請勿運行可能與實際播放脫節的獨立計時器。
  • 每個複製且帶有 src 的 <video> 或 <audio> 在進行 lint 前，都必須具備 HyperFrames 時間屬性：data-start 與 data-duration，以及當需要保留可聽見的原生音訊時的 data-has-audio="true"。投影片專屬媒體請使用 scene 的時間範圍；對於可能從多個焦點投影片播放的使用者控制證明影片（evidence videos），請使用全簡報範圍（deck-wide range）。請勿在媒體上記錄 preload="none"；請使用 metadata 或 auto。
  • 在驗證前解析來源字體 token。若要保留自訂來源字體，請為本機/擷取的字體檔案新增 @font-face 規則。若使用系統備用字體，請將 token 化的宣告（例如 font-family: var(--f-body)）替換為具體且安全的繪製字體堆疊（例如 system-ui, sans-serif 或 ui-monospace, monospace）；請勿將 var(...) 留作字體家族名稱。
  • 審查來源中非典型的網頁移動，特別是由捲動、滾輪、觸控、hash 狀態、調整視窗大小或 requestAnimationFrame 迴圈驅動的行為。將帶有位移/縮放「世界」圖層的固定視口（fixed viewports）、視差效果（parallax）、釘選面板（pinned panels）、水平捲動器（horizontal scrollers）、捲動控速時間軸（scroll-scrubbed timelines）、區段吸附（section snapping）以及縮放至元素鏡頭（zoom-to-element cameras）視為來源行為。捲動通常是來源的轉場觸發器，因此請透過擷取其進度停留點、加減速（easing）與鏡頭/焦點狀態來保留轉場，然後透過時間軸位置、fragments 或可重複使用的播放器/套件 hook，將該動態重新承載於簡報導覽上。跳轉至投影片停留點的獨立外層包覆元件仍需要明確的導覽鏡頭轉場 hook；僅計算每張投影片的鏡頭變形矩陣是不夠的。請勿在投影片內部模擬字面上的網頁向下捲動轉場；觀看者感受到的應該是鏡頭從一個焦點移動/縮放至另一個焦點，而非看到網頁被捲動。保持每次投影片到投影片的鏡頭移動連續：避免中間出現會反轉 x/y 方向或縮放的路由停留點，除非來源在同一邊界上明顯這樣做。在抵達前到處衝撞的轉場，效果比簡單直接的焦點移動更差。
  • 保留來源的媒體裁切語意（media crop semantics）。將螢幕截圖、推文/社群貼文、產品 UI 截圖、圖表、文件、程式碼、排行榜以及任何帶有可讀文字的圖片視為內容證據（content evidence），而非裝飾性媒體：在穩定框架內使用來源長寬比（height: auto）或 object-fit: contain。僅在來源確實使用或刻意作為裝飾/背景/電影感縮圖時，才使用 object-fit: cover。