Claude Design 是 Anthropic 在 2026 年推出的 AI 設計工作區。它不是在聊天視窗裡幫你生一張圖片，而是把需求訪談、設計系統、畫布修改、互動原型和工程交付放在同一個流程裡。你可以用一句話開始做 Landing Page、App 畫面、儀表板或簡報，再直接點選畫面調整，最後交給 Claude Code 繼續開發。
我覺得它最值得注意的地方，不是「AI 也會設計了」，而是設計稿和程式開發之間少了一次重新翻譯。以前設計師做完 Figma，工程師還要猜互動、狀態與元件規則；Claude Design 想做的是把設計意圖、元件和原型一起帶進 Claude Code。
Claude Design 是什麼？
Claude Design 是 Anthropic 官方的 AI 視覺創作產品，目前仍在 beta 階段。它採用左側對話、右側畫布的工作方式：你在對話中描述需求，Claude 會建立可看的第一版，再透過聊天、行內留言或畫布工具反覆修改。
- 網站與 App 的 Wireframe、Mockup 和互動原型
- Landing Page、社群素材與活動視覺
- 提案簡報、Pitch Deck、PDF 與 One-pager
- 儀表板、內部工具與產品操作流程
- 結合語音、影片、3D 或 AI 的程式化原型
- 套用公司設計系統，再交接給 Claude Code 開發
Anthropic 在 2026 年 4 月 17 日發表 Claude Design，最初定位為 Anthropic Labs 的 research preview。現在官方已稱為 beta，功能仍會頻繁更新，所以介面、方案與輸出能力之後都可能再調整。
Claude Design、Design Plugin 與 Open Design 不一樣
| 工具 | 主要用途 | 資料與部署 |
|---|---|---|
| Claude Design | 用對話與畫布建立原型、簡報、視覺與設計系統 | Anthropic 的 Claude 雲端服務 |
| Claude Design Plugin | 在 Claude Cowork 做設計評論、UX 文案、無障礙檢查與研究整理 | Claude Cowork 外掛，不是同一套畫布產品 |
| Open Design | 串接多種 Coding Agent 與模型的開源 AI 設計工作區 | 開源、local-first，可自行選擇雲端或地端模型 |
如果你要的是 Anthropic 官方整合、少設定、能直接接 Claude Code，選 Claude Design 比較直覺；如果你希望檔案留在本機、串 Codex、Claude Code、Cursor 或 Ollama，而且不想被單一供應商綁住，可以接著看我整理的Open Design 開源 Local-first 教學。
Claude Design 可以做什麼？
把模糊需求變成可以討論的畫面
中小企業最常卡住的不是不會寫程式，而是不知道怎麼把想法講成規格。Claude Design 可以先把一句「我要做會員儀表板」轉成頁面與操作流程，讓老闆、行銷、設計和工程先對著同一個畫面討論。
讀取自己的品牌與設計系統
你可以從 GitHub、設計檔、原始素材或本機程式碼匯入一套或多套 Design System。Claude 會讀取顏色、字體、元件和版面規則，並在產出前檢查結果是否符合規範。企業方案還能由管理者核准標準設計系統並鎖定修改權限。
在畫布上直接修改
結構性修改可以用聊天，例如重排儀表板或新增設定區；只想改一顆按鈕，可以點選元素留下行內留言；間距、大小與對齊則能直接在畫布拖曳。這比每次都用 Prompt 描述「右上角第二顆按鈕」實際得多。
輸出後繼續工作
完成後可以下載 ZIP、PDF、PPTX 或獨立 HTML，也能交給 Claude Code，或送往 Adobe、Canva、Gamma、Lovable、Miro、Replit、Vercel、Wix 等連接工具。要注意的是，能輸出程式檔不等於已經是可直接上線的正式產品，登入、資料庫、權限、安全性、響應式與瀏覽器測試仍要補完。
Claude Design 第一次使用教學
步驟一：確認方案並開啟功能
Claude Design beta 目前提供給 Claude Pro、Max、Team 與 Enterprise。可前往 claude.ai/design，或從 Claude Desktop 側邊欄進入。Enterprise 預設關閉，需要管理員先到 Organization settings 啟用。
步驟二：建立專案並加入設計系統
建立新專案後，先匯入品牌色、字型、Logo、既有頁面截圖、元件或程式碼。不要急著叫它做完整網站，先讓 Claude 確認品牌規則與可用元件，後面的畫面才不會每頁長得不一樣。
步驟三：寫一份能執行的設計 Brief
為台灣 B2B 顧問公司設計一頁式服務頁。
主要讀者是 10 到 50 人公司的負責人。
第一個畫面要說明「用網站與 AI 工作流程增加曝光和營收」。
主要行動是預約諮詢，次要行動是閱讀案例。
沿用已匯入的設計系統，先做桌機與手機版。
不要使用滿版漸層、過多卡片或沒有意義的裝飾。一份好 Prompt 至少要交代目標、使用者、內容、版面、主要動作和限制。第一版只是起點，先要求 2 到 3 種方向，再根據轉換目標與品牌一致性收斂。
步驟四：分層修改，不要整份重做
大結構用聊天、單一元件用留言、位置與尺寸用畫布。這樣修改範圍比較清楚，也不容易發生「只改按鈕，整頁風格卻跟著換掉」的情況。
步驟五：交給 Claude Code 繼續開發
在 Claude Code 可以先用 /design-sync 讀取設計系統，再把完成的設計交接為程式。也能安裝 Claude Design MCP：
claude mcp add --scope user --transport http claude-design https://api.anthropic.com/v1/design/mcp安裝後執行 /design-login 登入。這樣 Claude Code 可以在終端機建立與編輯設計、匯入專案或輸出可執行原型。還不熟 MCP，可以先看Claude Code MCP 完整教學。
步驟六：用工程流程驗證
正式開發後仍要進 GitHub、做 Code Review，並用 Playwright 檢查不同螢幕、表單、選單與操作流程。可以搭配GitHub 版本控管教學與Playwright AI Agent 測試教學，把漂亮原型變成真的能維護的產品。
Claude Design 能取代 Figma 嗎？
目前我不會直接說可以。Claude Design 在快速探索、互動原型、簡報與 Claude Code 交接上很有優勢；Figma 在精細向量編輯、成熟元件治理、多人協作、生態系與正式設計交付上仍然比較完整。
- 創業者、PM、行銷：先用 Claude Design 把需求變成可討論的畫面。
- 設計師：用它擴大探索方向，再回主要設計工具精修。
- 工程團隊：把設計系統與互動意圖同步到 Claude Code，減少重新刻稿。
- 高度管制或資料敏感環境：先確認雲端資料政策；需要本機控制時評估 Open Design。
另一個現實問題是用量。Claude Design 沒有獨立額度，而是和 Claude Chat、Claude Code、Cowork 共用方案使用量。大型程式庫、複雜原型與多輪修改都會消耗更多額度，不適合把每個像素調整都丟回模型重算。
我會怎麼把它放進網站工作流程？
我會讓 Claude Design 負責「把需求變成可以操作的規格」，Claude Code 負責「把規格變成能維護的程式」，GitHub 保存版本，Playwright 負責驗證。WordPress 或既有後端則繼續管理內容、會員與商業資料。這比要求一個 AI 工具從 Logo 一路包辦正式上線，更容易控制品質。
這也是 AI 開發接下來的重要改變：Prompt 不只產生程式碼，而是串起需求、設計、實作與測試。可以再搭配Loop Engineering 工作循環閱讀，你會更容易理解為什麼「反覆看結果並驗證」比一次寫出神 Prompt 更重要。
Claude Design 常見問題 FAQ
Claude Design 是免費的嗎？
目前 Claude Design beta 包含在 Claude Pro、Max、Team 與 Enterprise 方案中，沒有獨立免費額度，並會和 Chat、Claude Code、Cowork 共用使用量。
為什麼我的 Claude 看不到 Design？
先確認帳號方案與功能是否已輪到你的工作區。Enterprise 預設關閉，需要組織管理員到 Organization settings 啟用。
Claude Design 和 Claude Cowork 的 Design Plugin 一樣嗎？
不一樣。Claude Design 是具有聊天與畫布的視覺創作工作區；Design Plugin 主要協助設計評論、UX 文案、無障礙檢查、研究整理與交付。
Claude Design 可以輸出哪些格式？
官方目前支援 ZIP、PDF、PPTX、獨立 HTML，也能交接 Claude Code，或送到 Canva、Adobe、Gamma、Lovable、Replit、Vercel、Wix 等連接工具。
Claude Design 可以直接做正式網站嗎？
它適合製作設計方向與互動原型，也能輸出程式檔；但正式網站仍需補上後端、權限、安全、SEO、效能、無障礙與跨裝置測試。
Claude Design 是 Local-first 或開源工具嗎？
不是。Claude Design 是 Anthropic 的雲端產品。重視本機檔案、多模型與開源部署，可評估 Open Design，但同樣要確認所選模型是否把提示送到雲端。
