Back to Details

stitch-ui-design

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Stitch UI Design Prompting

Stitch UI设计提示词创作指南

Expert guidance for crafting effective prompts in Google Stitch, the AI-powered UI design tool by Google Labs. This skill helps create precise, actionable prompts that generate high-quality UI designs for web and mobile applications.
本文是针对Google Labs推出的AI驱动UI设计工具Google Stitch的提示词创作专家指导。本指南帮助你创作精准、可落地的提示词，以生成适用于网页和移动应用的高质量UI设计。

What is Google Stitch?

什么是Google Stitch？

Google Stitch is an experimental AI UI generator powered by Gemini 2.5 Flash that transforms text prompts and visual references into functional UI designs. It supports:
  • Text-to-UI generation from natural language prompts
  • Image-to-UI conversion from sketches, wireframes, or screenshots
  • Multi-screen app flows and responsive layouts
  • Export to HTML/CSS, Figma, and code
  • Iterative refinement with variants and annotations
Google Stitch是一款由Gemini 2.5 Flash驱动的实验性AI UI生成器，可将文本提示词和视觉参考转化为可使用的UI设计。它支持：
  • 从自然语言提示词生成UI（文本转UI）
  • 从草图、线框图或截图转化为UI（图像转UI）
  • 多屏幕应用流程和响应式布局
  • 导出为HTML/CSS、Figma和代码
  • 通过变体和注释进行迭代优化

Core Prompting Principles

核心提示词创作原则

1. Be Specific and Detailed

1. 内容具体且详细

Generic prompts yield generic results. Specific prompts with clear requirements produce tailored, professional designs.
Poor prompt:
Create a dashboard
Effective prompt:
Member dashboard with course modules grid, progress tracking bar, 
and community feed sidebar using purple theme and card-based layout
Why it works: Specifies components (modules, progress, feed), layout structure (grid, sidebar), visual style (purple theme, cards), and context (member dashboard).
通用提示词会得到通用结果，而带有明确要求的具体提示词能生成定制化的专业设计。
糟糕的提示词：
Create a dashboard
高效的提示词：
Member dashboard with course modules grid, progress tracking bar, 
and community feed sidebar using purple theme and card-based layout
为何有效： 明确指定了组件（模块、进度条、社区动态）、布局结构（网格、侧边栏）、视觉风格（紫色主题、卡片式）以及使用场景（会员仪表盘）。

2. Define Visual Style and Theme

2. 定义视觉风格与主题

Always include color schemes, design aesthetics, and visual direction to avoid generic AI outputs.
Components to specify:
  • Color palette (primary colors, accent colors)
  • Design style (minimalist, modern, playful, professional, glassmorphic)
  • Typography preferences (if any)
  • Spacing and density (compact, spacious, balanced)
Example:
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.
务必包含配色方案、设计美学和视觉方向，以避免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. Structure Multi-Screen Flows Clearly

3. 清晰构建多屏幕流程

For apps with multiple screens, list each screen as bullet points before generation.
Approach:
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 will ask for confirmation before generating multiple screens, ensuring alignment with your vision.
对于包含多屏幕的应用，在生成前将每个屏幕以项目符号列表形式列出。
方法：
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. Specify Platform and Responsive Behavior

4. 指定平台与响应式表现

Indicate whether the design is for mobile, tablet, desktop, or responsive web.
Examples:
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
说明设计是针对移动端、平板、桌面端还是响应式网页。
示例：
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. Include Functional Requirements

5. 包含功能需求

Describe interactive elements, states, and user flows to generate more complete designs.
Elements to specify:
  • Button actions and CTAs
  • Form fields and validation
  • Navigation patterns
  • Loading states
  • Empty states
  • Error handling
Example:
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
描述交互元素、状态和用户流程，以生成更完整的设计。
需要指定的元素：
  • 按钮操作和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

Prompt Structure Template

提示词结构模板

Use this template for comprehensive prompts:
[Screen/Component Type] for [User/Context]

