Google Stitch：免費 AI 工具，用文字描述就能產生 UI 設計

正在做 Side Project 但不擅長 UI 設計？Google Stitch 可以從文字描述產生完整的使用者介面，而且到現在還是免費的。

本文所有內容都在 2026 年 8 月 6 日重新對照 Google 官方 blog、文件與說明頁查證過。 Stitch 是 Google Labs 的實驗性產品，功能和限制隨時可能無預警更動。這篇文章初次發布之後的八個月裡，確實改了很多。

---

跟 2025 年 12 月的舊版比，變了什麼

先講好消息：Stitch 沒有改名、沒有停止服務、沒有被併進 Gemini 或 AI Studio、也沒有變成付費。名字一樣、網址一樣、還是 Google Labs beta、還是免費。舊版文章的核心前提是活著的。

變的部分：

• Stitch 變強很多。 2026 年 5 月的 I/O 版本把它整個重做成即時串流的「Stitch Agent」，你可以在生成過程中隨時介入引導，也可以用語音操作；另外加上匯出到 Google Antigravity，以及一鍵發布到 Netlify。
• 現在支援品牌與設計系統了。 我在舊版把「自訂設計規範或品牌指南」列在「Stitch 做不到」的清單裡。2026 年 4 月 Google 把 DESIGN.md 格式開源，做的就是這件事。那條限制現在反而是賣點。
• 有官方 MCP server 了，還有 Agent Skills 函式庫和 Gemini CLI extension。如果你本來就在 coding agent 裡工作，這是現在整個產品最有意思的部分，而舊版完全沒提到。
• 我在舊版比較表裡推薦的 Firebase Studio 正在收攤。 2026 年 6 月 22 日已經停止新用戶註冊。那一列被拿掉了。

---

Google Stitch 是什麼？

Google Stitch 是 Google Labs 推出的 AI 工具，於 Google I/O 2025 發布。它使用 Gemini 模型把你的文字描述轉換成 UI 介面，並匯出乾淨、好讀的前端程式碼。

可以把它想成隨時待命的 UI 設計師。描述你想要的畫面、上傳草圖，或分享截圖，Stitch 就幫你建好。

立即試用： stitch.withgoogle.com

關於「免費」

Stitch 是免費的，但舊版沒告訴你一個但書。

它是免費的 Google Labs beta。Google 自己的 AI credits 說明頁列出的計費產品是 Google Flow 和 Google Antigravity，並沒有列 Stitch。但 Stitch 顯然有每日額度上限：Google 自家的 Gemini 社群就有一串在問「Stitch 的每日 credits 什麼時候重置」。這個數字 Google 沒有在任何我找得到的地方公布。

所以：免費，是真的。但我舊版寫的「慷慨額度」沒有人能查證，那句話已經刪掉。第三方來源給的數字彼此差到 30 倍，所以這裡一個都不引用。請預期有一道你看不到的牆，並記得 Labs 產品沒有任何延續性保證。

---

主要功能

文字轉 UI

用文字描述你的介面需求：
- 「一個定價頁面，有 3 個方案和月付/年付切換」
- 「一個後台儀表板，有側邊欄導航和數據卡片」
- 「一個登入表單，有社群登入按鈕」

Stitch 會產生完整的響應式設計，包含多個畫面。

圖片轉 UI

有截圖、草圖或線框圖？上傳後 Stitch 會重建成乾淨、可編輯的程式碼。餐巾紙塗鴉、白板草圖、精美設計稿都能處理。

Stitch Agent

2026 年 5 月的版本之後，Stitch 會把生成過程即時串流到畫布上。你看著它一邊做，並且可以在做到一半的時候介入改方向，而不是等它做完再回頭要求修改。也可以用語音下指令，包含口頭給設計評論。

Google 把這個描述成「與 Stitch Agent 的即時協作」。這是人跟 agent 的協作，不是多人同時編輯。詳見下面的限制段落。

DESIGN.md：把你的品牌變成一個檔案

2026 年 4 月 Google 開源了 DESIGN.md 格式。它讓你把設計系統寫成一個 Stitch 和其他 agent 都讀得懂的檔案，生成出來的 UI 會符合你的品牌，而不是預設的那種一看就知道是 AI 生的樣子。

Google 的說法是：Stitch「理解你的設計系統背後的理由，並能生成符合你品牌的使用者介面」，而且 agent 可以拿 WCAG 無障礙規範來驗證自己的選擇。5 月的更新再加上匯入既有 codebase 和設計檔案當作參考，目的是同一件事。

