·7 分钟阅读

Google Stitch 高级提示词公式：打造专业级 UI 设计

掌握 Google Stitch 高级提示词公式，通过结构化的提示词模板生成专业级 UI 设计，提升设计质量和效率。

S
Stitch Prompt Team
Content Team
Stitch 提示词AI 设计Stitch PromptsAI Design

为什么需要高级提示词？

基础提示词能生成简单的界面，但当你需要更精确、更专业的设计时，掌握高级提示词公式至关重要。本文将分享经过验证的提示词公式，帮你生成令人惊艳的 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 设计。

← 返回博客