打造互動式 AI Slides：6 大結構框架指南

會議上有人問「細項數據呢？」，你卻手忙腳亂翻找資料的那陣尷尬沉默。有了「互動式 AI 簡報」，這種沉默將不復存在。以下是完整的製作指南與使用的提示詞。

首先，看看點擊後會發生什麼

點擊數字，對應的圖表就會展開；點擊卡片，直接跳轉到該頁；拖動滑桿，數值即時重新計算。

過去總是被「等我找一下另一份文件……」打斷的會議，現在能一氣呵成地進行下去。

我認為，AI 簡報的下一步進化，重點不在於製作速度，而在於觀看者的體驗。

觀看者會體驗到的三件事

1）細節隨點隨看

簡報自己就能回答「所以，細項數據呢？」這個問題。

在 32 個產業的排名中，點擊「貨運業」就能向下鑽取，查看各交易階段（全產業）的明細。再也不用浪費時間翻找佐證頁面了。

2）資訊之間的關聯一目了然

第 1 頁呈現全局概覽。點擊「運費流失」卡片，畫面會放大聚焦到該特定頁面。按下 O 鍵，所有頁面並排顯示，讓你清楚看見這些標題如何串成一個完整的故事。

3）變化一眼就能看出

2024 年的工時區間縮減至 2025 年的水準，差異部分清晰可見。不用等你開口解釋，大家就能明白：減少的是等待／裝卸時間，而不是駕駛時間。

互動性由 6 種結構決定

這是最關鍵的一點。

互動性不是憑個人喜好決定的。

顧問簡報根據核心訊息，可以歸納為 6 種結構類型。一旦確定了結構，適合的動畫也就跟著確定了。這樣能讓觀看者親手驗證標題所提出的主張。

結論與佐證 → 點擊顯示佐證
分類拆解 → 切換條件重新排序長條
差異比較 → 形狀變化，讓差值清晰可見
因果關係 → 透過滑桿調整條件重新計算
缺口與解方 → 切換解方填補缺口
流程與時間 → 元素依序組裝

原則：每頁只放一個互動。

動畫要配合簡報的結構，而不是隨興發揮。這樣既能避免觀看者混淆，也能化解「只是花拳繡腿」的質疑。

怎麼做：只要在平常的提示詞裡多加一段就好

貼上用來製作顧問級簡報的「終極提示詞」。（如果還沒看過，可以參考這篇免費文章：https://note.com/uchita_success/n/na5babdc58b0e）
在它下方，貼上下面這段提示詞（就是讓簡報具備互動性的那一段）。
最底部，貼上你的原始素材（數字與來源）。
打開生成的簡報（Claude 會以 artifact 輸出；ChatGPT 則以 canvas 或檔案形式輸出）。

註：本文範例使用 Claude Opus 5.5 製作。

互動式 AI Slides 提示詞

只要把這段提示詞貼在上述「終極提示詞」的下方即可。

⚠️ 由於字數限制，這裡無法收錄包含程式碼範例的完整版提示詞。完整版附有範例頁面的程式碼，能幫助 AI 精準還原視覺風格，總長度超過 8,000 字。請直接從 note 複製貼上完整版：

https://note.com/uchita_success/n/nf8711b1dba37

以下是不含程式碼區塊的正文內容。

text