Key Features:
- [Feature 1 with specific details]
- [Feature 2 with specific details]
- [Feature 3 with specific details]

Visual Style:
- [Color scheme]
- [Design aesthetic]
- [Layout approach]

Platform: [Mobile/Web/Responsive]
Example:
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)
使用以下模板创作全面的提示词：
[屏幕/组件类型] 适用于 [用户/场景]

核心功能：
- [功能1，含具体细节]
- [功能2，含具体细节]
- [功能3，含具体细节]

视觉风格：
- [配色方案]
- [设计美学]
- [布局方式]

平台：[移动端/网页/响应式]
示例：
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)

Iteration Strategies

迭代策略

Refine with Annotations

利用注释进行优化

Use Stitch's "annotate to edit" feature to make targeted changes without rewriting the entire prompt.
Workflow:
  1. Generate initial design from prompt
  2. Annotate specific elements that need changes
  3. Describe modifications in natural language
  4. Stitch updates only the annotated areas
Example annotations:
  • "Make this button larger and use primary color"
  • "Add more spacing between these cards"
  • "Change this to a horizontal layout"
使用Stitch的“注释编辑”功能，无需重写整个提示词即可进行针对性修改。
工作流：
  1. 根据提示词生成初始设计
  2. 对需要修改的特定元素添加注释
  3. 用自然语言描述修改内容
  4. Stitch仅更新带有注释的区域
注释示例：
  • "将此按钮放大并使用主色调"
  • "增加这些卡片之间的间距"
  • "将此改为横向布局"

Generate Variants

生成变体

Request multiple variations to explore different design directions:
Generate 3 variants of this hero section:
1. Image-focused with minimal text
2. Text-heavy with supporting graphics
3. Video background with overlay content
请求多个变体以探索不同设计方向：
Generate 3 variants of this hero section:
1. Image-focused with minimal text
2. Text-heavy with supporting graphics
3. Video background with overlay content

Progressive Refinement

渐进式优化

Start broad, then add specificity in follow-up prompts:
Initial:
E-commerce homepage
Refinement 1:
Add featured products section with 4-column grid and hover effects
Refinement 2:
Update color scheme to earth tones (terracotta, sage, cream) 
and add promotional banner at top
先从宽泛的提示词开始，然后在后续提示词中逐步增加细节：
初始提示词：
E-commerce homepage
优化1：
Add featured products section with 4-column grid and hover effects
优化2：
Update color scheme to earth tones (terracotta, sage, cream) 
and add promotional banner at top

Common Use Cases

常见使用场景

Landing Pages

着陆页

SaaS landing page for [product name]

Sections:
- Hero with headline, subheadline, CTA, and product screenshot
- Social proof with customer logos
- Features grid (3 columns) with icons
- Testimonials carousel
- Pricing table (3 tiers)
- FAQ accordion
- Footer with links and newsletter signup

Style: Modern, professional, trust-building
Colors: Navy blue primary, light blue accents, white background
SaaS landing page for [product name]

Sections:
- Hero with headline, subheadline, CTA, and product screenshot
- Social proof with customer logos
- Features grid (3 columns) with icons
- Testimonials carousel
- Pricing table (3 tiers)
- FAQ accordion
- Footer with links and newsletter signup

Style: Modern, professional, trust-building
Colors: Navy blue primary, light blue accents, white background

Mobile Apps

移动应用

Food delivery app home screen

Components:
- Search bar with location selector
- Category chips (Pizza, Burgers, Sushi, etc.)
- Restaurant cards with image, name, rating, delivery time, and price range
- Bottom navigation (Home, Search, Orders, Profile)

Style: Vibrant, appetite-appealing, easy to scan
Colors: Orange primary, white background, food photography
Platform: iOS mobile (375px width)
Food delivery app home screen

Components:
- Search bar with location selector
- Category chips (Pizza, Burgers, Sushi, etc.)
- Restaurant cards with image, name, rating, delivery time, and price range
- Bottom navigation (Home, Search, Orders, Profile)

