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

AI TOOLS · CLAUDE CODE · 2026

▲ Claude Design 的畫布編輯器（左）與 Claude Code 終端機（右上）。選中的標題可以直接在左欄調字體、字級、字距與行高，終端機這端正在把設計元件推回 Claude Design。圖／Anthropic 官方

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

五個步驟，把「先看再寫」塞回開發流程

最後一步才是把這件事放進 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 檔。官方給的範例短到有點反高潮：

三行。沒有 JSON schema、沒有指定檔名，官方原文的說法是任何清楚列出顏色、字體、間距的寫法都算數。字體的部分有個限制值得記：artifact 頁面唯一能連外抓的字型來源是 Google Fonts，其他字型 Claude 會直接內嵌進頁面，並且一律配上備援字體。

真正關鍵的是優先序。文件講明了三層：你的設計系統壓過 Claude 自己的品味，而你當下的 prompt 又壓過設計系統。這個順序決定了你該把力氣花在哪。

這也順帶回答了另一個常見抱怨：為什麼有人覺得 AI 生出來的介面「很有 AI 感」。多數時候不是模型審美差，是專案裡根本沒有一份它讀得到的設計系統，於是它每一輪都在重新猜你的按鈕長什麼樣。這件事我之前在拆解怎麼把 Claude Code 調教成懂品味的設計師時寫過完整的作法，現在官方等於把其中一段變成預設行為。

CHAPTER 04 · WHICH ONE

兩個 design 到底該用哪一個

命名很容易搞混，所以先把時間軸擺清楚。/design 這個指令名六月就存在了，當時的角色是讓你從終端機建立、編輯、同步 design 專案，搭配 /design-sync 把設計系統雙向拉進 repo。八月新的是「畫板生成那一段真的長在 coding session 裡面」，不是指令首次出現。至於網頁版怎麼用，我在Claude Design 的完整教學裡拆過四步驟工作流。

一句話的分法：五分鐘內你自己就要把它寫成 code，用 /design；要交出去給別人看、或要匯出成檔案，去網頁版。

CHAPTER 05 · REQUIREMENTS

五個門檻，少一個就發布不出來

官方文件把條件列成一張表，而且寫得很硬：任何一條沒滿足，Claude 就只會在本機寫一個 HTML 檔，或直接告訴你它發布不了。

所以實務上的第一步永遠是跑一次 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 · 延伸閱讀

EXTRA · 官方資源

SUBSCRIPTION

AI 覺醒設計應用攻略

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 產出的標準審——跑視覺差異比對、檢查對比度與閱讀順序，再決定要不要合併。