---
title: "Google Stitch 教學：用 AI 生成 UI 設計的免費工具，完整功能介紹與操作指南"
slug: google-stitch-ai-ui-design-tutorial
url: https://rar.design/posts/google-stitch-ai-ui-design-tutorial
published_at: 2026-03-16
modified_at: 2026-05-05
author: "設計師 Riven"
category: "AI 設計"
access: public_access
---

# Google Stitch 教學：用 AI 生成 UI 設計的免費工具，完整功能介紹與操作指南

> Google 推出的 AI UI 設計工具 Stitch，用文字或圖片就能生成介面設計和前端程式碼，還能一鍵匯出到 Figma。

By **設計師 Riven** - 資深數位產品設計師｜知名線上課程講師 | 2026-03-16

📌 目錄01 Google Stitch 是什麼02 核心功能介紹03 兩種 AI 模式比較04 使用步驟教學05 Prompt 撰寫技巧06 匯出與 Figma 整合07 Prototype 互動原型功能08 免費方案與使用限制09 設計師怎麼用 Google Stitch10 注意事項與限制11 重點整理🚀 想掌握更多 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 就像是把設計師和前端工程師的前期工作濃縮進一個對話框裡。你描述你要什麼，它幫你生出來。▲ Google Stitch 的 New Design 介面——右上角可切換模式，下方選擇 Mobile 或 Web 版型傳統 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 模型。選哪個取決於你的需求：▲ Experimental Mode 介面——除了文字輸入，還多了圖片上傳按鈕，下方提供 Prompt 範例參考 Standard ModeExperimental ModeAI 模型Gemini 2.5 FlashGemini 2.5 Pro生成速度⚡ 快速較慢（約 90 秒）輸入方式僅文字 Prompt文字 + 圖片上傳設計品質中等保真度高保真度Figma 匯出✓ 支援✗ 不支援每月配額350 次50 次適用場景快速探索、大量迭代精細設計、圖片參考2025 年 12 月的更新中，Google 為 Stitch 整合了 Gemini 3 模型，進一步提升了 UI 生成品質。如果你在介面中看到 Google 3 Pro 的選項，建議優先選擇它。使用步驟教學Google Stitch 的操作門檻很低，只需要一個 Google 帳號就能開始。以下是完整的操作步驟：▲ 在輸入框中寫好詳細的 Prompt 後，按下右下角「Generate designs」即可開始生成1前往 Stitch 官網打開 stitch.withgoogle.com，用你的 Google 帳號登入。你會看到主控制台，上面有最近的專案和範例可以瀏覽。2選擇模式與版型點擊「Start a new design」，選擇 Standard 或 Experimental 模式，然後決定是要做 Mobile（手機）還是 Web（網頁）版型。根據實測，Stitch 在手機介面的生成效果比網頁好。3輸入 Prompt 或上傳圖片在輸入框中描述你想要的介面。盡量具體——包含 App 類型、功能頁面、配色偏好、目標使用者等資訊。如果是 Experimental Mode，可以直接上傳草稿或截圖。4生成並檢視結果按下「Generate designs」後，Stitch 會在 60-90 秒內生成介面。你可以看到多個設計變體，點擊任一個檢視細節。5用對話方式迭代修改對生成的設計不滿意？在聊天介面中輸入修改指令，例如：「把背景改成深色」「增加底部導航列」「圖表用圓餅圖」，Stitch 會即時更新。6匯出設計滿意後可以選擇「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 MODE350 次/月Gemini 2.5 FlashEXPERIMENTAL MODE50 次/月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 用 Experimental Mode 生成的 Crypto App UI——包含資產分佈圖、漲跌排行、新聞動態等完整佈局，約 90 秒產出注意事項與限制雖然 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 Stitch 官方網站🔗 Google Developers Blog — Stitch 發表文章🔗 Stitch × Gemini 3 更新公告🔗 Stitch 官方 Prompt 指南🔗 Framer — 進階互動設計替代方案線上課程 🎨 UI 設計想更深入學 UI 設計？Google Stitch 幫你快速產出 UI，但要做出真正好用的介面，你需要扎實的 Figma 設計基礎。這堂課帶你從零掌握 UI 設計的核心技能。了解 Figma 課程 →訂閱制 ✨ AI × 設計趨勢AI 設計覺醒｜RAR 設計攻略訂閱方案AI 工具每週都在更新，我幫你過濾雜訊，只整理對設計師真正有用的 AI 應用。✦ AI 工具實測與工作流分享✦ 設計師角度的 Prompt 技巧✦ 每週精選 AI × 設計新知了解訂閱方案 →