How to Convert React Code to Stitch Designs Using `stitch::code-to-design`

The stitch::code-to-design skill converts built React applications into Stitch designs by orchestrating three lower-level skills that extract static HTML, generate a DESIGN.md file from source code, and upload both to a Stitch project.

The stitch::code-to-design skill in the google-labs-code/stitch-skills repository provides a deterministic pipeline for transforming compiled frontend code into fully-featured Stitch design systems. This workflow bridges the gap between existing React codebases and Stitch's visual design environment, enabling teams to import production components directly into the design tool.

Prerequisites

Before running the conversion workflow, ensure you have:

• A built React application directory containing index.html and associated assets (typically generated by Vite, Create React App, or similar)
• A valid Stitch project ID (retrieve this using list_projects if needed)
• The Stitch CLI configured with your API key (or pass --api-key explicitly)

The Three-Stage Pipeline

According to the orchestration logic in plugins/stitch-design/skills/code-to-design/SKILL.md, the workflow chains three specialized skills in sequence:

Step 1: Extract Static HTML

The pipeline begins by calling extract-static-html to walk the build output and inline all assets into a single self-contained document. This skill processes the index.html entry point and embeds CSS, JavaScript, and images directly into the markup, producing a standalone.html file that renders independently without external dependencies.

The implementation details are defined in plugins/stitch-design/skills/extract-static-html/SKILL.md.

Step 2: Generate the Design System

Next, extract-design-md inspects the source code—including React components, CSS/SCSS files, and theme configurations—to derive a comprehensive design system. This skill emits a .stitch/DESIGN.md file following a predefined schema that documents colors, typography scales, spacing tokens, and component primitives.

This extraction logic is specified in plugins/stitch-utilities/skills/design-md/SKILL.md.

Step 3: Upload Assets to Stitch

The final stage delegates to two upload skills:

1. manage-design-system creates or updates the design system within the target Stitch project, receiving the DESIGN.md file with the flag --generated-by 'stitch::code-to-design' for audit tracking. Configuration resides in plugins/stitch-design/skills/manage-design-system/SKILL.md.

2. upload-to-stitch transmits the standalone HTML file and any generated screenshots to the same project, linking the screen to the newly created design system. Details are available in plugins/stitch-design/skills/upload-to-stitch/SKILL.md.

Installation and Usage

Install the skill globally using the skills CLI:

npx skills add google-labs-code/stitch-skills --skill stitch::code-to-design --global

Execute the conversion against your built React application:

npx stitch::code-to-design \
  --project-id 1234567890abcdef \
  --code-dir ./my-app/build

Useful optional flags include:

• --verbose — Prints intermediate file paths such as standalone.html and .stitch/DESIGN.md
• --generated-by — Propagates the caller name to upload scripts for audit trails (defaults to 'stitch::code-to-design')
• --api-key — Overrides the default Stitch API key from environment variables

Verifying the Output

After the pipeline completes, verify the generated HTML locally before upload:

# macOS

open ./standalone.html

# Linux

xdg-open ./standalone.html

Confirm successful upload by listing the project's screens:

npx stitch::list_screens --project-id 1234567890abcdef

The Stitch project now contains:

• A screen representing the extracted HTML renderable in the Stitch UI
• A design system fully described by DESIGN.md, enabling component reuse and styling consistency

Summary

• The stitch::code-to-design skill orchestrates three lower-level skills—extract-static-html, extract-design-md, and the upload pair—to convert React builds into Stitch designs
• Input requires a compiled build directory with index.html, while output produces both a standalone HTML screen and a structured DESIGN.md file
• The workflow is deterministic and documented across five skill definition files in the google-labs-code/stitch-skills repository
• All upload operations include provenance tracking via the --generated-by flag

Frequently Asked Questions

What frontend frameworks does stitch::code-to-design support?

The skill works with any frontend framework that produces static HTML output, including React, Vue, Angular, and Svelte. As long as the build process generates an index.html file with inlined or adjacent assets, the extract-static-html skill can process it into a standalone document.

Where does the skill store the generated DESIGN.md file?

The extract-design-md skill writes the design system specification to .stitch/DESIGN.md within your project directory. This file follows a strict schema that manage-design-system consumes when creating or updating the design system in your Stitch project.

Can I run individual steps without the full orchestrator?

Yes. While stitch::code-to-design chains the operations automatically, you can invoke each skill independently—extract-static-html, extract-design-md, manage-design-system, and upload-to-stitch—using their respective CLI commands. This is useful for debugging specific stages or integrating the workflow into custom CI/CD pipelines.

How does the skill handle large asset files during HTML extraction?

The extract-static-html skill inlines assets directly into the HTML using base64 encoding for binary files and data URIs for stylesheets. This ensures the resulting standalone.html is completely self-contained, though extremely large media files may increase the document size significantly.

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