How to Convert Stitch Designs to React Components with Vite

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, 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 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. 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, which uses @swc/core to perform AST validation. This script checks for type safety, token consistency against style-guide.json, and compliance with the 20-point checklist defined in plugins/stitch-build/skills/react-components/resources/architecture-checklist.md.

Run the skill using the following commands:

# 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:

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

Copy the generated components into your Vite source tree:

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

Install any additional dependencies referenced in the generated style-guide.json, such as design-system packages:

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:

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:

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 – Defines the skill's workflow, inputs, and expected output structure.
• 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 – Runs AST validation with @swc/core to ensure type safety and architectural compliance.
• 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 – 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 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 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 uses @swc/core to parse the generated code into an AST. It checks for type safety, ensures design tokens match the 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 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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}