Claude Design 讓您可以透過與 Claude 聊天來建立設計、互動式原型、單頁文件和其他視覺作品。它是您可以從中開始建立成品的範本之一，因此您可以在任何聊天、Claude Code 中以及 成品 標籤中使用它，並包含畫布上編輯和您的設計系統。本指南將引導您建立第一個設計、對其進行迭代，以及充分利用它。深入了解 什麼是成品以及如何使用它們。
Claude Design 適用於免費、專業版、Max、團隊和企業方案，預設為開啟。在企業方案上，它將在 2026 年 10 月 15 日預設開啟，擁有者可以在 組織設定 > 成品 中提前開啟。claude.ai/design 上的獨立版本將在 2026 年 12 月 14 日關閉。深入了解 從獨立 Claude Design 遷移到 Claude。
本指南假設您的組織設計系統已經設定完成，因此您建立的所有內容都將自動使用您品牌的顏色、排版和元件模式。如果您是需要設定或修改設計系統本身的設計主管，請參閱 在 Claude Design 中設定您的設計系統。
您可以在哪裡使用 Claude Design
在對話中：向 Claude 要求設計，例如「從這份提案製作單頁文件」或「模擬我們剛才討論的入職流程。」Claude 會在您的對話旁邊建立它，您可以在那裡進行調整。您也可以在訊息框中選擇 輸出 > 設計。
在成品標籤中：前往 成品 標籤並選擇設計範本。
在 Claude Code 中：要求 Claude 將您的想法變成設計，或使用 /design 在桌面或終端機中建立、編輯和同步設計。
在 iOS 和 Android 的 Claude 應用程式中：在任何對話中要求設計，稍後回來查看結果，然後在 成品 標籤中全螢幕檢視。您也可以編輯設計。若要變更共享設定，請在網路或桌面上使用 Claude。
在 claude.ai/design：獨立版本將繼續運作，直到 2026 年 12 月 14 日關閉，您現有的專案將保留在那裡直到關閉。在關閉前將您的設計系統遷移到 Claude。深入了解 從獨立 Claude Design 遷移到 Claude。
Claude Design 的運作方式
Claude Design 將對話與畫布配對。您描述您想要的內容，Claude 會在對話旁邊的畫布上產生一個可運作的設計。從那裡，您可以進行迭代——透過對話、內嵌註解和直接在畫布上進行調整，直到完美為止。
典型的流程是：
從對話或「成品」標籤開始設計。
附加或匯入您希望 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.ai/design 帶來設計系統
您在 claude.ai/design 獨立版本中建立的設計系統可以移動，因此 Claude 可以在任何聊天中使用它們，包括在 Claude Code 中。在獨立版本於 2026 年 12 月 14 日關閉前進行遷移。深入了解 從獨立 Claude Design 遷移到 Claude。
為您的專案新增內容
您提供給 Claude 的內容越多，您的輸出就越好。您可以在專案期間的任何時間附加參考資料。
螢幕截圖、影像或現有資產：上傳現有設計、競爭對手產品、線框圖或視覺靈感的螢幕截圖。您也可以附加現有投影片組或包含您想要複製的設計風格的文件。適用於「讓它看起來像這樣」的要求。
程式碼庫和現有設計檔案：連結程式碼儲存庫，以便 Claude 了解您現有的元件、架構和樣式模式。這使原型從一開始就更接近生產就緒。匯入也支援多種方式來上傳現有產品設計工作。
撰寫有效的提示
您不需要是設計師就能獲得出色的結果。具體說明您正在建立的內容、它的用途以及最重要的內容。
好的提示包括 目標（您正在建立的內容）、版面配置（事物應如何排列）、內容（要顯示的資訊）和 受眾（誰將使用它）。如果需要更多資訊，Claude 也會提出澄清問題。
以下是一些效果良好的提示範例：
「建立一個顯示月度收入的儀表板，並提供地區和產品線的篩選器。」
「設計一個行動應用程式入職流程，包含 4 個螢幕，引導使用者了解我們的核心功能。」
「為我們的新 API 產品建立登陸頁面，包含英雄部分、程式碼範例和定價。」
「建立一個表單來收集客戶回饋，並根據類別提出條件問題。」
「為我們的營運團隊設計一個內部工具，以審查和批准內容提交。」
調整您的設計
第一代是一個起點。真正的價值來自於迭代。
使用聊天
聊天最適合影響整體設計的廣泛變更：
「使色彩配置更深色和更簡約。」
「重新排列儀表板，使指標位於頂列，圖表位於下方。」
「在右側添加設定面板。」
「為此頁面顯示 2–3 個替代版面配置。」
您也可以要求 Claude 解釋其設計決策、建議改進或檢查設計的無障礙性。
使用內嵌註解
內嵌註解可讓您直接點擊畫布上的特定部分並要求進行有針對性的變更。這比在聊天中描述位置更快。
良好內嵌註解的範例：
「使此按鈕的內邊距更大。」
「將此改為下拉式選單而非單選按鈕。」
「在此處使用主要品牌顏色。」
「使此部分可摺疊。」
注意：如果您的註解未被識別，請將意見反應直接貼到聊天中。這是一個已知的解決方法，用於解決註解在 Claude 讀取前可能消失的間歇性問題。
直接在畫布上編輯
使用豐富的版面配置控制項進行快速視覺和美學變更，特別是直接拖曳、調整大小和對齊元素。
何時使用聊天、註解或直接編輯
使用註解進行有針對性的元件級變更（「修復此按鈕」、「調整此間距」）。使用聊天進行結構變更、新增部分或任何需要說明或背景的事項。直接編輯進行快速視覺和美學變更。
使用鍵盤操作 Claude Design
若要進入和離開成品面板，以及從面板標題進行註解，請參閱使用鍵盤或螢幕閱讀器操作成品。該文章也說明了焦點的含義、在 Mac 筆記型電腦或 Safari 中的操作方式，以及表格如何顯示按鍵。
設計是一個畫板的畫布。每個畫板包含圖層，例如文字、形狀和影像，一個圖層可以在其內部包含其他圖層。
在編輯器的區域之間移動
按 F6 移至下一個區域，按 Shift+F6 移至上一個區域。Cmd+F6（Windows 上為 Ctrl+F6）可代替 F6 使用，無論是否搭配 Shift。這些區域是頂部列、畫布和屬性面板。選取某項內容且屬性面板已關閉時，F6 也會停在浮動於選取項目上方的工具列。
注意：在按 F6 之前完成文字編輯。先按 Escape 或 Tab 結束編輯。F6 會將您移出文字編輯，但不會結束編輯。
在畫板內工作
按 Tab 直到到達畫板的標題。其名稱包括其位置，例如第 1 個畫板（共 7 個）。從標題開始，按空格鍵選取畫板，按 Return 進入其內部的圖層。進入後：
Tab 和 Shift+Tab 在圖層之間移動。Home 和 End 移至第一個和最後一個圖層。
在包含其他圖層的圖層上按 Return 會進入其內部。在文字圖層上，Return 開始編輯。
Shift+Return 上升一個級別。
Escape 離開畫板，畫板保持選取狀態。再按一次 Escape 清除選取。
編輯文字圖層時，完成後按 Escape 或 Tab。移動時，編輯器會告訴螢幕閱讀器選取的內容及其位置，例如第 1 個（共 5 個）。
移動、複製和刪除
若要移動畫板，請選取它（在其標題上按空格鍵）並按方向鍵。它每次移動一個像素，或使用 Shift 時移動 10 個像素。在畫板內，方向鍵執行其他操作：無論是否搭配 Shift，它們都會將您移至下一個或上一個圖層，永遠不會移動圖層本身。若要移動您所在的圖層，請按住 Option（Windows 上為 Alt）並按方向鍵。自由放置的圖層每次移動一個像素，或使用 Shift 時移動 10 個像素。屬於列、欄或網格的圖層會與其鄰近圖層交換位置：向上或向左移動會使其更早出現，向下或向右移動會使其更晚出現。編輯器會向螢幕閱讀器發送移動的簡短確認。
選取畫板或圖層後，按 Cmd+D（Windows 上為 Ctrl+D）進行複製，按 Delete 或 Backspace 進行刪除。按 Cmd+Z（Windows 上為 Ctrl+Z）進行復原。編輯器會向螢幕閱讀器發送每個操作的簡短確認。
使用選取項目上方的工具列
浮動於選取項目上方的工具列僅在屬性面板關閉時出現，F6 可到達它。在其中，方向鍵在其控制項之間移動，Home 和 End 移至第一個和最後一個，Escape 返回畫布並保持您的選取。您也可以使用 Tab 到達每個控制項。
使用屬性面板和圖層清單
按 Cmd+\（Windows 上為 Ctrl+\）開啟屬性面板並將焦點移入其中。再按一次關閉面板，焦點返回頂部列中的「屬性」按鈕。面板中的顏色、字型和其他快顯視窗在開啟時會取得焦點，Escape 會關閉它們。選擇文字顏色時，顏色選擇器會告訴您其與背景的對比度是否良好或不佳。
在屬性面板的圖層清單中：向上箭頭和向下箭頭鍵在列之間移動，向右箭頭鍵展開列然後進入其內部，向左箭頭鍵摺疊它然後移出，Return 或空格鍵在畫布上選取該圖層，在文字圖層上再按一次 Return 進行編輯。
警告：在圖層清單中，Delete、Backspace 和 Cmd+X（Windows 上為 Ctrl+X）作用於畫布上選取的任何內容，可能不是您移至的列。先在列上按 Return。
Claude Design 鍵盤快速鍵
操作 | Mac | Windows |
下一個區域 | F6 或 Cmd+F6 | F6 或 Ctrl+F6 |
上一個區域 | Shift+F6 或 Cmd+Shift+F6 | Shift+F6 或 Ctrl+Shift+F6 |
移至畫板的標題 | Tab | Tab |
選擇畫板（在其標題上） | Space | Space |
進入畫板、在圖層內移動或編輯文字 | Return | Enter |
下一個圖層、上一個圖層（在畫板內） | Tab、Shift+Tab 或方向鍵 | Tab、Shift+Tab 或方向鍵 |
第一個圖層、最後一個圖層 | Home、End | Home、End |
上升一個層級（在畫板內） | Shift+Return | Shift+Enter |
離開畫板 | Escape | Escape |
移動選定的畫板（在其標題上） | 方向鍵（按住 Shift 可移動 10 像素） | 方向鍵（按住 Shift 可移動 10 像素） |
移動或重新排序您所在的圖層（在畫板內） | Option+方向鍵 | Alt+方向鍵 |
複製 | Cmd+D | Ctrl+D |
刪除 | Delete 或 Backspace | Delete 或 Backspace |
複製、貼上 | Cmd+C、Cmd+V | Ctrl+C、Ctrl+V |
剪下（圖層） | Cmd+X | Ctrl+X |
群組、取消群組（圖層） | Cmd+G、Cmd+Shift+G | Ctrl+G、Ctrl+Shift+G |
水平翻轉、垂直翻轉 | Shift+H、Shift+V | Shift+H、Shift+V |
全選 | Cmd+A | Ctrl+A |
復原、重做 | Cmd+Z、Cmd+Shift+Z | Ctrl+Z、Ctrl+Shift+Z |
開啟或關閉屬性面板 | Cmd+\ | Ctrl+\ |
放大、縮小、適應視窗 | Cmd+Plus、Cmd+Minus、Cmd+0 | Ctrl+Plus、Ctrl+Minus、Ctrl+0 |
顯示或隱藏版面配置參考線 | Shift+G | Shift+G |
管理版本和修訂
如果您想探索不同的方向而不失去目前的工作，請告訴 Claude：「保存我們目前的內容，嘗試完全不同的方法。」Claude 會保存您目前的專案並確認保存位置，讓您可以輕鬆參考對話中的早期版本。
匯出和分享
設計完成後，您可以與同事分享或將其匯出以供其他地方使用。正確的格式取決於您的使用情況——無論是獲取利益相關者的回饋、交接給工程部門，還是向群組展示。
檢視專案時，使用右上角的「匯出」按鈕，從以下匯出格式中選擇。
下載為 .zip
匯出為 PDF
匯出為 PPTX
匯出到 Google Slides
匯出為獨立 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
設計預設為私人。若要分享，請按一下「分享」並選擇誰可以開啟它以及他們可以執行的操作。與您分享設計的人員可以檢視、評論或編輯它。深入瞭解分享成品。
使用情況和定價
Claude Design 計入與 Claude 其餘部分相同的使用限制。設計活動從與 Claude 其餘工作相同的池中提取，包括 Claude Code，因此沒有單獨的 Claude Design 額度需要追蹤。具有大型程式碼庫或多次迭代的複雜專案會消耗更多使用量。
如果您達到使用限制，Claude Design 將不可用，直到您的限制重設。如果您已啟用使用額度，在達到包含的限制後，您可以繼續工作。深入瞭解使用情況和長度限制的運作方式。
注意：Claude Design 之前有自己的每週額度，與您的其他使用限制分開。所有 Claude Design 活動現在計入您計畫的共享限制。
最佳結果的提示
匯入完整的設計系統。匯入包含您的樣式、字型和元件的完整設計系統。
從簡單開始，然後逐層增加複雜性。從核心版面配置和內容開始，然後新增互動、邊界情況和潤飾。Claude 對增量請求反應良好。
在您的回饋中要具體。「這看起來不對」很難執行。「將表單欄位之間的間距縮小到 8px」可以準確告訴 Claude 需要什麼。
參考您的設計系統。如果您知道元件存在於您的品牌系統中，請按名稱提及：「使用主要按鈕元件」或「套用卡片版面配置模式。」
盡早考慮回應式設計。提及您的設計是否需要在行動裝置、平板電腦和桌面上運作，或只在其中一個上運作。
要求變體。如果您不確定方向，請要求 Claude 向您展示 2–3 個選項。比較替代方案比猜測快得多。
向 Claude 尋求回饋。Claude 可以檢查您的設計是否具有無障礙功能、對比度比率、資訊層級和一般可用性。將其視為設計協作者，而不僅僅是生成器。
已知限制
需要注意的幾點：
評論持久性：內嵌評論有時不會出現在頁面上，但您仍然可以透過開啟評論檢視來查看它們。
大型程式碼庫：考慮從 Claude Code 連結非常大的儲存庫以避免延遲或瀏覽器問題。若要同步設計系統，請從 Claude Code 使用 /design-sync。
聊天錯誤：如果您遇到「聊天上游錯誤」，請嘗試在同一專案中啟動新的聊天分頁。
行動裝置：無法在 iOS 和 Android 的 Claude 應用程式上變更分享設定，因此您需要使用 Claude 網頁版或桌面版。
多人編輯：兩個或多個人同時編輯設計專案仍然是基本的，可能無法可靠地運作。
設計系統匯入：設計系統匯入的品質取決於其來源。雜亂的程式碼庫或不完整的檔案將顯示在輸出中。
版本歷史記錄：Claude Design 還沒有版本歷史記錄。
從圖層清單中刪除：在屬性面板的圖層清單中，刪除、退格和剪下作用於畫布上選取的內容，而不是您移動到的列。先在列上按 Return。
使用鍵盤新增到設計：在畫布上放置新的文字圖層、美術板、形狀或備註需要滑鼠或觸控板。要求 Claude 新增它。