這是舊版之後最大的功能變化，而且它把 Stitch 過去最常被吐槽的弱點整個反轉過來。

匯出與發布

• Google AI Studio：產生一個可分享的連結
• Google Antigravity：把畫面匯出到 Google 的 agent 開發平台，接上後端邏輯
• Netlify：一鍵直接發布到網路上
• .zip 與 複製到剪貼簿：下載，或貼進 Claude Code、Cursor、Copilot 這類 coding agent
• Figma 匯出還能用，2026 年 5 月 19 日 Google 團隊成員在官方論壇回覆確認這個整合運作正常。但要注意，2026 年所有 Stitch 的官方公告都沒有提到 Figma 匯出，它顯然被默默降級了

Netlify 那一項比聽起來重要：你現在可以從一句 prompt 直接做到一個線上網址，中間不用離開 Stitch。

舊版寫的 Jules 匯出，在 2026 年任何一篇 Stitch 官方公告裡都沒有出現。我無法確認它是否還存在，所以這裡標記為未確認，既不移除也不背書。

AI 模式

Stitch 跑在當前的 Gemini 模型上，有一個快速的預設模式用來快速迭代、一個品質較高的 Pro 模式用來出精緻成品，另外還有一個從截圖重新設計現有 App 或網站的 redesign 模式。

這裡刻意不寫模型版本號。 Stitch 跟 Gemini 的發布節奏落後好幾個版本。一直到 2026 年年中，都還有人在 Google 官方開發者論壇問新版 Gemini 什麼時候會進 Stitch，Google 員工的回覆是無法提供時程。任何寫死在文章裡的版本號，幾週後就會過期。要知道現在有哪些模式，直接看產品裡的選單。

原型功能（Prototypes）

可以把畫布上不同的畫面串連成可運作的原型，設計的就不再只是靜態畫面，而是互動和完整的使用者流程。

標註功能

標註功能（以香蕉圖示標記，暗示 Google 的 Nano-Banana 模型）讓你直接在 UI 畫面上加註解和視覺標記。提交後 Gemini 會處理這些回饋，做出符合上下文的 UI 變更。

多選編輯

按住 Shift 點擊可一次選取多個畫面，一個提示詞就對全部套用相同的樣式或主題變更。要維持一致性的時候很省時。

---

把 Stitch 接進你的 coding agent（MCP）

這是舊版完全沒有的東西。如果你本來就在 coding agent 裡工作，這現在是整個產品的重點。

Google 提供：

• 官方 Stitch MCP server，文件在 stitch.withgoogle.com/docs/mcp/
• Agent Skills 函式庫，放在 google-labs-code GitHub org，涵蓋 code-to-design、React、React Native、shadcn-ui、Vite 生成，以及 DESIGN.md 分析
• Gemini CLI extension
• 官方 Codelab：Antigravity + Stitch MCP 的 design-to-code 流程

這些 skills 可以搭配 Claude Code、Cursor、Codex、Antigravity、Gemini CLI 和 OpenCode 使用。

老實說一下摩擦點：設定需要一個 Google Cloud 專案、啟用 Stitch API、再拿一把 Stitch API key。這比純網頁版「登入就能用」重得多。如果你會頻繁在 agent 裡生成 UI，值得；如果你只是要做一頁 landing page，殺雞用牛刀。

---

如何使用 Google Stitch

步驟 1：進入工具

1. 前往 stitch.withgoogle.com
2. 用 Google 帳號登入
3. 不需安裝，純網頁工具

2026 年 5 月的更新公告寫的是「全球用戶即日起可用」，而且現行任何 Google 頁面都沒有提到候補名單，所以舊版的「可能需要加入候補名單」那句話已經刪掉。不同地區的開放狀況仍可能不同。

步驟 2：描述你的 UI

寫一個清楚的提示詞：

好的提示詞：

一個手機 App 的新手引導畫面：
- 歡迎標題
- 3 個功能亮點配圖示
- 底部的「開始使用」按鈕
- 顯示第 1 步（共 3 步）的進度點


模糊的提示詞（避免）：

做一個好看的歡迎頁


步驟 3：一邊生成一邊引導

這一步跟舊版的做法已經不同了。你不再是丟出提示詞然後乾等：

• 看著它串流到畫布上，方向不對就直接打斷、改方向
• 用語音在它做的過程中給評論
• 遇到用文字很難描述的版面調整，開標註功能直接畫在畫面上
• 產生多個變體探索不同版面
• 把 DESIGN.md、既有 codebase 或設計檔餵給它，讓它第一次生成就在品牌內，而不是生完再一輪一輪修回來

