Claude Design：用聊天做簡報、改設計、做網站
這篇你會學到 3 點
- Claude Design 是什麼：為什麼「不會設計軟體」的人，也能用講的做出簡報和網頁。
- 四大功能怎麼用：講稿自動分流、手繪草圖變版面、用對話改設計、一句話把網站上線。
- 跟著三輪練習，做出你自己社團的報名頁，並知道怎麼檢查它能不能見人。
是什麼：把「設計」變成一場對話
Claude Design 是 Claude 的設計功能，目前還在 Beta（測試階段，功能可能隨時調整）。它的核心想法一句話講完：你說想法、給指令，AI 理解之後直接產出設計，改到滿意還能上線分享。整個流程是：說想法 → 給指令 → AI 理解 → 產出設計 → 上線分享。
它跟你平常在聊天視窗叫 Claude「幫我做一頁簡報」有什麼不一樣？直覺上的差別是：一般聊天或 Artifacts（聊天旁邊直接生出來、可以點可以用的小作品視窗）比較像「一次性產出」——它生一個東西給你，你要改就重新描述一次。Claude Design 則把你的設計當成一件可以持續雕的作品：版面、文字、圖片都是它認得的物件，你可以指著某個地方說「這裡改一下」，而不用重講整份需求。對沒學過 PowerPoint 進階功能、沒碰過 Canva 或 Figma 這類設計軟體的人來說，最大的差別是：你不用學「拉框、對齊、圖層」這些操作，用講的就好。
要提醒的是：因為它還在 Beta，介面長相、按鈕位置、用量規則都可能變動，以下內容整理自台灣創作者的實際示範（文末附來源），實際功能以你打開時的官方畫面為準。
功能一：Speaker Notes 自動分流——投影片乾淨，講稿另外放
能做什麼：做簡報時，Claude Design 會自動把「要投影出來的重點」和「你上台要講的話」分開放。投影片上只留精簡標題與圖表，長篇解說塞進 Speaker Notes（講者備忘稿，只有講者自己看得到的小抄欄位）。你備課或備報告時，不用自己手動把講稿一段段搬走。
指令可以這樣講：「幫我做一份 6 頁的科展簡報，主題是校園雨水回收。投影片每頁最多 3 行字，詳細說明放到講者備忘稿。」
高中生情境：專題發表最怕投影片塞滿字、台下低頭看字沒人聽你講。用這招，投影片乾淨、你的小抄完整，上台照著 Notes 講就好。
功能二：Sketch 草圖輸入——手繪的醜圖，變成專業版面
能做什麼：你在紙上或平板上隨手畫一個版面草稿（Sketch，就是草圖），標註「這裡放標題」「這塊放照片」「這排是按鈕」，拍照或截圖丟給 Claude Design，它會照你的構圖生成一個排版專業的版本。畫得醜完全沒關係，它看的是你的意圖，不是你的畫工。
指令可以這樣講：「照這張草圖做一頁社團介紹頁：上面大標題，中間左圖右文，下面三個活動照片格子。配色用深藍加白色。」
高中生情境：班會討論班級網頁要長怎樣，大家在黑板上畫了一個草稿——拍下來直接丟進去，十分鐘後全班就能看到「長出來的樣子」再投票修改。
功能三：Comment 對話改設計——「火箭往右移一點」就能改
能做什麼：產出設計後，不用進編輯模式拉來拉去，直接用留言（Comment）下指令就能改：「火箭往右移一點」「標題字再大一點」「背景換成淺一點的黃色」。AI 看得懂你指的是哪個東西，照改給你看，不滿意再講一次。
指令可以這樣講：「第二頁的合照放大一點，底下加一行小字寫『2026 春季成發』。」「整體太花了，顏色收斂到兩種就好。」
高中生情境：社團海報給幹部群過目，大家七嘴八舌的意見（「字太小」「LOGO 歪了」）你就一句一句餵進去改，不用自己開軟體對齊到半夜。
功能四：串接 Claude Code——一句話，設計變成上線的網站
能做什麼：設計滿意之後，可以把它交給 Claude Code（用文字指令指揮的 AI 工程師工具）轉成真正的網站，再一句話部署（deploy，把網站檔案放上網路，讓任何人用網址打開）到 Netlify（一個常見的網站代管服務，有免費方案）。示範案例是：天文社把觀星活動的報名頁面做好後，一句話上線，拿到一個 netlify.app 結尾的公開網址，貼到 IG 限動就能收報名。
指令可以這樣講：「把這個設計做成網頁，部署到 Netlify，給我可以分享的網址。」
高中生情境：以前「社團要有自己的網站」得找會寫程式的學長姐；現在活動負責人自己就能在一個晚上把報名頁做出來、上線、發到群組。
完整五步流程：從想法到全校都看得到
- 想法：先想清楚這頁要給誰看、要他做什麼（報名？追蹤？來攤位？）。
- 設計（Claude Design）：用講的、或丟草圖，把頁面做出來，用 Comment 改到滿意。
- 生成網站（Claude Code）：把設計轉成真正能在瀏覽器打開的網頁。
- 部署（Netlify）：一句話上線，拿到公開網址。
- 推廣分享：網址貼到 IG、班群、海報 QR code。要收報名資料，可以在頁面放 Google 表單連結，回覆自動進 Google Sheets（線上試算表）方便統計人數。
三輪練習：做一個社團報名頁
第一輪|照做：把下面這段指令原封不動貼給 Claude Design—— 「幫我設計一個高中天文社觀星活動的報名頁：大標題『秋季觀星夜』，活動時間 10 月 24 日晚上 7 點，地點學校頂樓，內容三行介紹，最下面一顆『我要報名』按鈕。風格：深藍夜空、簡潔。」 看它產出什麼，再用 Comment 下兩個修改指令（例如「標題字再大一點」「按鈕改成黃色」），感受一下對話改設計的節奏。
第二輪|換成你自己的社團：把主題換成你的社團或班級活動，這次加兩件事：（1）先在紙上畫一張版面草圖丟進去；（2）把「我要報名」按鈕連到你建好的 Google 表單。做完後請 Claude Code 部署到 Netlify，拿到網址。
第三輪|自我檢核 3 題：上線前用手機打開你的網址，問自己——
- 一個完全不認識這個活動的同學，10 秒內能看懂「這是什麼活動、何時何地、怎麼報名」嗎？
- 手機上看，字會不會太小、按鈕好不好按、版面有沒有跑掉？
- 時間、地點、表單連結，每一個都點過、核對過了嗎？（錯的網址比沒有網址更糟。）
使用提醒
- Beta 有獨立的用量上限：設計功能的額度和一般聊天分開計算，做大量修改前留意用量，細節以官方當下畫面為準。
- 先用小活動測試：第一次別直接拿全校性大活動上場，先用小型社課、班級活動試跑一輪流程。
- 適合的場景：活動報名、社團招募、課程介紹、專題展示、學習歷程作品集——都是「一頁講清楚、附一個行動按鈕」的頁面。
- 重要內容記得備份：Beta 產品沒有保證永久保存，做好的文案、圖片自己留一份。網站也建議把產出的檔案存下來。
來源與延伸
- 本頁內容整理自台灣創作者 PAPAYA 電腦教室的教學示範：Claude Design 示範影片。Claude Design 為 Beta 功能，實際介面、功能與用量規則以官方當下畫面為準。
- 涉及 Claude Code 的部分（生成網站與部署），請以官方 code.claude.com 文件為準；本知識庫的官方文件快照日期為 2026-06-26。
- 延伸閱讀：本站〈兩種用法：Home 與 Claude Code〉，搞懂 Claude Design 之外，什麼工作該交給哪一種用法。