Style: Vibrant, appetite-appealing, easy to scan
Colors: Orange primary, white background, food photography
Platform: iOS mobile (375px width)

Dashboards

仪表盘

Admin dashboard for content management system

Layout:
- Left sidebar navigation with collapsible menu
- Top bar with search, notifications, and user profile
- Main content area with:
  - Stats overview (4 metric cards)
  - Recent posts table with actions
  - Activity timeline
  - Quick actions panel

Style: Clean, data-focused, professional
Colors: Neutral grays with blue accents
Platform: Desktop web (1440px)
Admin dashboard for content management system

Layout:
- Left sidebar navigation with collapsible menu
- Top bar with search, notifications, and user profile
- Main content area with:
  - Stats overview (4 metric cards)
  - Recent posts table with actions
  - Activity timeline
  - Quick actions panel

Style: Clean, data-focused, professional
Colors: Neutral grays with blue accents
Platform: Desktop web (1440px)

Forms and Inputs

表单与输入框

Multi-step signup form for B2B platform

Steps:
1. Account details (company name, email, password)
2. Company information (industry, size, role)
3. Team setup (invite members)
4. Confirmation with success message

Features:
- Progress indicator at top
- Field validation with inline errors
- Back/Next navigation
- Skip option for step 3

Style: Minimal, focused, low-friction
Colors: White background, green for success states
Multi-step signup form for B2B platform

Steps:
1. Account details (company name, email, password)
2. Company information (industry, size, role)
3. Team setup (invite members)
4. Confirmation with success message

Features:
- Progress indicator at top
- Field validation with inline errors
- Back/Next navigation
- Skip option for step 3

Style: Minimal, focused, low-friction
Colors: White background, green for success states

Design-to-Code Workflow

设计转代码工作流

Export Options

导出选项

Stitch provides multiple export formats:
  1. HTML/CSS - Clean, semantic markup for web projects
  2. Figma - "Paste to Figma" for design system integration
  3. Code snippets - Component-level exports for frameworks
Stitch提供多种导出格式：
  1. HTML/CSS - 适用于网页项目的简洁语义化标记
  2. Figma - 支持“粘贴到Figma”以集成到设计系统
  3. 代码片段 - 针对框架的组件级导出

Best Practices for Export

导出最佳实践

Before exporting:
  • Verify responsive breakpoints
  • Check color contrast for accessibility
  • Ensure interactive states are defined
  • Review component naming and structure
After export:
  • Refactor generated code for production standards
  • Add proper semantic HTML tags
  • Implement accessibility attributes (ARIA labels, alt text)
  • Optimize images and assets
  • Add animations and micro-interactions
导出前：
  • 验证响应式断点
  • 检查颜色对比度以确保可访问性
  • 确保交互状态已定义
  • 检查组件命名与结构
导出后：
  • 重构生成的代码以符合生产标准
  • 添加合适的语义化HTML标签
  • 实现可访问性属性（ARIA标签、替代文本）
  • 优化图片与资源
  • 添加动画与微交互

Anti-Patterns to Avoid

需要避免的反模式

❌ Vague Prompts

❌ 模糊的提示词

Make a nice website
Make a nice website

✅ Specific Prompts

✅ 具体的提示词

Portfolio website for photographer with full-screen image gallery, 
project case studies, and contact form. Minimalist black and white 
aesthetic with serif typography.
Portfolio website for photographer with full-screen image gallery, 
project case studies, and contact form. Minimalist black and white 
aesthetic with serif typography.

❌ Missing Context

❌ 缺少场景信息

Create a login page
Create a login page

✅ Context-Rich Prompts

✅ 包含场景的提示词

Login page for healthcare portal with email/password fields, 
"Remember me" checkbox, "Forgot password" link, and SSO options 
(Google, Microsoft). Professional, trustworthy design with 
blue medical theme.
Login page for healthcare portal with email/password fields, 
"Remember me" checkbox, "Forgot password" link, and SSO options 
(Google, Microsoft). Professional, trustworthy design with 
blue medical theme.

