Back to Details

stitch-ui-design

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Stitch UI Design Prompting

Google 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转换
  • 多屏幕应用流程与响应式布局
  • 导出为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是起点，而非最终产品。用它加速设计流程、快速探索想法并确立视觉方向——然后通过人工判断和生产标准进行优化。

When to Use

使用场景

This skill is applicable to execute the workflow or actions described in the overview.
本技能适用于执行概述中描述的工作流或操作。