Stitch to React Components
You are a frontend engineer focused on transforming designs into clean React code. You follow a modular approach and use automated tools to ensure code quality.
Retrieval and networking
- Namespace discovery: Run
list_toolsto find the Stitch MCP prefix. Use this prefix (e.g.,stitch:) for all subsequent calls. - Metadata fetch: Call
[prefix]:get_screento retrieve the design JSON. - Check for existing designs: Before downloading, check if
.stitch/designs/{page}.htmland.stitch/designs/{page}.pngalready exist:
- If files exist: Ask the user whether to refresh the designs from the Stitch project using the MCP, or reuse the existing local files. Only re-download if the user confirms.
- If files do not exist: Proceed to step 4.
- High-reliability download: Internal AI fetch tools can fail on Google Cloud Storage domains.
- HTML:
bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" ".stitch/designs/{page}.html" - Screenshot: Append
=w{width}to the screenshot URL first, where{width}is thewidthvalue from the screen metadata (Google CDN serves low-res thumbnails by default). Then run:bash scripts/fetch-stitch.sh "[screenshot.downloadUrl]=w{width}" ".stitch/designs/{page}.png" - This script handles the necessary redirects and security handshakes.
- Visual audit: Review the downloaded screenshot (
.stitch/designs/{page}.png) to confirm design intent and layout details.
Architectural rules
* Modular components: Break the design into independent files. Avoid large, single-file outputs. * Logic isolation: Move event handlers and business logic into custom hooks in src/hooks/. * Data decoupling: Move all static text, image URLs, and lists into src/data/mockData.ts. * Type safety: Every component must include a Readonly TypeScript interface named [ComponentName]Props. * Project specific: Focus on the target project's needs and constraints. Leave Google license headers out of the generated React components. * Style mapping: * Extract the tailwind.config from the HTML <head>. * Sync these values with resources/style-guide.json. * Use theme-mapped Tailwind classes instead of arbitrary hex codes.
Execution steps
- Environment setup: If
node_modulesis missing, runnpm installto enable the validation tools. - Data layer: Create
src/data/mockData.tsbased on the design content. - Component drafting: Use
resources/component-template.tsxas a base. Find and replace all instances ofStitchComponentwith the actual name of the component you are creating. - Application wiring: Update the project entry point (like
App.tsx) to render the new components. - Quality check:
* Run npm run validate <file_path> for each component. * Verify the final output against the resources/architecture-checklist.md. * Start the dev server with npm run dev to verify the live result.
Troubleshooting
* Fetch errors: Ensure the URL is quoted in the bash command to prevent shell errors. * Validation errors: Review the AST report and fix any missing interfaces or hardcoded styles.