[ Google Lab ] Google Stitch：Google 對於 UI/UX 的 AI 全新體驗模式 (Google I/O 2025系列報導)

想像一下，過往在做 Prototype 設計，可能會花費非常多時間進行繪製，但是，如果今天只要用幾句話描述，甚至上傳一張手繪草圖，AI 就能在幾分鐘內幫你生成精美的 App 介面和可用的程式碼。這是 Google 在 Labs 裡面所推出的實驗性工具 — — Google Stitch。Google Stitch 平台在網路上引發了熱烈討論，讓我們一起來深入了解！

Stitch AI 的崛起：UI 生成工具

Stitch AI 是一款來自 Google Labs 的實驗性工具，於 Google I/O 2025 大會上發布，旨在彌合設計與開發之間的鴻溝。它能將自然語言提示、草圖和螢幕截圖轉換為複雜的 UI 設計及可用的前端程式碼（HTML/CSS、JSX）。

Google Stitch UI Interface

2025 年 Google 在 Google IO 上宣布收購了 Galileo AI，隨後將其品牌重塑並演進為 Google Stitch。Google 為 Stitch 設下的使命是解決傳統「設計到程式碼」工作流程中固有的「手動工作和反覆溝通」問題，並打造一個更流暢、整合的流程。

目前，Stitch 作為 Google Labs 的一部分免費提供，使用者可透過 stitch.withgoogle.com 網址並使用 Google 帳戶登入。值得注意的是，該服務設有使用限制，例如標準模式每月最多可生成 350 次，這為使用者設定了實際的期望值。

第二部分：Stitch AI 的運作機制

本部分將從「它是什麼」轉向「它如何運作」，為後續的實踐與分析部分奠定技術基礎。

核心技術與架構

Stitch 的核心由 Google 的 Gemini 2.5 Pro 和 Gemini 2.5 Flash 模型驅動。這些是多模態模型，能夠理解並處理文字、圖像和視覺結構的組合。

其生成過程可推斷為 2 個階段：

1. 意圖解析：AI 分析輸入（提示或草圖）以理解使用者意圖、上下文和所需元件。
2. 程式碼與設計渲染：這個抽象結構隨後被轉譯為特定的前端程式碼（如 HTML/CSS）和視覺設計，並應用設計原則、元件層級和樣式。

在多模態應用方面，該工具能處理不同類型的輸入：透過自然語言處理描述，並利用 Gemini 的視覺辨識能力分析草圖或螢幕截圖，識別按鈕、文字欄位等元素，以生成匹配的數位版本。

雙模式運作：標準模式 vs. 實驗模式

Stitch 提供了兩種工作模式，以應對不同的設計需求。

標準模式 (Standard Mode)

• 模型：Gemini 2.5 Flash ，為速度進行了優化。
• 輸入：主要基於文字提示。
• 關鍵功能：支援「複製到 Figma」功能。
• 使用場景：最適合快速構思、迭代，以及需要將設計交付至 Figma 進行優化的工作流程。

實驗模式 (Experimental Mode)

• 引擎：由更強大的 Gemini 2.5 Pro 驅動，旨在提供更高保真度、更具創意的輸出。
• 輸入：支援多模態輸入，包括上傳手繪線框稿、草圖和螢幕截圖。
• 使用限制：限制極低，據稱為每月 50 次生成。
• 關鍵限制：目前不支援「複製到 Figma」功能
• 使用場景：非常適合將現有的視覺概念轉化為精緻的數位設計和程式碼。

使用者對這兩種模式的回饋呈現分歧。雖然有些人認為實驗模式令人印象深刻，但其他人則覺得它緩慢、不穩定且容易錯誤，但我認為，作為初步 Prototype 的設計模式，我認為此平台已經可以做到很好的發揮。

第三部分：實踐者指南：善用 Stitch AI

本部分將研究中的各種教學和指南整合成一份連貫、可操作的新手手冊。

