Google Stitch 2026 更新：從 AI UI 生成器到設計 Agent 工作流程

如果你之前接觸過 Google Stitch，可能會把它理解為一個簡單的 AI UI 生成器：輸入自然語言，生成網頁介面，再匯出前端程式碼。

從 2026 年公開的產品資料和 Google Labs 相關開源專案來看，Stitch 的價值正在向更完整的設計工作流程擴展：它不只回答「頁面應該長什麼樣」，還開始幫助團隊組織多個頁面、表達設計系統，並把設計脈絡交給 Coding Agent。

需要先說明一個容易混淆的邊界：Stitch 網頁產品、Stitch MCP/SDK，以及 google-labs-code/stitch-skills 並不是同一個層次的東西。 本文將把產品能力和擴展工作流程分開介紹；對於公開資料尚未明確說明為 Stitch 內建的能力，會標註為 Skills 或生態系整合能力。

一、2026 年 Stitch 的能力地圖

把重複能力合併後，2026 年值得關注的方向可以歸納為五類：

能力方向	代表能力	解決的問題
AI 原生設計工作台	Canvas、持續編輯、Design Agent 工作流程	從一次生成頁面變成持續探索設計
產品流程與 Prototype	多頁面、User Flow、互動原型	從單個 Screen 擴展到完整產品體驗
Design System 與設計脈絡	Design System、`DESIGN.md`	讓多頁面保持一致，並讓 Agent 理解設計意圖
Design ↔ Code	Code-to-Design、HTML、截圖和程式碼匯入	讓既有程式碼和設計能夠雙向流動
Coding Agent 整合	MCP、SDK、Stitch Skills	把 Stitch 接入 Claude Code、Cursor、Codex 等工具

這五類能力共同指向一個變化：Stitch 不再只適合生成一個孤立的頁面，而是更適合用來探索產品方向、整理設計脈絡，再交給開發工具實作。

二、從 UI 生成器到 AI 原生設計工作台

Google 在 Introducing “vibe design” with Stitch 中將 Stitch 描述為 AI-native software design canvas。這個定位變化比「生成效果更好」更重要，因為它把設計過程從一次性輸出變成了可以持續修改的工作空間。

典型的工作方式不再是：

Prompt
  ↓
生成一個頁面
  ↓
結束

而是：

產品想法
   ↓
生成初始設計
   ↓
在當前脈絡中修改
   ↓
比較方向並繼續迭代

在實際使用時，你可以先生成一個 Dashboard，再連續提出局部修改要求，例如：

把 Dashboard 改得更緊湊，減少卡片之間的留白。
Sidebar 縮窄到適合 1280px 桌面寬度。
行動端改成底部導覽，並保留當前頁面的主要操作。

這裡的關鍵不是某一句提示詞，而是讓後續修改依賴當前設計脈絡，而不是每次從零生成。

三、從單個頁面擴展到產品流程

真實產品很少只有一個頁面。登入、首頁、詳情、結帳和成功回饋之間的關係，往往比單個頁面的視覺效果更重要。

因此，Stitch 的多頁面和 Prototype 工作流程適合用來驗證 User Flow：

Login
  ↓
Home
  ↓
Product
  ↓
Checkout
  ↓
Success

Google 在 Stitch、Gemini 3 與 Prototype 的介紹中展示了這類從畫面到流程的方向。需要注意，Prototype 並不是 2026 年才首次出現的能力；這裡更值得關注的是它如何融入持續設計和 Coding Agent 工作流程。

一個實用的判斷方式是：

如果你只想比較視覺方向，先生成同一頁面的多個變體。
如果你要驗證使用者任務，優先連接多個 Screen，檢查流程是否完整。
如果你要交給開發者，先固定頁面命名、主要狀態和關鍵互動，再進入程式碼階段。

四、Design System 與 `DESIGN.md`

AI 可以生成漂亮頁面，但如果每個頁面都重新猜測顏色、字型和元件規則，最終產品很容易失去一致性。

Design System 負責提供統一的視覺和元件約束，而 DESIGN.md 更像是給 AI Agent 閱讀的設計脈絡檔案。它可以描述：

顏色的用途，而不只是顏色值
字型層級和資訊密度
間距、圓角和陰影
Button、Card、Input、Navigation 等元件規則
響應式版面和無障礙要求

