# How to Convert Stitch Designs to React Native with Platform-Specific Code > Convert Stitch designs to React Native effortlessly. Learn how to generate platform-specific code using the stitch-skills repository for production-ready components. - Repository: [Google Labs Code/stitch-skills](https://github.com/google-labs-code/stitch-skills) - Tags: how-to-guide - Published: 2026-07-18 --- **The Stitch react-native skill in the google-labs-code/stitch-skills repository converts HTML/CSS designs into production-ready React Native components through a four-phase pipeline that enforces platform-specific styling and architectural validation.** The google-labs-code/stitch-skills repository provides a dedicated **react-native** skill that transforms Stitch HTML/CSS outputs into maintainable mobile applications. This skill follows a strict conversion pipeline to generate TypeScript components with proper styling, navigation scaffolding, and platform-specific adaptations for iOS and Android. ## The Four-Phase Conversion Pipeline The conversion process defined in [`plugins/stitch-build/skills/react-native/SKILL.md`](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-build/skills/react-native/SKILL.md) follows a rigorous workflow: ### Phase 1: Design Retrieval and Networking The skill uses MCP (Model Context Protocol) tools to download design assets. First, call `list_tools` to obtain the Stitch MCP prefix (typically `stitch:`). For each screen, invoke `[prefix]:get_screen` to retrieve JSON containing `htmlCode.downloadUrl` and `screenshot.downloadUrl`. The bundled script [`plugins/stitch-build/skills/react-native/scripts/fetch-stitch.sh`](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-build/skills/react-native/scripts/fetch-stitch.sh) downloads HTML files to `.stitch/designs/.html` and screenshots to `.stitch/designs/.png`. The skill requires visual audit of these screenshots before proceeding. ### Phase 2: Theme Extraction from Tailwind Configuration The skill parses each HTML file's `` section to locate the embedded `tailwind.config` object. It extracts color palettes, font families, spacing scales, and border radius values, then generates [`src/theme.ts`](https://github.com/google-labs-code/stitch-skills/blob/main/src/theme.ts) with typed design tokens. This prevents hard-coded values in components—all colors must reference the theme object. ### Phase 3: Architectural Mapping and Component Generation This phase maps HTML elements to React Native primitives according to the skill's element-to-component table: - `

` → `View` - `

`, `

`–`

` → `Text` - `` → `Image` (using `source={{ uri }}`) - `