·8 分鐘閱讀

Stitch 提示詞指南：用 AI 建構 UI 的高效策略

全面的 Stitch 提示詞策略指南，從基礎到進階，教你如何用 AI 高效建構高品質的使用者介面設計。

S
Stitch Prompt Team
Content Team
Stitch 提示詞AI 設計

用 AI 建構 UI 的新範式

Google Stitch 讓 UI 設計變得像對話一樣簡單。但要充分發揮 AI 的能力，你需要掌握正確的提示詞策略。本指南將帶你從基礎到進階，系統化地提升你的 Stitch 提示詞技能。

AI 建構 UI

策略一：分層描述法

不要試圖在一個提示詞中塞進所有資訊。採用分層描述，逐步增加複雜度。

第一層：基本框架

Design a mobile fitness tracking app

第二層：加入版面

Design a mobile fitness tracking app with:
- Header with user greeting and profile avatar
- Main area with activity summary cards
- Bottom navigation with 4 tabs

第三層：豐富細節

Design a mobile fitness tracking app with:
- Header: greeting text ("Good morning, Alex") + circular profile avatar
- Main area: 3 summary cards (Steps, Calories, Active Minutes) with icons
- Below cards: weekly trend line chart
- Bottom nav: Home, Workout, Stats, Profile tabs with icons
- Style: Clean white background, green (#22C55E) accent, rounded cards

策略二：參考案例法

借鏡已知的設計模式，讓 AI 更快理解你的需求。

範例

Design a dashboard similar to Spotify's artist analytics page:
- Left sidebar with navigation
- Top section with key metrics (total plays, followers, revenue)
- Middle section with streaming trends chart
- Bottom section with top tracks list
- Dark theme with green accent (like Spotify)

策略三：約束條件法

透過加入約束條件，讓 AI 的輸出更可控。

常用約束類型

約束類型範例
顏色約束"只使用藍色和白色兩種顏色"
尺寸約束"所有按鈕最小高度 48px"
數量約束"導覽列最多 5 個選項"
風格約束"不使用陰影和漸層"
內容約束"所有文字使用英文"

實戰範例

Design a mobile weather app with strict constraints:
- ONLY 3 colors: dark blue (#1E3A5F), white, and light yellow (#FCD34D)
- No gradients, no shadows — flat design only
- Maximum 5 navigation items
- All text in English
- Touch targets minimum 44px
- No images — use weather icons only

策略四：情境敘事法

用說故事的方式描述使用者情境，讓 AI 理解脈絡。

A busy professional opens the app during their morning commute.
They need to quickly see:
- Today's schedule at a glance
- Upcoming meetings with join links
- Quick actions: add task, start timer
The design should be information-dense but not overwhelming,
optimized for one-handed phone use.

策略五：迭代最佳化法

第一次生成很少就完美。高效的策略是多輪迭代。

迭代工作流程

  1. 生成基礎版本
  2. 分析不足：哪些地方需要改進？
  3. 針對性修改：在提示詞中明確調整內容
  4. 再次生成：比較前後差異
  5. 重複直到滿意

修改提示詞範例

上次的設計基本滿意，但請做以下調整：
1. 將主色調從藍色改為紫色 (#7C3AED)
2. 卡片間距從 8px 增加到 16px
3. 標題字型改為粗體
4. 在頁面頂部加入搜尋列

策略六：元件化思維

將複雜的頁面拆解為獨立的元件，分別生成後組合。

範例：電商首頁拆解

元件提示詞
搜尋列"Design a search bar with filter button and voice search icon"
分類導覽"Design a horizontal scrollable category pills with 8 items"
商品卡片"Design a product card with image, title, price, rating stars, and add-to-cart button"
底部導覽"Design a bottom tab bar with Home, Categories, Cart, Profile icons"

實用提示詞速查表

設計類型關鍵提示詞
登入頁login, sign in, email/password, social login
儀表板dashboard, KPI cards, charts, sidebar navigation
電商product grid, shopping cart, filters, checkout
社交feed, stories, profile, messaging
工具settings, preferences, account, notifications
內容article, blog, media player, comments

總結

掌握這 6 大策略，你就能系統化地使用 Google Stitch 建構高品質 UI 設計：

  1. 分層描述——從簡單到複雜
  2. 參考案例——借用已知模式
  3. 約束條件——控制輸出範圍
  4. 情境敘事——提供脈絡
  5. 迭代最佳化——持續改進
  6. 元件化思維——化整為零

記住：好的提示詞不是一次寫成的，而是在不斷迭代中打磨出來的。

← ← 返回部落格