---
title: "Claude Code /design 還是 Claude Design？終端機直接生 UI 畫板的新指令完整解析"
slug: claude-code-design-command-guide
url: https://rar.design/posts/claude-code-design-command-guide
published_at: 2026-08-21
modified_at: 2026-08-22
author: "設計師 Riven"
category: "AI 設計"
access: public_access
---

# Claude Code /design 還是 Claude Design？終端機直接生 UI 畫板的新指令完整解析

> 畫板流程、設計系統繼承規則與五個發布門檻，官方文件比公告講得更清楚

By **設計師 Riven** - 資深數位產品設計師｜知名線上課程講師 | 2026-08-21

AI TOOLS · CLAUDE CODE · 2026▲ Claude Design 的畫布編輯器（左）與 Claude Code 終端機（右上）。選中的標題可以直接在左欄調字體、字級、字距與行高，終端機這端正在把設計元件推回 Claude Design。圖／Anthropic 官方QUICK ANSWER/design 是 Claude Code 在 2026 年 8 月 17 日（台灣時間 18 日）推出的 research preview 指令，把 Claude Design 的畫板流程搬進終端機。下一句 /design a few options for，Claude 會讀你的 codebase、比對現有 UI 風格，生出幾張可編輯的畫板，挑一張改一改就直接接著實作。它跑在 Artifacts 上，Pro、Max、Team、Enterprise 方案都能用。VISUAL SUMMARY六張圖先看完整輪廓只有兩分鐘的話，這幾張是整篇的濃縮：它做什麼、怎麼用、設計系統怎麼餵、該用哪一個、五個發布門檻、限制在哪。手機上點開可以放大，細節都在下面各章。CHAPTER 01 · WHAT SHIPPED這週二，Claude Code 學會了畫版型台灣時間這週二中午，Anthropic 設計團隊的 Nate Parrott 在 X 上丟出一句話：Claude Code 的 /design 指令開放早期預覽了。四天內那則推文累積八十六萬次瀏覽，官方開發者帳號補的說法更直白——Claude Code 現在會設計了。用法只有一行：/design a few options for {功能}。Claude 讀你的 codebase、對照現有 UI 風格，一次生出幾張可以編輯的畫板，你挑一張順眼的、在上面調整，然後叫它照著實作。整段流程留在同一個 coding session，不用另開分頁去 claude.ai/design 再把 code 貼回來。有件事得先講，因為它直接影響你怎麼裝：Claude Code 的 CHANGELOG 從頭到尾沒有 /design 這一條。我把整份翻過一次，2.1.238 一路往回都查不到。原因是它以 skill 的形式發布，而不是寫死在 CLI 裡的指令——它跟著帳號走，不跟著版本號走。所以你跑完 claude update 卻在 release note 裡找不到對應說明，是正常的，不是你漏看。CHAPTER 02 · HOW IT WORKS五個步驟，把「先看再寫」塞回開發流程WORKFLOW · /designSTEP 01講意圖描述功能，不描述像素→STEP 02生畫板幾個方向並排→STEP 03挑一張不重生，用選的STEP 04直接改畫布上調，不耗一輪對話→STEP 05實作同一個 session 直接落地最後一步才是把這件事放進 Claude Code、而不是留在獨立網頁版的理由。畫板跟實作活在同一個 session，中間沒有匯出、沒有截圖、沒有把設計稿翻譯成規格再交出去的那一段。畫板本身跑在 Artifacts 上。Artifacts 是 Claude Code 六月開始支援的能力，它把 session 的產出發布成一個 claude.ai 上的私人網址，開著的頁面會隨著 session 更新原地刷新，每次發布都是同一個連結的新版本，有版本紀錄可以回溯。所以 /design 生出來的東西不只是終端機裡的一段字，是一個可以丟給同事看的網頁。▲ 官方文件裡的 artifact 檢視畫面。兩個版本的手機 mockup 並排比對，右側接著漏斗圖與數據卡，整頁跑在 claude.ai 的私人網址上。Share 選單可以指定分享給組織內的人，並選擇是否永遠跟著最新版本。圖／Anthropic 官方文件CHAPTER 03 · DESIGN SYSTEM它會吃你的設計系統嗎？官方文件其實寫了這是這幾天英文圈追問最多、卻沒人給出答案的一題。Claude Design 網頁版從六月起就能從 GitHub repo、設計檔或直接上傳匯入設計系統，生成物會自動繼承你的色票、字體與間距。但 /design 在 Claude Code 裡會不會吃同一份？公告沒寫，於是幾家科技媒體一致的結論是「還沒確認，第一張畫板當草稿看」。答案不在公告裡，在 Claude Code 的 artifacts 官方文件。〈Improve the visual design〉那一節寫得很明確：Claude 建 artifact 的時候會套一個內建的 design skill，而這個 skill 會先去你的專案裡找既有的設計系統，才決定要不要用自己的那一套。這個內建 skill 從 2.1.182 版開始生效。要讓它找得到，你得把 design token 放在它會讀的位置——專案的 CLAUDE.md，或 repo 裡的 theme 檔。官方給的範例短到有點反高潮：CLAUDE.md## Design system- Colors: primary #1a4d8f, accent #f59e0b, surface #f8fafc- Typography: Inter for body, JetBrains Mono for code- Spacing: 8px scale, 6px border radius三行。沒有 JSON schema、沒有指定檔名，官方原文的說法是任何清楚列出顏色、字體、間距的寫法都算數。字體的部分有個限制值得記：artifact 頁面唯一能連外抓的字型來源是 Google Fonts，其他字型 Claude 會直接內嵌進頁面，並且一律配上備援字體。真正關鍵的是優先序。文件講明了三層：你的設計系統壓過 Claude 自己的品味，而你當下的 prompt 又壓過設計系統。這個順序決定了你該把力氣花在哪。“設計系統壓過 Claude 的品味，你的 prompt 又壓過設計系統。順序一旦清楚，該補的就不是提示詞，是那份三行的清單。這也順帶回答了另一個常見抱怨：為什麼有人覺得 AI 生出來的介面「很有 AI 感」。多數時候不是模型審美差，是專案裡根本沒有一份它讀得到的設計系統，於是它每一輪都在重新猜你的按鈕長什麼樣。這件事我之前在拆解怎麼把 Claude Code 調教成懂品味的設計師時寫過完整的作法，現在官方等於把其中一段變成預設行為。CHAPTER 04 · WHICH ONE兩個 design 到底該用哪一個命名很容易搞混，所以先把時間軸擺清楚。/design 這個指令名六月就存在了，當時的角色是讓你從終端機建立、編輯、同步 design 專案，搭配 /design-sync 把設計系統雙向拉進 repo。八月新的是「畫板生成那一段真的長在 coding session 裡面」，不是指令首次出現。至於網頁版怎麼用，我在Claude Design 的完整教學裡拆過四步驟工作流。情境/designClaude Design人已經在 repo 裡✦ 零切換— 要另開交給不碰終端機的人看—✦ PDF、簡報、Canva多畫面完整流程單一功能幾個選項✦ 畫布為此而生最短路徑到可上線的 code✦ 同一 session要走 /design-sync團隊鎖定統一設計系統靠專案檔自律✦ 管理員可鎖一句話的分法：五分鐘內你自己就要把它寫成 code，用 /design；要交出去給別人看、或要匯出成檔案，去網頁版。CHAPTER 05 · REQUIREMENTS五個門檻，少一個就發布不出來2.1.183CLI 最低版本1.13576桌面版最低版本16 MiB單頁上限官方文件把條件列成一張表，而且寫得很硬：任何一條沒滿足，Claude 就只會在本機寫一個 HTML 檔，或直接告訴你它發布不了。方案Pro、Max、Team、Enterprise 都在名單上。Pro 與 Max 生出來的東西預設只有自己看得到；Team 預設開啟；Enterprise 要由 Owner 在後台開。登入方式（最容易卡的一條）session 必須用 claude.ai 帳號登入。用 API key、gateway token 或雲端供應商憑證跑的 session，一律不能發布。接案時把 Claude Code 接在自己的 API key 上是常見設定，這種情況下 /design 生不出畫板。模型來源只走 Anthropic 官方 API。Amazon Bedrock、Google Cloud 的 Agent Platform、Microsoft Foundry 三條路都沒有這個功能。組織政策公司若啟用了自管加密金鑰、HIPAA 或零資料保留，整個功能會被關掉。執行環境CLI 2.1.183 以上或桌面版 1.13576.0 以上。Agent SDK、GitHub Action 與 MCP server 環境預設關閉。所以實務上的第一步永遠是跑一次 claude update，第二步是確認你這個 session 是用帳號登入而不是 API key。這兩件事處理完，指令認不認得就很清楚了。CHAPTER 06 · LIMITS吃 token 這件事還沒解決這是從四月 Claude Design 上線就跟到現在的老問題，放進 Claude Code 反而更明顯——一個 coding session 本來就在燒 codebase、對話歷史跟連接的工具，再疊幾張畫板上去並不便宜。官方文件自己也承認：生 artifact 跟其他回應一樣消耗輸出 token，而一個排版過的頁面比同樣內容的純文字貴得多，內嵌的 CSS、互動用的 JavaScript，尤其是用 data URI 塞進去的點陣圖，是主要的成本來源。文件給的省法是圖表優先用 CSS 畫、不需要的互動就別做、大量資料讓頁面摘要而不是整包塞進去。實務上的用法比較像 /agents 那類指令：開一個新畫面、想比較幾種版型的時候才叫它，不是每個小 UI 調整都伸手。如果你正好逼近額度，一句「把這個版型用註解畫在 code 裡」便宜非常多。額度規則本身也值得順手確認，我在Claude Opus 5 的解析裡整理過現在各模型的檔位差異。另外兩個限制要放在心裡。artifact 是單頁靜態頁面，沒有後端，存不了表單輸入，也不能自己去打 API，跨站的腳本、樣式、字型、圖片全被安全政策擋掉，相對連結不會通。以及這幾天有使用者回報桌面版叫不出來、只有終端機能跑。research preview 的意思就是形狀還會變。CHAPTER 07 · TAKEAWAYS真正的訊號不是「會設計了」翻官方文件的時候我發現一件更有意思的事。六月那篇介紹 Claude Code artifacts 的公告，列了各職能的用法範例，設計師與前端工程師那一條寫的是：給我一個 artifact，用我們自己的元件庫做出這個註冊表單的五種 UX 變體，這樣挑中的那個就是能直接上線的。那就是 /design 現在幫你做的事，只是當時要自己手寫一長串 prompt。所以這次發布嚴格說起來沒有新增任何模型能力，它是把兩個月前官方自己示範過的手動流程，包成一個指令。有人在 X 上抱怨「我一個月前就能這樣做了」，這句話是對的，但也剛好證明了重點：能力早就在，Anthropic 這次做的決定是把「先看再寫」放進預設路徑。降低門檻本身就是產品決策。對設計師來說，這件事的重量不在於 AI 畫得好不好看。它改變的是決策發生的時機。以前工程師接到需求就開始寫，寫完才拿給你看，那時候要調的東西全部都有成本；現在他按下 Enter 的三十秒後，手上就有三個版型。你要爭的從來不是那支筆，而是那三個選項是從什麼樣的設計系統長出來的——如果 repo 裡的 CLAUDE.md 是你寫的，那三張畫板就已經帶著你的色票、你的字級、你的間距。如果沒人寫，它會自己選一套。設計師的工作正在往前挪。從產出畫面挪到定義畫面該長什麼樣，再挪到把那份定義寫成機器讀得懂的形式。這一整年幾乎所有工具的動向都指著同一個方向，Sagmeister 在訪談裡把那條線劃得很清楚——合格的部分已經免費，難的那一側才是設計師的價值。/design 只是又把「合格」那條線往上推了一格。OFFICIAL VIDEO官方怎麼介紹這套畫板/design 沿用的是 Claude Design 的編輯器與提示邏輯，所以想快速理解畫板互動長什麼樣，看官方這支介紹片最省時間。RELATED READS · 延伸閱讀Claude Design 怎麼用？從一句話做出互動網頁的完整教學 →網頁版的四步驟工作流、匯出選項與 Claude Code 交棒。Claude Code 怎麼做出沒有 AI 感的網站？ →三步調教工作流、四段式 prompt 公式與護欄清單。Figma Code Layers 是什麼？程式碼變成設計素材的完整教學 →另一條把設計與程式碼雙向打通的路線，可以跟這篇對照著看。Figma Agent 是什麼？直接在 canvas 上動手的設計 AI →會讀你檔案裡真實元件與變數的另一個代理，能力邊界在哪。Claude Plugins 是什麼？設計師先裝這三個 →skill 與斜線指令怎麼打包成職能包，理解 /design 的發布形式。Claude Academy 是什麼？官方免費學習平台的課程地圖 →Claude Code 的官方課程與教學都在這裡，適合補基礎。AI 時代的設計師為什麼最焦慮？ →2026 調查數據，以及兩位 AI 設計主管對這個轉變的診斷。EXTRA · 官方資源· Claude Code Artifacts 官方文件——本文的方案門檻、設計系統優先序與頁面限制都出自這裡· Artifacts in Claude Code 發布公告——各職能的用法範例，設計師那條值得看· Claude Design 六月更新公告——設計系統匯入、畫布編輯與 /design-sync 的官方說明· Claude Design 產品頁——網頁版入口與功能總覽SUBSCRIPTIONAI 覺醒設計應用攻略AI 工具每週都在更新，我幫你過濾雜訊，只留對設計師真正有用的應用。了解訂閱 →FAQ常見問題Q：為什麼我跑了 claude update，還是找不到 /design？先確認三件事：CLI 是否在 2.1.183 以上（桌面版 1.13576.0 以上）、這個 session 是不是用 claude.ai 帳號登入而非 API key、以及模型是否走 Anthropic 官方 API。三者缺一，畫板都發布不出來。Enterprise 方案還需要 Owner 先在後台開啟。Q：/design 跟六月就有的 /design-sync 是同一件事嗎？不同。/design-sync 負責把設計系統在 repo 與 Claude Design 之間雙向搬運，六月就上線了；/design 這個指令名當時也存在，用途是從終端機建立與同步 design 專案。八月新的是畫板生成這一段真的在 coding session 裡跑起來。Q：它會照著我專案的設計系統畫嗎？會，前提是你有一份它讀得到的。官方文件說明內建的 design skill 會先在專案裡尋找既有設計系統，才決定要不要用自己的預設。把顏色、字體、間距寫進 CLAUDE.md 或 repo 的 theme 檔即可，格式不拘。優先序是 prompt 高於設計系統、設計系統高於 Claude 自己的選擇。Q：畫板可以匯出成 Figma 或 PDF 嗎？/design 生的是 artifact 頁面，本身沒有匯出功能，目前也還要手動保存。需要 PDF、簡報或推到 Canva、Vercel 等平台，要走網頁版的 Claude Design，那邊的匯出目的地在六月更新後擴充了一整排。Q：生出來的畫板別人看得到嗎？預設只有自己看得到。Pro 與 Max 方案的 artifact 在你主動分享前都是私人的；Team 與 Enterprise 可以從頁面上方分享給組織成員，管理員能設定存取範圍與保存政策。Q：它很吃 token，有省的方法嗎？官方建議三招：圖表優先用 CSS 或向量畫、不需要的互動就別做、資料量大時讓頁面做摘要而不是整包內嵌。最貴的是用 data URI 嵌進頁面的點陣圖。另外把它當成開新畫面時才用的工具，不要每個小調整都叫它。Q：這個功能穩定了嗎，可以放進正式流程嗎？還不建議。它是 research preview，官方明說可能改變行為與介面，社群這幾天也有桌面版叫不出來的回報。可以拿它探索版型，但生出來的程式碼仍要照一般 AI 產出的標準審——跑視覺差異比對、檢查對比度與閱讀順序，再決定要不要合併。