2026年11月6日 下午 1:08
AI 設計AI TOOLS · CLAUDE DESIGN
QUICK ANSWER
Claude Design 做出來很普通，多半是因為只丟了一句話。2026 年 9 月起它成為 Claude 對話裡的 Design 範本，免費版也能用。換成設計師的流程就會差很多：先讓它從舊作品萃取設計系統，第一輪要三個方向，原型先點一輪再修，依改動大小選對話、留言或直接改，定稿前叫它找碴。
CONTENTS
09
CHAPTER 01 · WHAT CHANGED
Claude Design 這兩個月換了住址。4 月 17 日以 Anthropic Labs 研究預覽版上線時，它有自己的網站 claude.ai/design，想用得另外開一個分頁。9 月 16 日之後，它變成 Claude 裡的一種 artifact 範本，任何一個對話都叫得出來；10 月 8 日脫離 beta，免費方案也能用。原本那個獨立網站 12 月 14 日關閉，之後只剩唯讀。
TIMELINE · CLAUDE DESIGN 的四個日期
2026 / 04 / 17
獨立上線
Anthropic Labs 研究預覽，網址 claude.ai/design
2026 / 09 / 16
搬進對話框
成為 artifact 的 Design 範本，任何對話都能叫出來
2026 / 10 / 08
脫離 beta
Design、Slides、Docs 開放所有方案，包含免費版
2026 / 12 / 14
獨立站關閉
claude.ai/design 改為唯讀，設計系統要先搬
現在叫出它有三種方式：在對話裡直接說「幫我做一個⋯⋯的設計」；在輸入框的 Output 選單選 Design；或到側邊欄的 Artifacts 分頁挑 Design 範本。手機 App 也能下指令，做好再回來看。寫程式的人在 Claude Code 打 /design 就行。
門檻一降，打開它的人變多，設計圈的抱怨也跟著變多：做出來都差不多，米白底、大圓角、一個強調色，一眼就看得出是 AI。這半年我拿它做課程動畫和教材畫面，自己的結論是工具沒有變笨，大部分人用它的方式還停在「下一句指令，等一張圖」。
基本操作我在 〈Claude Design 怎麼用？從一句話做出互動網頁〉 寫過，還沒開過的可以先看那篇。這篇往下一步走：把用法換成設計師平常的工作方式。
CHAPTER 02 · WHY IT LOOKS GENERIC
你丟一句「幫我做一個咖啡店官網」，Claude 手上就只有這幾個字。品牌是誰、客人是誰、你最怕被做成什麼樣子，它都不知道，只能拿它看過最多次的那種咖啡店網站交差。平均值長得就是那個樣子：安全、乾淨、看完沒人記得。
接案也一樣。客戶只丟一句「做得高級一點」，你交出去的第一版通常也很普通，因為你在猜。資深設計師的差別在開工前：先開 kickoff、要品牌規範、看競品、問這頁最重要的數字是哪個。Claude Design 吃的是同一套東西，官方說明寫得很直接，給它的脈絡越多，產出越好。
下面這張表是整篇的地圖。左欄是一句話派的做法，右欄是這篇要講的五個用法，各自對應一個工作環節。
環節
一句話派
設計師的用法
開工前
直接開一個新對話就做
先交舊作品，萃取設計系統
第一輪
要一張完整的成品
先要三個文字方向，再寫 brief
拿到稿
看好不好看
從頭點一輪，記下卡住的地方
修稿
每個小改動都打字重講
依改動大小換對話、留言、直接改
定稿前
看起來不錯就交
叫它用資深設計師的眼光找碴
CHAPTER 03 · WAY 01 · SYSTEM
第一步先別急著做新東西，把你做過、而且自己滿意的作品交給它。五、六件就夠：上線中的網站截圖、一份提案簡報、品牌規範 PDF、Figma 檔、幾則社群貼文。
現在可以直接在對話裡請 Claude 用上傳的 Figma 檔、簡報、logo 和字型建一套設計系統；已經有 React 元件庫的團隊，在 Claude Code 跑 /design-sync，它會直接讀 token 和元件。建好的設計系統本身就是一個 artifact，之後每次做設計、做簡報都會自動套用，Claude 還會拿它檢查自己的產出。
我的 prompt 會多要一件事：把這幾件作品之間互相打架的地方列出來。
最後那段矛盾清單，常常比前面五項更有價值。自己做的東西自己最看不出問題：去年的簡報用 8px 圓角，今年的官網悄悄變成 12px，主色在三份檔案裡差了兩個色階。這些平常靠肉眼對不出來，讓它一次攤開，你就知道哪些規則其實從來沒定下來。間距如果還沒有倍數規則，可以先看 〈網頁排版的間距系統〉 的 8pt 做法再回來補。
提醒一點：設計系統功能目前還是 beta，開在 Pro、Max、Ultra、Team 與 Enterprise 方案。免費版可以做設計，但沒有這個設定，替代做法是每開一個新對話，就把那幾張作品截圖重新貼進去。
CHAPTER 04 · WAY 02 · DIRECTIONS
第一輪先別讓它畫。請它用文字講三個方向，每個方向交代四件事：資訊怎麼排、版面邏輯、視覺語言，還有這個方向放棄了什麼。最後加一句「先不要做出來」。看完挑一個，再進入畫的階段。
理由很實際。它一旦畫出一張完整的稿，你的眼睛就被那張圖綁住，接下來的修改都只是在那張圖上微調。三個方向用文字攤開時，你還能自由地說「第一個的排法，配第三個的語氣」。
挑好方向，寫一份 brief。官方說明建議 prompt 要包含目標、版面、內容和使用者四件事；我會再加一欄語氣，寫清楚「不要什麼」。下面用一個線上課程平台的「我的學習」首頁當例子。
BRIEF · 五欄寫法範例
目標
學員一打開就知道今天要上哪一堂，回來繼續上課的阻力越小越好
對象
25 到 40 歲、下班後用筆電或手機上課的設計新手，一週上兩三次
版面
最上方一張「繼續上課」大卡片；下方依課程分組的進度條；右側窄欄放最近的作業回饋；徽章和排行榜收進次要頁面
內容
用有真實感的假資料：三堂課、各 12 到 40 個單元、實際的單元名稱和剩餘分鐘數
語氣
安靜、留白多、字級對比強、只用一個強調色。不要漸層、不要玻璃擬態、不要遊戲化的彩色徽章
前四欄對應官方建議的目標、使用者、版面、內容；語氣欄是我自己加的，重點在「不要」那半句。
「不要什麼」最常被省略，也最有用。Claude 的預設品味很容易滑向幾種當紅的樣式，你沒先封掉，它就會自己加回來。
第一版出來之後，我幾乎都會再要一個：「同一份 brief，做一個資訊更密的版本」。兩張並排，才看得出哪一種掃描路徑比較順；單看一張，只會覺得好像還可以。
CHAPTER 05 · WAY 03 · PROTOTYPE
Claude Design 做出來的是能點的原型。第一版拿到手，先別去挑圓角和陰影，把自己當成那個下班後打開電腦的學員，從頭點一次，邊點邊記下哪裡停頓了。我會拿這五題對照：
1
打開三秒內，看得出這頁要我先做什麼嗎？
2
主要按鈕只有一個，還是有三個在搶？
3
資訊的先後順序，跟使用者心裡的順序一樣嗎？
4
有沒有東西佔了第一眼的位置，其實沒那麼重要？
5
導覽分類用的是使用者的語言，還是後台的資料結構？
拿剛剛的「我的學習」首頁來說，我會請它做兩種資訊架構：A 版以「今天」為主，最急的單元排第一；B 版以「課程」為主，今天要上的單元收在各自的課程底下。兩版都點過一輪，你會發現自己其實在決定產品邏輯，配色根本還輪不到。這一步做完，手上多的是一個決定，好看的圖反而是附帶的。
這種比較在 Figma 裡要畫兩套完整流程，在 Claude Design 裡就是多打一行字。比較的成本低到這種程度，就沒理由只看一個版本。頁面的說服順序，可以對照 〈Landing Page 該從哪一步開始設計？〉 的六個步驟一起檢查。
CHAPTER 06 · WAY 04 · REFINE
進入修稿，最常見的浪費是什麼都用打字講。「左邊數來第二張卡片的標題再小一點」這種話，寫的人累，它也可能找錯卡片。現在畫布旁邊有幾種修法，依改動大小挑：
LADDER · 改動大小對應的工具
大
對話
結構、整體風格、新增區塊
例：「整體改暗色，數據移到第一列，圖表放下面」
中
行內留言
點著某個元件直接留話
例：「這裡改成下拉選單」「這段做成可以收合」
小
直接在畫布上改
拖曳、縮放、對齊、改字，開屬性面板調顏色和字型
例：標題錯字、按鈕往右對齊、換一個字重
岔路
存檔再另開方向
想試完全不同的做法，又不想丟掉現在這版
例：「把目前這版存起來，換一個完全不同的做法」
留言有一個官方承認的小毛病：偶爾會在 Claude 讀到之前消失。發現留言沒被處理，把同一句話貼回對話框就好。
用過 4 月獨立版的人會記得這個 Tweaks 面板，可以用滑桿即時調主題色和字級。現在官方說明列的修法是對話、留言和直接在畫布上改這三種，沒有再提到 Tweaks，習慣滑桿的人要改用屬性面板。
畫布也支援鍵盤：Cmd + \ 開關屬性面板、Shift + G 叫出版面參考線、Cmd + G 群組、Cmd + D 複製。Figma 練出來的手感，有一半可以直接沿用。
CHAPTER 07 · WAY 05 · CRITIQUE
稿子看起來差不多了，最後一步多數人會跳過：叫它挑毛病。要它挑毛病，別說「再幫我優化」。叫它優化，它會直接動手改，改完你也說不出原本哪裡不好。
官方說明也提到，可以請它解釋設計理由、建議改善方向，或幫忙檢查無障礙。我會在三個時間點跑這段：定產品方向之前、品牌改版定案之前、對外上線之前。它說對了，省下一輪返工；它說錯了，你也更清楚自己為什麼堅持原本的做法。
AI 的評論只是第一關。用 Design 範本做出來的稿現在是 artifact，可以直接分享給同事，權限從檢視、留言到編輯都能設；同事在上面留了意見，再請 Claude 照著改。
▲ Claude 官方頻道〈Collaborate on artifacts in Claude〉：分享 artifact、設定每位同事的權限，留言後請 Claude 代為修改
CHAPTER 08 · LIMITS
Figma 還在
像素級收尾、大型設計系統的長期管理，還是回到 Figma
額度共用
跟對話、Claude Code 算同一個池子，改越多輪用越快
設計系統 beta
Pro 以上方案才有，免費版要靠每次貼截圖
12/14 舊站關閉
claude.ai/design 建的設計系統要自己搬
用了半年，我對它的定位很清楚：它把「從零到一張可以拿來討論的稿」縮短到幾分鐘，但收尾、像素對齊、跟工程師的元件庫對上，還是要回到 Figma 或程式碼。交接的路倒是很多條，可以匯出 PDF、PPTX、獨立 HTML，送到 Canva、Lovable、Vercel 這些工具，或直接交給 Claude Code 接著寫。想讓 AI 直接改 Figma 檔，〈AI 怎麼直接畫進 Figma？〉 有完整設定。
額度的部分，Claude Design 以前有自己的每週額度，現在已經併進方案的共用額度，跟對話、Claude Code 用的是同一個池子。專案越大、牽涉的程式碼越多、改的輪數越多，消耗越快。
還在用舊網站的人要注意：獨立版 12 月 14 日關閉後只剩唯讀，舊的對話和留言不會搬過來。到 Claude 的 Artifacts 頁，點橫幅裡的「Move team design systems」就能把設計系統搬過去；專案的搬移正在分批開放給付費方案。
CHAPTER 09 · TAKEAWAYS
五個用法壓成這週就能動手的三件事：
1
挑五、六件最滿意的作品，花二十分鐘萃取設計系統
順便拿到一份矛盾清單，先把自己的規則對齊
2
下一個需求，先要三個文字方向，再寫五欄 brief
第一版出來後再要一個資訊更密的版本，兩張並排比
3
定稿前跑一次設計評論 prompt
把它挑出來的五個問題逐一回答，答不出來的就是要改的
“
工具已經搬進每個對話框了，差別剩下你丟進去的是一句話，還是一份 brief。
會畫已經不稀奇。知道該要什麼、看得出哪裡不對、敢在三個方向裡挑最不討好的那個，這些判斷還在設計師手上。我在 〈合格很便宜，好看很貴〉 聊過同一件事：AI 把合格的門檻壓到幾乎免費，剩下值錢的，是你知道什麼叫好。
RELATED READS · 延伸閱讀
Claude Code /design 還是 Claude Design？終端機直接生 UI 畫板的新指令完整解析
工程師那一側的 Design：在終端機裡出畫板、挑方案再實作
閱讀文章 →Claude Code 怎麼做出沒有 AI 感的網站？三步驟把 AI 調教成懂品味的設計師
同樣是對付「一看就是 AI」，從程式碼端下手的做法
閱讀文章 →Claude 該從哪裡開始學？《Claude 能幫你做的 100 件事》中文入門課完整介紹
還不熟 Claude 的基本操作，從這堂入門課開始
閱讀文章 →設計師都在用 AI，差距為什麼反而拉大？2026 AI 設計趨勢報告整理
工具人人都有，差距從哪裡來的數據版
閱讀文章 →Claude Plugins 是什麼？設計師先裝這三個，讓 Claude 變成你的設計團隊
Design Critique 這類外掛，可以把設計評論變成固定流程
閱讀文章 →EXTRA · LINKS
Get started with Claude Design
官方說明：叫出方式、prompt 寫法、三種修稿方式、匯出格式
Set up your design system in Claude Design
官方說明：從對話或 /design-sync 建立設計系統
Move from standalone Claude Design to Claude
官方說明：舊網站關閉時程與設計系統搬移步驟
5 Ways to Use Claude Design Like an Actual Designer
Medium 作者 Christie C. 的英文原文，這篇的五個用法從她的整理延伸而來
A：任何 Claude 對話都能用：直接請它做設計、在輸入框的 Output 選單選 Design，或到 Artifacts 分頁挑 Design 範本；Claude Code 可以用 /design。原本的 claude.ai/design 獨立網站 2026 年 12 月 14 日關閉，之後只剩唯讀。
A：可以。2026 年 10 月 8 日起 Design、Slides、Docs 範本開放所有方案，包含免費版。設計系統功能目前還是 beta，只開在 Pro、Max、Ultra、Team 與 Enterprise 方案。
A：不會另外算。它跟對話、Claude Code 共用方案的額度，專案越大、改的輪數越多，消耗越快。
A：通常是脈絡太少。先上傳既有作品建立設計系統，用目標、對象、版面、內容、語氣五欄寫 brief，並寫清楚不要的樣式，產出會明顯貼近你的品牌。
A：官方說明提到留言偶爾會在 Claude 讀取前消失，把同一段意見直接貼回對話框就能處理。
A：目前比較適合前段的發想、方向比較與原型。像素級收尾、大型設計系統的長期管理還是 Figma 比較順手；定好的稿可以匯出 HTML、PPTX，或交給 Claude Code 實作。
A：到 Claude 的 Artifacts 頁，點「Claude Design lives here now」橫幅裡的 Move team design systems，一次就會搬整個組織的設計系統。舊對話和留言不會搬過來。
