Claude 簡報提示詞：五種常見版型，一個版型一組，讓 Claude 用程式與 JS 套件做投影片

30 秒看重點

版型名稱參考 PowerPoint 內建版面與簡報設計指南，詳見文末資料來源。

你是簡報設計師，也是前端工程師。請用程式製作簡報，規格如下：
1. 輸出：單一 HTML 檔，用 Reveal.js 6（從 cdn.jsdelivr.net/npm/reveal.js@6 載入 dist/reveal.js 和 dist/reveal.css）。畫布 1920×1080（16:9），Reveal.initialize 設定 width 1920、height 1080、margin 0，關閉 center。
2. 字體：Google Fonts 的 Noto Sans TC，標題 800 粗、內文 500 粗。
3. 字級：任何文字都不小於 40px（相當於 PowerPoint 的 20pt），頁面標題 72px 以上。
4. 配色：背景 #FFFFFF、主色 #2E6BFF、文字 #1A1F2E、輔助灰 #5B6275、淺色 #DCE6FF；整份只用一個強調色。
5. 版面：四周留白至少 96px；一頁只講一件事，重點最多 3 到 5 個。
6. 樣式全部寫在同一個檔案裡；需要插圖時用 inline SVG 畫幾何圖形，不引用外部圖片，也不要用 Emoji。
7. 所有套件寫明版本號。完成後逐頁截圖，檢查文字有沒有溢出、重疊或被切掉，有問題先修好再交給我。
接下來我會告訴你版型和內容，請先回覆「了解」。

為什麼寫 40px 不寫 20pt

PowerPoint 寬螢幕投影片寬 13.33 英吋，畫成 1920px 寬，等於每英吋 144px；1pt 是 1/72 英吋，所以 1pt 約等於 2px，20pt 約等於 40px。直接把 px 寫進提示詞，程式就照數字做，不必再換算。

GSAP 可以商用嗎

可以。GSAP 被 Webflow 收購後改為全部免費，原本要付費的外掛（例如 SplitText）也包含在內，標準授權已涵蓋商業用途。

【版型 1：封面標題頁】
請做 1 頁封面：
- 左側 55%：最上方一個圓角標籤（活動名稱，主色底白字）；中間主標題（96px，最多 2 行）；下方副標題（48px，灰色）；左下角放講者與日期（40px），底下一條 8px 的主色橫線。
- 右側 45%：用 inline SVG 畫 3 個重疊的幾何圖形（大圓、圓角方形、小圓），用主色和淺色，不放任何文字。
- 動畫：用 GSAP 3（cdn.jsdelivr.net/npm/gsap@3）做進場。標籤、主標題、副標題、講者依序由下往上淡入，間隔 0.15 秒；右側圖形從 90% 放大到 100%。在 Reveal 的 ready 和 slidechanged 事件觸發，翻回這頁時會重播。
內容：
活動名稱：（填入）
主標題：（填入）
副標題：（填入）
講者／日期：（填入）

為什麼用 GSAP

GSAP 的 timeline 能精準排出誰先出現、誰後出現，翻回這一頁時也能重播；只用 CSS 做淡入，順序和重播都比較難控制。

【版型 2：圖文雙欄】
請做 1 頁圖文雙欄：
- 上方：頁面標題（72px，靠左）。
- 下方分左右兩欄，各占一半，中間間距 80px。
- 左欄：3 個重點，每點由「圖示＋粗體短句（48px）＋一行說明（40px，灰色）」組成。圖示用 Lucide（cdn.jsdelivr.net/npm/lucide 的 dist/umd/lucide.min.js，載入後呼叫 lucide.createIcons()），72px、主色，依內容挑合適的圖示。
- 右欄：用 inline SVG 畫一張示意圖，表達我給的概念，圖裡最多放 3 個短詞。
- 用 Reveal.js 的 fragment 讓重點一次出現一點；每出現一點，右圖對應的部分同時換成主色。
內容：
標題：（填入）
重點 1～3：（各一句短句＋一行說明）
右圖要表達：（例如：三個步驟由上往下）

用到的套件

Lucide 是開源的線條圖示庫，名稱直觀（例如 clipboard-list、scan-search），Claude 能依內容自己挑；載入後呼叫一次 createIcons() 就會把標記換成 SVG 圖示。

【版型 3：左右比較（輸出可編輯的 PowerPoint）】
這一頁改用 PptxGenJS 4（Node.js，npm 套件 pptxgenjs）產生 .pptx，讓我能在 PowerPoint 直接改字：
- 版面設成 LAYOUT_WIDE（13.33×7.5 英吋），字型用 Noto Sans TC 或微軟正黑體。
- 字級：頁面標題 36pt、欄標題 28pt、項目 22pt，全部不小於 20pt。
- 上方放標題；下方左右兩張等寬卡片，間距 0.4 英吋。左卡是「現況／舊做法」，標頭用灰色 #5B6275；右卡是「改善／新做法」，標頭用主色 #2E6BFF；卡片白底、淺灰細框、圓角。
- 兩欄各 3～4 項，數量和順序要一一對應：同一列比較的是同一件事。
- 文字一律用 addText 的文字方塊，不要轉成圖片；不要用 Emoji。
- 產出後把 .pptx 轉成圖片，檢查有沒有文字溢出，再把檔案給我下載。
內容：
標題：（填入）
左欄標題與項目：（填入 3～4 項）
右欄標題與項目：（同樣項數，順序對應）

