Google 推出 Stitch AI 將手繪草圖轉化為可用應用程式介面

將一張餐巾紙上的草圖或一個粗略的想法轉化為一個可運作的應用程式界面,通常需要數小時的手動設計和前端編碼。Google 最新推出的 AI 驅動工具 Stitch,透過將自然語言提示或參考圖片直接轉換為功能齊全、可導出的 UI 設計,消除了這些瓶頸。Stitch 在 2025 年的 Google I/O 上被公佈,現時作為 Google Labs 的一個實驗版本提供,旨在為經驗豐富的開發者和設計新手簡化從概念到代碼的過程。

利用 AI 驅動提示生成 UI 佈局

Stitch 使用 Google 的 Gemini 2.5 Pro 和 Gemini 2.5 Flash 模型來解讀用戶輸入,快速生成複雜的用戶界面。開發者可以用簡單的英語描述所需的應用程式畫面,具體指明顏色主題、佈局偏好,甚至整體用戶體驗。對於已經有視覺方向的用戶,上傳線框圖、草圖或截圖可以讓 Stitch 以這些參考作為藍圖,在幾分鐘內產生多個界面變體。

這個 AI 驅動的工作流程解決了一個持久的問題:縮短初步設計想法與生產就緒代碼之間的鴻溝。用戶不需要費心從零開始建立每個 UI 元素和樣式,而是可以獲得一整套 HTML 和 CSS 代碼,並伴隨著視覺設計。這些代碼可以立即導出並在集成開發環境(IDE)中進一步修改,或者與團隊成員分享以便進一步迭代。

在 Figma 中導出和完善設計

Stitch 的導出選項超越了原始代碼。用戶只需點擊一下,即可將生成的設計直接發送到 Figma,這是業界標準的協作設計平台。這樣使得用戶可以輕鬆地打磨視覺細節、調整佈局,或與其他設計師合作,進行最終實施之前的調整。Figma 的導出功能確保即使初步的 AI 生成結果不完美,團隊也可以快速迭代,而無需從頭開始。

對於希望進行手動控制的開發者來說,Stitch 會暴露所有生成的前端代碼。這種透明度允許更深入的自定義,並無縫地整合到現有項目中,避免了黑箱 AI 工具不提供可編輯輸出的限制。

迭代編輯和即將推出的功能

Stitch 支持迭代設計,讓用戶在初步生成後微調元素。根據 Google 的說法,即將推出的更新將使用戶能夠通過截取想要變更區域的螢幕截圖,並對其進行標註以進行所需的調整。這種方法承諾使 UI 編輯變得更加直觀,特別是對於那些對傳統設計工具不太熟悉的用戶來說。

雖然 Stitch 加速了 UI 創建的早期階段,但它並不打算完全取代像 Figma 或 Adobe XD 等成熟平台。相反,它被定位為一種快速原型工具,特別適合於迅速生成初稿、實驗不同的外觀或在投入手動精煉之前獲取利益相關者的反饋。

Google Stitch 與其他 AI 編碼工具的比較

AI 驅動的應用程式開發市場迅速增長,像 Cursor、Cognition 的 Devin 和 Microsoft 的 GitHub Copilot 等工具提供代碼生成和自主工作流程。Stitch 通過專注於 UI 設計而脫穎而出,將視覺生成與代碼輸出和內置導出至設計平台結合起來。它對文本和圖像提示的支持,以及生成多個 UI 變體的能力,使其對需要快速迭代前端概念的團隊具有獨特的優勢。

然而,Stitch 的功能集是故意簡化的。它不旨在涵蓋設計和開發工作流程的全範圍,例如後端邏輯或高級動畫,而是專注於使 UI 創建的第一步更快、更容易。

Stitch 提供了一條從想法到界面的實用捷徑,讓團隊能夠跳過重複的設置工作,專注於完善用戶體驗。隨著 Google 繼續擴展其功能,Stitch 有望成為任何希望以最小摩擦從概念轉向可點擊 UI 的首選工具。


Henderson
Henderson 主要擔任「炒稿記者」的職責,以翻譯最新科技,手機 電動車等消息為每天的工作。