Stitch — AI Design Generation
Tech-stack skill for using Google Stitch via the MCP server. Stitch generates UI designs (screens, components) from natural language prompts, outputting production-ready code or design specs.
Setup
# Initialize Stitch MCP server for your AI coding tool
npx @_davideast/stitch-mcp init --client claude-code
Once initialized, Stitch tools are available as MCP tools in the conversation. The proxy connects to Google's AI design service.
Prompt Crafting
Effective Stitch prompts specify four dimensions:
| Dimension | What to Include | Example |
|---|---|---|
| Screen purpose | What this screen does for the user | "A screen where users pick a gift recipient from their contact list" |
| Design system | Visual style, colors, typography | "Material 3, dark mode, purple primary color, rounded corners" |
| Components | Specific UI elements to include | "Search bar at top, scrollable list of avatar+name rows, FAB to add new" |
| Platform | Target platform constraints | "Mobile-first, iOS safe areas, thumb-reachable primary actions" |
Prompt Template
Generate a [screen type] screen for a [app type] app.
Purpose: [one sentence describing what the user accomplishes on this screen]
Design system: [framework/library, color scheme, typography, corner radius style]
Components to include:
- [component 1 with behavior note]
- [component 2 with behavior note]
- [component 3 with behavior note]
Platform: [iOS/Android/Web/cross-platform], [orientation], [key constraints]
Tone: [minimal/playful/professional/bold]
Example Prompts
Product List Screen
Generate a product discovery grid screen for a shopping wishlist app.
Purpose: Users browse recommended products and add items they want to their wishlist.
Design system: Material 3, light mode, teal accent, 12px corner radius, card elevation.
Components:
- Top app bar with search icon and filter chip row below it
- 2-column product grid with image, name, price, and "Add" icon button per card
- Bottom navigation bar (5 tabs: Discover, Favorites, AI, Social, Account)
Platform: Mobile (iOS/Android), portrait, thumb zone awareness for bottom nav.
Tone: clean and modern.
Empty State Screen
Generate an empty state component for a favorites list screen.
Purpose: Shown when a user has no saved favorites yet. Should encourage them to add their first item.
Design system: Material 3, adaptive (light/dark), muted colors, friendly illustration area.
Components:
- Centered illustration placeholder (200x200)
- Headline: "No favorites yet"
- Supporting text: "Tap the + button to save your first item"
- Primary CTA button: "Browse products"
Platform: Mobile, embedded in a tab screen (not full-screen).
Tone: encouraging, friendly.
Integration with UI Designer Role
The ui-designer agent uses Stitch when:
- A new screen is requested with visual requirements
- A significant redesign is needed (not just tweaking existing code)
- A design reference is needed before implementation begins
Workflow:
1. ui-designer receives screen requirements
2. Craft Stitch prompt based on requirements + existing design system
3. Generate design via Stitch MCP tool
4. Review output — iterate on prompt if needed
5. Hand off generated code/spec to feature-builder for implementation
6. Document design decisions in issue comments
Output Types
Stitch can generate:
| Output | Use Case |
|---|---|
| Flutter widget code | Direct implementation starting point |
| React/HTML component | Web or cross-platform reference |
| Design spec (JSON/Figma) | Hand-off to human designer for refinement |
| Component variants | Multiple states (empty, loading, error, filled) |
Iteration Tips
- Too generic? Add more specific component details and exact copy
- Wrong style? Specify exact hex colors, font names, or reference a known design system
- Missing states? Ask for loading, empty, error, and success states separately
- Wrong layout? Describe the hierarchy explicitly ("header at top, scrollable content in middle, fixed action bar at bottom")
- Re-generate with variation: Ask for "a more minimal version" or "with more visual hierarchy"
Directory Conventions for Generated Designs
Store generated designs in a consistent directory structure:
docs/design/redesigns/<screen_name>/
screen.png # Screenshot of the generated design
screen_empty.png # Empty state variant
screen_loading.png # Loading state variant
code.html # HTML/CSS code for reference
notes.md # Implementation notes (optional)
| Element | Convention | Example |
|---|---|---|
| Directory | snake_case | gift_suggestion_results/ |
| Screenshot | screen.png or screen_<variant>.png | screen_dark.png |
| HTML code | code.html | code.html |
Implementation Notes Template
After generating a design, document implementation guidance for the feature builder:
## Implementation Notes: [Screen Name]
### Layout Structure
- [Column/Row/Stack description]
- [Spacing values]
### Components to Reuse
- [Existing component] from lib/components/ui/
### New Components Needed
- [Component name] -- [description]
### Colors and Typography
- Background: [hex]
- Card: [hex with opacity]
- Primary text: [hex, font, size]
- Accent: [gradient or color]
Quality Checks Before Handing Off
- Design matches the app's existing visual language
- All required states are covered (loading, empty, error, filled)
- Primary action is in the thumb-reachable zone on mobile
- Typography hierarchy is clear (heading, body, caption)
- Touch targets are at least 44x44pt
- Design works in both light and dark mode (if app supports it)
- Design artifacts saved to the correct directory
- Implementation notes created for the feature builder
Limitations
- Stitch generates HTML/CSS, not Flutter code -- translation is needed
- Generated designs may not perfectly match an existing design system
- Complex interactions (drag, swipe, multi-step) are hard to convey in static designs
- Multiple iterations may be needed for design system consistency
- Generated code is reference material, not production code