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