@umituz/react-native-stitch-design

Google Stitch AI Integration for React Native 🎨

Generate high-fidelity UI designs using Google Stitch AI and convert them to production-ready React Native components.

✨ Features

• 🎨 AI-Powered UI Generation - Generate designs from natural language prompts
• 🔄 Vibe Coding - Iteratively refine designs with conversational prompts
• 🎭 3-Layer Vibe Structure - Anatomy + Vibe + Content framework
• 📱 React Native Conversion - Auto-convert HTML/CSS to React Native components
• 🎯 Design System Export - Extract themes, colors, typography
• 🖼️ Sketch-to-UI - Convert hand-drawn sketches to coded interfaces
• 🧩 MCP Integration - Compatible with coding agents
• 🪄 Wizard Flows - Guided design generation workflows

🚀 Quick Start

Installation

npm install @umituz/react-native-stitch-design
# or
yarn add @umituz/react-native-stitch-design

Basic Usage

import React from 'react';
import { View } from 'react-native';
import { useStitchDesign, StitchDesignViewer } from '@umituz/react-native-stitch-design';

function App() {
  const { generateDesign, isLoading, error } = useStitchDesign();

  const handleGenerate = async () => {
    try {
      const design = await generateDesign({
        prompt: "A modern e-commerce home screen with Neo-Brutalism style",
        deviceType: "MOBILE"
      });
      console.log('Design generated!', design);
    } catch (err) {
      console.error('Failed to generate design', err);
    }
  };

  return (
    <View>
      <Button title="Generate Design" onPress={handleGenerate} />
      {design && <StitchDesignViewer design={design} />}
    </View>
  );
}

📖 Documentation

Hooks

useStitchDesign

Main hook for interacting with Google Stitch API.

const {
  generateDesign,
  refineDesign,
  getScreen,
  listProjects,
  createProject,
  isLoading,
  error
} = useStitchDesign({
  apiKey: process.env.STITCH_API_KEY
});

useStitchVibe

Work with the 3-Layer Vibe Structure.

const {
  generateVibePrompt,
  enhancePrompt,
  parsePrompt,
  suggestAnatomies,
  suggestVibes
} = useStitchVibe();

// Generate optimized prompt
const prompt = generateVibePrompt({
  anatomy: "Split-screen dashboard",
  vibe: "Glassmorphism, warm and inviting",
  content: "Real estate listings"
});

useDesignSystem

Extract design tokens from generated designs.

const { extractTheme, generateThemeFile, mergeThemes } = useDesignSystem();

const theme = await extractTheme({
  htmlCode: design.htmlCode,
  include: ['colors', 'typography', 'spacing']
});

useReactNativeConversion

Convert HTML/CSS to React Native components.

const { convertToReactNative } = useReactNativeConversion();

const result = await convertToReactNative(design.htmlCode, {
  framework: 'paper',
  includeStyles: true,
  extractComponents: true
});

Components

StitchDesignViewer

Preview generated designs in your app.

<StitchDesignViewer
  design={design}
  loading={isLoading}
  error={error}
  onError={(err) => console.error(err)}
/>

StitchPromptInput

Input component with vibe suggestions.

<StitchPromptInput
  onSubmit={(prompt) => generateDesign({ prompt, deviceType: 'MOBILE' })}
  placeholder="Describe your UI..."
  suggestions={true}
/>

Wizard Flow

Complete guided workflow for design generation.

import { StitchWizardFlow } from '@umituz/react-native-stitch-design/wizard';

<StitchWizardFlow
  onComplete={async (design) => {
    // Convert to React Native
    const rnCode = await convertToReactNative(design.htmlCode, {
      framework: 'paper'
    });

    // Export design system
    const theme = await extractTheme({ htmlCode: design.htmlCode });
  }}
  onCancel={() => console.log('Cancelled')}
/>

🎨 Supported Frameworks

• React Native Paper - Material Design components
• NativeWind - Tailwind CSS for React Native
• NativeBase - Cross-platform UI kit
• Tamagui - High-performance UI library

🧩 MCP Integration

This skill includes MCP server tools for coding agent integration:

• stitch:generate_screen_from_text - Generate UI from prompt
• stitch:get_screen - Get design details
• stitch:list_projects - List all projects
• stitch:refine_screen - Refine existing design

📦 App Initializer

For automatic setup:

// app-initializer.config.ts
export default {
  skills: [
    {
      name: '@umituz/react-native-stitch-design',
      options: {
        autoSetup: true,
        includeWizard: true,
        targetFramework: 'paper'
      }
    }
  ]
};

📝 License

MIT

🤝 Contributing

Contributions are welcome! Please open an issue or PR.

🔗 Links

• Google Stitch
• Stitch Agent Skills
• Documentation

👨‍💻 Author

Made with ❤️ by @umituz