·7 分鐘閱讀

Google Stitch 進階提示詞公式：打造專業級 UI 設計

掌握 Google Stitch 進階提示詞公式，透過結構化的提示詞範本生成專業級 UI 設計，提升設計品質與效率。

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

為什麼需要進階提示詞？

基礎提示詞能生成簡單的介面，但當你需要更精確、更專業的設計時，掌握進階提示詞公式至關重要。本文將分享經過驗證的提示詞公式，幫你生成令人驚豔的 UI 設計。

進階提示詞技巧

核心公式：P-L-A-C-E 結構

最佳的 Stitch 提示詞遵循 P-L-A-C-E 公式：

字母含義範例
Platform（平台）目標裝置與系統iOS mobile app / Web dashboard
Layout（版面）頁面結構Sidebar + main content area
Action（功能）核心互動Display real-time analytics
Color/Style（配色/風格）視覺基調Dark mode with purple accents
Extra（額外細節）微調項Rounded corners, subtle shadows

5 個進階提示詞範本

1. SaaS 儀表板

Platform: Web dashboard
Layout: Left sidebar navigation + main content grid
Action: Display analytics with 4 KPI cards, line chart for monthly trends,
        bar chart for category comparison, and sortable data table below
Color: Professional dark mode with blue (#3B82F6) accent colors
Extra: Clean typography (Inter font), 24px spacing, rounded card corners,
       subtle drop shadows, responsive grid

2. 電商行動應用

Platform: iOS mobile app
Layout: Full-width hero banner at top, 2-column product grid below,
        fixed bottom tab navigation (Home, Search, Cart, Profile)
Action: Product cards with image, title, price, and star rating;
        floating cart badge showing item count
Color: White background, warm orange (#FF6B35) CTA buttons,
       dark gray (#1A1A1A) text
Extra: Product card shadows, smooth hover states,
       clean sans-serif typography, 16px padding

3. 健康追蹤應用

Platform: iOS mobile app
Layout: Card-based single scroll view with bottom tab bar
Action: Circular progress ring for daily water intake,
        quick-add buttons (250ml, 500ml, custom),
        weekly history bar chart, streak counter
Color: Gradient background (light teal to white),
       green (#10B981) accent for progress elements
Extra: Rounded cards with 16px radius, soft shadows,
       playful illustration style, 44px touch targets

4. AI 聊天介面

Platform: Web application
Layout: Centered chat container (max-width 720px),
        full-width input bar at bottom
Action: Message bubbles alternating left (AI) and right (user),
        typing indicator animation, suggested replies chips
Color: Light gray (#F3F4F6) background, white chat bubbles,
       blue (#2563EB) user bubbles, system purple for AI
Extra: Avatar icons for each message, timestamp labels,
       smooth scroll, modern rounded design

5. 餐廳預訂系統

Platform: Web landing page
Layout: Full-width hero with restaurant image overlay,
        3-column feature cards, booking form section, footer
Action: Date picker, time slot selection, party size dropdown,
        special requests text area, confirmation button
Color: Warm earth tones — cream (#FFF8F0) background,
       deep brown (#5D4037) headings, terracotta (#E07A5F) CTAs
Extra: Elegant serif font for headings, high-quality food imagery,
       subtle animations on scroll, mobile-responsive

進階技巧

使用負面描述

告訴 AI 什麼不要包含，可以提高精準度：

不要包含：使用者登入介面、複雜的表單、彈窗提示

指定間距和尺寸

精確的間距讓設計更專業：

間距規則：元素間距 16px，卡片內距 24px，頁面邊距 32px

引用設計系統

提及具體的設計系統可以提升一致性：

遵循 Material Design 3 規範，使用標準元件和配色系統

總結

掌握 P-L-A-C-E 公式後，你可以系統化地撰寫高品質 Stitch 提示詞。關鍵是：結構清晰 + 細節豐富 + 明確約束。多加練習，你很快就能生成專業級的 UI 設計。

← ← 返回部落格