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

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

設計師 Riven

2026年8月21日下午 7:19

AI 設計

AI TOOLS · CLAUDE CODE · 2026

Claude Design 畫布編輯器左欄顯示 Typography 與 Appearance 調整面板，中央畫布上的標題文字被選取，右上方 Claude Code 終端機正在執行 design-sync 指令

▲ 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

六張圖先看完整輪廓

只有兩分鐘的話，這幾張是整篇的濃縮：它做什麼、怎麼用、設計系統怎麼餵、該用哪一個、五個發布門檻、限制在哪。手機上點開可以放大，細節都在下面各章。

圖卡：一句話先懂 /design，列出五個要點——它是 research preview 指令、會讀 codebase 對照現有 UI 風格產生可編輯畫板、可先挑版型再叫它實作、整段留在同一個 coding session、底層跑在 Artifacts 上

圖卡：五個步驟把先看再寫塞回流程，依序為講意圖、生畫板、挑一張、直接改、實作，右側配終端機與畫板示意

圖卡：它會吃你的設計系統嗎，答案是會但前提是它讀得到，左列最少要準備的 design token 與優先序 Prompt 大於 Design system 大於 Claude 自己的選擇，右側為 CLAUDE.md 內容範例

圖卡：兩個 design 到底該用哪一個，五列情境對照表比較 /design 與 Claude Design 在人已在 repo 裡、交給不碰終端機的人看、適合的任務、目標、設計系統管理五個面向的差異

圖卡：五個門檻少一個就發布不出來，依序為版本、方案、登入方式、模型來源、組織政策，底部提醒條件不符時它可能只在本機寫 HTML

圖卡：它很方便但還沒有到無腦開下去，左欄說明為什麼偏貴，右欄列出 artifact 的四項限制，底部是省 token 的三個小技巧

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 · /design

STEP 01

講意圖

描述功能，不描述像素

→

STEP 02

生畫板

幾個方向並排

→

STEP 03

挑一張

不重生，用選的

STEP 04

直接改

畫布上調，不耗一輪對話

→

STEP 05

實作

同一個 session 直接落地

最後一步才是把這件事放進 Claude Code、而不是留在獨立網頁版的理由。畫板跟實作活在同一個 session，中間沒有匯出、沒有截圖、沒有把設計稿翻譯成規格再交出去的那一段。

畫板本身跑在 Artifacts 上。Artifacts 是 Claude Code 六月開始支援的能力，它把 session 的產出發布成一個 claude.ai 上的私人網址，開著的頁面會隨著 session 更新原地刷新，每次發布都是同一個連結的新版本，有版本紀錄可以回溯。所以 /design 生出來的東西不只是終端機裡的一段字，是一個可以丟給同事看的網頁。

瀏覽器開啟 claude.ai 上的 artifact 頁面，標題為 acme-funnel-fix，Share 選單展開顯示分享最新版本、版本二與組織範圍選項，頁面下方是兩支手機 mockup 並排比對、漏斗折線圖與五張數據卡

▲ 官方文件裡的 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 的完整教學裡拆過四步驟工作流。

情境

/design

Claude Design

人已經在 repo 裡

✦ 零切換

— 要另開

交給不碰終端機的人看

—

✦ PDF、簡報、Canva

多畫面完整流程

單一功能幾個選項

✦ 畫布為此而生

最短路徑到可上線的 code

✦ 同一 session

要走 /design-sync

團隊鎖定統一設計系統

靠專案檔自律

✦ 管理員可鎖

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

CHAPTER 05 · REQUIREMENTS

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

2.1.183

CLI 最低版本

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 的編輯器與提示邏輯，所以想快速理解畫板互動長什麼樣，看官方這支介紹片最省時間。

常見問題

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