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

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

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 describing components, design tokens, and themes.
3. upload-to-stitch – Uploads the HTML and 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.

npm run build

This generates a dist directory containing 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.

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.

Step 3: Generate the Design System Definition

Extract design tokens, component definitions, and Tailwind configurations into a DESIGN.md file using the extract-design-md skill.

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 to Stitch using the manage-design-system skill. This requires a Stitch API key and target project ID.

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.

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:

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 – Master orchestrator defining the pipeline logic.
• plugins/stitch-design/skills/extract-static-html/scripts/snapshot.ts – Puppeteer-based HTML extraction script.
• 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 – API integration for design system creation.
• 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 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 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.

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