Claude Design 讓您可以透過與 Claude 對話來建立設計、互動式原型、簡報等內容。本指南將引導您建立第一個專案、反覆改進設計，以及充分利用此工具。
Claude Design 現已在 Pro、Max、Team 和 Enterprise 方案中以測試版形式提供。此功能在 Enterprise 方案中預設為關閉。您可以在 claude.ai/design 網頁版或 Claude Desktop 側邊欄中使用它。
本指南假設您的組織設計系統已經設定完成，因此您建立的所有內容都會自動使用您品牌的色彩、字體和元件模式。如果您是需要設定或修改設計系統本身的設計主管，請參閱 在 Claude Design 中設定您的設計系統。
Claude Design 的運作方式
Claude Design 有兩個主要區域：左側的聊天介面和右側的畫布。您在聊天中描述想要的內容，Claude 會在畫布上產生可用的設計。之後，您可以反覆改進——透過對話、內嵌評論和直接在畫布上編輯，直到達到理想效果。
典型的流程是：
建立專案。
附加或匯入您希望 Claude 使用的設計系統。
新增任何相關的背景資訊（螢幕截圖、程式碼庫）。
描述您想要建立的內容。
檢視 Claude 在畫布上產生的內容。
透過聊天、直接在畫布上編輯或留下內嵌評論來改進。
當您對結果滿意時，匯出或分享。
在 Claude Design 和 Claude Code 之間切換
您可以在 Claude Design 和 Claude Code 之間切換工作，同時保持您的工作同步。使用 /design-sync 來引入您的設計系統，這樣您在 Claude Design 中建立的所有內容都會從您現有的元件開始。當設計準備好成為軟體時，您可以將其交付給 Claude Code，它會從您現有的工作繼續進行，而不是從螢幕截圖重新開始。
如果您偏好從 Claude Code 工作，請連接 Claude Design MCP 伺服器，以便在不離開終端的情況下建立和編輯設計：
新增伺服器：
claude mcp add --scope user --transport http claude-design https://api.anthropic.com/v1/design/mcp
2. 執行 /design-login 以登入。
連接後，您可以將設計匯入程式碼庫、將程式碼匯出為即時原型，或讓 Claude 從頭到尾建立整個專案。
建立新專案
建立專案時，它會自動繼承您組織的設計系統。您無需上傳品牌資產或設定任何內容——您的品牌色彩、字體和元件已經就位。
附加或匯入您的設計系統
使用 Claude Code 中的 /design-sync 指令，從 GitHub 儲存庫、設計檔案、原始上傳或本機程式碼庫中引入一個或多個設計系統。Claude 使用您真實的設計系統元件進行建立，根據您的設計系統檢查自己的輸出，並在您看到之前進行更正。
對於較大的團隊，Claude Design 管理員自訂角色允許管理員批准標準系統並鎖定編輯，以便工作始終符合您的公司指南。
為您的專案新增背景資訊
您提供給 Claude 的背景資訊越多，您的輸出就會越好。您可以在專案的任何時間點附加參考資料。
螢幕截圖、影像或現有資產：上傳現有設計、競爭對手產品、線框圖或視覺靈感的螢幕截圖。您也可以附加現有的投影片組或包含您想要複製的設計風格的文件。適用於「讓它看起來像這樣」的請求。
程式碼庫和現有設計檔案：連結程式碼儲存庫，以便 Claude 了解您現有的元件、架構和樣式模式。這使原型從一開始就更接近生產就緒。匯入也支援多種方式來上傳現有的產品設計工作。
撰寫有效的提示
您不需要是設計師就能獲得出色的結果。具體說明您正在建立的內容、它的用途以及最重要的是什麼。
好的提示包括目標（您正在建立的內容）、版面配置（事物應如何排列）、內容（要顯示的資訊）和受眾（誰將使用它）。如果需要更多資訊，Claude 也會提出澄清問題。
以下是一些效果良好的提示範例：
「建立一個顯示月度收入的儀表板，並提供地區和產品線的篩選器。」
「設計一個包含 4 個螢幕的行動應用程式入門流程，引導使用者了解我們的核心功能。」
「為我們的新 API 產品建立登陸頁面，包括英雄部分、程式碼範例和定價。」
「建立一個表單來收集客戶回饋，並根據類別提出條件式問題。」
「為我們的營運團隊設計一個內部工具，以審查和批准內容提交。」
改進您的設計
第一代是一個起點。真正的價值來自於反覆改進。
使用聊天
聊天最適合影響整體設計的廣泛變更：
「讓色彩配置更深色和更簡約。」
「重新排列儀表板，使指標位於頂列，圖表位於下方。」
「在右側新增設定面板。」
「向我展示此頁面的 2–3 個替代版面配置。」
您也可以要求 Claude 解釋其設計決策、建議改進或檢視設計的無障礙功能。
使用內嵌評論
內嵌評論讓您可以直接點擊畫布上的特定部分並要求進行有針對性的變更。這比在聊天中描述位置要快得多。
好的內嵌評論範例：
「讓此按鈕的內邊距更大。」
「將此變更為下拉式清單而不是單選按鈕。」
「在此處使用主要品牌色彩。」
「讓此部分可摺疊。」
注意：如果您的評論未被拾取，請直接將回饋貼到聊天中。這是一個已知的解決方法，用於解決評論在 Claude 讀取之前可能消失的間歇性問題。
直接在畫布上編輯
使用豐富的版面配置控制項進行快速視覺和美學轉變，特別是直接拖曳、調整大小和對齊元素。
何時使用聊天、評論或直接編輯
使用評論進行有針對性的元件級變更（「修復此按鈕」、「調整此間距」）。使用聊天進行結構性變更、新增部分或任何需要解釋或背景資訊的內容。直接編輯進行快速視覺和美學變更。
管理版本和修訂
如果您想探索不同的方向而不失去目前的工作，請告訴 Claude：「儲存我們所擁有的內容並嘗試完全不同的方法。」Claude 將儲存您目前的專案並確認其儲存位置，以便您可以在對話中輕鬆參考早期的反覆項目。
匯出和分享
設計完成後，您可以與同事分享或匯出以供其他地方使用。正確的格式取決於您的使用案例——無論您是獲取利益相關者回饋、交付給工程部門還是向群組展示。
在檢視您的專案時，使用右上角的「匯出」按鈕，從以下匯出格式中選擇。
下載為 .zip
匯出為 PDF
匯出為 PPTX
傳送至 Canva
匯出為獨立 HTML
傳送至您已在使用的工具，包括 Adobe、Base44、Canva、Gamma、Lovable、Miro、Replit、Vercel 和 Wix，更多目的地即將推出。
交付給 Claude Code
傳送至本機編碼代理
傳送至 Claude Code Web
您也可以使用可分享連結在組織內分享專案。分享選項包括僅檢視、評論和編輯存取權。
使用情況和定價
Claude Design 計入與 Claude 其餘部分相同的使用限制。設計活動從您用於聊天、Claude Code 和 Cowork 的共享池中提取，因此沒有單獨的 Claude Design 配額需要追蹤。具有大型程式碼庫或許多反覆項目的複雜專案會消耗更多使用量。
如果您達到使用限制，Claude Design 將不可用，直到您的限制重設。如果您已啟用使用額度，您可以在達到包含的限制後繼續工作。深入了解使用情況和長度限制的運作方式。
注意：Claude Design 之前有自己的每週配額，與您的其他使用限制分開。所有 Claude Design 活動現在計入您方案的共享限制。
獲得最佳結果的提示
匯入完整的設計系統。匯入包含您的樣式、字體和元件的完整設計系統。
從簡單開始，然後分層增加複雜性。從核心版面配置和內容開始，然後新增互動、邊界情況和潤飾。Claude 對增量請求反應良好。
在您的回饋中具體說明。「這看起來不對」很難採取行動。「將表單欄位之間的間距縮小至 8px」為 Claude 提供了它所需的確切內容。
參考您的設計系統。如果您知道元件存在於您品牌的系統中，請按名稱提及它：「使用主要按鈕元件」或「套用卡片版面配置模式。」
盡早考慮回應式設計。提及您的設計是否需要在行動、平板電腦和桌面上運作，或僅在其中之一上運作。
要求變化。如果您不確定方向，請要求 Claude 向您展示 2–3 個選項。比較替代方案比猜測要快得多。
要求 Claude 提供回饋。Claude 可以檢視您的設計是否具有無障礙功能、對比度比率、資訊層級和一般可用性。將其視為設計協作者，而不僅僅是生成器。
已知限制
Claude Design 現已在測試版中提供。需要注意的幾點：
評論持久性：內嵌評論偶爾不會出現在頁面上，但您仍然可以透過開啟評論檢視來查看它們。
大型程式碼庫：考慮 從 Claude Code 連結非常大的儲存庫以避免延遲或瀏覽器問題。若要同步設計系統，請從 Claude Code 使用
/design-sync。聊天錯誤：如果您遇到「聊天上游錯誤」，請嘗試在同一專案內啟動新的聊天標籤。
可用性：Claude Design 僅在網頁和桌面上提供。
多人編輯：兩個或多個人同時編輯設計專案仍然是基本的，可能無法可靠地運作。
設計系統匯入：設計系統匯入的品質取決於其來源。雜亂的程式碼庫或不完整的檔案將顯示在輸出中。