# How to Convert Frontend Code (React/Vue) to Stitch Designs: A Complete Guide

> Convert React or Vue frontend code to Stitch designs effortlessly. Learn how Stitch skills automate this process using a powerful three-stage pipeline for seamless integration.

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

---

**The Stitch `code-to-design` skill automates the conversion of React, Vue, or Vite projects into Stitch designs by orchestrating a three-stage pipeline: extracting a self-contained HTML snapshot, generating a [`DESIGN.md`](https://github.com/google-labs-code/stitch-skills/blob/main/DESIGN.md) file from source code analysis, and uploading both artifacts to a Stitch project.**

Converting existing frontend codebases into visual design systems is a critical workflow for modern designOps. The `google-labs-code/stitch-skills` repository provides a dedicated **code-to-design** skill that transforms React, Vue, Next.js, or Vite applications into fully-featured Stitch designs through an automated extraction pipeline.

## Understanding the Code-to-Design Pipeline

According to the `google-labs-code/stitch-skills` source code, the conversion process relies on three specialized sub-skills orchestrated by the master `code-to-design` skill located at [`plugins/stitch-design/skills/code-to-design/SKILL.md`](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-design/skills/code-to-design/SKILL.md):

1. **`extract-static-html`** – Generates a self-contained HTML snapshot by inlining CSS and images from the running application.
2. **`extract-design-md`** – Analyzes source files to produce a [`DESIGN.md`](https://github.com/google-labs-code/stitch-skills/blob/main/DESIGN.md) describing components, design tokens, and themes.
3. **`upload-to-stitch`** – Uploads the HTML and [`DESIGN.md`](https://github.com/google-labs-code/stitch-skills/blob/main/DESIGN.md) to a Stitch project, linking assets to the generated design system.

The pipeline ensures the design system is extracted before HTML upload, guaranteeing correct asset linking and component reusability.

## Step-by-Step Conversion Process

### Step 1: Build Your Frontend Application

Before extraction, build your React or Vue application to produce static assets.

```bash
npm run build

```

This generates a `dist` directory containing [`index.html`](https://github.com/google-labs-code/stitch-skills/blob/main/index.html) and bundled assets.

### Step 2: Extract Static HTML

Use the `extract-static-html` skill to capture a self-contained HTML file. The default **Strategy A (Puppeteer)** requires zero setup and captures the fully rendered DOM.

```bash
npx tsx plugins/stitch-design/skills/extract-static-html/scripts/snapshot.ts \
  --url http://localhost:5173 \
  --output .stitch/home.html \
  --wait 2000

```

For applications requiring pre-capture interaction (clicks, authentication), use **Strategy B (Browser Subagent)** as documented in [`plugins/stitch-design/skills/extract-static-html/SKILL.md`](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-design/skills/extract-static-html/SKILL.md).

### Step 3: Generate the Design System Definition

Extract design tokens, component definitions, and Tailwind configurations into a [`DESIGN.md`](https://github.com/google-labs-code/stitch-skills/blob/main/DESIGN.md) file using the `extract-design-md` skill.

```bash
npx tsx plugins/stitch-design/skills/extract-design-md/scripts/extract_design_md.ts \
  --src ./src \
  --out .stitch/DESIGN.md

```

### Step 4: Create the Stitch Design System

Upload the [`DESIGN.md`](https://github.com/google-labs-code/stitch-skills/blob/main/DESIGN.md) to Stitch using the `manage-design-system` skill. This requires a Stitch API key and target project ID.

```bash
npx tsx plugins/stitch-design/skills/manage-design-system/scripts/manage_design_system.ts \
  --design .stitch/DESIGN.md \
  --project-id $STITCH_PROJECT_ID \
  --generated-by 'stitch::code-to-design'

```

### Step 5: Upload the HTML Artifact

Complete the conversion by uploading the static HTML file, which links to the previously created design system.

```bash
npx tsx plugins/stitch-design/skills/upload-to-stitch/scripts/upload_to_stitch.ts \
  --file .stitch/home.html \
  --project-id $STITCH_PROJECT_ID

```

## Complete One-Liner Pipeline

For automated workflows, combine all steps into a single command chain:

```bash
npm run build && \
npx tsx plugins/stitch-design/skills/extract-static-html/scripts/snapshot.ts \
  --url http://localhost:5173 --output .stitch/home.html --wait 2000 && \
npx tsx plugins/stitch-design/skills/extract-design-md/scripts/extract_design_md.ts \
  --src ./src --out .stitch/DESIGN.md && \
npx tsx plugins/stitch-design/skills/manage-design-system/scripts/manage_design_system.ts \
  --design .stitch/DESIGN.md --project-id $STITCH_PROJECT_ID && \
npx tsx plugins/stitch-design/skills/upload-to-stitch/scripts/upload_to_stitch.py \
  --file .stitch/home.html --project-id $STITCH_PROJECT_ID

```

## Key Implementation Files

The conversion pipeline relies on these specific files in the `stitch-skills` repository:

- **[`plugins/stitch-design/skills/code-to-design/SKILL.md`](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-design/skills/code-to-design/SKILL.md)** – Master orchestrator defining the pipeline logic.
- **[`plugins/stitch-design/skills/extract-static-html/scripts/snapshot.ts`](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-design/skills/extract-static-html/scripts/snapshot.ts)** – Puppeteer-based HTML extraction script.
- **[`plugins/stitch-design/skills/extract-design-md/SKILL.md`](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-design/skills/extract-design-md/SKILL.md)** – Documentation for design system extraction from source code.
- **[`plugins/stitch-design/skills/manage-design-system/SKILL.md`](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-design/skills/manage-design-system/SKILL.md)** – API integration for design system creation.
- **[`plugins/stitch-design/skills/upload-to-stitch/scripts/upload_to_stitch.py`](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-design/skills/upload-to-stitch/scripts/upload_to_stitch.py)** – Python script handling Stitch API uploads.

## Summary

- The **`code-to-design`** skill automates conversion through three specialized sub-skills: **extract-static-html**, **extract-design-md**, and **upload-to-stitch**.
- **Strategy A (Puppeteer)** provides zero-setup HTML extraction, while **Strategy B** handles interactive applications requiring pre-capture actions.
- The pipeline requires building your React/Vue app first, then generating both a self-contained HTML file and a [`DESIGN.md`](https://github.com/google-labs-code/stitch-skills/blob/main/DESIGN.md) system definition.
- Upload order matters: create the design system via `manage-design-system` before uploading HTML to ensure proper asset linking and reusable components.
- The `manage-design-system` script supports the `--generated-by 'stitch::code-to-design'` flag for provenance tracking.

## Frequently Asked Questions

### Can I convert a Vue or Next.js project using the same pipeline?

Yes. The `code-to-design` skill framework supports any frontend framework that produces a runnable build with an [`index.html`](https://github.com/google-labs-code/stitch-skills/blob/main/index.html) entry point, including Vue, Next.js, Vite, and standard React applications. The `extract-design-md` skill analyzes source files regardless of framework-specific syntax to extract components and tokens.

### What is the difference between Strategy A and Strategy B for HTML extraction?

**Strategy A (Puppeteer)** is the default zero-setup method that captures the fully rendered DOM using a headless browser. **Strategy B (Browser Subagent)** is required when your application needs pre-capture interaction—such as clicking through authentication flows or expanding modal dialogs—before generating the static snapshot.

### Why must I upload DESIGN.md before the HTML file?

The `manage-design-system` skill creates the design system infrastructure in Stitch first, establishing component definitions and design tokens. The subsequent `upload-to-stitch` step links the HTML assets to these existing definitions. Reversing the order would result in orphaned assets without proper design system context in the Stitch project.

### Where do I find the Stitch project ID and API key?

The `STITCH_PROJECT_ID` environment variable identifies your target Stitch workspace. You must provide a Stitch API key through environment variables to authenticate the `manage-design-system` and `upload-to-stitch` operations. Consult your Stitch platform documentation or administrator for credential generation and project configuration.