Stitch Prompt Guide: Effective Strategies for Building UI with AI
Comprehensive Stitch prompt strategy guide — from basics to advanced, teaching you how to efficiently build high-quality UI designs with AI.
The New Paradigm of Building UI with AI
Google Stitch makes UI design as simple as conversation. But to fully leverage AI's capabilities, you need to master the right prompt strategies. This guide takes you from basics to advanced, systematically improving your Stitch prompt skills.
Strategy 1: Layered Description
Don't try to cram all information into a single prompt. Use layered descriptions to gradually increase complexity.
Layer 1: Basic Framework
Design a mobile fitness tracking app
Layer 2: Add Layout
Design a mobile fitness tracking app with:
- Header with user greeting and profile avatar
- Main area with activity summary cards
- Bottom navigation with 4 tabs
Layer 3: Rich Details
Design a mobile fitness tracking app with:
- Header: greeting text ("Good morning, Alex") + circular profile avatar
- Main area: 3 summary cards (Steps, Calories, Active Minutes) with icons
- Below cards: weekly trend line chart
- Bottom nav: Home, Workout, Stats, Profile tabs with icons
- Style: Clean white background, green (#22C55E) accent, rounded cards
Strategy 2: Reference Pattern
Borrow from known design patterns to help AI understand your needs faster.
Example
Design a dashboard similar to Spotify's artist analytics page:
- Left sidebar with navigation
- Top section with key metrics (total plays, followers, revenue)
- Middle section with streaming trends chart
- Bottom section with top tracks list
- Dark theme with green accent (like Spotify)
Strategy 3: Constraint-Based
Add constraints to make AI output more controllable.
Common Constraint Types
| Constraint Type | Example |
|---|---|
| Color | "Use only blue and white colors" |
| Size | "All buttons minimum height 48px" |
| Count | "Navigation bar maximum 5 items" |
| Style | "No shadows, no gradients — flat design only" |
| Content | "All text in English" |
Real-World Example
Design a mobile weather app with strict constraints:
- ONLY 3 colors: dark blue (#1E3A5F), white, and light yellow (#FCD34D)
- No gradients, no shadows — flat design only
- Maximum 5 navigation items
- All text in English
- Touch targets minimum 44px
- No images — use weather icons only
Strategy 4: Scenario Narrative
Describe user scenarios like storytelling to give AI context.
A busy professional opens the app during their morning commute.
They need to quickly see:
- Today's schedule at a glance
- Upcoming meetings with join links
- Quick actions: add task, start timer
The design should be information-dense but not overwhelming,
optimized for one-handed phone use.
Strategy 5: Iterative Refinement
First generation is rarely perfect. The efficient approach is multi-round iteration.
Iteration Workflow
- Generate base version
- Analyze gaps: What needs improvement?
- Targeted modifications: Clearly state adjustments in the prompt
- Regenerate: Compare before and after
- Repeat until satisfied
Modified Prompt Example
The previous design is mostly good, but please make these adjustments:
1. Change primary color from blue to purple (#7C3AED)
2. Increase card spacing from 8px to 16px
3. Make title font bold
4. Add a search bar at the top of the page
Strategy 6: Component Thinking
Break complex pages into independent components, generate each separately, then combine.
Example: E-commerce Homepage Decomposition
| Component | Prompt |
|---|---|
| Search Bar | "Design a search bar with filter button and voice search icon" |
| Category Nav | "Design a horizontal scrollable category pills with 8 items" |
| Product Card | "Design a product card with image, title, price, rating stars, and add-to-cart button" |
| Bottom Nav | "Design a bottom tab bar with Home, Categories, Cart, Profile icons" |
Quick Reference Cheat Sheet
| Design Type | Key Prompt Words |
|---|---|
| Login Page | login, sign in, email/password, social login |
| Dashboard | dashboard, KPI cards, charts, sidebar navigation |
| E-commerce | product grid, shopping cart, filters, checkout |
| Social | feed, stories, profile, messaging |
| Utility | settings, preferences, account, notifications |
| Content | article, blog, media player, comments |
Summary
Master these 6 strategies to systematically build high-quality UI designs with Google Stitch:
- Layered Descriptions — from simple to complex
- Reference Patterns — borrow from known designs
- Constraints — control output boundaries
- Scenario Narratives — provide context
- Iterative Refinement — continuous improvement
- Component Thinking — break it down
Remember: good prompts aren't written in one pass — they're polished through continuous iteration.