Google Stitch — 用 AI 從描述直接生成 UI 設計稿
Google Stitch 是 Google Labs 推出的 AI UI 設計工具。輸入一段文字描述、一張手繪草圖或一張截圖，它就能產生可編輯的介面設計稿，同時輸出前端程式碼，也能貼進 Figma 繼續修改。它最大的價值不在「取代設計師」，而是把「想法 → 第一版可討論的畫面」從數小時縮短到數分鐘，讓產品團隊在寫程式
Google Stitch 是 Google Labs 推出的 AI UI 設計工具。輸入一段文字描述、一張手繪草圖或一張截圖，它就能產生可編輯的介面設計稿，同時輸出前端程式碼，也能貼進 Figma 繼續修改。它最大的價值不在「取代設計師」，而是把「想法 → 第一版可討論的畫面」從數小時縮短到數分鐘，讓產品團隊在寫程式前就能用真實畫面對齊需求。 Google Stitch 是什麼：從文字描述到 UI 設計稿 Stitch 在 2025 年 Google I/O 正式亮相，定位是「從想法到 App」的介面生成工具。依照 「Stitch 於 2025 年 5 月 Google I/O 發表，由 Gemini 2.5 Pro 與 Gemini 2.5 Flash 模型驅動」（來源：Google Developers Blog） ，它的核心是 Gemini 多模態模型：能讀文字，也能讀圖片。 Stitch 處理的是產品開發中最費時的「第一版」階段。傳統流程要先畫線框圖、再做視覺稿、再交給工程師切版，每一步都要來回溝通。Stitch 把三個步驟壓成一次生成：描述需求，拿到設計稿與程式碼，再逐步修改。 Stitch 目前透過官方網站 stitch.withgoogle.com 提供服務，用 Google 帳號登入即可使用，仍屬 Google Labs 實驗性產品。使用額度與模式會隨版本調整，實際上限以登入後介面顯示為準。 三種輸入方式 文字提示 ：例如「一個健身追蹤 App 的首頁，深色主題，顯示今日步數、卡路里與本週趨勢圖」。 圖片輸入 ：上傳手繪草圖、白板照片、線框圖或競品截圖，Stitch 會依版面結構重建成數位 UI。 既有設計規則 ：匯入設計系統或品牌規範，讓產出符合既有風格（見下方 DESIGN.md 說明）。 2025–2026 年的關鍵更新 Stitch 從發表到現在經歷了三次重要升級，每一次都擴大了它在工作流程中的涵蓋範圍。了解這些更新，才能判斷它現在適合用在哪個階段。 Gemini 3 與 Prototypes 原型功能 導入 Gemini 3 之後，Stitch 能從靜態畫面做到可互動的流程原型。根據 Google 官方部落格的 Stitch Gemini 3 更新公告 ，新增的 Prototypes 功能可以把畫布上的多個畫面「縫合」起來，模擬點擊跳轉與完整的使用者流程。這讓 Stitch 從「單頁生成器」變成可以展示註冊、結帳這類多步驟流程的工具。 DESIGN.md 開源格式 DESIGN.md 是一種讓 AI 代理人讀得懂的 Markdown 設計規範檔。Google 已將它的 草案規格開源 ，用來在 Stitch 和其他設計、程式工具之間匯出或匯入色彩、字級、間距等設計規則。實際效益是：同一套品牌規範可以同時餵給 Stitch 和寫程式用的 AI 助手，減少「設計稿和上線畫面長得不一樣」的落差。 即時共同設計（Vibe Design） 2026 年 5 月的更新把 Stitch 變成可即時對話的設計夥伴。 「2026 年 5 月 19 日起全球使用者可用語音或文字即時引導 Stitch Agent 修改設計」（來源：Google 官方部落格） ，生成過程會直接串流到畫布上，使用者不必等整份結果出來，中途就能修正方向。同一次更新也加入透過 Google AI Studio 產生分享連結、匯出到 Google Antigravity 接後端邏輯，以及透過 Netlify 直接發佈網頁。 為什麼現在值得關注：AI 設計工具的採用數據 設計與開發者已普遍使用 AI 工具，但對產出品質仍有明顯保留，Stitch 的定位正好落在這個落差上。以下三組數據說明了現況： 「78% 的受訪者同意 AI 顯著提升工作效率，但只有 32% 表示能信賴 AI 的產出」（來源：Figma 2025 AI Report） 「認為 AI 提升工作品質的比例，設計師為 40%，開發者為 68%」（來源：Figma 2025 AI Report） 「84% 的開發者正在使用或計畫使用 AI 工具，高於 2024 年的 76%」（來源：Stack Overflow 2025 Developer Survey） 「效率高、信任低」的差距顯示，AI 設計工具目前最合理的用法是產出草稿與探索方向，而不是直接交付成品。Stitch 的設計也反映這一點：產出可以貼到 Figma 繼續編修，也可以匯出程式碼讓工程師重構，一開始就預設要有人接手修改。 實際操作流程：從提示詞到可交付檔案 一次完整的 Stitch 工作流程可以分成五個步驟，關鍵在第二步的提示詞寫法。 選擇平台 ：先指定行動版（Mobile）或網頁版（Web），版面邏輯會完全不同。 撰寫結構化提
相關工具書
由 FeiYueh 親自審稿驗證 · 最後更新於 2026-10-26. Independently maintained — not AI-generated boilerplate.
← Back to Blog