設計系統會擷取您的顏色、排版、元件和版面配置模式,讓 Claude 將其應用於每個新設計和簡報。Claude 會從您提供的資產(例如程式碼庫、簡報或其他設計參考資料)中擷取這些內容。
設計系統在 Pro、Max、Team 和 Enterprise 方案中以測試版形式提供。在 Pro、Max 和 Team 方案中預設為開啟。在 Enterprise 方案中,設計系統預設為關閉,直到擁有者在組織設定 > 成品中開啟設計系統。claude.ai/design 上的獨立 Claude Design 有其自己的單獨設定。
本指南適用於將設定設計系統的設計師或品牌擁有者。在 Team 和 Enterprise 方案中,您只需執行一次,之後每個人的工作都會採用該系統。
開始之前
在 Team 和 Enterprise 方案中,設計系統必須為您的組織開啟,擁有者可能會限制誰可以發佈或設定預設值。
您至少需要以下其中一項作為來源資料:
包含您的設計系統或元件庫的程式碼庫
反映您視覺識別的簡報或文件
品牌指南資產(標誌、調色盤、排版規格)
建立設計系統
從聊天
要求 Claude 從您連接的應用程式、上傳的檔案、Figma 檔案、簡報、標誌和字型建立設計系統。這最適合具有字型、顏色和指南的品牌設計系統。
從 Claude Code
如果您的設計系統已作為 React 元件存在,請在 Claude Code 中執行 /design-sync。它直接讀取您的權杖和元件,最適合程式碼中的產品設計系統。
從 claude.ai/design 帶入設計系統
開啟側邊欄底部的「設計」標籤。
在橫幅中按一下「遷移團隊設計系統」。
每個設計系統都會成為 Claude 可在任何聊天中使用的成品,包括在 Claude Code 中。遷移的設計系統可能需要進行一些清理,因此每個系統都會顯示一個橫幅,您可以在其中按一下「讓 Claude 清理它」,Claude 會整理其指南、權杖和元件。
管理您的設計系統
在設定 > 設計系統中管理您的設計系統。在 Enterprise 方案中,管理員可以為特定使用者保留發佈、設定組織預設值和刪除設計系統的權限。在Team 和 Enterprise 方案的成品管理員指南中瞭解更多資訊。
使用鍵盤操作設計系統
若要進入和離開成品面板,請參閱使用鍵盤或螢幕閱讀器操作成品。該文章也說明了焦點的含義、在 Mac 筆記型電腦或 Safari 中的操作方式,以及快捷鍵的寫法。
設計系統會以您正在閱讀的部分旁邊的部分清單形式開啟。在清單中的部分上按 Return 會進入該部分,Cmd+F6(Windows 上為 Ctrl+F6)會在清單和部分之間移動,Cmd+Z(Windows 上為 Ctrl+Z)會在您不在文字方塊中時復原變更。
注意:設計系統中的即時元件預覽無法透過 Tab 鍵到達,因此無法從鍵盤操作。每個元件的名稱和備註都可以讀取。
在 claude.ai/design 中設定設計系統
這些步驟使用獨立的 Claude Design。
建立或切換到您的組織
在專案選擇器的左下角,按一下目前的組織名稱。
選取您的組織,或建立新的組織。
完成您被重新導向到的上線流程。
上傳您的品牌和產品資產
在上線期間或之後從您的組織設定中,上傳定義您的品牌和產品的資產。Claude 會分析這些資產並擷取可重複使用的設計系統。
程式碼庫:如果您的設計系統存在於程式碼中(例如 React 元件庫),請連結或上傳存放庫。Claude 會讀取元件和樣式。
原型:螢幕擷取畫面、網頁流程和現有設計檔案。
簡報或文件:即使是反映您品牌的設計精良的 PowerPoint 或 PDF 也可以使用。Claude 會擷取顏色、版面配置模式和排版選擇。
個別資產:標誌、調色盤檔案、排版樣本。
您只需要一個來源即可開始,但更多來源可以為 Claude 提供更多資訊。
檢查產生的設計系統
上傳後,Claude 會為您的組織產生設計系統。這通常包括:
調色盤:從您的資產中擷取的主要、次要和強調顏色。
排版:字型系列、大小和粗細。
元件:按鈕、卡片、導覽元素和其他可重複使用的 UI 模式。
版面配置模式:間距、網格系統和頁面結構。
若要驗證它,請建立測試專案並檢查輸出是否符合您的品牌。嘗試以下提示:
「為 [您的產品] 建立登陸頁面。」
「設計顯示 [相關指標] 的儀表板。」
「製作關於 [您的團隊經常呈現的主題] 的單頁文件。」
將其提供給您的團隊
當您對設計系統感到滿意時,請開啟「已發佈」切換。發佈後,從您組織中的 Claude Design 首頁建立的專案會使用您的設計系統,而不是預設值。
更新您的設計系統
當您的設計系統變更時,您可以在 Claude Design 中更新它。從您的 Claude Design 組織設定中,按一下您要編輯的設計系統旁邊的「開啟」按鈕。按一下視窗右上角的「混音」按鈕以開啟左側的聊天介面。從這裡,您可以與 Claude 合作來變更您的設計系統。
最佳結果的提示
包含真實範例,而不僅僅是規格。完成的登陸頁面或行銷網站比單獨的調色盤更能向 Claude 說明您品牌的感受。
反覆運算。如果第一次擷取未能很好地捕捉您的品牌,請嘗試上傳其他或不同的資產。