步驟 4：匯出或發布

看你要把成果送去哪裡：

• 今天就要上線一頁靜態頁？ 從 Stitch 直接發布到 Netlify。
• 要接後端邏輯？ 把畫面匯出到 Google Antigravity。
• 要給人看、收 feedback？ 產生 AI Studio 分享連結。
• 要貼進自己的 repo？ 下載 .zip 或複製程式碼，丟給你的 coding agent。
• 要回到設計工具繼續做？ Figma 匯出還能用。

---

Side Project 常用提示詞範例

著陸頁 Landing Page

一個 SaaS 著陸頁：
- Hero 區塊有標題、副標題和 CTA 按鈕
- 3 個功能卡片配圖示
- 用戶見證區塊有頭像和評論
- 定價區塊有 2 個方案
- 頁尾有連結
使用現代、簡潔的風格，藍色為主色。

後台儀表板 Dashboard

一個數據分析儀表板：
- 側邊欄導航配圖示
- 頂部欄有用戶頭像和通知
- 4 個統計卡片顯示關鍵指標
- 流量趨勢折線圖
- 最近活動列表
偏好深色主題。

手機 App 畫面

一個任務管理 App 的主畫面：
- 頂部有 App 名稱和新增按鈕
- Tab 切換：今天、即將到來、已完成
- 任務列表有勾選框和到期日
- 浮動按鈕新增任務
iOS 風格，淺色主題。

電商頁面

一個商品詳情頁：
- 商品圖片輪播配縮圖
- 商品標題、價格和評分星星
- 尺寸和顏色選擇器
- 加入購物車按鈕
- 商品說明分頁
- 相關商品區塊

---

程式碼品質

產生的程式碼乾淨、好讀：

<section class="hero">
  <div class="container">
    <h1 class="hero-title">更快打造你的 Side Project</h1>
    <p class="hero-subtitle">從點子到上線，只要幾天而非幾個月</p>
    <a href="#" class="btn btn-primary">免費開始</a>
  </div>
</section>

