使用 Claude 進行原型設計與使用者體驗

當人們可以點擊瀏覽功能構想時，會更容易判斷其好壞。透過 Claude Design，您在對話中描述功能，Claude 便會建構一個團隊可以開啟並試用的原型。如果 Claude 擁有您的設計系統，它會使用您自己的元件來建構原型，例如您產品中真實的按鈕和表單。

1. 開始一項設計

您可以在任何使用 Claude 的地方開始一項設計。

• 在任何對話中： 在網頁版或桌面應用程式中，要求提供原型、模擬圖或一組畫面。
• 從側邊欄： 開啟 Artifacts，在 Make something new（建立新項目）下選擇 Design，然後在開啟的對話中描述您想要的內容。
• 在 Claude Code 中，於您的儲存庫內： 以相同方式提出要求。在那裡，Claude 還可以讀取您產品的程式碼，如第 3 節所述。

設計會在對話旁的畫布上開啟，您可以平移和縮放該畫布。每個畫面都位於各自的畫板上。設計會儲存在 Artifacts 底下，在您分享之前，其他人無法開啟它。

2. 為功能製作原型

以下是您可以要求的幾種原型類型，並附上可嘗試的提示。

新功能

描述畫面、其各個區塊以及它們的行為方式。

• 「為我們的 SaaS 應用程式設計一個新的設定頁面，包含帳戶、帳單、通知和整合等區塊。加入側邊導覽列，並讓每個區塊都可展開。」
• 「製作一個搜尋體驗的原型，包含篩選器、分面結果，以及點擊結果時從右側滑入的詳細資訊面板。讓它可以點擊。」
• 「建構一個核准工作流程介面，讓主管可以在佇列中檢視、評論，並核准或拒絕已提交的請求。」

設計審查的替代方案

要求將每種方案放在各自的畫板上。這樣您和審查者就可以並排比較它們。

• 「向我展示使用者個人資料頁面的三種不同版面配置：一種以卡片為基礎、一種有左側邊欄，以及一種有頂部分頁導覽。將每一種放在各自的畫板上。」
• 「在不同的畫板上建立此結帳流程的兩個版本，一個是單頁式，另一個是多步驟式，以便我在設計審查中比較它們。」

整個流程

逐步描述整個歷程。

「規劃一位想從免費方案升級到付費方案的使用者流程。從他們看到升級提示的儀表板開始，經過方案比較頁面、付款表單、確認畫面，到解鎖進階功能後更新的儀表板。」

內部工具與管理面板

Claude Design 非常適合用於內部工具，例如管理面板和審核佇列。在畫面完善之前，人們可以點擊瀏覽原型，查看各個步驟是否可行。

「設計一個用於管理使用者帳戶的管理面板：一個可搜尋的表格，附有方案類型和狀態的篩選器，以及一個顯示帳戶歷史記錄並可修改權限的詳細資訊抽屜。」

Claude 可能不具備所有事實，例如您真實的定價。它可能會詢問您，或做出假設。在分享設計之前，請務必檢視 Claude 的成果並核對細節。若要進一步了解如何評估 Claude 的輸出，請閱讀我們的教育報告人們如何檢查 Claude 的成果。

3. 使用您自己的元件進行建構

Claude 可以使用您真實的元件來建構原型，也就是您產品已經在使用的相同按鈕和表單。這樣一來，原型就會與工程師將要建構的內容相符。如果沒有您的元件，Claude 會繪製自己的版本，看起來只是相似而已。

您可以透過以下任一方式，取得與您產品相符的原型：

• 設定設計系統（建議）： 設計系統會將您的色彩、字體和元件集中保存在 Claude 中的同一個地方。一旦您的組織設定了預設值，Claude 就會在您團隊開始的任何設計中使用它。請參閱在 Claude 中設定設計系統。
• 在儲存庫中透過 Claude Code 進行： 在您專案內的 Claude Code 工作階段中要求設計。Claude 可以讀取程式碼，並擷取您產品已經使用的色彩、字體和間距。這不需要任何設定。

無論您選擇哪種方式，以下習慣都會有所幫助：

