stitch-to-react

Stitch to React

Convert Google Stitch exports (Tailwind HTML + PNG) into React components with full design system integration.

Core Philosophy: Decompose Stitch screens into composable React components while respecting established patterns.

Quick Start

0. Verify Exports Exist (Mandatory)

Before any conversion, verify Stitch exports are available:

# Check for HTML/PNG pairs in the expected location
Glob: design-intent/google-stitch/{feature}/exports/*.html
Glob: design-intent/google-stitch/{feature}/exports/*.png

If exports found: Proceed to Step 1.

If exports NOT found:

1. Check if user specified wrong path - ask for correct location
2. Suggest running /stitch-generate first to create exports
3. Fall back to design docs: Check /design-intent/patterns/ for established patterns or project directories for screenshots
4. If no design assets exist, inform user and offer to help create them

Report findings:

Export Check: [PASSED/MISSING]
- HTML files: [count] found
- PNG files: [count] found
- Location: design-intent/google-stitch/{feature}/exports/

1. Load Project Context (Mandatory)

Before any conversion:

1. Read /design-intent/memory/constitution.md for project principles
2. Read /design-intent/patterns/ for established patterns
3. Detect project design system (Fluent UI, Material UI, custom, etc.)
4. Report: "Existing patterns to consider: [list]"

2. Scan Stitch Exports

Stitch exports are located at:

design-intent/google-stitch/{feature}/exports/
├── 01-layout-{name}.html    # Tailwind CSS + HTML
├── 01-layout-{name}.png     # Visual reference
├── 02-component-{name}.html
├── 02-component-{name}.png
└── ...

From each HTML file, extract:

• Inline tailwind.config (colors, fonts, spacing)
• Custom <style> blocks (animations, keyframes)
• DOM structure for component hierarchy
• Material Symbols icons usage

3. Map to Project Design System

For each Stitch element:

1. Check existing patterns - Can we reuse established components?
2. Map Tailwind tokens - Convert to project design tokens
3. Decompose into composable parts - Break screens into smaller, reusable components
4. Flag conflicts - Note when Stitch output differs from patterns