提示的藝術：有效溝通指南

• 從宏觀到微觀：建議使用者從一個高層次的概念開始（例如「一款為中華職棒棒球比賽賽程表所設計的應用程式」），然後透過具體、漸進的修改進行迭代（例如「在首頁的標頭中新增一個搜尋欄」）。這與 AI 的最佳表現方式相符。
• 形容詞與氛圍的力量：解釋如何使用描述性形容詞（如「充滿活力且鼓舞人心」、「極簡且專注」）來影響整體主題，包括顏色、字體和圖像。
• 具體化並使用 UI/UX 關鍵詞：強調清晰度的重要性。使用行業標準術語，如「行動呼籲按鈕（call-to-action button）」、「卡片式佈局（card layout）」、「導航欄（navigation bar）」和「主視覺區（hero section）」。根據範例為常見頁面（如登入、儀表板、產品頁面）提供Prompt Template。

中華職棒棒球比賽賽程表所設計的應用程式 範例

匯出與整合資產

• Figma 整合：

1. 詳細說明流程：點擊「複製到 Figma」按鈕（僅限標準模式），打開 Figma，然後貼上。
2. 分析 Figma 檔案的品質。它並非靜態圖像，而是以包含巢狀圖層和自動佈局（Auto Layout）的方式導入，使其可編輯。然而，評論指出圖層結構通常很混亂，且包含遠超實際需要的圖層，需要大量清理。

• 程式碼匯出：

1. 使用者可以直接從介面複製生成的 HTML/CSS 或 JSX 程式碼。
2. 評估程式碼品質。一些評論稱讚其「乾淨」且「可用於生產」，具有良好的性能指標和自動化的無障礙標籤（ARIA）。其他人則認為它需要手動修復，例如在 IDE 中重新縮排 或進行大量補救工作才能真正使用。

• 交付工作流程：描述團隊如何使用此功能：在 Stitch 中生成基礎，將程式碼複製到像 Cursor 這樣的 AI 原生編輯器中，然後使用另一個 AI 來實現邏輯並修復佈局問題。

在當前形式下，Google Stitch 最有效的用途並非作為一個獨立的端到端解決方案，而是作為「AI 工具鏈」中的第一步。使用者首先在 Stitch 中生成基礎設計，然後將相關的 UI/UX 匯出到另一個工具進行需求解析，接著可能使用另一個 AI 工具（如 Gemini CLI）或後端服務（如 Firebase Studio）來添加邏輯。這揭示了一種新興的開發模式：將專門的 AI Agent串聯起來。Stitch 是「UI 專家」，Gemini CLI 是「程式碼優化師」，而 Gemini 則是「邏輯/後端專家」。這意味著未來的開發可能更多地涉及協調一個 AI Agent 團隊，而非使用單一的巨型工具。

結論分析與戰略建議

總結來說，Google Stitch AI 是一款強大、充滿潛力的實驗性工具。它代表了一種重要的典範轉移，但目前最適合非設計師進行快速、低保真度的構思和原型設計，或作為專業人士的「初稿」助手，前提是他們準備好對其輸出進行大量修改。

• 對利害關係人的建議：

1. 對於 UI/UX 設計師：將其視為構思創意的助手，而非替代品。專注於提升策略、使用者研究和系統思維的技能。將提示工程作為一項新的核心能力來學習。
2. 對於開發者：用它來快速生成內部工具、管理後台或 MVP 的樣板 UI，但要準備好為生產系統重構程式碼。
3. 對於產品經理與創辦人：利用它進行快速的視覺溝通和與利害關係人驗證想法，但不要將其輸出誤認為是可投入生產的、專業設計的產品。

 

 

/政府網站營運交流平台授權轉載/

原文作者：Simon Liu

原文出處：[ Google Lab ] Google Stitch：Google 對於 UI/UX 的 AI 全新體驗模式 (Google I/O 2025系列報導)