用 Claude Code 做美麗簡報
給新手的完整指南
不用打開 PowerPoint、不用記任何快捷鍵、不用挑模版。 你只要跟 Claude 說一句話，它就會幫你做出一份漂亮、可以全螢幕放映、可以印成 PDF 的簡報。
丟 logo + 用人話講功能、Claude Code 就能做出可全螢幕放映、可印 PDF 的美麗簡報。含一鍵啟動 mega prompt（讓 Claude 反過來引導你）、三份真實風格範例、5 個視覺心法、5 段功能複製包。不用會寫程式、不用記快捷鍵。
這篇講的是「怎麼用 Claude Code 做出像設計過的簡報」。你不需要會寫程式、不需要懂網頁設計，看完才決定要不要動手。 每個技術名詞第一次出現都會用白話解釋。文章後段有可以直接複製貼給 Claude Code 的技術骨架 prompt，新手照貼就能生出乾淨的簡報。
不想看完整篇？複製這一段、貼進你的 Claude Code
這段話會把 Claude Code 變成「簡報引導助手」。它會反過來一題一題問你、收齊資訊之後就直接幫你做出一份美麗的簡報、含後面提到的所有功能。新手最省力的入口。
📦 這段 prompt 裡面包了什麼
- 引導提問流程：主題場合、目標群眾、想帶走什麼、內容素材、視覺基調、參考靈感、分享時長 + 一頁講多久 + 語速（自動推算建議頁數）
- 技術功能 spec：滿版切頁、鍵盤快捷鍵、頁碼、F 全螢幕、印 PDF 不跑版
- 視覺設計原則：抓 logo 配色、系統字、留白寬鬆、避免 AI 味（不要彩虹漸層 / 漂浮 emoji）
- 簡報製作流程：聊清楚 → 整理大綱讓你確認 → 做初版 → 一頁頁修正
- 修正小技巧：可請 AI 匯出 markdown 給你改文字、或做可 comment 版本
- 絕對不做：不一次問完、不用技術名詞、不寫「賦能 / 絕讚 / 驚艷」這種 AI 用語
複製貼上後、它會從 Q1 開始問你、跟著回答就好
為什麼做一份「不醜」的簡報這麼累？
大部分人做簡報的卡點不在「內容」，而在「視覺」：
- 打開 PowerPoint，模版選了 10 分鐘還是不滿意
- Canva 拖一拖總算看起來像樣，但下次要改字又得重新對齊
- 想要的配色、字型、留白要花很多時間調，結果還是有點俗
- 同事看到「設計過的簡報」總會問：你哪裡學的？
這篇要告訴你一個截然不同的做法：把做簡報當成「跟 AI 對話」。 你描述你要的風格、內容大綱，Claude Code 幫你生出一份完整的簡報。改一句話、整頁版面跟著重排。
Claude Code 是 Anthropic（做 Claude AI 的公司）推出的命令列工具，可以讓 Claude 直接幫你讀檔案、改檔案、寫程式。 比喻：跟你聊天的 Claude 是「網頁版的同事」，Claude Code 是「坐在你電腦旁邊、可以直接動鍵盤的同事」。
核心心法：給 logo、講功能、剩下交給 AI
做美麗簡報的整個流程可以濃縮成兩句話：把你的 logo（或品牌色）丟給 Claude Code、讓它自己抓主色；然後用日常講話的方式描述你要什麼功能。你不用懂 CSS、不用記快捷鍵、不用挑模版，AI 自己會選色、排版、做出能播放的簡報。
具體就三步：
- 丟一張 logo 圖（或一句「我的品牌色是 ____」）給 Claude Code，它會自動抓出主色、配色就統一了
- 用人話講你要的功能：「按方向鍵切頁」「右下有頁碼」「可以印 PDF」「整頁滿版」
- 看效果、用講的微調：「字太小」「左邊太擠」「顏色再深一點」
背後其實是一個 HTML 檔案（網頁檔）、用瀏覽器全螢幕打開就是一份簡報。但你不用管這層、Claude 都會處理好。
HTML 是一種文字格式，瀏覽器看得懂、會把它畫成漂亮的網頁。你瀏覽過的網站背後都是 HTML。 比喻：HTML 像「網頁的食譜」，瀏覽器照著做、就會生出一個漂亮的頁面。你不用看食譜、AI 替你寫。
這個做法的好處：
- 免費：不用買 PowerPoint、Keynote、Canva Pro
- 可分享：上傳到網路、任何人用瀏覽器都能看
- 可印 PDF：用瀏覽器的「列印」功能就能存成 PDF
- 改一句話、整頁就跟著重排：不用手動對齊
- 視覺水準直接拉到設計師等級：丟 logo 就有品牌色、不會出現「PowerPoint 味」
Claude Code 做簡報 vs 傳統工具
不是說 PowerPoint 不好。是不同情境適合不同工具，先理解差異再決定。
| 面向 | PowerPoint / Keynote | Canva | Claude Code（HTML） |
|---|---|---|---|
| 學習曲線 | 中（介面複雜） | 低 | 低（用講的） |
| 視覺一致性 | 看你會不會用 | 看模版 | 天生一致（CSS 控版） |
| 批次改動 | 很累（一頁一頁改） | 很累 | 一句話搞定 |
| 分享方式 | 傳檔（怕版本對方沒有） | 分享連結 | 連結 / PDF / 純檔案都行 |
| 離線可用 | ✓ | 需網路 | ✓（HTML 檔本機就跑） |
| 需要哪些技能 | 會操作軟體 | 會拖曳排版 | 會打字描述 |
結論：要快、要美、不想學排版、能接受用瀏覽器播放，就用 Claude Code。 要交檔給客戶用 PowerPoint 修改、或要插入複雜動畫，PowerPoint 還是有它的位置。
兩條路線：HTML 單檔 vs Markdown 轉檔
兩種都可以、新手建議從第一條開始。
HTML 單檔法
讓 Claude Code 直接寫一個 .html 檔。瀏覽器全螢幕打開，就是一份完整簡報。
- ✅ 視覺自由度最高（CSS 全控）
- ✅ 不用裝任何工具
- ✅ 一個檔案就能分享
- ✅ 適合「我要做一份美的簡報」
Markdown 轉檔法
用 Marp 或 Slidev 等工具，把 Markdown 文字轉成投影片。Claude Code 幫你寫 Markdown 內容。
- ✅ 文字檔最輕量
- ✅ 可一鍵匯出 PDF / PPTX
- ⚠️ 需要先安裝工具
- ⚠️ 視覺較受模版限制
這篇主要講 Route A（HTML 單檔法）。Route B 文末有資源連結，自己延伸閱讀。
三份真實範例：看完抄得到
三份完全不同風格的簡報、全部用 Claude Code 做。下面每張卡有截圖、版面分析、跟一段可以直接複製貼到你 Claude Code 的指令，照貼就能做出同樣風格。
深色穩重 ｜ 適合內部分享、技術報告
主色深藍、強調色暖米。每頁頂上一條標籤（PART 1 · 第一站）、左下大標、三張卡片並排、底部有頁碼跟品牌字。背景兩三圈柔光暈染、整頁不會空。 適合「我要顯得專業、像顧問報告」的場合。
幫我做一份簡報、存成單一 HTML 檔。主色深藍 #1e3148、強調色暖米 #e8dbb8，字用系統字。每頁版面這樣：頂部一條小標籤寫章節名（像 "PART 1"）、左邊是大標題、副標題、右邊或下方放三張並排的卡片，右上角放頁碼（02/24 這種格式）、底部一條深色 footer 放品牌名跟頁碼。背景加兩三圈很淡的柔光暈染（半透明圓形漸層）。整頁要佔滿瀏覽器、按方向鍵或滑鼠滾輪會切到下一頁。內容大綱我等下貼給你。
對比強烈 ｜ 適合教學、講概念差異
主色黑、強調色橘。每頁頂部有導覽列（多個分頁標籤，目前頁高亮）、頁面下方有兩個並排的對比卡（左邊「一個 AI 全做」紅標、右邊「分成員」藍標）。每張卡片內用 emoji 開頭 bullet。 適合「我要比較 A vs B」「我要凸顯為什麼選 B 不選 A」的內容。
幫我做一份簡報、存成單一 HTML 檔。主色黑（#0a0a0a）、強調色橘（#ff6b35）、字用粗體無襯線字。每頁版面：頂部一條導覽列，列出全部章節，目前章節高亮、左邊大標題（粗體）、副標題、下半部放兩張左右並排的對比卡片，每張卡片有自己的小標籤色（左邊紅、右邊藍）、內容用 emoji 開頭的 bullet list。整頁滿版、可以鍵盤切頁、右下放頁碼。內容我等下給你。
極簡乾淨 ｜ 適合工作流、教學說明
幾乎純黑、沒任何裝飾。每頁左上一個小頁碼跟章節分類、中央偏左主標題、下方雙欄結構（左邊放對照表、右邊放重點 callout 或補充說明）。底部用圓點（●●○○○）表示目前是第幾頁。 適合「我要教一個流程」「我要解釋一個工作流是怎麼跑的」這類資訊密集但又想保持乾淨的內容。
幫我做一份簡報、存成單一 HTML 檔。背景純黑（#000）、字用白色、強調用淡藍。風格極簡、不要任何裝飾、不要漸層、不要陰影。每頁版面：左上小字寫頁碼跟章節分類（02 / 07 + 章節名）、中央偏左放主標題、副標寫類型/品牌/頻率等 meta 資訊、主標下方放一段說明、再下方放雙欄結構（左欄一張對照表、右欄一個重點 callout 區）。底部置中放圓點導覽列（●○○○○ 這種、目前頁實心其他空心）+ 左右切頁箭頭。整頁滿版、可以鍵盤切頁。內容我等下給你。
你會發現上面三段「複製給 Claude Code」的指令完全沒有寫 CSS、沒有寫程式碼、就是用人話描述版面長什麼樣、要什麼顏色、有什麼功能。 Claude Code 是專門訓練來理解這種指令的、它自己會翻譯成程式碼。你的工作只是把想要的東西講清楚。
你需要準備的兩件事
打開電腦的「終端機」（Mac 找「終端機」、Windows 找「PowerShell」），複製貼上這行指令：
# 安裝 Claude Code（需先有 Node.js） npm install -g @anthropic-ai/claude-code
不知道 Node.js 是什麼？簡單講就是讓你電腦能跑 JavaScript 程式的環境，到 nodejs.org 下載安裝就好。
在你習慣存檔的地方建一個資料夾（例如 ~/Documents/my-slides/），然後在終端機進去這個資料夾、打：
claude
第一次跑會請你登入 Anthropic 帳號。登入後你會看到一個對話框、可以開始跟 Claude 對話。
終端機是電腦的「黑底白字輸入畫面」，用打字下指令操作電腦。Mac 內建叫「Terminal」、Windows 叫「PowerShell」或「Command Prompt」。 比喻：平常用滑鼠點圖示是「視覺操作」，終端機是「用講話直接命令電腦」。
跟著做：30 分鐘產出第一份美麗簡報
假設你要做一份「給同事介紹某個主題」的簡報，9 頁左右。跟著下面 5 個步驟。
不要急著開電腦寫大綱。打開 Claude Code、開語音輸入（推薦 Typeless 中文辨識超準）、用平常講話的速度跟它聊四件事：
- 這份簡報的主題是什麼
- 目標群眾是誰（新手？高階主管？同事？）
- 你希望他們聽完帶走什麼（一個觀念？一個工具？一個行動？）
- 你想講的內容有哪些（隨便講、不用結構、AI 會幫你整理）
講完讓 AI 整理成大綱、再請它幫你做初版。用語音聊比寫大綱更自然、想到什麼講什麼、AI 都會接住。
沒語音輸入？打字也可以、把上面四件事打進對話框。重點是「先講清楚要做什麼簡報」、不要一上來就喊「幫我做簡報」。
Step 1 聊完之後、跟 AI 講第二件事：
「這是我的 logo（附圖）、請從 logo 抓主色配色、整份簡報就用這個色系。 把剛剛我們聊的內容做成一份 9 頁的簡報、存成單一 HTML 檔。 風格簡潔有設計感、字用系統字。 每頁要佔滿瀏覽器、按方向鍵切頁、右上有頁碼、按 F 全螢幕、可以印 PDF。 第一頁封面、最後一頁結尾。先做初版給我看、我會逐頁修正。」
沒 logo 也沒關係、直接寫「主色用 ___ 色」就好。Claude 一般 1-2 分鐘就會生出整份 HTML。
請 Claude 順便幫你打開檔案，或自己手動：在資料夾找到 pomodoro.html，雙擊就用瀏覽器打開了。
按 F11（Mac 是 Ctrl+Cmd+F）全螢幕、用方向鍵切頁。
看完不滿意？跟 Claude 講就好。範例：
- 「第 3 頁的標題太大、改小一點」
- 「全部頁面的留白太擠、加寬一點」
- 「主色改成深綠
#2d5a4a」 - 「在第 5 頁加一張對照表，左邊『常見錯誤』右邊『正確做法』」
修改階段用打字很累（每個指令都要兩三句）、用語音講最快。看到第 5 頁覺得怪、直接念「第 5 頁右邊那個卡片改成紅色、字小一號、bullet 改成三個」就送出、比打字快 5 倍。 推薦 Typeless、中文辨識準、寫程式術語也認得。
如果想把文字逐頁仔細審過、有兩個讓改稿更順的小招數：
跟 AI 說：「把整份簡報的文字部分匯出成 markdown 檔給我」。你在自己熟悉的編輯器（Notes / Notion / VS Code）裡改文字、改完整份貼回去、AI 會幫你套回 HTML、版面不動。 比喻：像寫文章先用 Word 改字、改完才丟回排版工具。
跟 AI 說：「幫我做一個可以直接在每頁旁邊留 comment 的版本、我 comment 完按一鍵複製、整份貼回給你套用」。你看到第 3 頁覺得「這句話改成 X」就直接在旁邊打 X、AI 收到 comment 就會改。 比喻：像 Google Docs 的留言功能、邊看邊註記、最後一次套用。
每次改完、重新整理瀏覽器就看到效果。這就是 Claude Code 比 PowerPoint 強的地方：改一句話、整頁重排。
要存 PDF（推薦做法）：跟 Claude 講「請用 Playwright 把這份簡報每頁渲染後合成單一 PDF」、它會跑一個 headless 瀏覽器、把每張投影片完整截下來、合成出版面正確、配色保留的 PDF。這是課後匯出最穩的方法（詳細複製包看下面「功能 4」）。
⚠️ 不要靠瀏覽器的 Cmd+P 印 PDF。scroll-snap 滿版簡報用 Cmd+P 常常只印到一頁、或版面跑掉、字會超出邊界。除非你的 HTML 有特別寫 @media print 樣式（功能 3 在教這個）、不然 Playwright 才是正解。
要分享網路連結：把 HTML 檔上傳到任何能放網頁的地方（GitHub Pages、Cloudflare Pages、Vercel、Netlify 都可以、都有免費方案）。或最簡單：直接傳檔給對方、對方用瀏覽器打開就行。
下指令時加這 5 句，視覺直接拉到另一個層次
同樣是 Claude Code、有沒有加這些指令、做出來的簡報差距很大。
丟一張 logo 圖
最省事的做法：直接把 logo 圖丟給 Claude、它會自動抓主色 + 配色 + 衍生色。
沒 logo 就給 1 個主色 hex（例如 #1e3148）、Claude 會自己配出對比色跟強調色。
給「字型方向」
說「用系統字、英文搭 sans-serif、中文用 PingFang TC」，避免 Claude 引入花俏字體。 想要設計感可以加「標題粗 700、內文細 400」。
給「版面留白」
說「四周留白要大、文字密度不要太高、每頁主視覺要有呼吸感」，Claude 會自動加大 padding，視覺立刻精緻。
給「結構元素」
「每頁有左上小標、置中大標、底部頁碼」這種版面骨架。 加了之後整份簡報像是同一個設計師做的、不會頁頁長得不一樣。
給「參考風格」
最強招數：「請參考 Apple 發表會的風格」、「像 Stripe 文件那樣乾淨」、「Linear 的暗色調」。 Claude 對這些設計語言很熟、會直接抓到精神。
給「不要的東西」
避免地雷一樣重要：「不要陰影、不要漸層、不要 emoji、不要表情符號」，Claude 預設常加這些、給了反指令會收斂很多。
五個常用功能：直接複製貼給 Claude Code
下面五段話可以直接複製貼進你的 Claude Code 對話框。不用懂背後是什麼技術、複製就好。每段下面有一行「順便講一下背後是什麼」的小說明、有興趣再看。
把這五段話跟你的內容大綱一起貼給 Claude Code、它就會幫你做出帶這些功能的簡報。要哪幾段就貼哪幾段、不一定要全用。功能 4「匯出 PDF」是簡報做完之後才用的、其他四段是初版時用。
功能 1：每頁佔滿整個螢幕、按方向鍵切頁
「每頁要佔滿整個瀏覽器視窗、按方向鍵 / Page Down / 滑鼠滾輪就會切到下一頁、不要連續捲動。最後一頁就停在那裡、不會循環。」
🔧 背後的技術：CSS 的 scroll-snap（捲動吸附）+ 100vh（每頁高度 = 螢幕高度）。Claude 自己會處理、你不用寫。
功能 2：右上頁碼 + 全螢幕快捷鍵
「每頁右上角顯示頁碼（02 / 12 這種格式）、加上鍵盤快捷鍵：F 鍵切換全螢幕、Space 下一頁、Home / End 跳到第一頁 / 最後一頁。底部固定顯示一行小提示：『←→ 切換 · Space 下一張 · F 全螢幕』。」
🔧 背後的技術：一小段 JavaScript 監聽鍵盤事件 + 呼叫瀏覽器的 requestFullscreen()。Claude 會幫你寫、不用懂。
功能 3：讓瀏覽器 Cmd+P 也能勉強印 PDF（備用）
⚠️ 建議優先看下面「功能 4」用 Playwright 匯出、那才是穩的方法。 這段是給「不想裝 Playwright、只想用瀏覽器 Cmd+P 印」的人備用。scroll-snap 滿版簡報用 Cmd+P 還是常常跑版、單頁列印效果有限。
「加上列印用的樣式：列印時每頁強制分頁、保留背景色不要變白、隱藏底部的鍵盤提示。預設用 A4 橫向。這樣按 Cmd+P / Ctrl+P 存 PDF 時版面比較不會跑掉（但仍不保證、最穩還是用 Playwright）。」
🔧 背後的技術：CSS 的 @media print（列印專用樣式）+ page-break-after: always（強制分頁）。
功能 4：講完課、一鍵把簡報變成 PDF
課後想把簡報變 PDF 傳給學員？除了瀏覽器 Cmd+P、還有一個更自動化的方法：讓 Claude 直接幫你跑、檔名顏色都不用煩。
「把剛剛做的這份簡報匯出成 PDF。請用 Playwright（或 Puppeteer）跑 headless 瀏覽器、每頁渲染 1920x1080、橫向、保留所有背景色跟配色（不要變白底）、每張投影片獨立成一頁、合成單一 PDF。檔名用 slides-[日期].pdf、存在簡報同個資料夾。跑完後直接幫我打開那個 PDF 給我確認。」
🔧 背後的技術：Claude 會寫一小段 Node.js 腳本、用 Playwright（自動化瀏覽器套件）打開你的 HTML、一頁一頁截圖、合成 PDF。 第一次跑會請你安裝 Playwright（一行指令、它會教你）、之後每次匯出都 30 秒搞定。
功能 5：自動抓 logo 配色
「這是我的品牌 logo（附圖）。請從 logo 抓出主色、輔色、強調色，整份簡報的配色都用這三色衍生。不要自己另外選色。把這三個顏色寫成變數放在 CSS 開頭、之後想全部換色只要改一個地方。」
🔧 背後的技術：Claude 會用視覺能力分析 logo 圖、抓 hex 色碼、寫成 CSS 變數。你只要丟圖。
上面這些技術名詞（scroll-snap、JavaScript、@media print、CSS 變數），你不需要記、不需要懂。 列在這裡只是讓你看到「原來 AI 是這樣做出來的」。你只要會複製貼上、跟 AI 用人話對話、就能用到這些功能。
做簡報的卡點從來不是視覺，
是講清楚你要什麼。
AI 把後者放大、前者就自動解決了。
新手常見的 4 個地雷
直接說「幫我做一份簡報」。沒有大綱、沒有風格、沒有頁數，Claude 會生出一份很普通的東西。 花 10 分鐘寫清楚大綱、勝過後面改 1 小時。
一次改太多事。「全部頁面字體加大、主色改綠、第 3 頁刪掉、加 3 頁新內容、結尾頁加 logo」這樣的指令 Claude 容易漏。 改動拆成 2-3 個指令、一次只專注一件事。
忘記跟 Claude 說「每頁要佔滿整個瀏覽器」。預設 HTML 是連續向下捲動的，沒這句話就不會分頁。
明確說「每一頁高度等於螢幕高度、按方向鍵切換」，Claude 才會幫你做分頁切換邏輯。
用瀏覽器 Cmd+P 印 PDF、結果只印到一頁或跑版。這是因為簡報用了「滿版切頁」結構、瀏覽器列印對它的支援不穩。 正解：用「功能 4」的 Playwright 匯出、跟 Claude 講「請用 Playwright 把這份簡報合成 PDF」、它會跑一個 headless 瀏覽器把每頁完整截下來合成、版面跟配色都會保留。 只要做完一次、之後每次匯出 30 秒搞定。
記住這三件事
簡報的本質是 HTML 檔案，Claude Code 寫一個 .html、瀏覽器打開就能播放、能印 PDF、能分享。不用任何傳統工具。
視覺品質取決於你給的指令。給「主色、字型、留白、結構、參考風格」這 5 件事，視覺水準直接拉到設計師等級。
大綱比視覺重要 10 倍。先把每頁 3-5 個 bullet 寫清楚、再交給 Claude。內容不清楚、AI 也救不了。
延伸閱讀
做好的簡報想丟上網路、給對方一個連結就能看？這篇從零教你部署。
把「做簡報的指令」存成一個 Skill、下次只要打 /slides 就能重複用。
想走 Markdown 轉投影片路線？Marp 是最簡單的入口、有 VS Code 套件。
給工程師的 Markdown 簡報框架、互動性強、適合做技術 talk。
參考資源
- Claude Code 官方文件：docs.claude.com/claude-code
- Marp（Markdown 簡報）：marp.app
- Slidev（Vue based 簡報）：sli.dev
- Reveal.js（HTML 簡報框架）：revealjs.com