Google Stitch 生成 UI 介面設計，加速產品原型開發與協作

2025/10/18 更新2025/10/16 發佈閱讀 6 分鐘

工具網址：https://stitch.withgoogle.com/

Stitch 於2025年5月在Google I/O開發者大會上正式發布，標誌著Google在AI輔助設計領域的重大投入。推出Stitch的背景可追溯到其對設計到開發工作流程痛點洞察。傳統上，設計師需要在Figma等工具中創建視覺設計，然後與開發者進行多輪溝通才能將設計轉換為程式碼。這個過程不僅耗時，還容易產生溝通誤解和實現偏差。因此，藉由快速生成原型可加速驗證產品概念。

STEP1：使用LLM來建立一份完整產品需求文件

由於是生成整個專案原型，建議先建立一份完整產品需求文件。讓AI可以釐清整個原型功能與系統架構，再來劃分每一頁的功能畫面。本文示範採用ChatGPT GPT-4o mini模型。即便是免費帳號，也可以選擇「深入研究」在輸入提示詞。其他LLM都均可生成產品需求文件（Product Requirement Document）。

Prompt：「我目前想開發一款App產品，可以偵測並定位流浪貓狗。使用者可以透過手機攝影方式來即時辨識貓狗資料，透過手機定位與上傳圖片來建立定位流浪貓狗。並且平台提供領養媒合機制。盼能解決走失寵物的協尋、增加線上領養功能來減少流浪動物數量過多問題，也減少志工人力資源。請幫我擬定一份PRD產品需求文件」

ChatGPT使用「深入研究」會需要再進一步補充資訊。

〈流浪動物辨識與領養媒合App 產品需求文件 PRD〉

STEP2：根據PRD生成使用者介面設計的提示詞

Prompt：「根據以上的PRD文件，給予生成式AI可生成整個App使用者介面設計的詳細描述的提示詞。」

〈流浪動物辨識與領養App介面設計生成提示詞〉

STEP3：使用Stitch來生成介面

從生成好的提示詞，逐一複製貼上到 Stitch 「描述設計內容」對話欄位中。左下角可調整工作區背景顏色。

Prompt：「此畫面為App的主頁/主選單，用於快速進入各主要功能，如動物辨識、地圖搜尋、領養資訊、走失協尋等。界面採用現代極簡風格，並以溫暖柔和的配色（例如淺橙或米色）營造友善親切的氛圍。畫面上包含底部導航欄或大型圖示按鈕，每個圖示對應主要功能，讓用戶一目了然地選擇功能。此設計適用於手機介面。Smartphone app home screen UI design, modern minimalist layout, warm pastel color palette, bottom navigation bar with playful animal icons (camera, map, heart, search) for core features, flat style, user-friendly and intuitive」

目前編輯功能陽春，主題配色只能選主色，但也無法指定哪些部分配色。

可在既有介面設計去迭代不同版面

生成結果可以像 Figma 一樣並列在一個工作區域，可惜目前無法像預告影片中可將設計檔匯入 Figma中，但相信日後應該可以。但 Figma 本身也有 Figma make 作為生成介面功能。

Stitch 生成介面設計

〈Stitch 生成介面設計〉

Figma make 生成後可複製至 Figma 中修改

Figma Make 生成的首頁介面

根據 Google 產品經理 Kathy Korevec 說明，Stitch 並非要取代 Figma 等專業設計平台，而是作為輔助工具，協助快速完成初步的迭代設計。

快速原型製作：像是產品經理可以在會議中即時生成UI原型，驗證產品概念。
教育與培訓：Stitch 為學習UI/UX設計的學生提供了實踐工具。可以通過自然語言描述自己的設計構想，快速看到視覺化結果，加速設計概念的理解。
跨團隊協作：對於非設計背景的團隊成員如工程師、產品經理、甚至客戶都可以通過簡單的文字描述表達自己的想法，促進跨職能協作。

STEP4：可下載為 html 網頁

可由左上漢堡選單下載全部，或是選取單一頁面下載該頁面html

網頁結構更為簡潔單純 html 語法與 tailwindcss.js 構成。相比 Gemini 生成的網頁 tsx 是 React 框架，更便於日後擴充功能與進一步修改。

心得：

近日無論是生成介面還是 Vibe Coding 的 AI工具功能都日益強大，非設計背景團隊甚至客戶也能藉此，在開會討論後立即生成或修改設計來對齊認知。但現階段 AI 生成出來介面，對於專業設計來說，其視覺介面仍然非常糟糕，更無考量到使用者體驗。還需要藉由使用者的美感與品味，不斷的來回調整。如此這般藉由反覆不同提示詞與不斷選擇優劣，對 AI 來說亦是一種訓練。訓練日後能產生更到位的視覺品質與美感。

相關資料：

含 AI 應用內容