• 在提示中指名元件： 「使用 ProductCard 元件」或「遵循與設定頁面相同的版面配置」可以告訴 Claude 要使用哪些元件。
• 指引 Claude 找到介面程式碼： 在大型儲存庫中，告訴 Claude 哪個套件或資料夾存放著這些元件。
• 若要變更元件，請詢問 Claude： 您真實的元件會完全按照程式碼中的樣子出現在畫板上。
• 在元件庫變更後重新整理： 從您的程式碼同步而來的設計系統，會保留上次同步時的元件副本。在發布後請再次同步。

4. 在畫板上進行調整

您可以自行變更設計、為 Claude 留下評論，或在對話中提出要求。變更會在您進行時即時儲存，因此沒有「儲存」按鈕。

• 手動操作： 點擊元素以選取它，雙擊文字以重新輸入，拖曳以移動它。使用工具列新增文字、備註、形狀和新的畫板。Properties 會顯示您所選元素的設定。
• 透過評論： 若要變更單一元素，請開啟評論功能，點擊該元素，寫下您想要的內容，並保持勾選 Send to Claude。Claude 會進行變更，並在評論串中回覆。
• 透過提問： 對於較大的變更，例如新增一個狀態或另一種替代方案，請在對話中提出要求。

例如：「展示這個頁面如何處理空白狀態、錯誤狀態和載入狀態。將每一種放在目前畫板旁的各自畫板上。」

5. 與您的團隊一起審查

透過 Share，您可以選擇誰能開啟設計，以及他們是否可以檢視、評論或編輯。您邀請的人需要擁有 Claude 帳戶。關於各方案的選項，請參閱說明中心的分享 artifacts。

每個人能做什麼，取決於您給予他們的存取權限：

• 可檢視： 他們可以開啟設計、點擊任何元素以讀取其大小、間距和色彩，並使用 Play 執行可點擊的畫板。他們無法變更任何內容。
• 可評論： 與上述相同，並可對他們點擊的元素進行評論。
• 可編輯： 他們可以自行變更設計，並在畫布上新增備註。您組織中具有編輯權限的人，也可以將評論作為請求傳送給 Claude。

具有編輯權限的人可以同時在畫布上工作，您會即時看到彼此的變更。

在 Team 和 Enterprise 方案中，您組織的擁有者會決定您是否可以對外分享。若有人無法開啟連結，請使用 Export。您可以匯出：

• 將單一畫板匯出為 PNG、PDF 或 HTML（.zip）檔案
• 透過 Share > Export，將整個原型匯出為一個網頁（HTML）
• 將每個畫板整合在一份 PDF 中

6. 在 Claude Code 中繼續進行

Claude Code 可以開啟在 Claude Design 中製作的原型。工程師便可以根據實際的畫板及其中的元件進行建構，而不是根據螢幕截圖。

• 如果您是在 Claude Code 中進行設計： 留在同一個工作階段中，並要求 Claude 進行建構。若要稍後回來，請從 Artifacts 開啟設計，並使用 Share 旁的按鈕重新開啟建立該設計的工作階段。
• 如果您是在其他地方進行設計： 給予工程師該設計的編輯權限。在 Claude Code 中，於儲存庫內，他們貼上設計的連結，並要求 Claude 實作它。

在開始建構之前

以下幾個步驟可以讓設計更容易作為建構的基礎：

• 清楚命名畫板和元件： Claude Code 會讀取設計中的這些名稱。
• 在做出決策時記錄下來： 如果您選擇使用分頁而非側邊欄，請在畫板上的備註中說明原因，Claude Code 便可以讀取它。
• 先要求提供空白、錯誤和載入狀態： 同時詢問畫面在資料極少以及遠超出預期時的行為方式。

7. 從構想到實作的範例

1. 產品經理在對話中描述功能。這是一個具有篩選和批次操作功能的通知中心。
2. Claude 根據組織的設計系統建構第一個原型，設計師再於畫板上進行調整。
3. 產品經理分享設計以進行非同步審查，團隊執行原型並留下評論。
4. 工程師在 Claude Code 中開啟設計，並要求 Claude 實作它。

如果有任何地方看起來不對勁

更多資源

• 使用 Claude 製作投影片和簡報，適用於簡報。
• 在 Claude 中設定設計系統，讓設計使用您的元件和字體。
• 在 Claude artifacts 中與您的團隊協作，了解如何與團隊分享和編輯設計。
• 造訪說明中心以獲得更多支援和疑難排解協助。