·8 分鐘閱讀

Google Stitch 提示詞完整指南：從入門到精通

本文詳細介紹如何為 Google Stitch 寫出高品質的提示詞，包括基礎語法、進階技巧與常見錯誤避免方法。

S
Stitch Prompt Team
Content Team
Stitch 提示詞教學

什麼是 Google Stitch 提示詞？

Google Stitch 是 Google 推出的 AI 驅動 UI 設計工具。與傳統設計軟體不同，Stitch 使用自然語言提示詞生成介面設計。這意味著你不需要手動拖放元件——只要用文字描述你想要的東西，AI 就會為你生成設計。

提示詞的基本結構

一個好的 Stitch 提示詞通常包含以下要素：

1. 平台類型

首先，明確你為哪個平台設計：

  • 行動端：iOS 或 Android 應用程式
  • Web：Web 應用程式或網站
  • 儀表板：資料分析或管理後台

2. 功能描述

描述頁面的主要功能：

  • 使用者註冊／登入頁面
  • 商品展示列表
  • 購物車與結帳流程
  • 資料視覺化儀表板

3. 設計風格

指定你想要的視覺風格：

  • 極簡主義
  • 玻璃擬態
  • 深色模式
  • 漸層霓虹

4. 版面結構

描述頁面版面：

  • 單欄版面
  • 網格版面
  • 側邊欄 + 主內容區
  • 卡片式版面

範例：從簡單到複雜

基礎提示詞

Design a mobile app login page

中階提示詞

Design a modern e-commerce mobile app homepage with:
- Search bar at the top
- Product grid with images and prices
- Bottom navigation with 4 tabs
- Clean white background with accent colors

進階提示詞

Design a professional SaaS analytics dashboard with:
- Sidebar navigation with logo and menu items
- Top bar with search, notifications, and user avatar
- Main content area with:
  - 4 KPI cards showing key metrics
  - Line chart for trends
  - Bar graph for comparisons
  - Data table with sortable columns
- Dark mode theme with blue accent colors
- Clean typography and ample whitespace

常見錯誤

❌ 太模糊

Design a nice app

✅ 恰到好處

Design a mobile app for tracking daily water intake with:
- Circular progress indicator showing daily goal
- Quick add buttons for common bottle sizes
- History chart showing weekly trends
- Minimalist design with blue and white colors
- Bottom tab navigation

總結

寫好 Stitch 提示詞的關鍵是：

  1. 明確平台與目的
  2. 描述具體功能
  3. 指定設計風格
  4. 保持簡潔而完整

透過練習並參考本文範例，你將很快掌握 Stitch 提示詞的寫作技巧。

← ← 返回部落格