Generate High-Quality UI Designs with AI Prompts

This skill provides expert prompting guidance for Google Stitch, Google Labs' experimental AI UI generator (powered by Gemini 2.5 Flash) that turns text prompts or visual references (sketches, wireframes, screenshots) into functional UI designs - supporting multi-screen app flows, responsive layouts, and export to HTML/CSS, Figma, or code, with iterative refinement via variants and annotations.

Use it when crafting prompts to generate web or mobile UI designs in Google Stitch - dashboards, landing pages, mobile app screens, forms, or multi-step flows - and when refining or exporting those designs. Remember Stitch is explicitly a starting point, not a final product: accelerate ideation and establish visual direction, then refine with human judgment and production standards.

Five core prompting principles: be specific and detailed (naming components, layout, and context rather than a generic ask); define visual style and theme (color palette, design aesthetic, typography, spacing/density); structure multi-screen flows as bulleted screen lists (Stitch asks for confirmation before generating multiple screens); specify platform and responsive behavior (mobile/tablet/desktop/responsive, with breakpoints); and include functional requirements (button actions, form validation, navigation, loading/empty/error states). A reusable prompt template covers screen/component type and context, key features, visual style, and platform. Common use-case templates are given for landing pages (hero, social proof, features grid, testimonials, pricing, FAQ, footer), mobile apps (search, category chips, cards, bottom nav), dashboards (sidebar nav, top bar, stats cards, activity timeline), and multi-step forms (progress indicator, inline validation, back/next, skip options).

Iteration strategies: "annotate to edit" for targeted changes without rewriting the whole prompt, generating multiple named variants to explore different directions, and progressive refinement (starting broad, then adding specificity in follow-up prompts). Design-to-code workflows: Stitch to Figma ("Paste to Figma") to developer handoff, or Stitch to exported HTML/CSS to framework components (React/Vue/Svelte) - before export, verify responsive breakpoints, color contrast, and interactive states; after export, refactor for production, add semantic HTML and ARIA/alt-text accessibility attributes, and optimize assets. Named anti-patterns: vague prompts, missing context, and no visual direction, each paired with a concrete rewritten example. Eight tips for better results: reference existing designs as visual uploads, use precise design terminology ("hero section," "bento grid," "glassmorphic"), specify interactions/hover states, think in reusable components, iterate incrementally, test multiple breakpoints, mention accessibility (contrast, font size, touch targets), and generate variants to explore quickly.

Designers and product teams using Google Stitch who want reliably specific, professional UI output - rather than generic AI results from vague prompts - across landing pages, mobile apps, dashboards, and multi-step forms.