實測結果

這組提示詞需要 Claude 能執行程式並產生檔案。我們用 PptxGenJS 4.0.1 照這個規格產生 .pptx，用 LibreOffice 開啟後版面正常、文字都能編輯。想維持網頁版，就把第一句換成「用 Reveal.js 做，兩欄用 CSS Grid」。

【版型 4：大數字重點】
請做 1 頁大數字：
- 左側：關鍵數字 280px、800 粗、主色；單位緊貼在數字右邊，120px。
- 數字下方：一句話說明這個數字的意義（52px 粗體，最多 20 個字）；再下一行寫出處（40px，灰色）。
- 右側約 35%：一張 Chart.js 4 的簡單圖表（甜甜圈圖或橫條圖），只放 2～3 筆資料。拿掉格線、座標軸和圖例，數值用 chartjs-plugin-datalabels 直接標在圖上；要強調的那一筆用主色，其他用淺色。
- 動畫：進入這一頁時，用 CountUp.js 2（cdn.jsdelivr.net/npm/countup.js@2 的 dist/countUp.umd.js，全域名稱是 countUp.CountUp）讓數字在 1.5 秒內從 0 跳到目標值，圖表同時播放成長動畫；翻回這頁會重播。
- 補充資料不要擠在這頁，放到下一頁。
內容：
關鍵數字與單位：（填入）
一句話意義：（填入）
出處：（填入）
圖表資料：（2～3 筆，標明要強調哪一筆）

要注意

CountUp.js 2 是 ES 模組，網頁直接用 script 標籤載入時要用 UMD 版（countUp.umd.js），全域名稱是 countUp.CountUp。提示詞裡寫清楚，Claude 就不會載錯檔案。

【版型 5：流程時間軸】
請做 1 頁流程時間軸：
- 上方：頁面標題（72px）。
- 畫面中間一條水平主軸線，左右各留 180px；線上放 4～5 個圓形節點，x 座標用程式依節點數平均分配，不要手動寫死。
- 每個節點：圓圈 130px，裡面放序號（56px）；節點上方是階段名稱（48px 粗體），下方是一行說明（40px 灰色，最多 8 個字）。
- 狀態用顏色區分：完成＝主色實心、進行中＝白底主色粗框、未開始＝灰色。主軸線從起點到「進行中」那一段改成主色，表示目前進度。
- 動畫：用 GSAP timeline，主軸線先從左畫到右（scaleX 0 到 1，1 秒），節點再依序彈出（back.out 緩動，間隔 0.25 秒），最後文字淡入；翻回這頁會重播。
內容：
標題：（填入）
階段：（每行一個，格式：名稱｜一行說明｜完成、進行中或未開始）

為什麼用 GSAP timeline

GSAP 的 timeline 可以把「畫線、彈出節點、淡入文字」串成一段，每一步的時間和緩動都寫在提示詞裡，Claude 做出來的節奏就會一致。

延伸學習

想把整份簡報從企劃、內容到設計都交給 AI 協作，可以接著看：

• AI 簡報製作全攻略：Gamma、Canva、Gemini、ChatGPT、Claude 10 種做法實測
• 提示詞技巧：從提問到任務交辦的 AI 協作指南（免費）

也可以搭配閱讀：2026 AI 簡報工具比較、提示詞改寫：新模型時代的七個重點

前往課程清單

本文重點

1. 提示詞分兩層：共用設定管整份規格，版型提示詞管單頁版面。
2. 五種常見版型：封面標題頁、圖文雙欄、左右比較、大數字、流程時間軸。
3. 字級直接寫 px：1920px 寬的畫布，40px 約等於 PowerPoint 的 20pt。
4. 要動畫用 Reveal.js 加 GSAP；要可編輯的 PowerPoint 用 PptxGenJS。
5. 套件寫明版本號，並請 Claude 逐頁截圖檢查溢出。

想一想

你下一份要上台的簡報裡，哪一頁現在是「標題加一排條列」？它其實比較適合五種版型中的哪一種？

資料來源

1. Computer Hope。Slide layout（PowerPoint 內建版面說明）
2. Indezine。Change Slide Layout in PowerPoint 365 for Windows
3. SlideSpeak Docs。Layouts overview
4. StrategyU。Slide layouts
5. reveal.js。Upgrading From Version 5 to 6.0
6. reveal.js。PDF Export
7. GSAP（Webflow）。Standard No Charge GSAP License
8. Webflow。Webflow makes GSAP 100% free
9. PptxGenJS。Releases
10. npm（2026 年 10 月 20 日查詢）。reveal.js 套件頁

本文版型示意圖以程式（SVG）繪製；封面插圖為 AI 生成的示意圖。