例如：

# Design System

## Colors

Primary: #2563EB — 用於主要操作和關鍵連結
Background: #F8FAFC
Foreground: #0F172A

## Typography

Font: Inter
Heading: 600
Body: 400

## Components

Button: 8px radius, solid primary color for the main action
Card: 12px radius, subtle border, no heavy shadow

重點不在於把所有設計參數堆進檔案，而在於說明「什麼時候使用」。Primary 不只是藍色，它還代表主要操作；高密度版面也不只是減少 padding，而是要保留資訊層級和可讀性。

關於 DESIGN.md 在 AI 設計工作流程中的公開實踐，可以參考 Google Labs 的 Stitch Skills 儲存庫。目前更穩妥的理解是：它是一種可被 Agent 使用的設計脈絡約定，而不是所有設計工具都已經統一支援的正式業界標準。

五、Design ↔ Code：讓已有專案也能進入 Stitch

傳統流程通常是：

Design
  ↓
Code

而 Stitch 生態系正在補充反向流程：

Code
  ↓
擷取頁面和設計資訊
  ↓
匯入 Stitch
  ↓
重新探索設計方向

stitch-skills 中的 code-to-design 技能面向 React、Vue 等前端程式碼，工作思路包括擷取 HTML、整理設計資訊和上傳到 Stitch。它適合以下情境：

已有產品需要重新設計，但沒有完整設計稿。
希望把多個頁面的現有實作整理成設計脈絡。
想先在 Stitch 中探索視覺方向，再讓 Coding Agent 修改程式碼。

這不意味著 Stitch 會自動理解所有業務邏輯。權限、資料請求、表單驗證和複雜互動仍然需要開發者確認。Code-to-Design 更適合擷取介面結構和視覺線索，而不是替代程式碼審查。

六、MCP、SDK 與 Stitch Skills 的區別

這三類名稱經常被放在一起，但用途並不相同：

能力	作用	適合誰
Stitch MCP	讓相容的 Agent 呼叫 Stitch 能力	使用 Claude Code、Cursor 等工具的開發者
Stitch SDK	透過程式組織 Stitch 相關呼叫	需要自動化或自訂整合的團隊
Stitch Skills	把設計、建構和輔助流程封裝成 Agent Skills	希望沿用完整工作流程的開發者

根據 stitch-skills 官方儲存庫，當前公開的技能覆蓋設計生成、Code-to-Design、設計系統管理、靜態 HTML 擷取、React/React Native 元件生成、提示詞增強和多頁面循環等方向。

這些技能依賴 Stitch MCP 和對應的認證設定。它們是 Google Labs 開源的工作流程專案，不應簡單等同於 Stitch 網頁中已經預設開啟的全部功能。安裝前請以儲存庫 README 和 Stitch MCP 文件中的當前說明為準。

七、一個可執行的 SaaS Dashboard 範例

下面用一個 SaaS 分析後台說明如何把這些能力串起來。第一步先描述產品目標，而不是只描述顏色：

Create a responsive SaaS analytics dashboard for a small product team.
Include a sidebar, KPI summary, weekly revenue chart, recent activity,
and a clear primary action for inviting a teammate.
Use a compact desktop layout and a mobile bottom navigation.
Keep the visual language calm, accessible, and suitable for daily work.

接著在當前設計脈絡中繼續約束：

Create three screens: Dashboard, Analytics, and Settings.
Use the same navigation, spacing scale, button hierarchy, and card treatment
across all screens. Show the main user flow from Dashboard to Settings.

確定方向後，再補充設計系統要求：

Apply the project's DESIGN.md rules.
Do not introduce new accent colors, arbitrary shadows, or one-off border radii.
Preserve the same information hierarchy on desktop and mobile.

如果團隊已經有前端專案，則可以先使用 code-to-design 整理現有頁面，再回到 Stitch 中比較重構方向。完成設計確認後，再讓 Coding Agent 負責實作元件、路由和資料介面。

推薦的交接順序是：

需求
  ↓
Stitch 生成和探索 UI
  ↓
Prototype 驗證主要流程
  ↓
固定 Design System 和 DESIGN.md
  ↓
Stitch MCP / Skills
  ↓
