Google Stitch + Claude Code：設計出沒有「AI 感」的網站

Ailoot 的其他使用說明請參閱文件。

為什麼 Claude Code 建立的網站看起來像「AI 垃圾」？#

本文的實際案例是替撥號應用程式製作首頁。一開始只有空白專案，並請 Claude Code 建立登陸頁面。結果就是經典款：背景使用 slate-950、點綴色使用 indigo-500、標題使用粗體 Inter，下面再放三張帶有陰影的相同卡片。版面和第一個 v0、第一個 Lovable、第一次 ChatGPT 生成的結果一模一樣。我把提示詞重寫了五次，加上「高級」、「不要跟別人一樣」、「現代」等描述，頁面看起來還是像 2015 年的 WordPress 佈景主題。

道理很簡單：沒有任何限制時，模型就會取它看過的內容之統計平均值。而它看過上百萬個以 Bootstrap 和 Tailwind 建立的相同登陸頁面。想得到不平庸的結果，就要明確告訴代理程式使用哪些顏色、字型、間距，以及哪些元件是標準範本。對模型而言，「漂亮」等於「2020 年的中位數」。形容詞改變不了結果；你需要的是精確參數。

我在Refero 現成設計系統的指南中也探討過這個落差：在那裡，你會把別人的風格（Apple、Linear、Stripe）交給代理程式。Google Stitch 則從另一個方向著手：不借用別人的風格，而是根據你的描述生成自己的風格。

Google 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指南中介紹過。Stitch 的不同之處是，它會將現成的系統放在外部檔案中，讓代理程式每次建置內容時都能讀取。

Google Stitch 的使用資格要求#

Stitch 並非在所有國家都能使用：一位 Google 代表在官方論壇上表示，年滿 18 歲的使用者可在 212 個國家使用服務，而且開放清單還在擴增中。在受限制的地區造訪時，只會看到一則訊息：「抱歉，Stitch 無法使用。」

你需要 Google 帳戶，而且只能使用 Google 帳戶登入。

Stitch MCP 授權阻擋 Claude Code 流程時怎麼辦？#

網路上有很多 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 是什麼？為什麼它比螢幕截圖更好？#

有一個大多數教學都寫錯的關鍵細節：Stitch 裡沒有「Export DESIGN.md」按鈕。這個檔案是由代理程式自行組成。根據 Google 的官方 codelab，提示詞大致如下：「透過 Stitch MCP 前往專案，擷取色彩配置和字體排版，並據此組成 DESIGN.md。」該 codelab 假設 MCP 連線可用；本文手動路徑改讀匯出 HTML／CSS，在專案根目錄建立結構檔，缺少 token 必須標出，不可從圖片猜測。

DESIGN.md 寫的是具體規格，不是形容詞：

# 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 是選項，不是此路徑必要條件。

如何製作網站：從文字到設計的完整流程#

以下是完整流程，依照順序排列：

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 感」：究竟該改哪些地方？#

以下是網站不再一眼露出破綻的幾個具體要點：

• 色彩。 紫色 indigo-500 是最明顯的破綻。直接在 DESIGN.md 中設定精確的十六進位主色和點綴色。每個代理程式對「品牌藍」的解讀都不同。
• 字型。 Inter 是最安全的選擇，因此也是最容易辨認的「AI 字型」。選擇有表現力的組合，例如正文使用無襯線字型，標題則使用更具個性的字型。在 Stitch 設計中設定，並記錄在 DESIGN.md 中。
• 用參考資料取代形容詞。 模型會把「讓它看起來現代」解讀成「2020 年的中位數」。提供真實螢幕截圖，模型就會照字面理解「使用這個頁面的版面配置」。將參考圖片上傳到 Stitch；你無法只用文字傳達品味。
• 間距和留白。 擁擠、相同的區塊一眼就看得出是套版。請在 DESIGN.md 中設定寬裕的間距比例，代理程式就能更自由地安排元素。

具體明確勝過主觀形容詞。Stitch 本質上是一台把「我想要這種感覺」轉換成精確代碼的機器，代理程式就不必再猜。

Google Stitch 或其他替代工具：該選哪一個？#

我根據預算有限時進行 vibe coding 真正重要的面向，比較了這些工具：

我自己使用的工作流程是：用 Stitch 探索設計，再用 Claude Code 建置並撰寫邏輯。對預算有限的 vibe coder 而言，Stitch 勝在免費，還能從頭為產品設計獨特風格。若你想了解市面上完整的工具選擇，我在專題文章2026 年用什麼來編寫程式中介紹過。

Google Stitch 有哪些限制？在哪些方面不夠理想？#

以下是坦白列出的限制，讓你不會做到第三個畫面才失望：

• 只有介面。 不提供後端、資料庫或代管發布功能。你需要 Claude Code 來處理這些工作（或者使用 Lovable，一站式完成所有工作）。
• 工具內的編輯功能有限。 你不能用滑鼠移動個別元素，只能透過提示詞修改並重新生成。它不是 Figma。
• 結果不具確定性。 同一個提示詞會產生不同結果。這對探索點子很有幫助，但需要可重複輸出時就不方便。
• 使用額度。 你會用完免費生成額度（目前是每日額度）；不能購買更多，只能等額度重設。確切次數會變動，請查看介面。
• 實驗階段。 Google Labs 不保證長期支援。服務可能變更或關閉。
• 地區限制，以及 Claude Code 的 MCP 授權問題，詳見使用資格要求和設定章節。

如果你要在許多專案中遵守嚴格的品牌指南、設計已經存在於 Figma 中，或需要一個已發布且附有後端的應用程式，Stitch 就不適合你。

接下來呢？#

從只有一個畫面的最小工作流程開始：在 Stitch 描述產品、生成首頁並匯出 HTML／CSS，再請 Claude Code 由本機檔案建立 DESIGN.md 與頁面。只要看到紫色漸層自行消失，之後就會愈來愈容易。

使用 Stitch 設計是一種上下文工程技巧。完整系統結合 AI 分身、第二大腦和上下文工程，讓 Claude 能依賴事先準備好的規則和上下文。

AI 分身、第二大腦和上下文工程對產品都很重要。使用 Stitch 設計是這個組合的第一個基礎元件。

若要進一步使用模型，請前往 Ailoot。