大家好，我是言川。

最近，AI + 設計方向的新品是一個接一個地發，感覺這是要把設計師往絕路上逼啊……

谷歌開發者大會回顧：

就在昨天，Google 在開發者大會上丟出一個重磅炸彈——全新的 AI 工具：Google Stitch。

簡單來說，Google Stitch 是一款由 AI 驅動的 UI 設計工具，能根據你的自然語言描述，自動生成高質量的網頁和移動端界面。不止如此，它還支持直接導出 HTML/CSS 代碼，甚至可以一鍵粘貼進 Figma，實現從原型到上線的無縫銜接。

我就問一句：Figma 慌不慌？

Make 那邊還捂著不讓大家玩，結果 Google Stitch 直接全量開放給用戶使用了，地址甩這：

https://stitch.withgoogle.com/

這款工具提供了兩種模式可選，分別是 Standard Mode 和 Experimental Mode：

1. Standard Mode：基于 Gemini 2.5 Flash 模型，可以快速生成設計，并且支持直接導出到 Figma 進行后續編輯。
2. Experimental Mode：基于更高級的 Gemini 2.5 Pro 模型，重點亮點是——支持“圖生圖”功能。

接下來，我就帶大家一起實測這兩個模式的表現。

首先是 Standard Mode。打開 Google Stitch 后，我們只需要輸入提示詞，并選擇生成的界面類型（支持移動端和網頁端）。根據我的測試經驗，目前使用英文提示詞的穩定性更高一些，輸出結果也更符合預期。

Prompt：
Design a modern and user-friendly fitness mobile app interface. The app should feature a bottom navigation bar with four tabs:

• Home: Display a dashboard summarizing daily workout progress, calories burned, and quick access to personalized workout plans.
• Workouts: Provide a list of workout routines categorized by type, duration, and difficulty, allowing users to select and view detailed instructions.
• Shop: Feature fitness-related products such as apparel, equipment, and supplements, with options to filter and search items.
• Profile: Show user information, workout history, achievements, and settings.

生成出來的界面，風格非常 Google 味兒，大概率是用它自家的開源 UI 組件庫訓練出來的結果。不過說真的，Standard Mode 的生成速度相當快，這點確實得益于背后的 Gemini 2.5 Flash 極速模型。

另外，頁面右上角還有一個小細節值得一提：“Edit theme” 功能。它可以自定義主題色、色系風格、圓角半徑，甚至字體樣式——也就是說，你能在生成基礎上，快速做一輪主題微調。

比如說，我想把整體配色調成黃色主題，同時希望界面里的卡片圓角小一點，那就可以這樣設置：

最終生成的效果是：在不改變頁面結構的前提下，重新應用了我設置的主題色和卡片圓角。

也就是說，Google Stitch 能在已有基礎上做定向調整，而不是每次都從頭生成，這點我覺得非常實用。這種“保留已有設計 + 局部微調”的能力，真的值得其他 AI 工具好好學學。

使用 Standard Mode 生成的頁面，在頂部會有“Figma”的按鈕，點一下就可以就可以復制。

然后你可以直接在 Figma 的畫布中“Ctrl+V”，粘貼進來。

界面中的每個組件、文字、圖片都給你分層好了，你可以正常的編輯修改。

甚至是“Auto Layout”這種自動布局都給你打好了。

還有圖標的排列布局，我就一個感受，規范！！！ 要知道這可是從 Google Stitch 復制進來的界面啊。

除此之外，Google Stitch 其實也支持中文語言的切換，不過這個指令極其不穩定。

也就是會出現我這種情況。本來我是想通過一個案例來跑完整個操作流程的，但它給我卡在這了......

我用之前跑成功的案例，首先是英文版的 UI 界面長這樣：

然后我給他輸入了提示詞：

Prompt：Switch all product copy and button text to Chinese.

中文字轉換的沒一點毛病，然后把他們全復制進 Figma 中，中文字可以直接改。

移動端的案例就到這，我是推薦你們去玩玩的，現在還是 Beta 免費用，此時不玩更待何時。

再測試個后臺管理系統。回到首頁，輸入提示詞，并選擇將選項設置為“Web”。

提示詞用 ChatGPT 寫的，生成提示詞的指令是：“我要用 Google Stitch 生成健身后臺管理系統的界面，給我提示詞”。

Prompt：Design a modern and user-friendly fitness admin dashboard interface. The dashboard should include the following key modules:

