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.
Add this skill
npx mdskills install sickn33/stitch-ui-designComprehensive guide with templates, examples, and iteration strategies for AI-powered UI design
1---2name: stitch-ui-design3description: 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.4risk: safe5source: "self"6---78# Stitch UI Design Prompting910Expert 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.1112## What is Google Stitch?1314Google 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:1516- Text-to-UI generation from natural language prompts17- Image-to-UI conversion from sketches, wireframes, or screenshots18- Multi-screen app flows and responsive layouts19- Export to HTML/CSS, Figma, and code20- Iterative refinement with variants and annotations2122## Core Prompting Principles2324### 1. Be Specific and Detailed2526Generic prompts yield generic results. Specific prompts with clear requirements produce tailored, professional designs.2728**Poor prompt:**29```30Create a dashboard31```3233**Effective prompt:**34```35Member dashboard with course modules grid, progress tracking bar,36and community feed sidebar using purple theme and card-based layout37```3839**Why it works:** Specifies components (modules, progress, feed), layout structure (grid, sidebar), visual style (purple theme, cards), and context (member dashboard).4041### 2. Define Visual Style and Theme4243Always include color schemes, design aesthetics, and visual direction to avoid generic AI outputs.4445**Components to specify:**46- Color palette (primary colors, accent colors)47- Design style (minimalist, modern, playful, professional, glassmorphic)48- Typography preferences (if any)49- Spacing and density (compact, spacious, balanced)5051**Example:**52```53E-commerce product page with hero image gallery, add-to-cart CTA,54reviews section, and related products carousel. Use clean minimalist55design with sage green accents and generous white space.56```5758### 3. Structure Multi-Screen Flows Clearly5960For apps with multiple screens, list each screen as bullet points before generation.6162**Approach:**63```64Fitness tracking app with:65- Onboarding screen with goal selection66- Home dashboard with daily stats and activity rings67- Workout library with category filters68- Profile screen with achievements and settings69```7071Stitch will ask for confirmation before generating multiple screens, ensuring alignment with your vision.7273### 4. Specify Platform and Responsive Behavior7475Indicate whether the design is for mobile, tablet, desktop, or responsive web.7677**Examples:**78```79Mobile app login screen (iOS style) with email/password fields and social auth buttons8081Responsive landing page that adapts from mobile (320px) to desktop (1440px)82with collapsible navigation83```8485### 5. Include Functional Requirements8687Describe interactive elements, states, and user flows to generate more complete designs.8889**Elements to specify:**90- Button actions and CTAs91- Form fields and validation92- Navigation patterns93- Loading states94- Empty states95- Error handling9697**Example:**98```99Checkout flow with:100- Cart summary with quantity adjusters101- Shipping address form with validation102- Payment method selection (cards, PayPal, Apple Pay)103- Order confirmation with tracking number104```105106## Prompt Structure Template107108Use this template for comprehensive prompts:109110```111[Screen/Component Type] for [User/Context]112113Key Features:114- [Feature 1 with specific details]115- [Feature 2 with specific details]116- [Feature 3 with specific details]117118Visual Style:119- [Color scheme]120- [Design aesthetic]121- [Layout approach]122123Platform: [Mobile/Web/Responsive]124```125126**Example:**127```128Dashboard for SaaS analytics platform129130Key Features:131- Top metrics cards showing MRR, active users, churn rate132- Line chart for revenue trends (last 30 days)133- Recent activity feed with user actions134- Quick action buttons for reports and exports135136Visual Style:137- Dark mode with blue/purple gradient accents138- Modern glassmorphic cards with subtle shadows139- Clean data visualization with accessible colors140141Platform: Responsive web (desktop-first)142```143144## Iteration Strategies145146### Refine with Annotations147148Use Stitch's "annotate to edit" feature to make targeted changes without rewriting the entire prompt.149150**Workflow:**1511. Generate initial design from prompt1522. Annotate specific elements that need changes1533. Describe modifications in natural language1544. Stitch updates only the annotated areas155156**Example annotations:**157- "Make this button larger and use primary color"158- "Add more spacing between these cards"159- "Change this to a horizontal layout"160161### Generate Variants162163Request multiple variations to explore different design directions:164165```166Generate 3 variants of this hero section:1671. Image-focused with minimal text1682. Text-heavy with supporting graphics1693. Video background with overlay content170```171172### Progressive Refinement173174Start broad, then add specificity in follow-up prompts:175176**Initial:**177```178E-commerce homepage179```180181**Refinement 1:**182```183Add featured products section with 4-column grid and hover effects184```185186**Refinement 2:**187```188Update color scheme to earth tones (terracotta, sage, cream)189and add promotional banner at top190```191192## Common Use Cases193194### Landing Pages195196```197SaaS landing page for [product name]198199Sections:200- Hero with headline, subheadline, CTA, and product screenshot201- Social proof with customer logos202- Features grid (3 columns) with icons203- Testimonials carousel204- Pricing table (3 tiers)205- FAQ accordion206- Footer with links and newsletter signup207208Style: Modern, professional, trust-building209Colors: Navy blue primary, light blue accents, white background210```211212### Mobile Apps213214```215Food delivery app home screen216217Components:218- Search bar with location selector219- Category chips (Pizza, Burgers, Sushi, etc.)220- Restaurant cards with image, name, rating, delivery time, and price range221- Bottom navigation (Home, Search, Orders, Profile)222223Style: Vibrant, appetite-appealing, easy to scan224Colors: Orange primary, white background, food photography225Platform: iOS mobile (375px width)226```227228### Dashboards229230```231Admin dashboard for content management system232233Layout:234- Left sidebar navigation with collapsible menu235- Top bar with search, notifications, and user profile236- Main content area with:237 - Stats overview (4 metric cards)238 - Recent posts table with actions239 - Activity timeline240 - Quick actions panel241242Style: Clean, data-focused, professional243Colors: Neutral grays with blue accents244Platform: Desktop web (1440px)245```246247### Forms and Inputs248249```250Multi-step signup form for B2B platform251252Steps:2531. Account details (company name, email, password)2542. Company information (industry, size, role)2553. Team setup (invite members)2564. Confirmation with success message257258Features:259- Progress indicator at top260- Field validation with inline errors261- Back/Next navigation262- Skip option for step 3263264Style: Minimal, focused, low-friction265Colors: White background, green for success states266```267268## Design-to-Code Workflow269270### Export Options271272Stitch provides multiple export formats:2732741. **HTML/CSS** - Clean, semantic markup for web projects2752. **Figma** - "Paste to Figma" for design system integration2763. **Code snippets** - Component-level exports for frameworks277278### Best Practices for Export279280**Before exporting:**281- Verify responsive breakpoints282- Check color contrast for accessibility283- Ensure interactive states are defined284- Review component naming and structure285286**After export:**287- Refactor generated code for production standards288- Add proper semantic HTML tags289- Implement accessibility attributes (ARIA labels, alt text)290- Optimize images and assets291- Add animations and micro-interactions292293## Anti-Patterns to Avoid294295### ❌ Vague Prompts296```297Make a nice website298```299300### ✅ Specific Prompts301```302Portfolio website for photographer with full-screen image gallery,303project case studies, and contact form. Minimalist black and white304aesthetic with serif typography.305```306307---308309### ❌ Missing Context310```311Create a login page312```313314### ✅ Context-Rich Prompts315```316Login page for healthcare portal with email/password fields,317"Remember me" checkbox, "Forgot password" link, and SSO options318(Google, Microsoft). Professional, trustworthy design with319blue medical theme.320```321322---323324### ❌ No Visual Direction325```326Design an app for task management327```328329### ✅ Clear Visual Direction330```331Task management app with kanban board layout, drag-and-drop cards,332priority labels, and due date indicators. Modern, productivity-focused333design with purple/teal gradient accents and dark mode support.334```335336## Tips for Better Results3373381. **Reference existing designs** - Upload screenshots or sketches as visual references alongside text prompts3393402. **Use design terminology** - Terms like "hero section," "card layout," "glassmorphic," "bento grid" help Stitch understand your intent3413423. **Specify interactions** - Describe hover states, click actions, and transitions for more complete designs3433444. **Think in components** - Break complex screens into reusable components (header, card, form, etc.)3453465. **Iterate incrementally** - Make small, focused changes rather than complete redesigns3473486. **Test responsiveness** - Always verify designs at multiple breakpoints (mobile, tablet, desktop)3493507. **Consider accessibility** - Mention color contrast, font sizes, and touch target sizes in prompts3513528. **Leverage variants** - Generate multiple options to explore different design directions quickly353354## Integration with Development Workflow355356### Stitch → Figma → Code3571. Generate UI in Stitch with detailed prompts3582. Export to Figma for design system integration3593. Hand off to developers with design specs3604. Implement with production-ready code361362### Stitch → HTML → Framework3631. Generate and refine UI in Stitch3642. Export HTML/CSS code3653. Convert to React/Vue/Svelte components3664. Integrate into application codebase367368### Rapid Prototyping3691. Create multiple screen variations quickly3702. Test with users or stakeholders3713. Iterate based on feedback3724. Finalize design for development373374## Conclusion375376Effective 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.377378**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.379
Full transparency — inspect the skill content before installing.