Claude Design 同步原型設定指南

這篇教你在 Claude Design 建立專案、同步設計系統、反覆修正並匯出可交付的同步原型。

這篇給產品團隊、設計師與開發者看，目標是把既有設計系統接進 Claude Design，做出可同步的原型，再順利交給 Claude Code 或其他交付流程。

照著做完，你會得到一個可編輯的第一個專案、已同步的元件來源、可重複檢查的修改流程，以及可分享或匯出的成品版本。

Claude Design 目前支援 Pro、Max、Team、Enterprise 方案，介面可在網頁版 claude.ai/design 或 Claude Desktop 使用。

開始之前

• Claude Pro、Max、Team 或 Enterprise 帳號
• 工作區已啟用 Claude Design；Enterprise 可能需要管理員開關
• Claude Desktop，或可開啟 claude.ai/design 的現代瀏覽器
• 已存在的設計系統，包含顏色、字型與元件規範
• 可選但建議：GitHub repo、螢幕截圖、程式碼庫或設計檔
• 若要做本機同步與交接，需先安裝 Claude Code
• 若要在本機使用 MCP 指令，請準備 Node 20+

Step 1: 建立 Claude Design 專案

目的：先建立一個新的工作區，讓 Claude 以你的組織設計系統為基礎開始產圖，不必從空白畫布慢慢摸索。

前往 Claude Design 官方說明，或直接開啟 claude.ai/design 與 Claude Desktop，從側邊欄進入 Claude Design，建立新專案並命名為你要做的產品或頁面。

你應該看到左側是聊天區，右側是空白畫布，且專案名稱已出現在頂部，這代表第一個專案已建立完成。

Step 2: 同步設計系統元件

目的：把你們團隊已經在用的元件接進來，避免 Claude 自行發明按鈕、卡片或表單樣式。

若你要從 Claude Code 做同步，先安裝並登入，再把 Claude Design MCP 連上去：

claude mcp add --scope user --transport http claude-design https://api.anthropic.com/v1/design/mcp
/design-login
/design-sync

如果設計系統在 GitHub、地端程式碼庫，或設計檔裡，請把來源指給 Claude。同步後，Claude 會用這些元件比對輸出內容，並修正不一致的地方。

你應該看到元件名稱、樣式與你的設計系統一致，而不是一組通用的預設介面。

Step 3: 提供情境並寫出精準提示詞

目的：讓第一版原型直接貼近真實需求，而不是只生成一個看起來像 UI 的草圖。

上傳截圖、線框稿、簡報或程式碼庫，補足畫面脈絡。接著用明確提示詞寫出目標、版面、內容與受眾，例如：「建立一個 API 產品首頁，包含 hero 區、程式碼範例與價格區塊。」

你應該看到 Claude 只在必要時追問細節，然後產出符合結構與用途的畫面草案。

Step 4: 用聊天與註解修正畫布

目的：把粗略草稿逐步改成可檢視、可評審的同步原型。

用聊天處理大方向修改，例如版面順序、層級或替代方案；用內嵌註解修正元件細節，例如間距、按鈕型態或控制項。需要快速微調時，也可以直接拖曳、縮放與對齊畫布上的元素。

你應該看到每次修改後畫布即時更新，註解對應到實際變更，版面也逐步變得更完整。

Step 5: 保存版本並匯出交付

目的：把可用成果固定下來，方便給主管、設計夥伴、工程師或其他工具接手。

在嘗試新方向前，先請 Claude 保存目前版本，再用 Export 匯出 .zip、PDF、PPTX 或獨立 HTML。你也可以分享唯讀、可註解或可編輯連結，或把專案送到 Canva、Miro、Replit、Vercel 或 Claude Code。

你應該看到一個保存過的修訂版本，以及一個可被他人開啟的匯出檔或分享連結。

常見錯誤

• 提示詞太模糊。修法：補上目標、受眾、版面與內容，讓 Claude 有足夠資訊生成正確畫面。
• 沒有先同步設計系統。修法：先執行 /design-sync，或直接匯入元件來源，讓輸出對齊真實規範。
• 只依賴註解卻沒有反應。修法：把同樣回饋貼到聊天區，因為內嵌註解有時可能在 Claude 讀取前消失。

接下來可以看什麼

當你完成第一個同步原型後，可以進一步看 Claude Design 的管理設定，或深入 Claude Code，把既有程式碼與同一套設計系統串起來，做更完整的交接流程。