❌ No Visual Direction

❌ 无视觉方向

Design an app for task management
Design an app for task management

✅ Clear Visual Direction

✅ 明确视觉方向的提示词

Task management app with kanban board layout, drag-and-drop cards, 
priority labels, and due date indicators. Modern, productivity-focused 
design with purple/teal gradient accents and dark mode support.
Task management app with kanban board layout, drag-and-drop cards, 
priority labels, and due date indicators. Modern, productivity-focused 
design with purple/teal gradient accents and dark mode support.

Tips for Better Results

获得更好结果的技巧

  1. Reference existing designs - Upload screenshots or sketches as visual references alongside text prompts
  2. Use design terminology - Terms like "hero section," "card layout," "glassmorphic," "bento grid" help Stitch understand your intent
  3. Specify interactions - Describe hover states, click actions, and transitions for more complete designs
  4. Think in components - Break complex screens into reusable components (header, card, form, etc.)
  5. Iterate incrementally - Make small, focused changes rather than complete redesigns
  6. Test responsiveness - Always verify designs at multiple breakpoints (mobile, tablet, desktop)
  7. Consider accessibility - Mention color contrast, font sizes, and touch target sizes in prompts
  8. Leverage variants - Generate multiple options to explore different design directions quickly
  1. 参考现有设计 - 上传截图或草图作为视觉参考，配合文本提示词使用
  2. 使用设计术语 - 诸如“hero区域”、“卡片布局”、“玻璃拟态”、“便当盒网格”等术语能帮助Stitch理解你的需求
  3. 指定交互效果 - 描述悬停状态、点击操作和过渡效果，以生成更完整的设计
  4. 以组件为单位思考 - 将复杂屏幕拆分为可复用组件（页眉、卡片、表单等）
  5. 逐步迭代优化 - 进行小而精准的修改，而非彻底重设计
  6. 测试响应式表现 - 务必在多个断点（移动端、平板、桌面端）验证设计
  7. 考虑可访问性 - 在提示词中提及颜色对比度、字体大小和触摸目标尺寸
  8. 利用变体功能 - 快速生成多个选项以探索不同设计方向

Integration with Development Workflow

与开发工作流的集成

Stitch → Figma → Code

Stitch → Figma → 代码

  1. Generate UI in Stitch with detailed prompts
  2. Export to Figma for design system integration
  3. Hand off to developers with design specs
  4. Implement with production-ready code
  1. 使用详细提示词在Stitch中生成UI
  2. 导出到Figma以集成到设计系统
  3. 向开发人员交付设计规范
  4. 基于规范实现生产就绪代码

Stitch → HTML → Framework

Stitch → HTML → 框架

  1. Generate and refine UI in Stitch
  2. Export HTML/CSS code
  3. Convert to React/Vue/Svelte components
  4. Integrate into application codebase
  1. 在Stitch中生成并优化UI
  2. 导出HTML/CSS代码
  3. 转换为React/Vue/Svelte组件
  4. 集成到应用代码库

Rapid Prototyping

快速原型制作

  1. Create multiple screen variations quickly
  2. Test with users or stakeholders
  3. Iterate based on feedback
  4. Finalize design for development
  1. 快速创建多个屏幕变体
  2. 与用户或利益相关者进行测试
  3. 根据反馈进行迭代
  4. 最终确定设计以进入开发阶段

Conclusion

总结

Effective Stitch prompts are specific, context-rich, and visually descriptive. By following these principles and templates, you can generate professional UI designs that serve as strong foundations for production applications.
Remember: Stitch is a starting point, not a final product. Use it to accelerate the design process, explore ideas quickly, and establish visual direction—then refine with human judgment and production standards.
高效的Stitch提示词需具备具体性、场景丰富性和视觉描述性。遵循这些原则和模板，你可以生成专业的UI设计，作为生产应用的坚实基础。
请记住： Stitch是一个起点，而非最终成品。用它来加速设计流程、快速探索想法并确立视觉方向——然后结合人工判断和生产标准进行优化。