前一段時間 Google 推出了一個超酷的免費 AI 工具，叫做 Stitch。它號稱只要用一句話，就能幫你設計出精美的 UI/UX 介面，而且甚至它生成的設計——可以直接匯出到 Figma！
這對於廣大的設計師和前端工程師來說，簡直是天降福音。今天，我們就來完整實測一下，看看這款由 Gemini 模型驅動的設計神器，到底有多厲害！
什麼是 Google Stitch？
簡單來說，Stitch 是一個使用 AI 來輔助 UI/UX 設計的免費工具。它背後由強大的 Gemini 模型（目前是 Gemini 2.5 Pro 與 Flash）驅動，可以根據你的文字描述，生成網頁或 APP 的介面設計。
但它最特別的地方在於，除了生成靜態圖片，它還支援：
- 一鍵複製到 Figma：這意味著你可以在 AI 生成的基礎上，無縫接軌到專業的設計流程中進行修改。
- 下載 HTML/CSS 程式碼：對於前端開發者來說，可以直接取得初步的程式碼，大大加速開發進程。
- 多種設計模式：提供「標準模式」(Flash) 與「實驗模式」(Pro)，後者生成的品質更高、細節更豐富。
實測開始：從零到一打造購物網站
廢話不多說，我們直接來實戰！我的目標是請 Stitch 幫我設計一個「簡約風格的購物網站」，需要包含首頁、商品詳細頁、購物車等頁面。
Step 1: 下達指令
我選擇了「標準模式」，因為只有這個模式目前支援匯出到 Figma。然後在對話框中輸入我的需求：
請使用日式簡約風格製作一個購物網站，須包含首頁、類別、商品、購物車、結帳、訂單總覽、訂單內容等頁面
按下 Enter 後，Stitch 會先跟你確認它理解的需求，並列出它準備要設計的頁面清單。確認無誤後，它就會開始生成。
Step 2: AI 生成介面
稍等一下，畫布上就會出現 Stitch 設計好的所有頁面！你可以透過 Ctrl + 滾輪 縮放、按住滑鼠中鍵拖曳，來檢視所有設計稿。
初步看來，標準模式生成的結果中規中矩，設計風格確實很簡約，但細節上比較基礎。
Step 3: 微調與修改
如果對某個部分不滿意怎麼辦？Stitch 提供了超直覺的修改方式！
例如，我對「商品詳細頁」的排版不滿意，我想讓商品圖片在左側，詳細資訊在右側。我只要點選這個 Frame，然後在對話框中輸入：
將商品圖片顯示在左側，商品詳細資訊顯示在右側。另外購物車頁面需要加上調整數量的功能。
Stitch 就會馬上根據我的要求重新生成一個新的版本！這個互動式的修改體驗真的非常棒。
實驗模式 Pro vs 標準模式 Flash
標準模式雖然實用，但設計感稍嫌不足。這時候就要請出「實驗模式」（使用 Gemini 2.5 Pro）了！我用完全相同的提示詞，讓它重新生成一次。
結果令人驚艷！
可以看到，實驗模式生成的介面品質完全是另一個檔次。無論是排版、配色、圖片的使用還是細節元素，都豐富且專業得多，更接近可以直接使用的設計稿。唯一的缺點就是，實驗模式生成的結果目前無法直接複製到 Figma。
殺手級功能：一鍵複製到 Figma
接下來就是最令人期待的功能了！我們回到標準模式生成的版本，在任何一個 Frame 上方，都可以找到「Copy to Figma」的按鈕。
點擊它，然後回到你的 Figma 專案中，直接按下 Ctrl + V 貼上…
奇蹟發生了！
整個設計稿，包含所有的圖層、元件、文字，都原封不動地被複製了過來！這意味著你可以在 Figma 裡自由地修改顏色、調整間距、更換字體，完全整合進現有的設計工作流。
前端開發者的神隊友？
除了設計師，Stitch 對前端開發者也非常友好。你可以直接下載包含 HTML 和截圖的壓縮檔。
更進階的用法是，搭配像是 Gemini CLI 這樣的工具，直接讓 AI 參考這些生成的 HTML 檔案，幫你修改現有專案的介面程式碼，實現從設計到開發的無縫銜接！
測試修改的網頁 - 輕鬆記帳:
https://jijun.the-walking-fish.com/
總結：值得一試的 AI 設計新夥伴
經過完整實測，我認為 Google Stitch 絕對是一款潛力巨大的 AI 設計工具。
- 對設計師而言：它是絕佳的靈感來源與快速原型工具，能幫你快速產出設計初稿，省去大量從零開始的力氣。
- 對前端開發者而言：它能快速生成介面與程式碼，是打造 MVP (最小可行性產品) 和 Side Project 的絕佳夥伴。
雖然它目前還有些限制（例如 Pro 模式無法匯出 Figma），以及產出的設計其實相對算式不穩定，例如每個設計頁的 Header 都長的稍微不一樣；但考量到它完全免費，並且背後有 Google 持續迭代，Stitch 絕對值得你立即加入書籤，並試用看看！
影片介紹
如果你想看更詳細的操作演示和 Pro/Flash 模式的比較，歡迎觀看我的 YouTube 影片！