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

> Convert React code to Stitch designs with stitch::code-to-design. Learn the workflow to extract HTML, generate DESIGN.md, and upload to your Stitch project.

- 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 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`](https://github.com/google-labs-code/stitch-skills/blob/main/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`](https://github.com/google-labs-code/stitch-skills/blob/main/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`](https://github.com/google-labs-code/stitch-skills/blob/main/index.html) entry point and embeds CSS, JavaScript, and images directly into the markup, producing a [`standalone.html`](https://github.com/google-labs-code/stitch-skills/blob/main/standalone.html) file that renders independently without external dependencies.

The implementation details are defined 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 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`](https://github.com/google-labs-code/stitch-skills/blob/main/.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`](https://github.com/google-labs-code/stitch-skills/blob/main/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`](https://github.com/google-labs-code/stitch-skills/blob/main/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`](https://github.com/google-labs-code/stitch-skills/blob/main/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`](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-design/skills/upload-to-stitch/SKILL.md).

## Installation and Usage

Install the skill globally using the skills CLI:

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

```

Execute the conversion against your built React application:

```bash
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`](https://github.com/google-labs-code/stitch-skills/blob/main/standalone.html) and [`.stitch/DESIGN.md`](https://github.com/google-labs-code/stitch-skills/blob/main/.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:

```bash

# macOS

open ./standalone.html

# Linux

xdg-open ./standalone.html

```

Confirm successful upload by listing the project's screens:

```bash
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`](https://github.com/google-labs-code/stitch-skills/blob/main/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`](https://github.com/google-labs-code/stitch-skills/blob/main/index.html), while output produces both a standalone HTML screen and a structured [`DESIGN.md`](https://github.com/google-labs-code/stitch-skills/blob/main/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`](https://github.com/google-labs-code/stitch-skills/blob/main/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`](https://github.com/google-labs-code/stitch-skills/blob/main/.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`](https://github.com/google-labs-code/stitch-skills/blob/main/standalone.html) is completely self-contained, though extremely large media files may increase the document size significantly.