精華筆記 Claude Code /design 指令解析：終端機直接生成可編輯 UI 設計稿，挑一版直接實作
原片講者:Anthropic
Anthropic 在 2026 年 8 月 17 日左右為 Claude Code 悄悄推出了一個新指令：/design。這是一個「早期預覽（early preview）」功能，由 Anthropic 產品設計師 Nate Parrott 在 X 上公開——你可以直接在寫程式的終端機（或桌面版 App）裡，請 Claude 一次生成好幾個可編輯的 UI 設計稿，挑一個、改到滿意，再讓 Claude 把它實作成真正的程式碼。
這篇文章整理 /design 目前已知的所有細節、它背後的 Claude Design 產品、方案價格，以及跟其他 AI 設計工具的差異，幫你判斷值不值得現在就開始用。
/design 是什麼？
/design 是 Claude Code 裡的一個斜線指令。輸入類似：
/design a few options for {你要的畫面或功能}
Claude 會生成多個設計草稿，以「畫板（artboard）」的形式並排呈現——就是 Figma 那種你可以直接操作的畫布概念。接下來的流程是：
- 並排比較多個設計方向
- 挑一個你喜歡的
- 直接編輯：改顏色、搬區塊、調間距
- 滿意之後，請 Claude 把選定的版本實作成程式碼
幾個重要特性：
- 它會先讀你的程式碼庫，配合你現有的 UI 風格出圖，而不是憑空生成一個跟你產品長相無關的畫面。
- 設計稿可以存成 Artifact 分享給團隊看。
- 設計畫板和正式程式碼是分開的——你是先在設計層做決定，再進入寫程式的階段，而不是讓 AI 直接改 code 再看結果。
這把過去「先開 Figma 畫完、再丟給 AI 寫」的流程整個反過來：變成「AI 先畫幾版給你挑，挑完直接寫」。
背後的產品：Claude Design
/design 不是憑空冒出來的，它來自 Anthropic 的另一個產品 Claude Design（官方頁面：claude.com/product/design，網頁版入口 claude.ai/design）。時間軸大致是：
| 時間 | 事件 |
|---|---|
| 2026/04/17 | Claude Design 以 Anthropic Labs 預覽形式推出 |
| 2026/06 | Claude Design 更新，加入 /design 與 /design-sync 指令概念 |
| 目前 | Claude Design 以 beta 形式開放給 Pro、Max、Team、Enterprise 方案 |
| 2026/08/17 | /design 畫板工作流整合進 Claude Code（早期預覽） |
Claude Design 本身是一個「用對話做設計」的工具：左邊聊天、右邊畫布，可以做產品原型、wireframe、簡報、行銷素材、文件。官方標語是「Your idea, designed with Claude」。
它的幾個核心能力（皆來自官方產品頁）：
- 設計系統匯入：可以從 GitHub repo、設計檔或素材上傳匯入，Claude 會「用你的元件來組畫面，並對照你的設計系統檢查輸出」。
- 直接編輯：不用一直靠 prompt 來回，可以直接在畫布上改元素、對元素留言、用滑桿微調。
- 互動原型：靜態 mockup 可以變成可點擊的互動原型，不用自己寫 code。
- 雙向同步：透過
/design-sync和/design，作品可以在 Claude Design 和 Claude Code 之間流動。
怎麼開始用？
- Claude Code 的
/design：跑一次claude update更新到最新版，終端機和桌面版 App 都能用。目前是早期預覽，官方文件還沒有專屬頁面。 - Claude Design 網頁版：到 claude.ai/design，或從 Claude Desktop 側邊欄進入。
- Enterprise 方案預設關閉，需要管理員在組織設定裡開啟。
價格與方案
/design 指令本身沒有額外收費公告，它跟著 Claude 訂閱走。Claude Design 目前開放 Pro 以上方案（官方定價頁資料）：
| 方案 | 價格 | Claude Design / Claude Code |
|---|---|---|
| Free | US$0 | 不含 Claude Design |
| Pro | US$17/月（年繳）或 US$20/月（月繳） | ✅ 含 Claude Code、Claude Design（beta） |
| Max | US$100/月起（5x 或 20x 用量） | ✅ 全部包含，額度更高、優先流量 |
| Team / Enterprise | 依方案 | ✅ 含（Enterprise 需管理員開啟） |
所有方案都有用量上限（usage limits apply），生成設計稿會消耗你訂閱的額度。
跟其他 AI 設計工具比，差在哪？
| 工具 | 定位 | 跟程式碼的關係 | 適合誰 |
|---|---|---|---|
| Claude Code /design | 在開發流程「裡面」做設計決策 | 讀你的 codebase、配合現有 UI 風格，選定後直接實作 | 已經在用 Claude Code 的開發者 |
| Claude Design | 對話式設計畫布（原型、簡報、行銷素材） | 可透過 /design-sync 與 Claude Code 雙向同步 | 設計師、PM、要做提案的人 |
| Figma（+AI 功能） | 專業設計協作平台 | 設計和程式碼分離，需要 handoff 或外掛橋接 | 完整設計團隊、精細設計控管 |
| v0（Vercel）／Lovable | 從 prompt 直接生 UI／整個 App | 直接產出程式碼，但不讀你既有專案的風格脈絡 | 從零開始做新東西的人 |
關鍵差異就一句話：/design 是目前少數「長在你既有專案裡」的 AI 設計工具。它的起點不是空白畫布，而是你的 codebase——這對「幫現有產品加一個新頁面」這種最常見的需求特別有感。
匯出與整合
Claude Design 的作品不會被鎖死在 Anthropic 生態裡，官方支援：
- 匯出格式：PPTX、PDF、HTML（含 ZIP 打包）
- 合作夥伴應用：Adobe、Canva、Gamma、Lovable、Miro、Replit、Vercel、Wix
- 分享：組織範圍的分享連結、Artifact 分享
- 開發銜接:
/design-sync與 Claude Code 雙向同步
注意事項與已知限制
誠實說,這是一個很新的預覽功能，有幾件事要注意：
- 設計稿目前需要手動儲存才能帶進實作階段，流程還沒完全無縫。
- 官方文件還沒更新：Claude Code 文件的 What's new 目前只寫到 8 月第一週，
/design的正式規格（版本需求、資格條件、畫板保存期限、是否所有帳號都拿得到）都還沒公布。 - 早期預覽=行為可能變：指令格式、輸出品質、計費方式都可能調整。
- 無障礙（accessibility）和響應式行為如何處理，官方尚未說明。
結語
AI 寫 code 已經不稀奇，2026 年的競爭重點明顯移到了「寫 code 之前」的環節——需求怎麼變成畫面、畫面怎麼變成決策。Anthropic 把設計畫板直接塞進終端機的做法，賭的是一件事：對很多獨立開發者和小團隊來說，設計工具和開發工具本來就不該是兩個世界。
如果你已經是 Claude Pro／Max 用戶而且在用 Claude Code，claude update 之後打一次 /design 試試，成本幾乎是零；如果你是設計師，更值得先去 claude.ai/design 感受一下「對話式畫布」離取代你的日常工具還有多遠——目前的答案是還很遠，但方向已經非常清楚了。