• Dashboard Overview: Provide a summary of key metrics such as total members, active memberships, class attendance rates, and revenue statistics, displayed through interactive charts and graphs.
• Member Management: Allow administrators to view, add, edit, and delete member profiles, including personal information, membership status, and activity logs.
• Trainer Management: Manage trainer profiles, schedules, specialties, and performance metrics.
• Class Scheduling: Enable scheduling of fitness classes, assigning trainers, setting class capacities, and tracking enrollments.
• Payment Processing: Monitor and manage payment transactions, membership fees, and generate financial reports.
• Notifications and Announcements: Create and distribute announcements to members and staff, with options for scheduling and targeting specific groups.
• Settings: Configure system preferences, user roles, permissions, and other administrative settings.

Google Stitch 按照 Prompt 生成了 6 張頁面，超級簡潔。

全部界面展示：

復制到 Figma 中，界面中的曲線給你的也是路徑，而不是一張圖......

換個暗色系的主題玩玩，選擇“Dark”，修改下按鈕顏色以及卡片圓角幅度。

也就 10 秒左右，就完成了 6 張圖的主題更換。

在生成圖的頂部，還有個“Edit”，這個功能就等于，你可以單獨的對這張圖進行修改。

點擊“Edit”，它會將這張圖片發送到提示詞輸入框中，然后你可以輸入你的修改指令，這次直接用中文指令試試：

Prompt：我需要在頂部導航欄中加一個搜索框。

說實話，上午測的時候是可以的，下午再測就不行了。

Google 這次發布的產品，真就有地域、語言的限制，大語言模型早就已經進化到多模態了，不可能聽不懂中文。

那就換成英文提示詞吧：

Prompt：I need to add a search box in the top navigation bar.

頂部的搜索欄中已經添加了搜索框，并且他還重新修改了頂部標簽的布局，這種動態的調整我覺得是做的非常好的，總之就是嚴格遵循了 UI 設計中的規范。

不過，這個案例中出現了點小問題：我原本是想編輯之前那套暗色系的界面，結果它直接給我換成了淺色主題。

這也不能怪它，畢竟現在的 Google Stitch 還處于 Beta 階段，有點小 BUG 很正常。

再換個官網設計的需求，輸入提示詞：

Prompt：Design a modern, responsive fitness website featuring a homepage with a compelling call-to-action, sections for classes, trainers, membership plans, testimonials, and a contact form.

上述是用 Standard Mode 生成的，接下來用 Experimental Mode 測試下。

Experimental Mode 使用的是 Gemini 2.5 Pro，在生圖速度上慢于 Standard Mode，支持圖生圖，但目前還不能復制到 Figma 中以及不能修改主題顏色等功能。

先用文生圖測試下效果，選擇 Experimental Mode，跑個移動端的案例。

Prompt：Design a sleek, user-friendly shoe-selling mobile app featuring a homepage with promotional banners, product listings with filters (brand, size, price), detailed product pages with images and reviews, a shopping cart, and a secure checkout process.

生成的效果表現極其出色，畢竟 Gemini 2.5 Pro 目前是 Google 最強大的模型。

再試試圖生圖，這次我直接給它扔一張 UI 圖，讓它完全按照參考圖的風格和內容進行生成。

Prompt：Please analyze the uploaded UI design image and generate a new app interface that closely mirrors its style and layout. Maintain the same color scheme, typography, iconography, and overall aesthetic. Ensure that the new design includes equivalent components and follows the same structural hierarchy as the reference image.

這個模式的體驗，更像是 Midjourney 或 GPT-4o 那類圖像生成模型——輸出的只是 一張圖片，而不是可以直接編輯的設計源文件。

相比之下，它的實用性確實不如 Standard Mode，目前來看，更適合用來做設計參考或靈感圖。

以上就是本期分享的全部內容。

整體來看，它確實展現了 Google 在 AI + 設計領域的技術野心，尤其是 Standard Mode，不論是生成速度、可編輯性，還是跟 Figma 的銜接體驗，都很有實用價值。

當然，Experimental Mode 雖然還略顯“半成品”，但也能看出未來圖生圖方向的潛力。

目前 Stitch 還處于 Beta 階段，問題在所難免，但如果 Google 肯持續打磨下去，這玩意真可能會成為設計師工作流里的一個強力工具。

如果你想學習 AIGC，可以加入我主理的《優設 AI 俱樂部》，俱樂部內沉淀有 2000+ 優質 AI 學習資料，涵蓋 AI 繪畫、AI 視頻、AI 提示詞、AI 工具庫、AI 商業設計案例、研究報告......

也可以點擊鏈接： https://wx.zsxq.com/group/15288828142182