how-to-guide

How to Convert Stitch Designs to React Native with Platform-Specific Code

July 18, 2026 google-labs-code/stitch-skills ↗

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 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 downloads HTML files to .stitch/designs/<page>.html and screenshots to .stitch/designs/<page>.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 <head> 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 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:

  • <div> → View
  • <p>, <h1>–<h6> → Text
  • <img> → Image (using source={{ uri }})
  • <button>, <a> → Pressable (with onPress)
  • Large <ul>/<ol> lists → FlatList (for virtualization)

All CSS converts to StyleSheet.create() objects. The skill enforces atomic design principles by organizing components into src/components/atoms, molecules, and organisms. Each component exports a TypeScript interface named <ComponentName>Props with readonly modifiers. Top-level screens wrap content in SafeAreaView from react-native-safe-area-context, and the skill scaffolds React Navigation using NativeStackScreenProps or BottomTabScreenProps.

Phase 4: Validation and Execution

The skill runs npm install if needed, then executes npm run validate against the criteria in plugins/stitch-build/skills/react-native/resources/architecture-checklist.md. It also runs tsc --noEmit to verify type safety. Optionally, with explicit user consent, it can start the React Native packager using npx react-native start. The skill's built-in anti-patterns list helps avoid common pitfalls such as monolithic screens or reading HTML files without MCP.

Handling Platform-Specific Code

When designs require different behaviors on iOS and Android, the skill generates code using React Native's Platform API. As demonstrated in plugins/stitch-build/skills/react-native/examples/gold-standard-card.tsx, you can apply platform-specific styles like this:

import { Platform, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  shadow: Platform.select({
    ios: {
      shadowColor: '#000',
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: 0.1,
      shadowRadius: 4,
    },
    android: {
      elevation: 4,
    },
  }),
});

This approach handles differences such as shadow rendering (iOS uses shadow* properties while Android uses elevation) without creating separate component files. Layout defaults to Flexbox (column direction), and the skill uses useWindowDimensions() for responsive sizing instead of vw/vh units.

Complete Component Example

The skill uses plugins/stitch-build/skills/react-native/resources/component-template.tsx as a boilerplate. Here is a generated card component demonstrating theme integration and platform-specific shadows:

import React from 'react';
import { View, Text, Image, Pressable, StyleSheet, Platform } from 'react-native';
import { useWindowDimensions } from 'react-native';
import { theme } from '../../theme';
import { mockData } from '../../data/mockData';

export interface CardProps {
  readonly title: string;
  readonly subtitle: string;
  readonly imageUrl: string;
  readonly onPress: () => void;
}

export const Card: React.FC<CardProps> = ({ title, subtitle, imageUrl, onPress }) => {
  const { width } = useWindowDimensions();
  return (
    <Pressable onPress={onPress} style={styles.card}>
      <Image source={{ uri: imageUrl }} style={styles.image} />
      <View style={styles.textContainer}>
        <Text style={styles.title}>{title}</Text>
        <Text style={styles.subtitle}>{subtitle}</Text>
      </View>
    </Pressable>
  );
};

const styles = StyleSheet.create({
  card: {
    backgroundColor: theme.colors.white,
    borderRadius: theme.borderRadius.md,
    ...Platform.select({
      ios: {
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.1,
        shadowRadius: 4,
      },
      android: {
        elevation: 4,
      },
    }),
    padding: theme.spacing.md,
    marginBottom: theme.spacing.lg,
    width: width - theme.spacing.lg * 2,
  },
  image: {
    width: '100%',
    aspectRatio: 16 / 9,
    borderRadius: theme.borderRadius.sm,
  },
  textContainer: {
    marginTop: theme.spacing.sm,
  },
  title: {
    ...theme.typography.title,
    color: theme.colors.primary,
  },
  subtitle: {
    ...theme.typography.body,
    color: theme.colors.gray[700],
  },
});

Summary

  • The react-native skill in google-labs-code/stitch-skills provides a complete pipeline to convert Stitch designs into React Native applications.
  • The four-phase process covers retrieval (fetch-stitch.sh), theme extraction (src/theme.ts), component mapping (HTML to React Native primitives), and validation (npm run validate against architecture-checklist.md).
  • Platform-specific styling uses Platform.select to handle iOS and Android differences without code duplication.
  • Generated code follows atomic design principles, TypeScript strict typing with readonly props, and React Navigation patterns.

Frequently Asked Questions

What MCP tools are required to fetch Stitch designs?

You need list_tools to discover the Stitch MCP prefix (usually stitch:) and get_screen to retrieve download URLs for HTML and screenshot assets. The skill utilizes the plugins/stitch-build/skills/react-native/scripts/fetch-stitch.sh script to download these files into the .stitch/designs/ directory and requires you to audit the PNG files before proceeding.

How does the skill handle Tailwind CSS configuration from the original design?

During Phase 2, the skill parses the <script> block in each HTML file's <head> that contains the tailwind.config object. It extracts colors, spacing, typography, and border-radius values, then generates src/theme.ts with typed constants. This ensures all generated components reference design tokens rather than hard-coded values.

Can I customize the generated component structure?

Yes, while the skill enforces architectural rules via plugins/stitch-build/skills/react-native/resources/architecture-checklist.md, you can modify the boilerplate in plugins/stitch-build/skills/react-native/resources/component-template.tsx. The skill uses this template to scaffold components, so changes here propagate to all generated files while maintaining the required readonly props interfaces and atomic design folder structure.

How are platform differences handled in the generated code?

The skill generates platform-specific code using React Native's Platform.select API. For example, iOS shadow properties (shadowColor, shadowOffset) and Android elevation are applied conditionally within StyleSheet.create. This ensures native look and feel on both platforms without maintaining separate component implementations.

Have a question about this repo?

These articles cover the highlights, but your codebase questions are specific. Give your agent direct access to the source. Share this with your agent to get started:

Share the following with your agent to get started:
curl -s "https://instagit.com/install.md"
Works with
Claude Codex Cursor VS Code OpenClaw Any MCP Client

Maintain an open-source project? Get it listed too →