---

name: stitch-ui-design description: "为Google Stitch（Google Labs的AI驱动UI设计工具）编写有效提示词的专家指导。此技能帮助创建精确、可操作的提示词，生成高质量的Web和移动应用UI设计。" risk: safe source: self date_added: "2026-02-27"

Stitch UI设计提示词

为Google Stitch（Google Labs的AI驱动UI设计工具）编写有效提示词的专家指导。此技能帮助创建精确、可操作的提示词，生成高质量的Web和移动应用UI设计。

什么是Google Stitch？

Google Stitch是由Gemini 2.5 Flash驱动的实验性AI UI生成器，可将文本提示词和视觉参考转化为功能性UI设计。支持：

• 从自然语言提示词生成UI
• 从草图、线框图或截图转换为UI
• 多屏幕应用流程和响应式布局
• 导出为HTML/CSS、Figma和代码
• 通过变体和标注进行迭代优化

核心提示词原则

1. 具体且详细

通用提示词产生通用结果。具有明确需求的具体提示词能产生定制化、专业的设计。

差的提示词：

Create a dashboard

有效的提示词：

Member dashboard with course modules grid, progress tracking bar, 
and community feed sidebar using purple theme and card-based layout

为什么有效： 指定了组件（模块、进度、动态）、布局结构（网格、侧边栏）、视觉风格（紫色主题、卡片）和上下文（会员仪表板）。

2. 定义视觉风格和主题

始终包含配色方案、设计美学和视觉方向，避免通用的AI输出。

需要指定的要素：

• 调色板（主色、强调色）
• 设计风格（极简、现代、活泼、专业、玻璃拟态）
• 字体偏好（如有）
• 间距和密度（紧凑、宽松、均衡）

示例：

E-commerce product page with hero image gallery, add-to-cart CTA, 
reviews section, and related products carousel. Use clean minimalist 
design with sage green accents and generous white space.

3. 清晰地构建多屏幕流程

对于多屏幕应用，在生成前将每个屏幕列为要点。

方法：

Fitness tracking app with:
- Onboarding screen with goal selection
- Home dashboard with daily stats and activity rings
- Workout library with category filters
- Profile screen with achievements and settings

Stitch会在生成多个屏幕前请求确认，确保与你的愿景一致。

4. 指定平台和响应式行为

说明设计是用于移动端、平板、桌面还是响应式Web。

示例：

Mobile app login screen (iOS style) with email/password fields and social auth buttons

Responsive landing page that adapts from mobile (320px) to desktop (1440px) 
with collapsible navigation

5. 包含功能需求

描述交互元素、状态和用户流程，以生成更完整的设计。

需要指定的元素：

• 按钮动作和CTA
• 表单字段和验证
• 导航模式
• 加载状态
• 空状态
• 错误处理

示例：

Checkout flow with:
- Cart summary with quantity adjusters
- Shipping address form with validation
- Payment method selection (cards, PayPal, Apple Pay)
- Order confirmation with tracking number

提示词结构模板

使用此模板编写全面的提示词：

[屏幕/组件类型] for [用户/上下文]

Key Features:
- [功能1及具体细节]
- [功能2及具体细节]
- [功能3及具体细节]

Visual Style:
- [配色方案]
- [设计美学]
- [布局方式]

Platform: [移动端/Web/响应式]

示例：

Dashboard for SaaS analytics platform

Key Features:
- Top metrics cards showing MRR, active users, churn rate
- Line chart for revenue trends (last 30 days)
- Recent activity feed with user actions
- Quick action buttons for reports and exports

Visual Style:
- Dark mode with blue/purple gradient accents
- Modern glassmorphic cards with subtle shadows
- Clean data visualization with accessible colors

Platform: Responsive web (desktop-first)

迭代策略

使用标注进行优化

使用Stitch的"标注编辑"功能进行针对性修改，无需重写整个提示词。

工作流程：

1. 从提示词生成初始设计
2. 标注需要修改的特定元素
3. 用自然语言描述修改
4. Stitch仅更新标注区域

标注示例：

• "Make this button larger and use primary color"
• "Add more spacing between these cards"
• "Change this to a horizontal layout"

生成变体

请求多个变体以探索不同的设计方向：

Generate 3 variants of this hero section:
1. Image-focused with minimal text
2. Text-heavy with background gradient
3. Split layout with image left, content right