.hero {
  padding: 4rem 1rem;
  text-align: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.hero-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.btn-primary {
  display: inline-block;
  padding: 0.75rem 2rem;
  background: white;
  color: #667eea;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
}

程式碼特點：
- 使用語意化 HTML
- 遵循現代 CSS 實踐
- 預設就是響應式
- 容易客製化

上正式環境之前還是要自己看過。「好讀」跟「審查過」是兩回事。

---

獲得更好結果的技巧

1. 具體描述

包含版面結構、顏色與風格、需要的具體元件、目標裝置。

2. 先把設計系統餵給它

如果你有 DESIGN.md、既有 codebase 或設計檔，第一個提示詞之前就先給它。把「很 AI」的輸出一句一句修成你的品牌，花的提示詞遠比一開始就在品牌內多得多。

3. 參考現有設計

一個定價頁面，風格類似 Stripe 的定價頁，
有 3 個方案和下方的功能比較表

4. 分步驟迭代

先主要版面，再細修各區塊：基本結構 → Hero → 特定元件 → 最後細節。

5. 打斷它

因為生成是即時串流的，你不需要等一個明顯歪掉的畫面做完。看得出方向不對就馬上改。

6. 使用圖片輸入

在紙上畫草圖、拍照上傳。Stitch 對手繪線框圖的理解出奇地好。

7. 善用多選

處理多個畫面時 Shift+點擊全選，一個提示詞套用一致的樣式或主題變更。

---

限制

Stitch 目前仍然不擅長的事：
- 複雜的 JavaScript 功能或互動效果
- 後端整合（這正是 Antigravity 匯出存在的理由）
- 完全響應式版面（預期還是要手動調整）
- 深度設計思考，例如視覺層次策略或使用者旅程規劃

關於協作：Stitch 支援的是跟 Stitch Agent 的即時協作：串流、即時引導、語音。多人同時編輯目前沒有得到確認。 第三方媒體報導說 I/O 2026 有推出多人協作，但 Google 自己的 I/O 公告並沒有這樣寫，所以這裡不把它當成事實陳述。如果你需要確定的多人協作，請自己先驗證過再規劃團隊流程。

這次從限制清單移除的一項：「自訂設計規範或品牌指南」。DESIGN.md 現在做的就是這件事。

Stitch 是很強的起點，但它不是一套從設計做到部署的完整方案。你仍然需要調整輸出並加入功能。

---

Stitch 與其他 AI 設計工具比較

關於這張表有兩件事要說。

Firebase Studio 已經被移除。 它以前在這張表裡是被推薦的免費替代方案。Google 於 2026 年 3 月 19 日宣布收攤，2026 年 6 月 22 日停止建立新 workspace 與新用戶註冊，2027 年 3 月 22 日完全關閉並永久刪除資料。今天照著我舊版的推薦去點，連帳號都註冊不了。Google 官方引導既有用戶轉往 Antigravity（偏程式）或 AI Studio（偏原型）。

v0、Lovable、Bolt.new 這三列沒有重新查證。 它們跟 Firebase Studio 那一列是同一批寫的，而那一列最後指向一個正在被刪除的產品，所以這裡把價格標成未查證，而不是照抄舊數字。要用的話請自己去各家官方 pricing 頁看。

使用 Stitch 的時機：
- 需要快速 HTML/CSS 或 Tailwind 程式碼
- 正在做視覺原型驗證
- 想要免費方案，而且能接受一個你看不到的額度上限
- 有設計系統，希望生成結果照著走
- 想從 prompt 快速做到一個線上網址

使用 Antigravity 的時機：
- 畫面已經有了，你需要後端邏輯、狀態和真實資料

使用 Figma Make 的時機：
- 團隊本來就在 Figma 裡，想在那個流程內做 prompt-to-code

---

Side Project 開發者的工作流程

1. 發想階段（5 分鐘）

列出你需要的畫面：著陸頁、後台、設定頁。

2. 準備 context（5 分鐘）

把 DESIGN.md、既有 codebase 或設計檔指給 Stitch。省掉這一步，接下來三十分鐘你會一個畫面一個畫面地用提示詞餵品牌色。

3. 用 Stitch 產生（30 分鐘）

一邊生成一邊引導，逐一建立畫面。用原型功能串連畫面看整條流程。

4. 上線或整合（15 分鐘到 2 小時）

只是一頁靜態行銷頁？Netlify 一鍵搞定。要整合進既有 App？匯出到 Antigravity，或把程式碼拉下來接進你的框架。

5. 加入功能

連接後端、加入互動、接上真實資料、測試。

節省的時間： 數小時與 CSS 排版和設計決策奮鬥的時間。

---

最近更新

• 2026 年 5 月（Google I/O）：最大的一次。Stitch 整個重做成即時串流的 Stitch Agent，生成過程即時顯示在畫布上、可以中途介入引導、可以用語音操作。同時新增匯出到 Google Antigravity、一鍵發布到 Netlify、AI Studio 分享連結，以及匯入既有 codebase 與設計檔以維持品牌一致。
• 2026 年 4 月：Google 開源 DESIGN.md 格式，讓 agent 能讀懂並遵守你的設計系統，並用 WCAG 無障礙規範驗證。
• 2026 年 3 月：語音指令即時給設計評論、自動生成畫面。
• 周邊生態：官方 Stitch MCP server、Agent Skills 函式庫、Gemini CLI extension。

---

適合使用的場景

很適合：
- 著陸頁
- 管理後台
- 手機 App 原型
- Email 模板
- 快速原型
- 有 DESIGN.md 之後的品牌一致生成
- 學習 CSS 寫法
- 探索設計變體

不太適合：
- 複雜且有自訂互動的網頁應用
- 未經審查和調整的正式環境程式碼
- 需要「確定有」多人同時編輯的團隊
- 需要有明文保證額度的場合

---

今天就開始

1. 前往 stitch.withgoogle.com
2. 試試這個提示詞：「一個現代的任務管理 App 著陸頁，有 hero、功能介紹和定價區塊」
3. 一邊生成一邊用對話或語音引導它
4. 發布到 Netlify，或匯出程式碼
5. 用在你的 Side Project

幾分鐘內就能得到專業水準的 UI，不用花好幾個小時。

---

分享你的作品

用 Google Stitch 做了東西？分享你的 Side Project 給社群，和其他正在做產品的開發者交流吧！

---

本文內容於 2026 年 8 月 6 日對照 Google 官方 blog、文件與說明頁重新查證。有兩件事查不到、因此刻意沒有寫成事實：免費方案的確切每日額度（Google 沒有公布任何數字，第三方來源彼此差距極大），以及多人同時編輯是否真的推出了。Stitch 是 Google Labs 的實驗性產品，功能與限制隨時可能無預警變動。在你依賴這裡任何一句話之前，請先打開產品看一眼。