2026 年 4 月推出的 Claude Design，是 Anthropic 對應 Vibe Coding 的「設計版本」，你用中文描述想要的畫面，AI 直接生成可看、可點、可改的設計稿。它不是要取代 Figma（設計師最常用的專業 UI 設計軟體）或 Canva（給一般人用的線上排版工具），它是讓「腦中有想法、但沒用過設計軟體的人」也能在 5 分鐘內看到雛形的工具。對教師、研究者、學科專家而言，這代表你不必跨過「先學設計軟體」這道牆，就能把腦中的概念視覺化。
3 大應用類型，看清 Claude Design 能做什麼
Claude Design 的功能可以歸成三類，分別對應三種不同的工作需求，從靜態的視覺資料、可互動的原型、一路走到能直接上線的網頁。
① 視覺資料型
產出靜態視覺成品，簡報頁、海報、教材插圖、Wireframe 草圖（網頁/App 的線框稿，先用簡單方塊排出版面，不畫細節）、Pitch Deck（提案簡報）。產出後可截圖或匯出存檔，丟進 PowerPoint 或文件中當插頁使用。
② 互動原型型
產出可以點擊、有狀態變化的原型，App 介面、Landing Page（一頁式銷售頁）、表單流程、線上測驗頁面。學員可以直接在瀏覽器試玩，老師也能讓修課學生親自操作你想呈現的概念。
③ 進階開發型
產出含 HTML / CSS / JavaScript（網頁的三大組成：HTML 寫內容、CSS 管樣式、JavaScript 加互動）的可運行頁面（甚至支援音訊、3D 效果）。最強用法是把這份成品交給 Claude Code 繼續加工，變成真正能上線的網站，詳見本節後段。
教學現場示範：一張「研究方法概念示意圖」
先看一個示範，把上面 3 大應用類型具體化。以一個老師最常碰到的需求示範，用 Claude Design 做出「量化 vs 質性研究」的對照示意圖，3 分鐘內完成。比文字敘述好懂太多，可直接放進研究方法課程的教材。
改一個 prompt 就能換成別的概念對照圖（質化編碼 vs 量化統計、Phase I vs Phase II 試驗、有氧 vs 無氧運動代謝路徑）。同一個模板可以延伸出整學期的教材插圖。
操作精要：4 種輸入、3 種輸出、5 個技巧
看完一個示範後，把 Claude Design 的核心操作整理成下方這份對照表，之後遇到任何需求，從這邊找對應工具就好。
A · 4 種輸入方式：用最順手的那種講需求
| 輸入方式 | 最適合什麼情境 | 實際操作 |
|---|---|---|
| Chat 寫指令 | 大方向描述、整體結構、跨元件調整 | 右側對話框直接打字，越具體越好 |
| Sketch 手繪 | 腦中有畫面但講不清楚、想保留版面比例感 | 用滑鼠塗一張草圖 + 一句文字說明，AI 會照草圖比例生成 |
| Draw 畫記號 | 對既有設計做精準調整，對齊、移動、強調某幾個元素 | 在已生成的設計上圈起來、畫箭頭，配一句指令 |
| Edit 模式 | 已知具體數值要改（字體大小、配色、間距） | 點選元件 → 右側面板直接拖拉或輸入數值，類似 Figma |
不是要記住 4 種，是要知道「卡住的時候還有別的招」。多數人 80% 時間用 Chat，剩下 20% 才會切換到其他方式。
B · 該用 Chat 還是 Inline Comment？
Claude Design 允許你「在某個元件上面直接留註解（Inline Comment）」，但官方文件特別提醒：Inline Comment 有時會被遺漏，尤其當該元件在後續迭代中被重新生成時。
簡單原則
大方向、整體結構、跨元件指令 → 一律用 Chat
選定某個元件做小調整 → 也建議用 Chat（先點該元件，AI 會自動聚焦）
Inline Comment → 留給「個人筆記」用就好（例如「這邊未來要換成研究室 logo」），別期待 AI 一定會照做。
C · Tweaks 面板：一鍵試樣式
畫面上方的 Tweaks 切換鈕打開後，會出現一排快速切換選項，深色 / 淺色模式、字體系列、配色方案，不必重新生成設計，當場點選就能看到效果。決定不下要哪個風格時超好用，10 秒看完所有選項。
D · 3 種輸出方式：把成品送出去
① 靜態檔案
適合直接放進課程簡報、計畫書、報告。PDF 是用瀏覽器內建列印對話框存檔；PPTX 可後續在 PowerPoint 編輯。
② 送進 Canva
到 Claude Settings → Connectors（連接器，MCP 是 Model Context Protocol 的縮寫，讓 Claude 能跟外部服務對接的協定）→ 加入 Canva 連接器並授權後，可一鍵送過去用 Canva 範本繼續調整。大檔案會自動轉成 PDF 傳送。
③ 交給 Claude Code
點「Hand off to Claude Code」會生成一段指令，貼進終端機 Claude Code 就能直接做出可運行的網頁。詳見下方 handoff 流程。
E · 官方 prompt 寫作 5 大建議
來自 Claude Design 官方文件，把它存成自己的檢查清單：
- 從簡單起步、逐步迭代，第一次別把所有需求一口氣塞給 AI；先做出最簡版本，再逐輪加細節。
- 描述要精準，不要說「不對」，與其說「這看起來怪怪的」，不如說「卡片之間的間距改成 16 px（pixel，像素，網頁上的最小長度單位）」「第二段字體從 14 px 放大到 18 px」。
- 引用你的 Design System，如果建好了 DS（Design System 的縮寫，後文都會用 DS 簡稱，見下方 F），請 AI「用我們的 design system 重做這份設計」即可，不必每次重講配色字體。
- 早一點考慮響應式（responsive，網頁會自動適應不同螢幕大小的設計方式），從第一輪就講清楚「同時要在手機與桌機（桌上型電腦或筆電的大螢幕）都好看」，比後期再改省力 10 倍。
- 請 Claude 主動審查，設計完後問「這份設計的色彩對比、字級、按鈕大小是否符合無障礙標準（Accessibility，讓視力不佳、色弱、行動不便者也能順暢使用）？有可改進的地方嗎？」
F · 進階：用 Design System 跨專案統一視覺
如果你有多個設計專案要做（實驗室招生頁、實驗室介紹、課程教材、研究計畫簡報），建立一份 Design System 後，每個新設計都能套用同一套配色、字體、元件，不必每次重講「藍色用 #155e75、字體用 Noto Sans TC（Google 為繁體中文設計的免費字體，網頁顯示效果好）」。
建立方式有 3 種：
- 從零起步，適合新品牌、新研究室
- 連接現有的程式碼，適合已有網站，AI 會自動抓 CSS 變數（網站的設計參數）
- 上傳 Figma 檔案，適合已用 Figma 設計過、有現成檔的人
建好之後，在每個新設計裡選擇「使用我的 design system」就會自動套用。對研究室、課程系列、品牌一致性是必殺技，一次設定，整年受用。
G · 5 個老手才知道的心法（避免踩雷）
看完操作後，下面 5 條是社群上實際用過幾週後沉澱下來的心法，提早知道就能少走彎路。
① 它生成的是程式碼，不是像素
跟 Figma、Canva 不一樣，Claude Design 背後是寫 HTML / CSS / JS 給你看。理解這件事後就懂為什麼有些「設計師會做的細節」（精準對齊到 0.5px、奇怪曲線、複雜筆刷紋理，0.5px 是極小的單位，半個像素的差距，肉眼幾乎看不到但設計師會在意）它做不到，但「能跑、能互動、能直接上線」是它的天賦。
② Opus 起手，編輯時可降級
第一次生成需要全力（Opus 4.7，Anthropic 目前最強的模型），但後續微調不必，切換到 Sonnet（中階模型，速度快、費用低）等便宜模型也夠用，AI 用量會明顯下降。Max 方案（Claude 高階訂閱）額度緊的話這招很省，建立 Design System 那種長任務尤其有感。
③ 投資 1 小時建好 Design System
看起來像「進階選項」的 DS（Design System，前面提到的設計規則集），其實是新手最該優先做的事。先花 1 小時把研究室配色、字體、按鈕風格定好，後面整學期、整年的設計都自動繼承，比每次重講配色快太多，也是讓多份產出有「一致風格」的關鍵。
④ Icons、命名、關鍵插圖留給人
AI 給的 icon 常常不對味、實驗室名稱會被自動改寫、關鍵示意圖太通用，這些「品牌靈魂」自己手動換掉，整體設計品質會立刻提升一大截。記住：讓 AI 做 80%，自己把關最後 20%。
⑤ 何時不要用 Claude Design
不適合三種情境：① 需要團隊多人同時編輯（Figma 仍勝出）；② 要 1:1 復刻某張既有設計圖（精準像素級對齊還不完美）；③ 走正式設計審查流程的企業專案。簡單講，想快、想試、想自己做就用它；要嚴謹評審還是回到專業設計工具。
一句話總結
Claude Design 的甜蜜點是「從 0 到 70 分，5 分鐘搞定」，後面 70 到 95 分還是需要人來把關。把它定位為「把腦中想法快速視覺化的捷徑」，而不是取代設計師的萬能解，使用體驗會最好。
進階用法：Claude Design → Claude Code 交接
掌握以上操作後，Vibe Coding 還有一個進階玩法。當你的原型不只是要展示，而是要做成真正能上線的網頁時，把成品交給 Claude Code 繼續處理，這是 Vibe Coding 整條鏈的最高效玩法（例如把研究室招生頁、實驗室介紹頁、線上問卷頁直接變真網站）。
在 Claude Design 完成可點擊的原型
把所有畫面、互動、配色都調到滿意。例如「個人作品集網頁」「研究室招生報名表」「實驗室介紹頁」。
匯出設計稿（或直接生成程式碼）
Claude Design 支援匯出設計檔，也能直接生成可用的前端程式碼（frontend，網頁使用者看得到、用得到的那一面，包含畫面、互動、樣式，對應的是看不到的「後端」資料處理）。如果要交給 Claude Code 進一步改造，截圖 + 簡短描述也夠用。
啟動 Claude Code 接力
把設計稿丟給 Claude Code，請它把原型改成可上線的網頁。下面是一個可直接套用的 prompt 範本：
為什麼這個工作流值得學會
對教師、研究者、小型團隊而言，學會 Claude Design + Claude Code 等於同時擁有「設計師」與「前端工程師」兩個角色，從一張概念圖，到可上線的網頁，一個人就能搞定。Vibe Coding 的精神不是讓 AI 取代專業人才，而是讓「沒有美感、也沒寫過程式」的學科專家，也能把自己腦中的想法快速做出來給人看。