# How to Convert Stitch Designs to React Components with Vite

> Convert Stitch designs to React components using Vite. Run the stitch::react-components skill to generate Atomic Design components and integrate them into your Vite project.

- Repository: [Google Labs Code/stitch-skills](https://github.com/google-labs-code/stitch-skills)
- Tags: how-to-guide
- Published: 2026-07-12

---

**You can convert Stitch designs to React components with Vite by running the `stitch::react-components` skill to generate Atomic Design-based components, scaffolding a Vite React project, and integrating the generated code into the `src/components/` directory.**

The **google-labs-code/stitch-skills** repository provides a dedicated *react-components* skill that automates the transformation of Stitch screens into production-ready React code. This workflow bridges the gap between design and development by mapping Stitch design tokens to a component template, validating the output with AST checks, and outputting code that conforms to a 20-point architectural checklist. When paired with Vite's fast dev server, you get instant hot-module replacement and a modern bundling setup for your generated UI.

## Step 1: Generate React Components Using the Stitch Skill

The conversion process begins with the **stitch::react-components** skill, which retrieves design metadata from Stitch and scaffolds TypeScript components based on an Atomic Design pattern.

### Understanding the Skill Definition

According to the **SKILL.md** file located at [`plugins/stitch-build/skills/react-components/SKILL.md`](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-build/skills/react-components/SKILL.md), the skill defines a three-stage workflow: ingestion of design metadata, mapping of tokens to the component template, and final validation. The skill outputs a complete component folder including a [`style-guide.json`](https://github.com/google-labs-code/stitch-skills/blob/main/style-guide.json) that ensures **token consistency** across your React application.

### Component Template Structure

The scaffolded components use the boilerplate found in [`plugins/stitch-build/skills/react-components/resources/component-template.tsx`](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-build/skills/react-components/resources/component-template.tsx). This template provides the TypeScript/TSX foundation for each generated component, ensuring type safety and adherence to the design system architecture from the start.

### Validation and Type Safety

Before the generation completes, the skill executes [`plugins/stitch-build/skills/react-components/scripts/validate.js`](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-build/skills/react-components/scripts/validate.js), which uses `@swc/core` to perform AST validation. This script checks for type safety, token consistency against [`style-guide.json`](https://github.com/google-labs-code/stitch-skills/blob/main/style-guide.json), and compliance with the **20-point checklist** defined in [`plugins/stitch-build/skills/react-components/resources/architecture-checklist.md`](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-build/skills/react-components/resources/architecture-checklist.md).

Run the skill using the following commands:

```bash

# Install the react-components skill globally (once)

npx skills add google-labs-code/stitch-skills --skill react:components --global

# Generate React components from a Stitch project

stitch::react-components \
  --project-id PROJECT_ID \
  --output ./generated-react

```

## Step 2: Scaffold and Configure a Vite React Project

Vite serves as the fast dev server and bundler for the generated components. Create a new TypeScript React project to host your Stitch components.

Scaffold the Vite project:

```bash
npm create vite@latest my-vite-app --template react-ts
cd my-vite-app

```

Copy the generated components into your Vite source tree:

```bash
cp -R ../generated-react/components ./src/

```

Install any additional dependencies referenced in the generated [`style-guide.json`](https://github.com/google-labs-code/stitch-skills/blob/main/style-guide.json), such as design-system packages:

```bash
npm install @my-org/design-system

```

## Step 3: Import and Serve Components

With the components integrated into your Vite project, import them into your application entry point. The generated components follow the **Atomic Design pattern**, allowing you to compose screens from smaller, reusable elements.

Example usage in [`src/App.tsx`](https://github.com/google-labs-code/stitch-skills/blob/main/src/App.tsx):

```tsx
import { LandingPage } from "./components/LandingPage";

function App() {
  return (
    <main className="app">
      <LandingPage />
    </main>
  );
}

export default App;

```

Start the Vite development server to preview the stitched UI with hot-module replacement:

```bash
npm run dev

```

## Key Source Files in the Stitch Repository

Understanding the source files helps you customize the generation process or debug integration issues:

- **[`plugins/stitch-build/skills/react-components/SKILL.md`](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-build/skills/react-components/SKILL.md)** – Defines the skill's workflow, inputs, and expected output structure.
- **[`plugins/stitch-build/skills/react-components/resources/component-template.tsx`](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-build/skills/react-components/resources/component-template.tsx)** – The TypeScript/TSX boilerplate used to scaffold each component.
- **[`plugins/stitch-build/skills/react-components/scripts/validate.js`](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-build/skills/react-components/scripts/validate.js)** – Runs AST validation with `@swc/core` to ensure type safety and architectural compliance.
- **[`plugins/stitch-build/skills/react-components/resources/style-guide.json`](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-build/skills/react-components/resources/style-guide.json)** – Maps Stitch design tokens to the React component library's theme.
- **[`plugins/stitch-build/skills/react-components/resources/architecture-checklist.md`](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-build/skills/react-components/resources/architecture-checklist.md)** – The 20-point checklist used during the final audit step.

## Summary

- **Run the `stitch::react-components` skill** from the google-labs-code/stitch-skills repository to generate type-safe React components from Stitch designs.
- **Validate generated code** using the `@swc/core` AST checker in [`validate.js`](https://github.com/google-labs-code/stitch-skills/blob/main/validate.js) to ensure token consistency and architectural compliance.
- **Scaffold a Vite React project** with TypeScript and copy the generated components into the `src/` directory.
- **Maintain design alignment** by referencing the [`style-guide.json`](https://github.com/google-labs-code/stitch-skills/blob/main/style-guide.json) token mappings and following the Atomic Design pattern.
- **Iterate quickly** using Vite's hot-module replacement to preview changes instantly as you refine the design system.

## Frequently Asked Questions

### What is the stitch::react-components skill?

The **stitch::react-components** skill is a code generation tool in the google-labs-code/stitch-skills repository that transforms Stitch screen designs into React components. It retrieves design metadata, applies a component template, and validates the output against a 20-point architectural checklist to ensure production-ready code quality.

### How does the validation process ensure code quality?

The validation script located at [`plugins/stitch-build/skills/react-components/scripts/validate.js`](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-build/skills/react-components/scripts/validate.js) uses `@swc/core` to parse the generated code into an AST. It checks for type safety, ensures design tokens match the [`style-guide.json`](https://github.com/google-labs-code/stitch-skills/blob/main/style-guide.json) specifications, and verifies compliance with the architectural checklist, preventing broken builds and token mismatches.

### Can I use TypeScript with Vite for Stitch-generated components?

Yes, the generated components use TypeScript by default, as seen in the [`component-template.tsx`](https://github.com/google-labs-code/stitch-skills/blob/main/component-template.tsx) resource file. When scaffolding your Vite project, use the `--template react-ts` flag to ensure full TypeScript support for the generated Atomic Design components.

### What design pattern do the generated components follow?

The generated components follow the **Atomic Design pattern**, which organizes UI elements into atoms, molecules, organisms, templates, and pages. This structure, defined in the skill's architecture, allows you to iteratively add screens or refine the design system without regenerating the entire codebase, making the components highly reusable and maintainable.