Google Stitch 教學：用 AI 生成 UI 設計的免費工具，完整功能介紹與操作指南
2026年3月16日 下午 11:00
AI 設計
🚀 想掌握更多 AI 設計工具？訂閱 AI 設計覺醒，每週精選 AI × 設計新知直送給你。
你有沒有過這種經驗：腦中有一個 App 的畫面，但一打開 Figma 就卡住了？或者你是開發者，每次都得等設計稿等到天荒地老？
Google 在 2025 年 I/O 大會上推出了 Google Stitch——一款由 Gemini AI 驅動的 UI 設計工具，讓你用一段文字描述，或是上傳一張手繪草稿，就能在幾十秒內生成完整的介面設計和前端程式碼。
這篇文章會帶你從零開始認識 Google Stitch，包含功能介紹、操作步驟、Prompt 技巧，以及設計師可以怎麼把它整合到工作流程裡。
Google Stitch 是什麼
Google Stitch 是 Google Labs 推出的 AI UI 設計工具，核心理念是 「From idea to app」——從想法到應用程式。它利用 Google Gemini 模型的多模態能力，將你的文字描述或圖片輸入，轉換成專業的使用者介面設計，並同時輸出前端程式碼。
Stitch 的前身是 Galileo AI，一款 2022 年推出的文字轉 UI 工具。2025 年 5 月 Google 收購了 Galileo AI，將它整合進 Google Labs 生態系統並重新命名為 Stitch，搭載 Gemini 2.5 Pro 的能力大幅升級。
簡單來說，Stitch 就像是把設計師和前端工程師的前期工作濃縮進一個對話框裡。你描述你要什麼，它幫你生出來。
傳統 UI 工作流程
線框稿 → 設計稿 → 原型 → 前端開發
需要多種工具，耗時數天
Google Stitch 工作流程
Prompt / 圖片 → UI 設計 + 程式碼
單一工具，幾分鐘完成
▲ Google Stitch 操作示範影片
核心功能介紹
Google Stitch 的功能圍繞著一個核心目標：用最快速度把想法變成可用的介面設計。以下是它的五大核心功能：
💬 文字生成 UI
用自然語言描述你想要的介面，Stitch 會自動生成完整的 UI 佈局，包含導航列、卡片、按鈕等元件，還會處理配色和字體。
🖼️ 圖片轉 UI
上傳手繪草稿、線框圖或既有 App 截圖，Stitch 會分析視覺結構並生成對應的數位介面設計。這個功能在 Experimental Mode 中可用。
🎨 主題客製化
生成後可以透過 Theme Editor 調整色彩、字體、間距，支援明暗主題切換，還能用 Shift + 點擊批次選取多個畫面一次修改。
📋 前端程式碼匯出
每個設計都會附帶乾淨的 HTML/CSS 程式碼（使用 Tailwind CSS），可以直接複製到你的開發環境，也支援 React 格式。
🔗 Figma 整合
Standard Mode 下可以一鍵「Paste to Figma」，將設計貼入 Figma 並保留 Auto Layout 和可編輯圖層，讓你無縫銜接既有的設計工作流。
兩種 AI 模式比較
Google Stitch 提供兩種運作模式，各自搭載不同的 Gemini 模型。選哪個取決於你的需求：
| Standard Mode | Experimental Mode | |
|---|---|---|
| AI 模型 | Gemini 2.5 Flash | Gemini 2.5 Pro |
| 生成速度 | ⚡ 快速 | 較慢（約 90 秒） |
| 輸入方式 | 僅文字 Prompt | 文字 + 圖片上傳 |
| 設計品質 | 中等保真度 | 高保真度 |
| Figma 匯出 | ✓ 支援 | ✗ 不支援 |
| 每月配額 | 350 次 | 50 次 |
| 適用場景 | 快速探索、大量迭代 | 精細設計、圖片參考 |
2025 年 12 月的更新中，Google 為 Stitch 整合了 Gemini 3 模型，進一步提升了 UI 生成品質。如果你在介面中看到 Google 3 Pro 的選項，建議優先選擇它。
使用步驟教學
Google Stitch 的操作門檻很低，只需要一個 Google 帳號就能開始。以下是完整的操作步驟：
前往 Stitch 官網
打開 stitch.withgoogle.com，用你的 Google 帳號登入。你會看到主控制台，上面有最近的專案和範例可以瀏覽。
選擇模式與版型
點擊「Start a new design」，選擇 Standard 或 Experimental 模式，然後決定是要做 Mobile（手機）還是 Web（網頁）版型。根據實測，Stitch 在手機介面的生成效果比網頁好。
輸入 Prompt 或上傳圖片
在輸入框中描述你想要的介面。盡量具體——包含 App 類型、功能頁面、配色偏好、目標使用者等資訊。如果是 Experimental Mode，可以直接上傳草稿或截圖。
生成並檢視結果
按下「Generate designs」後，Stitch 會在 60-90 秒內生成介面。你可以看到多個設計變體，點擊任一個檢視細節。
用對話方式迭代修改
對生成的設計不滿意？在聊天介面中輸入修改指令，例如：「把背景改成深色」「增加底部導航列」「圖表用圓餅圖」，Stitch 會即時更新。
匯出設計
滿意後可以選擇「Paste to Figma」貼入 Figma，或「Export」下載 HTML/CSS 程式碼，甚至可以匯出到 Google AI Studio 做進一步開發。
Prompt 撰寫技巧
跟所有 AI 工具一樣，Prompt 的品質決定了 Stitch 的輸出品質。UX Planet 的設計師分享了一個很實用的框架叫做 Zoom-Out-Zoom-In：先給 AI 產品的全局背景，再聚焦到你要的具體畫面。
一個好的 Stitch Prompt 應該包含這些要素：
📋 Prompt 結構模板
APP 類型
健身追蹤 App
版型
Mobile
功能頁面
Dashboard、紀錄、圖表
視覺風格
深色主題、綠色強調
實際的 Prompt 範例：
Design a fitness tracking app for mobile that includes a dashboard with daily stats, workout logging screen, and progress charts. Use a dark theme with green accents. Target audience is gym enthusiasts aged 20-35.
幾個讓輸出更好的撰寫技巧：
具體描述頁面內容——不要只說「設計一個電商網站」，而是說明要有哪些區塊、什麼樣的導航結構。
指定視覺風格——深色/淺色主題、圓角卡片、特定配色代碼都可以寫進去。
加入品牌名稱——如果有品牌名，寫進 Prompt 裡，Stitch 會把它放在 Logo 的位置。
善用追加指令——第一次生成不完美很正常，用對話方式追加修改效果很好。
匯出與 Figma 整合
Google Stitch 目前提供三種主要匯出方式：
🎨 Paste to Figma
按下按鈕後，設計會被複製到剪貼簿，直接在 Figma 中貼上即可。匯入的設計保留 Auto Layout、可編輯圖層和元件結構。注意：僅 Standard Mode 支援。
💻 HTML/CSS 程式碼
每個生成的設計都附帶前端程式碼，使用 Tailwind CSS 作為樣式框架。程式碼是唯讀的，你需要複製到自己的編輯器中使用。也可以匯出整個檔案包（程式碼 + 圖片素材）。
🚀 匯出到 AI Studio / Firebase
新增的 Export 按鈕可以直接將設計送進 Google AI Studio 或 Firebase Studio，讓你從設計稿無縫進入開發環境，用 Gemini 的能力繼續把 UI 變成可運行的應用。
最推薦的工作流程是：用 Stitch 快速產出概念 → 匯出到 Figma 精修 → 程式碼交給開發。這樣可以同時享受 AI 的速度和人工設計的品質。
Prototype 互動原型功能
2025 年 12 月，Google 隨著 Gemini 3 的整合推出了 Prototypes 功能。正如其名——你現在可以把多個畫面「縫合」（stitch）在一起，建立互動式的使用者流程。
這代表 Stitch 不再只是靜態畫面產生器。你可以：
• 在專案中設計多個相關畫面
• 設定畫面之間的導航關係與轉場
• 在專屬的原型預覽視窗中測試使用流程
• 同時支援 Mobile、Desktop、Tablet 三種版型預覽
根據最新消息，Google 正在測試更多進階功能，包含 Voice Mode（用語音對話來生成和修改設計）、Design Systems（從 URL 自動匯入設計系統 Token）、以及 Annotate 功能（在畫面上直接標註，AI 會根據標註自動修改）。
▲ Google Stitch 從零建立 UI 的完整示範
免費方案與使用限制
好消息是：Google Stitch 目前完全免費，作為 Google Labs 的實驗性產品開放使用。你只需要一個 Google 帳號，不用綁信用卡。
STANDARD MODE
350 次/月
Gemini 2.5 Flash
EXPERIMENTAL MODE
50 次/月
Gemini 2.5 Pro
需要留意的是：Stitch 仍然是實驗性產品，未來定價策略可能會改變。有消息指出 Google 可能推出 $20/月的 Pro 方案提供無限次數生成，但目前還沒正式上線。建議趁免費時多加利用。
另外，Stitch 目前僅支援 英文介面，覆蓋 212 個國家和地區，需年滿 18 歲才能使用。
設計師怎麼用 Google Stitch
身為設計師，你可能會問：「這工具是來搶我飯碗的嗎？」答案是不會——但它會改變你的工作方式。以下是幾個設計師可以活用 Stitch 的場景：
💡 突破空白畫布恐懼
接到新專案不知道從哪開始？用 Stitch 先跑幾個方向出來，有了視覺起點再做修改，比從零開始效率高很多。
🏃 快速客戶提案
需要在短時間內給客戶看幾個設計方向？用 Stitch 快速生成多個版本，匯出到 Figma 微調品牌元素後就能提案。
🧪 MVP 快速驗證
有產品想法想快速驗證？Stitch 可以在幾分鐘內產出看起來像真的 App 介面，搭配 Prototype 功能還能做成可互動的流程，適合早期使用者測試。
🔍 競品 UI 分析
截圖競品的 App 介面，上傳到 Experimental Mode，Stitch 會分析結構並生成類似但可編輯的版本，方便你拆解和學習其他產品的設計模式。
關鍵心態是把 Stitch 當作 加速器，而不是替代品。它處理的是佈局和結構的粗活，你負責品牌、細節、體驗策略這些 AI 做不到的事。
注意事項與限制
雖然 Stitch 的概念很吸引人，但它仍處於實驗階段，有幾個你需要注意的地方：
設計品質仍需人工精修——生成的 UI 比較接近中保真度（mid-fidelity）的 Mockup，而不是可以直接交付的成品。間距、對齊、圖示等細節通常需要在 Figma 中調整。
Experimental Mode 的 Figma 匯出限制——如果你用圖片上傳模式，生成的設計只能匯出 HTML/CSS，不支援 Paste to Figma。
無障礙設計不一致——生成的介面在色彩對比度和觸控目標大小方面不一定符合 WCAG 標準，需要手動檢查。
Google 有砍產品的歷史——雖然 Stitch 目前投入很多更新，但作為 Google Labs 實驗性產品，未來的存續不保證。建議重要的設計工作都匯出到 Figma 或程式碼存檔備份。
不支援動畫和進階互動——目前的設計輸出是靜態的，沒有 Micro-interaction 或動態效果。如果需要互動設計，還是得在 Figma 或 Framer 中處理。
重點整理
📝 重點整理
→
Google Stitch 是由 Gemini AI 驅動的免費 UI 設計工具，前身是 Galileo AI
→
支援文字 Prompt 和圖片上傳兩種輸入方式，可生成 Mobile 和 Web 介面
→
Standard Mode 速度快、可匯出 Figma；Experimental Mode 品質高、支援圖片
→
免費使用，Standard 每月 350 次、Experimental 每月 50 次
→
新增 Prototype 功能可串接多畫面建立互動原型，已整合 Gemini 3 模型
→
最佳用法是當作快速探索工具，搭配 Figma 做精修——加速器，不是替代品
延伸資源
🔗 Google Developers Blog — Stitch 發表文章
