·9 分鐘閱讀

Google Stitch AI UI 設計指南：從提示詞到介面

用 Google Stitch 進行 AI UI 設計：從提示詞結構、風格選擇到 Web App 版面與設計轉程式碼，附可重複使用的提示詞範例與檢查清單。

S
Stitch Prompt Team
Content Team
提示詞設計風格入門

Google Stitch 常被描述為「文字生成 UI」的工具，但更準確的理解是：它是一個 AI UI 設計夥伴。它可以把簡短需求變成完整介面，但介面品質取決於你是否清楚描述了產品、頁面、視覺系統與限制。本文提供一套可重複的方法，從第一個提示詞一路走到設計交付。

目標不是產生更多畫面，而是產生正確的畫面，再把它收斂成一套可以交給開發者的系統。

Stitch 裡的 AI UI 設計是什麼

AI UI 設計是一個循環：產生、檢視、調整、系統化。Stitch 最擅長前兩個步驟。它可以在幾秒內給出幾個方向，但它不知道你的產品策略、無障礙要求，也不知道介面需要哪些狀態。最終決策仍然在你手上。

適合用 Stitch 做這些事：

  • 在確定設計系統之前，探索版面與視覺方向；
  • 用顏色、字體、間距與元件模式替設計系統打底；
  • 把文字產品想法變成可檢視的第一版；
  • 為程式碼代理程式或前端團隊建立設計參考。

在建立提示詞庫之前，先閱讀 Stitch 關於提示詞與設計模式的說明。

五段式 AI UI 提示詞

一則有用的 AI UI 提示詞要回答五個問題。少寫一個，Stitch 就會用通用假設替你補上。

1. 平台與裝置

先說明介面載體：Web App、行銷到達頁、儀表板、iOS 或 Android。同一個產品在不同載體上的導覽、資訊密度與觸控目標都不同。如果不確定 Stitch 如何處理裝置，請看裝置類型。

2. 產品脈絡

描述誰在使用產品，以及他們要完成什麼。「一個專案管理工具」很弱；「一個給營運團隊、用來每天早上檢查阻塞專案的專案管理工具」才能給 Stitch 一個真實的設計任務。

3. 頁面目標

每個畫面只給一個主要動作。儀表板可能有很多元件，但頁面目標可以是「找到被阻塞的專案並開啟它」。到達頁的目標可能只有一個：「開始免費試用」。

4. 版面與元件

寫清楚導覽模型與主要內容區塊。Web App 可能是左側邊欄、帶搜尋的頂欄、KPI 卡片、圖表與資料表；行動 App 可能是底部標籤列與卡片動態牆。

5. 視覺風格與限制

只寫「極簡」或「高端」不夠，還要補顏色規則、字體、圓角、間距與無障礙限制。如果想要一個已知方向，從風格庫裡的風格出發，做適配而不是照搬。例如，Linear 是深色、精準的 SaaS 介面參考；Stripe 是金融科技清晰感的參考。

可重複使用的提示詞公式

把下面這段當作起點，把方括號替換成產品細節。

Design a [platform] [page type] for [product] used by [audience].
Primary goal: [one action the page should make easy].
Layout: [navigation model] + [main content structure].
Components: [4-6 components, in priority order].
Data: [key fields, data volume, loading / empty / error states].
Style: [visual direction, color rules, typography, spacing, radius].
Constraints: [responsive behavior, accessibility, brand rules].

這個公式故意寫得很「無聊」。它的作用是逼你在 Stitch 之前先做決定。

選擇正確的風格

SaaS 與效率工具

SaaS 產品優先選擇能承載高資訊密度的風格。Linear 與 Notion 是很好的參考：一個精準、深色，一個平靜、內容優先。用它們來設定限制，而不是複製品牌。

金融科技與企業產品

金融科技介面需要信任感、清晰層級與可讀的數字。Stripe 是間距與字體的強參考。企業產品可能需要更常規的導覽模型與更嚴格的對比度。

消費級與 AI 產品

消費級與 AI 產品可以有更多個性，但介面仍然需要明確的主要動作。瀏覽風格庫，挑兩三個參考，並寫清楚你從每個參考裡拿走了什麼：顏色、字體、間距與元件行為。

Web App、儀表板與行動端不是一回事

儀表板不是「卡片更多的 Web App」，行動 App 也不是變窄的桌面版面。儀表板優先掃描與比較；Web App 會增加導覽、權限、設定與長任務；行動 App 優先觸控、單手操作與短工作階段。如果用桌面提示詞產生行動畫面，結果通常會在錯誤的地方過密或過疏。