Coding Agent 實作程式碼
  ↓
瀏覽器和真實資料驗證

八、哪些能力已經明確，哪些仍需謹慎理解？

根據目前公開的 Google 資料和 stitch-skills 儲存庫，可以比較有把握地確認：

Stitch 面向自然語言驅動的介面設計和迭代。
多頁面、Prototype 和產品流程是重要使用方向。
Stitch Skills 已公開設計生成、Code-to-Design、設計系統和程式碼生成等工作流程。
MCP 是連接 Stitch 與外部 Agent 的關鍵整合方式。
React、React Native、靜態 HTML 等程式碼相關能力主要應透過對應 Skills 或整合流程理解。

以下內容不應在沒有額外官方來源時寫成產品承諾：

所有功能都已經對所有帳號和地區開放。
Stitch 網頁產品已經內建全部 Skills。
SDK 的具體 API、配額和商業條款長期不變。
自動生成的程式碼可以直接用於生產環境而無需審查。

這一區分很重要：它既能避免文章過度宣傳，也能讓讀者知道應該去哪裡驗證最新狀態。

九、Stitch 適合解決什麼問題？

Stitch 更適合以下工作：

在開發前快速探索多個產品方向。
用多頁面和 Prototype 驗證使用者流程。
把設計系統和視覺意圖整理成 AI 可讀取的脈絡。
讓設計師、產品經理和 Coding Agent 使用同一套參考。
把既有前端頁面帶回設計階段，進行結構和視覺重構。

它不適合替代所有專業設計和工程工作。複雜互動、無障礙細節、效能、資料安全、權限模型和生產程式碼品質，仍然需要專業人員驗證。

十、2026 年 10 月更新：CLI 與圖像引擎

2026-10-01：Stitch CLI 發布，終端成為第三入口

10 月 1 日，官方發布 Stitch CLI（@google/stitch）。此前 Stitch 的接入方式主要有 MCP 與 SDK 兩種；CLI 補齊之後，接入格局變為 MCP + SDK + CLI 三入口。

CLI 的三大能力：

連接本機 Coding Agent。
生成介面與設計系統。
把本機開發伺服器快照發回 Stitch。

其中 stitch agent-skills add --user 一條命令，即可為 Claude Code、Cursor、Codex、Gemini CLI 與 Antigravity 統一安裝 Skills。命令級實作與注意事項見 Stitch CLI 完全指南。

同一時期，官方的 stitch loop 命令也對外開放：它用於持續監控程式碼庫與使用者回饋、自主提出改進方案，目前公開細節仍然有限。

2026-10-06：Nano Banana 2.1 上線，圖像素材生成換代

10 月 6 日，Nano Banana 2.1 發布並接入 Stitch，官方明確了兩個使用情境：Hero 配圖與向量風格 Logo。配圖和 Logo 因此可以在 Stitch 工作流程內部完成，不再依賴外部圖像工具。

提示詞範本與使用方式見 Nano Banana 2.1 生成 Hero 配圖與 Logo。

同一時期，官方還示範了「Stitch 設計稿 → Jetpack Compose 原生元件 → 模擬器與實機」的完整工作流程，已單獨整理：Stitch 設計稿轉 Android 原生應用。

十一、總結：Stitch 正在成為設計與程式碼之間的一層

過去的 Stitch 可以概括為：

Prompt
  ↓
UI
  ↓
HTML

現在更適合用下面的方式理解：

產品需求
  ↓
AI 設計工作台
  ↓
多頁面與 Prototype
  ↓
Design System / DESIGN.md
  ↓
MCP / SDK / Stitch Skills
  ↓
Coding Agent
  ↓
React、Vue 或其他前端程式碼

2026 年最值得關注的並不是某一個孤立的生成按鈕，而是 Stitch 正在嘗試補齊一條更完整的鏈路：

理解產品 → 探索設計 → 固定設計脈絡 → 交給 Agent 實作 → 根據結果繼續迭代。

如果你剛開始使用 Stitch，可以先從一個小型多頁面流程開始，不要一開始就要求它生成完整產品。先驗證頁面結構和使用者任務，再整理 DESIGN.md，最後進入 Coding Agent 實作階段，通常更容易獲得穩定結果。