Google I/O 2025 上，Google 推出了名為 Stitch 的全新 AI 工具，目標是用文字或圖片提示（prompt / image prompt）快速生成網頁與 App 的 UI 設計與前端程式碼。Stitch 結合 Gemini 2.5 Pro 與 Flash 模型，並支持 Figma 匯出與 IDE 編輯，雖不是要取代專業設計工具如 Figma，但它能大幅簡化設計初期流程，是設計師與前端開發者的新利器。以下詳細介紹功能、優勢與使用心得。
內容目錄
功能特色與技術細節
- 從文字或圖片提示產生 UI + 前端程式碼
- 用戶可以用簡單的中英文描述(這真的是google模型的好處)，例如「建立一個深色主題的行動 app 登入頁面，有按鈕和表單欄位」來生成設計。
- 或者上傳草圖、線框圖（wireframe）或其他 UI 的範例圖片來作為參考。Stitch 會根據這些提示產生對應設計。
- 整合 Gemini 2.5 Pro／Flash 模型 + 主題與設計流程工具
- Stitch 是由 Google Labs 實驗性專案（experimental tool）之一，背後運行的是 Gemini 2.5 Pro 模型，這使得生成的 UI 設計在色彩、佈局與細節上更乾淨與現代感。
- 提供主題（theme）選擇、樣式（style）調整等交互功能；可視化設計流程內建 Canvas，可以看到完整頁面流程與介面切換模式。
- 輸出與匯出支持：HTML/CSS/Figma 等
- Stitch 可以匯出為 HTML / CSS 程式碼，讓開發者能夠「拿來就用」於前端專案當中。
- 同時有「Paste to Figma」或「Copy to Figma」功能，可將設計匯入 Figma 進行進一步編輯。
Stitch 的定位與比較優勢
- 輔助工具，而非全面取代設計平台：Stitch 的設計是為了縮短「從構思到原型 UI +程式碼」之間的落差，而不是完全取代專業設計師在 Figma、Sketch、Adobe XD 等工具中的工作。設計師仍可用這些工具做精細調整。
- 速度與效率：使用 Stitch 生成 UI 設計／前端程式碼所需時間比從零開始設計加寫碼快很多，對於初期原型與快速驗證需求特別有用。
- 可訪問性：Stitch 在 Google Labs 平台上可用，用戶界面相對友好，降低新手與非設計背景者的進入門檻。
限制與要注意的地方
- 雖然 Stitch 支持匯出至 Figma，但某些情況（如從上傳圖片/草圖的模式）之下，Figma 匯出功能尚未全功能完善。
- 設計細節（例如文字對齊、某些複雜元件組件化）有時候不完美，需要人工修正。
- 現階段仍為實驗性／預覽模式（experimental / Labs），可能在某些瀏覽器支援或功能穩定性上有差異。
使用流程簡易指南
- 前往 Stitch 官方網站（stitch.withgoogle.com）並登入 Google 帳號。
- 選擇撰寫 prompt 或上傳參考圖片／草圖／線框圖。描述顏色、風格、佈局等細節。
- 等待 Stitch 生成 UI 設計與初步程式碼（HTML/CSS）。
- 若要匯出至 Figma，可使用「Copy to Figma / Paste to Figma」功能以便進一步編輯。
- 若為開發者，可直接取出 HTML/CSS 並嵌入 IDE 或網頁專案中。
Google Stitch 的收費／使用限額情況
從目前公開資訊來看，Google Stitch 屬於 Google Labs 的實驗性工具（beta 或公測階段），目前是免費使用，但有一些使用次數與模式上的限額／差異。下面是具體情況：
| 模式 | 免費與否 | 每月生成次數限額 |
|---|---|---|
| Standard Mode（Flash 模式） | 免費 | 每帳號每月約 350 次生成 │ 適合一般快速原型與草圖生成，可匯出 Figma 或 Code。 |
| Experimental Mode（實驗／Pro 模式） | 免費 | 每帳號每月約 50 次生成 │ 使用更強的 Gemini 2.5 Pro 模型；目前部分功能（如匯出 Figma）或效能有些限制。 |
參考資料
近期留言