--- name: stitch-ui-design description: Expert guide for creating effective prompts for Google Stitch AI UI design tool. Use when user wants to design UI/UX in Stitch, create app interfaces, generate mobile/web designs, or needs help crafting Stitch prompts. Covers prompt structure, specificity techniques, iteration strategies, and design-to-code workflows for Stitch by Google. risk: safe source: "self" --- # Stitch UI Design Prompting 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. ## What is 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 ## Core Prompting Principles ### 1. Be Specific and Detailed 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). ### 2. Define Visual Style and Theme 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. ``` ### 3. Structure Multi-Screen Flows Clearly 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. ### 4. Specify Platform and Responsive Behavior 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 ``` ### 5. Include Functional Requirements 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 ``` ## 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) ``` ## 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" ### 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 ``` ### 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 ``` ## 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 ``` ### 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) ``` ### 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) ``` ### 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 ``` ## 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 ### 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 ## Anti-Patterns to Avoid ### ❌ Vague Prompts ``` 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. ``` --- ### ❌ Missing Context ``` 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. ``` --- ### ❌ No Visual Direction ``` 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. ``` ## 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 ## Integration with Development Workflow ### Stitch → Figma → Code 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 ### Stitch → HTML → Framework 1. Generate and refine UI in Stitch 2. Export HTML/CSS code 3. Convert to React/Vue/Svelte components 4. Integrate into application codebase ### Rapid Prototyping 1. Create multiple screen variations quickly 2. Test with users or stakeholders 3. Iterate based on feedback 4. Finalize design for development ## 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.