同一個產品分別產生不同載體，再比較導覽、資訊密度與狀態。Stitch 的變體可以幫助探索差異，但提示詞仍然要寫清楚載體。

可重複的 AI UI 工作流程

第一步：產生 2–3 個方向

保持產品脈絡與頁面目標不變，只改變版面或視覺方向。這樣得到的是可比較的方案，而不是隨機畫面。

第二步：檢視與調整

檢查層級、間距、對比度、元件數量與缺少的狀態。然後提出有針對性的修改：「保留版面，提高表格密度；補一個清楚的空狀態。」不要每次從零重來。

第三步：統一系統

方向確定後，提取顏色、字級層級、圓角與間距，並套用到下一個畫面。一致性來自共享限制，而不是把所有畫面塞進一則提示詞。

第四步：交付到程式碼

把規則寫進 DESIGN.md，或使用 Stitch SDK 與 CLI 從設計走向程式碼。可以參考把 URL 變成設計系統與從程式碼到設計的工作流程。匯出細節見下載產物。

三個提示詞範例

SaaS 分析儀表板

Design a desktop SaaS analytics dashboard for a B2B project management tool.
Users: operations leads who check pipeline health every morning.
Primary goal: spot blocked projects and open the right one.
Layout: left sidebar (Home, Projects, Reports, Settings), top bar with search and avatar, main content grid.
Components: four KPI cards, a line chart, a stacked bar chart, and a project table with status and owner.
Data: include loading, empty, and error states for the table.
Style: Linear-inspired dark interface, near-black surfaces, one indigo accent, tight typography.
Constraints: 1440px desktop first, responsive down to 1024px; WCAG AA contrast.

金融科技引導流程

Design a three-step onboarding flow for a personal finance app.
Users: first-time savers who want to set a monthly budget.
Primary goal: finish setup and see a personalized budget.
Layout: progress indicator, one question per step, primary button at the bottom.
Components: goal selector, income input, spending category chips, summary card.
Data: show validation errors and a final confirmation state.
Style: Stripe-inspired clarity, white canvas, restrained blue accent, generous spacing.
Constraints: mobile web first; keyboard accessible; no more than five choices per step.

AI 聊天 Web App

Design a web app for an AI research assistant.
Users: analysts who need to compare sources and save findings.
Primary goal: ask a question, review cited answers, and save a finding.
Layout: left conversation list, center chat, right source panel.
Components: message thread, citation cards, source preview, save button.
Data: show streaming, empty, and error states for answers.
Style: calm editorial interface with warm neutrals and a single accent.
Constraints: 1280px desktop; readable line length; citations must remain visible.

常見錯誤與檢查清單

常見錯誤：

  • 一個畫面放三個主要動作；
  • 只寫風格形容詞，不寫版面與內容規則；
  • 忘記空狀態、載入、錯誤與權限狀態；
  • 照搬參考品牌，而不是提取它的限制；
  • 每個畫面孤立產生，最後失去一致性。

在認為一個畫面完成之前，檢查：

  • 是否只有一個清楚的主要動作；
  • 導覽模型是否匹配載體；
  • 是否有 4–6 個層級清楚的核心元件；
  • 是否涵蓋空、載入、錯誤與成功狀態；
  • 對比度與字級是否可讀；
  • 是否為下一個斷點準備了響應式方案；
  • 顏色、字體、間距與圓角是否可重複使用。

常見問題

AI UI 設計與傳統 UI 設計有什麼差別？

傳統 UI 設計通常從空白畫布與設計系統開始；AI UI 設計從描述與限制開始。工作重點從「畫每個元素」轉向「定義規則、檢視結果、調整系統」。

Google Stitch 能產生正式環境的程式碼嗎？

Stitch 可以產出設計參考與面向程式碼的結果，但上線前仍需檢視。把生成的程式碼當作起點，再套用你的架構、無障礙與測試標準。

如何讓多個畫面保持一致？

寫一段共享的提示詞前綴，包含產品脈絡、風格規則與限制。每個畫面重複使用同一套 token 與元件詞彙。畫面偏離時，修正限制，而不是靠提示詞繞過去。

下一步

如果你正在設計 Web App，繼續閱讀 Google Stitch Web App 設計指南。也可以瀏覽風格庫、試用編輯器，或依照教學進行系統練習。

← ← 返回部落格