# Google Stitch + Claude Code：設計出沒有「AI 感」的網站 > 完整手動 Google Stitch 至 Claude Code 流程：匯出 HTML／CSS、由本機檔建立 DESIGN.md、建置驗證一頁，處理未解決 MCP 授權。 Source: https://ailoot.ai/blog/zh-hant-tw/google-stitch-claude-code-design/ Canonical: https://ailoot.ai/blog/zh-hant-tw/google-stitch-claude-code-design/ Language: zh-Hant-TW Publisher: Ailoot (https://ailoot.ai/) Translation: guide-106 Revision: sha256-c1528dd56ba09d402934399fd149ce118bc97cc0e85e9f4a3d618095a535da59
重點摘要 Claude Code 寫程式邏輯的能力很出色，但它的設計一眼就露餡：深色背景、紫色漸層、Inter 字型，還有三個一模一樣的區塊。Google Stitch 能根據文字描述生成設計，透過 DESIGN.md 檔案提供色彩與字體排版代碼，再由 Claude Code 根據該檔案建置網站。本文會一步步展示完整工作流程，以及容易出問題的地方。
Ailoot 的其他使用說明請參閱[文件](https://ailoot.ai/docs/)。 ## 為什麼 Claude Code 建立的網站看起來像「AI 垃圾」？
重點摘要 沒有設計系統時，Claude Code 會畫出一個平庸的介面：深色背景、紫色點綴、Inter 字型，以及三張陰影完全相同的卡片。原因是模型會重現訓練資料中最常見的模式，而那些資料就是整個網路上關於 Tailwind 的內容，以及成千上萬個一模一樣的登陸頁面。沒有精確限制，代理程式就會輸出所有範本的算術平均值。
本文的實際案例是替撥號應用程式製作首頁。一開始只有空白專案，並請 Claude Code 建立登陸頁面。結果就是經典款：背景使用 `slate-950`、點綴色使用 `indigo-500`、標題使用粗體 Inter，下面再放三張帶有陰影的相同卡片。版面和第一個 v0、第一個 Lovable、第一次 ChatGPT 生成的結果一模一樣。我把提示詞重寫了五次，加上「高級」、「不要跟別人一樣」、「現代」等描述，頁面看起來還是像 2015 年的 WordPress 佈景主題。 道理很簡單：沒有任何限制時，模型就會取它看過的內容之統計平均值。而它看過上百萬個以 Bootstrap 和 Tailwind 建立的相同登陸頁面。想得到不平庸的結果，就要明確告訴代理程式使用哪些顏色、字型、間距，以及哪些元件是標準範本。對模型而言，「漂亮」等於「2020 年的中位數」。形容詞改變不了結果；你需要的是精確參數。 我在[Refero 現成設計系統](https://ailoot.ai/blog/zh-hant-tw/claude-code-refero-design-md/)的指南中也探討過這個落差：在那裡，你會把別人的風格（Apple、Linear、Stripe）交給代理程式。Google Stitch 則從另一個方向著手：不借用別人的風格，而是根據你的描述生成自己的風格。 ## Google Stitch 是什麼？它能如何提供協助？
重點摘要 Stitch 是 Google Labs 的免費工具，能把文字描述或圖片轉換為完整的 UI 設計，包含畫面、色彩、字體排版和版面配置。它在瀏覽器中直接使用 Gemini 模型。對 Claude Code 工作流程而言，Stitch 最有價值之處，在於它會以結構化資料提供設計：精確的色彩、字型和間距數值。代理程式讀取後就能用程式碼重現，不必對著螢幕截圖「憑感覺猜」。
Stitch 是 Google Labs 的實驗性工具，於 2025 年 5 月的 Google I/O 上推出。在提示欄中輸入你希望應用程式呈現的樣子（或上傳螢幕截圖、白板草圖、競爭對手的網頁），Stitch 就會在無限畫布上生成介面畫面。底層使用 Gemini 2.5 Pro 和 Flash，並於 2025 年 12 月加入 Gemini 3，讓版面更加精緻。 對我們有用的功能包括： - **Vibe Design**——用文字描述氛圍（「像 Stripe 一樣，簡約又高級」），就能取得多種視覺方向供你選擇。 - **參考圖片**——上傳 Dribbble 或 Pinterest 的圖片；Stitch 會保留其版面配置，並套用你的需求。 - **三種匯出格式**——匯出至 Figma（保留可編輯圖層）、匯出為乾淨的 HTML/CSS，或透過 MCP 直接交給代理程式。 Stitch 和 Refero 這類現成風格的差異很重要。Refero 是從真實網站擷取而成的設計系統資料庫，讓你採用現有品牌風格。Stitch 則從頭為你的產品生成一套系統。沒有參考設計，想要打造自己的風格？用 Stitch。想快速套用知名產品的風格？用 Refero。兩者負責不同步驟，搭配起來恰到好處。 Claude 本身也有內建的設計模式，我在[Claude Design](https://ailoot.ai/blog/zh-hant-tw/claude-design-guide/)指南中介紹過。Stitch 的不同之處是，它會將現成的系統放在外部檔案中，讓代理程式每次建置內容時都能讀取。 ## Google Stitch 的使用資格要求 Stitch 並非在所有國家都能使用：一位 Google 代表在官方論壇上表示，年滿 18 歲的使用者可在 212 個國家使用服務，而且開放清單還在擴增中。在受限制的地區造訪時，只會看到一則訊息：「抱歉，Stitch 無法使用。」 你需要 Google 帳戶，而且只能使用 Google 帳戶登入。 ## Stitch MCP 授權阻擋 Claude Code 流程時怎麼辦？
本文在 Claude Code 使用遠端 MCP `https://stitch.googleapis.com/mcp` 遇到授權失敗，沒有提供已驗證相容設定，因此下方完整路徑使用本機 HTML／CSS 匯出。
網路上有很多 MCP 連線教學，但有不少內容根本派不上用場，而且一半的指示完全無法運作。例如，許多指南（包括一些熱門的英文指南）都建議使用 `npx -y @google/stitch-mcp@latest` 指令安裝 `@google/stitch-mcp` 套件。那個套件並不存在——npm 會回傳 `404`。不要照抄這個指令，否則只會浪費時間。基於相同理由，請選擇已在實際任務中確認安裝及驗證方式可行的整合工具。 本文遠端 MCP 嘗試遇到 `Incompatible auth server`。觀測錯誤不是可用配方，也不能證明目前所有設定失敗。確切相容設定驗證前，不要繼續含糊的「連接 MCP」，請用下方手動 HTML／CSS 匯出路徑。 Stitch 和 DESIGN.md 工作流程是最純粹的上下文工程：預先將精確的代碼放入 Claude 的上下文，讓它嚴格依照規則建置，不必「猜我想要什麼」。完整的方法結合了三大支柱——AI 分身、第二大腦和上下文工程。這個組合能讓 Claude 從「會亂猜的助理」變成產出可預測成果的工具。 ## DESIGN.md 是什麼？為什麼它比螢幕截圖更好？
重點摘要 DESIGN.md 是可供機器讀取的 Markdown 檔案，內含設計系統參數：十六進位色碼、字體排版比例、間距單位和元件規則。Claude Code 會將它讀入上下文，使用同一套代碼建置每個元素。代理程式無法從螢幕截圖擷取精確的十六進位色碼或間距大小，只能猜測。從 Markdown 讀取數值時則會照單全收，因此所有畫面看起來都像是「出自同一位設計師之手」。
有一個大多數教學都寫錯的關鍵細節：Stitch 裡沒有「Export DESIGN.md」按鈕。這個檔案是由代理程式自行組成。根據 Google 的官方 codelab，提示詞大致如下：「透過 Stitch MCP 前往專案，擷取色彩配置和字體排版，並據此組成 DESIGN.md。」該 codelab 假設 MCP 連線可用；本文手動路徑改讀匯出 HTML／CSS，在專案根目錄建立結構檔，缺少 token 必須標出，不可從圖片猜測。 DESIGN.md 寫的是具體規格，不是形容詞： ```markdown # DESIGN.md ## Colors - Primary: #0F172A - Accent: #F97316 - Success / Error / Warning: ... - Background / surfaces: ... ## Typography - Font (body): "Instrument Sans"; (headings): "Instrument Serif" - Scale: H1 48/1.1, H2 36/1.15, Body 16/1.6, Caption 13/1.4 - Weights: 400 / 500 / 700 ## Spacing (base 8px) - xs 4, sm 8, md 16, lg 24, xl 40, 2xl 64 ## Layout - Container max-width: 1200px; breakpoints: 640 / 768 / 1024 / 1280 ## Components - Button: radius 10px; variants primary / secondary / ghost; states hover / active / disabled - Card: radius 16px; shadow 0 4px 24px rgba(0,0,0,.08) ``` 若要讓 Claude Code 使用這份檔案，請在 `CLAUDE.md` 中引用它（例如加入「所有元件都依照 `DESIGN.md` 的設計」這行）。如此一來，代理程式每次執行都會載入相同的代碼。星期一做的按鈕和星期五做的卡片看起來會有一致的風格，因為它們都以同一份資料為準。 此設定使用兩份本機參考：DESIGN.md 保存色彩、字體、間距與元件規則；匯出 HTML／CSS 及素材提供特定畫面版面。MCP 是選項，不是此路徑必要條件。 ## 如何製作網站：從文字到設計的完整流程
重點摘要 完整手動流程七步為：確認可用性、描述產品、加入參考、完善一個畫面、匯出 HTML／CSS、由檔案建立 DESIGN.md，再用 Claude Code 建置驗證一頁。它避開未解決 MCP 授權；響應式、導覽與互動仍需實作和測試。
以下是完整流程，依照順序排列： 1. **開啟 Stitch。** 確認國家可用性，以 Google 帳戶登入 `stitch.withgoogle.com`。 2. **描述產品。** 列出畫面與使用者旅程，確認或修改建議清單。 3. **加入參考。** 上傳預定截圖，指定要保留的色彩、字體與版面。 4. **生成並調整。** 先完善一個畫面，再擴展設計。 5. **匯出 HTML／CSS。** 將選定畫面的檔案及素材存入專案參考資料夾，本機開啟 HTML 確認正確；只有截圖沒有精確 CSS 值。 6. **由本機匯出建立 DESIGN.md。** 請讀取實際色彩、字體、間距、版面及元件值，缺少值列出由你決定。這條路徑不需要 Stitch API 金鑰或 MCP 驗證。 7. **建置並檢查一頁。** 將下方路徑換成實際匯出資料夾，再提供兩段提示： ``` 讀取 refs/stitch-export/ 的 Stitch HTML／CSS 匯出，使用檔案中實際值在專案根目錄建立 DESIGN.md。指出缺少值，不要捏造。 ``` ``` 依 DESIGN.md 與本機 Stitch 匯出建立一頁，元件保持模組化。以桌機與手機寬度對照渲染及匯出，再分別驗證導覽與互動狀態。 ``` 接下來都由 Claude Code 負責：不同畫面間的路由、按照 DESIGN.md 中的斷點進行響應式設計、動畫和互動功能。Stitch 提供的是靜態畫面和可點選的原型，不會建置可運作的邏輯，也不會將內容發布到代管服務；這些工作交給代理程式處理。 ## 如何去除「AI 感」：究竟該改哪些地方？
重點摘要 把主觀形容詞換成精確限制，就能消除「AI 感」。主要有三項調整：拿掉預設的紫色點綴並指定自己的十六進位色碼，把 Inter 換成更有表現力的字型組合，以及提供真實網站作為參考，而不是只說「現代」。把這些設定全部記錄在 DESIGN.md 中，代理程式就不會再退回範本的算術平均值。
以下是網站不再一眼露出破綻的幾個具體要點： - **色彩。** 紫色 `indigo-500` 是最明顯的破綻。直接在 DESIGN.md 中設定精確的十六進位主色和點綴色。每個代理程式對「品牌藍」的解讀都不同。 - **字型。** Inter 是最安全的選擇，因此也是最容易辨認的「AI 字型」。選擇有表現力的組合，例如正文使用無襯線字型，標題則使用更具個性的字型。在 Stitch 設計中設定，並記錄在 DESIGN.md 中。 - **用參考資料取代形容詞。** 模型會把「讓它看起來現代」解讀成「2020 年的中位數」。提供真實螢幕截圖，模型就會照字面理解「使用這個頁面的版面配置」。將參考圖片上傳到 Stitch；你無法只用文字傳達品味。 - **間距和留白。** 擁擠、相同的區塊一眼就看得出是套版。請在 DESIGN.md 中設定寬裕的間距比例，代理程式就能更自由地安排元素。 具體明確勝過主觀形容詞。Stitch 本質上是一台把「我想要這種感覺」轉換成精確代碼的機器，代理程式就不必再猜。 ## Google Stitch 或其他替代工具：該選哪一個？
重點摘要 如果你想在零預算下從頭設計，Google Stitch 是不錯的選擇。網站已經在 Figma 中畫好了？使用 Figma MCP。需要可直接使用的 React 程式碼？使用 v0。想採用知名品牌的風格？使用 Refero。需要立即取得附有後端的應用程式？使用 Lovable。對預算有限的 vibe coder 而言，Stitch 是最容易上手的起點，但它不提供發布功能或後端。
我根據預算有限時進行 vibe coding 真正重要的面向，比較了這些工具： | 工具 | 價格 | 提供內容 | 與 Claude Code 整合方式 | |----|----|----|----| | **Google Stitch** | 免費 | 從文字描述從頭設計：畫面、HTML、Figma | 本機 HTML／CSS 匯出；MCP 僅限已驗證相容設定 | | **v0 (Vercel)** | 免費 + \$20/月 | 可直接使用的 React / Tailwind 程式碼、發布至 Vercel | 透過提示詞和程式碼 | | **Figma Dev Mode MCP** | Beta 版免費 | 提供 Figma 中現成的設計以便轉成程式碼 | 官方 Figma MCP | | **Refero Styles** | 免費資料庫 | 根據真實網站製作的現成 DESIGN.md 檔案 | 官方 Refero MCP | | **Lovable** | 免費 + \$25/月 | 一站式提供：介面 + 資料庫 + 發布功能 | 獨立平台 | 我自己使用的工作流程是：用 Stitch 探索設計，再用 Claude Code 建置並撰寫邏輯。對預算有限的 vibe coder 而言，Stitch 勝在免費，還能從頭為產品設計獨特風格。若你想了解市面上完整的工具選擇，我在專題文章[2026 年用什麼來編寫程式](https://ailoot.ai/blog/zh-hant-tw/ai-coding-tools/)中介紹過。 ## Google Stitch 有哪些限制？在哪些方面不夠理想？
重點摘要 Stitch 只處理 UI，不提供後端、發布功能或簡報。手動編輯功能也有限：你無法像在 Figma 中那樣移動個別元素，只能重新生成。結果並非確定性的，同一個提示詞可能產生不同畫面。此外，免費生成次數有限，也無法購買更多次數；服務仍處於實驗階段，沒有任何保證，而且 Claude Code 也有授權問題。
以下是坦白列出的限制，讓你不會做到第三個畫面才失望： - **只有介面。** 不提供後端、資料庫或代管發布功能。你需要 Claude Code 來處理這些工作（或者使用 Lovable，一站式完成所有工作）。 - **工具內的編輯功能有限。** 你不能用滑鼠移動個別元素，只能透過提示詞修改並重新生成。它不是 Figma。 - **結果不具確定性。** 同一個提示詞會產生不同結果。這對探索點子很有幫助，但需要可重複輸出時就不方便。 - **使用額度。** 你會用完免費生成額度（目前是每日額度）；不能購買更多，只能等額度重設。確切次數會變動，請查看介面。 - **實驗階段。** Google Labs 不保證長期支援。服務可能變更或關閉。 - **地區限制**，以及 Claude Code 的 MCP 授權問題，詳見使用資格要求和設定章節。 如果你要在許多專案中遵守嚴格的品牌指南、設計已經存在於 Figma 中，或需要一個已發布且附有後端的應用程式，Stitch 就不適合你。 ## 接下來呢？
重點摘要 接下來，親手建立工作流程：在 Stitch 生成第一個畫面、擷取 DESIGN.md，再用 Claude Code 根據它建置一個頁面。花一個晚上就能完成，並解決網站再次看起來像「AI 生成」的主要顧慮。整件事取決於一項技能：掌控放進代理程式上下文的內容。其餘的熟能生巧。
從只有一個畫面的最小工作流程開始：在 Stitch 描述產品、生成首頁並匯出 HTML／CSS，再請 Claude Code 由本機檔案建立 DESIGN.md 與頁面。只要看到紫色漸層自行消失，之後就會愈來愈容易。 使用 Stitch 設計是一種上下文工程技巧。完整系統結合 AI 分身、第二大腦和上下文工程，讓 Claude 能依賴事先準備好的規則和上下文。
### 來源 - [Google Developers Blog - Stitch：設計 UI 的新方式](https://developers.googleblog.com/stitch-a-new-way-to-design-uis/) - [Google Blog - Stitch 和 Gemini 3](https://blog.google/technology/google-labs/stitch-gemini-3/) - [Google Codelab - 使用 Stitch MCP 從設計到程式碼](https://codelabs.developers.google.com/design-to-code-with-antigravity-stitch) - [Figma - 為 Claude Code 設定 MCP](https://help.figma.com/hc/en-us/articles/39888612464151-Claude-Code-and-Figma-Set-up-the-MCP-server)
AI 分身、第二大腦和上下文工程對產品都很重要。使用 Stitch 設計是這個組合的第一個基礎元件。 若要進一步使用模型，請前往 [Ailoot](https://ailoot.ai/)。 ## 常見問題：Google Stitch + Claude Code：設計出沒有「AI 感」的網站 ### Stitch MCP 回傳 Incompatible auth server，該怎麼做？ 走完整手動路徑：匯出選定畫面的 HTML／CSS，素材存入專案，本機確認正確，再讓 Claude Code 由檔案建立 DESIGN.md。本文無已證實 MCP 設定，不能把「連接 MCP」當完成。 ### 如何避免 DESIGN.md 的設計 token 來自猜測？ 提供 HTML／CSS，不只截圖。要求記錄檔案實際值，缺色彩、字體、間距或元件規則時列出由你決定，再以一頁實際渲染對照匯出。 ## Ailoot · 公司及其專案組合 Ailoot以累積的營運經驗、廣大的客戶群、穩定的服務及持續的KPI管理為基礎。 公司及其專案組合：數百萬客戶，每月銷售額達數十億。 Ailoot將這些營運經驗用於API存取，讓客戶的產品、代理、應用程式及自動化流程使用AI功能。