--- title: "Claude Design 做出來都很普通？換成設計師的五個用法" slug: claude-design-designer-workflow-five-ways url: https://rar.design/posts/claude-design-designer-workflow-five-ways published_at: 2026-11-06 author: "設計師 Riven" category: "AI 設計" tags: ["UI 設計", "prompt", "設計系統", "Anthropic", "AI 設計工具", "Claude", "Claude Design"] access: public_access --- # Claude Design 做出來都很普通？換成設計師的五個用法 > 設計系統、三個方向、原型比較、依大小修稿、讓它找碴：Claude Design 搬進對話框之後的實戰流程 By **設計師 Riven** - 資深數位產品設計師｜知名線上課程講師 | 2026-11-06 AI TOOLS · CLAUDE DESIGN ▲ Claude Design 官方主視覺（圖片來源：Anthropic） QUICK ANSWERClaude Design 做出來很普通，多半是因為只丟了一句話。2026 年 9 月起它成為 Claude 對話裡的 Design 範本，免費版也能用。換成設計師的流程就會差很多：先讓它從舊作品萃取設計系統，第一輪要三個方向，原型先點一輪再修，依改動大小選對話、留言或直接改，定稿前叫它找碴。 CONTENTS 01Claude Design 搬家了：現在去哪裡用 02為什麼一句話做出來都很普通 03用法一：先讓它讀懂你的設計系統 04用法二：先要方向，不要成品 05用法三：原型先點一輪，再談好不好看 06用法四：依改動大小換工具 07用法五：讓它當挑剔的資深設計師 08限制：它還做不到的事 09這週先做這三件事 CHAPTER 01 · WHAT CHANGED Claude Design 搬家了：現在去哪裡用 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脫離 betaDesign、Slides、Docs 開放所有方案，包含免費版 2026 / 12 / 14獨立站關閉claude.ai/design 改為唯讀，設計系統要先搬 現在叫出它有三種方式：在對話裡直接說「幫我做一個⋯⋯的設計」；在輸入框的 Output 選單選 Design；或到側邊欄的 Artifacts 分頁挑 Design 範本。手機 App 也能下指令，做好再回來看。寫程式的人在 Claude Code 打 /design 就行。 ▲ Claude 官方頻道 10 月 8 日的〈Introducing Claude Dashboards and Claude Motion〉影片封面。同一支影片宣布 Claude Docs、Slides、Design 脫離 beta，所有方案都能用，包含免費版 門檻一降，打開它的人變多，設計圈的抱怨也跟著變多：做出來都差不多，米白底、大圓角、一個強調色，一眼就看得出是 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 會多要一件事：把這幾件作品之間互相打架的地方列出來。 PROMPT · 萃取設計系統我上傳了 6 件已經上線的作品，請整理出背後的設計系統：1. 色彩：每個色碼和它的用途（主色、輔色、警示、背景）2. 字級：從大標到註解的層級與尺寸3. 間距：看得出來的倍數規則4. 元件：按鈕、卡片、輸入框的圓角、邊框與狀態5. 底線：哪些東西一換掉就不像這個品牌 最後列出這 6 件作品彼此矛盾的地方，例如同一種按鈕出現兩種圓角，並告訴我每一處你建議以哪一版為準、為什麼。 最後那段矛盾清單，常常比前面五項更有價值。自己做的東西自己最看不出問題：去年的簡報用 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 讀到之前消失。發現留言沒被處理，把同一句話貼回對話框就好。 ▲ Claude 官方頻道〈Introducing Claude Design by Anthropic Labs〉影片畫面：畫布上方是 Comment、Edit、Draw 三種編輯模式，右側 Tweaks 面板可以切換裝置預覽、主題色與字級 用過 4 月獨立版的人會記得這個 Tweaks 面板，可以用滑桿即時調主題色和字級。現在官方說明列的修法是對話、留言和直接在畫布上改這三種，沒有再提到 Tweaks，習慣滑桿的人要改用屬性面板。 畫布也支援鍵盤：Cmd + \ 開關屬性面板、Shift + G 叫出版面參考線、Cmd + G 群組、Cmd + D 複製。Figma 練出來的手感，有一半可以直接沿用。 CHAPTER 07 · WAY 05 · CRITIQUE 用法五：讓它當挑剔的資深設計師 稿子看起來差不多了，最後一步多數人會跳過：叫它挑毛病。要它挑毛病，別說「再幫我優化」。叫它優化，它會直接動手改，改完你也說不出原本哪裡不好。 PROMPT · 設計評論請用一位沒參與這個專案的資深產品設計師的角度，審視這份設計。先不要改稿。 找出最弱的 5 個設計決定，每一個都說明：· 哪裡不成立· 會讓使用者卡在哪一步· 背後可能錯的假設是什麼· 你會用什麼方式測試 易用性和資訊層級優先，美感放最後。 官方說明也提到，可以請它解釋設計理由、建議改善方向，或幫忙檢查無障礙。我會在三個時間點跑這段：定產品方向之前、品牌改版定案之前、對外上線之前。它說對了，省下一輪返工；它說錯了，你也更清楚自己為什麼堅持原本的做法。 AI 的評論只是第一關。用 Design 範本做出來的稿現在是 artifact，可以直接分享給同事，權限從檢視、留言到編輯都能設；同事在上面留了意見，再請 Claude 照著改。 ▲ Claude 官方頻道〈Collaborate on artifacts in Claude〉：分享 artifact、設定每位同事的權限，留言後請 Claude 代為修改 CHAPTER 08 · LIMITS 限制：它還做不到的事 Figma 還在像素級收尾、大型設計系統的長期管理，還是回到 Figma 額度共用跟對話、Claude Code 算同一個池子，改越多輪用越快 設計系統 betaPro 以上方案才有，免費版要靠每次貼截圖 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 DesignerMedium 作者 Christie C. 的英文原文，這篇的五個用法從她的整理延伸而來 SUBSCRIPTIONAI 覺醒設計應用攻略AI 工具每週都在更新，我幫你過濾雜訊，只留對設計師真正有用的應用。了解訂閱 → 常見問題 Q：Claude Design 現在要去哪裡用？ A：任何 Claude 對話都能用：直接請它做設計、在輸入框的 Output 選單選 Design，或到 Artifacts 分頁挑 Design 範本；Claude Code 可以用 /design。原本的 claude.ai/design 獨立網站 2026 年 12 月 14 日關閉，之後只剩唯讀。 Q：Claude Design 免費版可以用嗎？ A：可以。2026 年 10 月 8 日起 Design、Slides、Docs 範本開放所有方案，包含免費版。設計系統功能目前還是 beta，只開在 Pro、Max、Ultra、Team 與 Enterprise 方案。 Q：Claude Design 會另外算額度嗎？ A：不會另外算。它跟對話、Claude Code 共用方案的額度，專案越大、改的輪數越多，消耗越快。 Q：Claude Design 做出來為什麼都長得差不多？ A：通常是脈絡太少。先上傳既有作品建立設計系統，用目標、對象、版面、內容、語氣五欄寫 brief，並寫清楚不要的樣式，產出會明顯貼近你的品牌。 Q：Claude Design 的行內留言沒被處理怎麼辦？ A：官方說明提到留言偶爾會在 Claude 讀取前消失，把同一段意見直接貼回對話框就能處理。 Q：Claude Design 可以取代 Figma 嗎？ A：目前比較適合前段的發想、方向比較與原型。像素級收尾、大型設計系統的長期管理還是 Figma 比較順手；定好的稿可以匯出 HTML、PPTX，或交給 Claude Code 實作。 Q：舊的 claude.ai/design 設計系統要怎麼搬？ A：到 Claude 的 Artifacts 頁，點「Claude Design lives here now」橫幅裡的 Move team design systems，一次就會搬整個組織的設計系統。舊對話和留言不會搬過來。