1【互動式簡報提示詞 v2.1】
2因篇幅限制省略全文；請從 note 複製貼上。
3
4## 附加要求：加入互動功能
5將此區塊接在上述簡報製作提示詞之後使用。素材請貼在此區塊下方（保留上一段提示詞中「將素材貼在此處下方」那一行不變）。
6
7### 優先順序
8- 內容（數字處理、標題、邏輯、模板、繪圖標準、驗證）皆遵循上述簡報製作提示詞。
9- 輸出格式以此區塊為準：單一 HTML 檔案的互動式簡報，共 3 頁（若素材豐富則為 4 頁），標題每行最多 36 個字元（不換行）。不要另外輸出設計文件；改用頁面清單與數字台账代替（並將上一段提示詞中要求的設計項目整合進這兩者之中）。
10- 開始前只提問一次，且僅限素材或背景無法釐清目的與受眾時才提問。否則請自行判斷、標註假設，並一口氣寫完。
11
12### 頁面模板（視覺效果需與下方範例一致）
13- 第 2～3 頁：左側為主圖表（佔 60% 寬度），右側為佐證面板（淺色背景框）。面板結構：一個大數字（88-96px）→ 說明這是什麼（1 行）→ 背景脈絡（2-3 行）→ 比較對象與差值（附公式）→「查看明細 ›」
14- 第 1 頁：上方排列 3 個大數字，下方呈現整體流程／架構（哪裡發生了什麼事）。在流程中放置可連結到特定頁面的卡片（如「p.2 ›」）。
15- 圖表與數字要撐滿版面。內容下方不要留白。
16- 用盡素材中的所有數字（圖表、面板、標註、佐證）。自行計算差值／比例並列出公式。絕對不能捏造素材中沒有的數字。
17- 主體使用主色，比較對象使用淺漸層色，其餘用灰色。每頁只放一個大數字。
18- 可點擊的元素必須明顯：使用「›」、「點擊以...」、懸停邊框，進入頁面時以光環高亮一次。長條／圓點在懸停時顯示工具提示，內容為「數值、名稱、來源」。
19
20### 每頁一個互動（依結構而定）
21每頁只能加入一個操作，讓讀者能親自驗證標題中的判斷。請根據標題的結構類型選擇操作方式。
22- 金字塔型（結論／佐證）→ 點擊向下鑽取。右側佐證面板（附來源；幾乎每一頁都要有）。
23- 分類型（分類拆解）→ 切換條件（彙總視角、指標、年份）來重新排序所有長條。
24- 比較型（差異）→ 先前狀態變形為目前狀態，差值以虛線標示。
25- 因果型（原因／結果）→ 滑桿調整條件，重新計算結果。畫面上要顯示公式。
26- 解決問題型（缺口／解方）→ 開關解方來填補或留出缺口。
27- 順序型（流程／程序／時間）→ 依序組裝，角色沿著流程移動，時間軸上標示「現在」記號。
28不要加入與標題無關的動畫。涉及數值的動畫必須根據實際數值計算。
29
30### 佐證面板（點擊後從右側滑入）
31- 寬度 720px。從右側滑入，背景變暗。可透過 X、Esc 或點擊背景關閉。
32- 由上而下結構：位置脈絡（「現況 > 項目名稱」）→ 判斷（1-2 行）→ 分頁標籤（最多 2 個，例如：明細 / 來源與假設）→ 小圖表／表格 → 來源。
33- 主頁面放不下的大量詳細數字就放在這裡。幾乎每一頁都要有。
34
35### 整體簡報
36- 啟用從第 1 頁概覽放大導航至特定頁面的功能。允許從解方直接跳轉到佐證頁面。
37- 快捷鍵：→ 和空白鍵下一頁，← 上一頁，數字鍵跳轉，Esc 關閉／返回，O 全頁概覽，D 自動展示（游標依腳本移動，最後回到概覽。互動元素需加上 data-demo 名稱標籤）。
38- 頁面約在 3 秒內組裝完成：標題 → 主圖表（長條從 0 開始增長，錯開 60ms）→ 數字 → 佐證面板。使用 CSS transitions/delays；若使用 JS，請搭配 requestAnimationFrame 與 50ms 計時器。
39- 支援 #static URL 參數與「減少動態效果」設定，直接顯示最終組裝完成的狀態（互動頁面則顯示能看清標題判斷的狀態，例如所有解方都開啟）。必須也能當作靜態簡報閱讀。
40- 將 1920x1080 畫布縮放以符合螢幕大小。外部載入僅限 Google Fonts Noto Sans JP。
41
42### 最低標準（僅在沒有上述簡報製作提示詞時適用）
431. 根據素材建立數字台账（項目、數值、日期、來源、母體）。缺少的數字標記為「xx」並加註說明。無數值的項目排在最後。
442. 每頁只傳達一個訊息。標題是結合事實與判斷的完整句子，每行最多 36 個字元。避免「A。B」兩段式結構、「共有 3 個...」這類列舉，或以名詞結尾的不完整句子。
453. 先寫好所有標題，確認縱向邏輯流暢（概覽→佐證→解方）後再製作圖表。
464. 根據標題的結構意圖選擇圖表類型（見上方「每頁一個互動」）。
475. 圖表標題：「什麼、何時、單位」。標題中不要帶判斷。頁面頁尾與佐證面板都要標註來源。
486. 顏色：1 個主色、3 個淺漸層色、灰色。預設主色 #1976D2。強調色（琥珀色 #D97706）整份簡報只能用一次。最小字級 18px。
497. 不要把相關性說成因果關係。推估值需標註「推估」，並在畫面上列出公式與假設。
50
51### 輸出
52- HTML：Claude 以 Artifact 輸出，ChatGPT 以 Canvas 輸出（若都不支援則放在單一程式碼區塊中）。一口氣寫完。限制頁數並將元件封裝成函式以縮短程式碼。若被截斷，使用者輸入「繼續」時接著同一份文件寫（不要叫使用者手動貼上）。
53- 第 1 行註明方法：「內容 = 簡報提示詞 / 互動 = 互動區塊」或「僅用互動區塊（套用簡化版內容規則）」。
54- 頁面清單（標題／結構／操作／佐證面板內容）、數字台账、使用說明要放在 HTML 之外（回覆正文中），並保持簡潔。不要塞進 HTML 裡。
55- HTML 總大小目標約 40KB。必要時可精簡文字（絕對不要刪減圖表、佐證面板、操作）。
56- 結尾提供 2-3 個進一步優化的建議，並請使用者挑選。
57
58### 最終檢查
59輸出前請檢查並修正：每一頁都有「驗證標題的操作」與「附來源的佐證面板」／沒有捏造的數字／沒有留白、重疊、溢出或小於 18px 的文字／各頁標題結尾語氣一致（不要全都是「應該...」）／自動展示腳本沒有參照不存在的元素。
60
61（此處接續一頁範例的程式碼。附上範例能大幅提升品質。含程式碼的完整版請至 note 取得。）