# How to Navigate the 4-Phase Conversion Process in stitch::react-components > Master the 4 phase conversion process in stitch::react-components. Learn to generate production-ready React code efficiently by understanding each phase and its critical gates. - Repository: [Google Labs Code/stitch-skills](https://github.com/google-labs-code/stitch-skills) - Tags: how-to-guide - Published: 2026-07-12 --- **The stitch::react-components workflow converts Stitch designs into production-ready React code through four mandatory phases—Retrieval & Networking, Style Extraction, Architectural Rules, and Execution & Validation—each guarded by specific gates that must be satisfied before proceeding.** The `google-labs-code/stitch-skills` repository provides a structured skill for transforming Stitch design files into a type-safe Vite/React codebase. Understanding how to navigate the 4-phase conversion process ensures you produce modular, validated components that strictly adhere to the architectural rules defined in [`SKILL.md`](https://github.com/google-labs-code/stitch-skills/blob/main/SKILL.md). ## Phase 1: Retrieval & Networking The first phase focuses on pulling every screen’s design assets from the Stitch MCP and auditing them visually. You must treat this as a mandatory prerequisite; the subsequent phases depend on these local assets. ### Gate: Asset Download and Visual Audit You cannot proceed until **all screens have been downloaded via [`scripts/fetch-stitch.sh`](https://github.com/google-labs-code/stitch-skills/blob/main/scripts/fetch-stitch.sh) and each screenshot has been inspected**. Begin by discovering the MCP prefix using `list_tools`. Then call `[prefix]:get_screen` for every screen in the design. Check if `.stitch/designs/{page}.html` and `.stitch/designs/{page}.png` already exist; if they do, ask whether to reuse or refresh them. Execute the download commands for both HTML and screenshot assets: ```bash # Download HTML and screenshot (append =w{width} for images) bash scripts/fetch-stitch.sh "https://storage.googleapis.com/.../screen.html" ".stitch/designs/home.html" bash scripts/fetch-stitch.sh "https://storage.googleapis.com/.../screen.png=w360" ".stitch/designs/home.png" ``` Visually audit each `.png` to verify the download succeeded, then save project metadata to [`.stitch/metadata.json`](https://github.com/google-labs-code/stitch-skills/blob/main/.stitch/metadata.json). ## Phase 2: Style Extraction Once assets are local, extract the design tokens to build a project-specific Tailwind configuration. This phase ensures your React components use consistent colors, typography, and spacing derived directly from the Stitch design. ### Gate: Tailwind Token Verification You must confirm that **[`resources/style-guide.json`](https://github.com/google-labs-code/stitch-skills/blob/main/resources/style-guide.json) contains tokens freshly extracted from the current project’s HTML ``**. Open each downloaded HTML file and locate the `