# How Code-to-Design Converts Frontend Code to Stitch Designs: A Complete Technical Guide

> Learn how stitch code-to-design automates frontend code migration to Stitch designs. This guide explains static HTML extraction, design system analysis, and upload management.

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

---

**The `stitch::code-to-design` skill automates migration of React, Vue, Next.js, and other frontend projects into Stitch designs by orchestrating three sub-skills: static HTML extraction, design system analysis, and upload management.**

The `stitch::code-to-design` skill in the `google-labs-code/stitch-skills` repository provides a high-level automation pipeline that transforms existing frontend codebases into fully editable Stitch designs. This process captures both the visual representation and the underlying design intent, enabling AI-driven iteration directly within the Stitch platform.

## The Three-Step Conversion Pipeline

The conversion process follows a strict sequential orchestration of three lower-level skills. Each step handles a distinct aspect of the migration, ensuring that the resulting Stitch design maintains visual fidelity while preserving the original design system specifications.

### Step 1: Extract Static HTML

The **extract-static-html** skill generates a self-contained HTML file that inlines all CSS, images, and other assets. This step uses a **Puppeteer** strategy to capture a faithful visual snapshot of the running application.

According to [`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), the skill runs a Puppeteer snapshot script that loads the local development server, waits for network idle, and writes a single `.stitch/*.html` file with all styles and images inlined. This eliminates the need for a live server during the Stitch import process.

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

```

### Step 2: Extract Design System Metadata

The **extract-design-md** skill parses the original source tree to produce a comprehensive [`DESIGN.md`](https://github.com/google-labs-code/stitch-skills/blob/main/DESIGN.md) file. This markdown document describes the complete design system including colors, typography, component styles, and layout principles.

As implemented in [`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), the skill detects the framework via [`package.json`](https://github.com/google-labs-code/stitch-skills/blob/main/package.json) and auxiliary files, then analyzes:
- **Tailwind configuration** and CSS/SCSS files for theme tokens
- **Component code** to infer button, card, and input stylings
- **Typography scales** including font families, weights, and line heights
- **Layout principles** such as grid systems, breakpoints, and spacing units

The output is a structured [`DESIGN.md`](https://github.com/google-labs-code/stitch-skills/blob/main/DESIGN.md) with required YAML front-matter that captures the visual theme, atmosphere, and density philosophy of the original codebase.

### Step 3: Upload and Design System Creation

The final stage combines **upload-to-stitch** and **manage-design-system** skills to import both assets into the Stitch platform. The [`upload_to_stitch.py`](https://github.com/google-labs-code/stitch-skills/blob/main/upload_to_stitch.py) script base64-encodes files and invokes Stitch MCP endpoints, while `manage-design-system` creates the design system from the markdown analysis.

The `create_design_system_from_design_md` function processes the uploaded [`DESIGN.md`](https://github.com/google-labs-code/stitch-skills/blob/main/DESIGN.md) to generate a structured design system, and the static HTML file is linked as a screen reference. This linkage ensures that the visual representation remains connected to its design tokens.

```bash
python3 plugins/stitch-design/skills/upload-to-stitch/scripts/upload_to_stitch.py \
  --project-id 12345abcd \
  --file-path .stitch/DESIGN.md \
  --api-key $STITCH_API_KEY \
  --generated-by stitch::code-to-design

```

## Implementation Requirements and Configuration

To execute the code-to-design pipeline, users must provide a built web application directory containing [`index.html`](https://github.com/google-labs-code/stitch-skills/blob/main/index.html) and assets, plus a target Stitch `projectId`. The skill automatically handles framework detection and strategy selection for HTML extraction.

When invoking the skill from an agent or automation script, use the following configuration:

```yaml
- skill: stitch::code-to-design
  inputs:
    projectId: 12345abcd
    builtDir: ./my-app/dist

```

The orchestration requires confirmations for certain sub-tasks, such as selecting the Puppeteer strategy for static HTML generation, but these are handled automatically according to the sub-skill specifications.

## Key Source Files and Architecture

The complete pipeline is defined across five primary files in the `google-labs-code/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)** – Top-level orchestration logic that sequences the three conversion steps
- **[`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)** – Puppeteer-based snapshot generation and asset inlining
- **[`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)** – Source code analysis and [`DESIGN.md`](https://github.com/google-labs-code/stitch-skills/blob/main/DESIGN.md) synthesis
- **[`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)** – File upload handling and MCP endpoint integration
- **[`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)** – Design system creation and management within Stitch projects

These files collectively ensure that both the **visual representation** (HTML) and the **design intent** (DESIGN.md) are captured, creating a complete design package ready for Stitch-based iteration.

## Summary

- **Code-to-design** is a high-level skill that automates frontend-to-Stitch migration through three orchestrated steps.
- **Static HTML extraction** uses Puppeteer to create self-contained visual snapshots with inlined assets.
- **Design system extraction** analyzes source code to generate a comprehensive [`DESIGN.md`](https://github.com/google-labs-code/stitch-skills/blob/main/DESIGN.md) describing colors, typography, and components.
- **Upload and management** handles the Stitch API integration, creating design systems and linking HTML screens via [`upload_to_stitch.py`](https://github.com/google-labs-code/stitch-skills/blob/main/upload_to_stitch.py).
- The pipeline supports React, Vite, Next.js, Vue, Svelte, and other modern frontend frameworks.

## Frequently Asked Questions

### What frontend frameworks does code-to-design support?

The code-to-design skill supports React, Vite, Next.js, Vue, Svelte, and other modern frontend frameworks. Detection occurs automatically via [`package.json`](https://github.com/google-labs-code/stitch-skills/blob/main/package.json) analysis as implemented in [`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).

### How does the static HTML extraction maintain visual fidelity?

The **extract-static-html** skill uses a Puppeteer-based snapshot strategy that loads the local development server, waits for network idle, then inlines all CSS, images, and assets into a single HTML file. This produces a self-contained visual replica that does not require a live server to render correctly.

### What information is captured in the DESIGN.md file?

The [`DESIGN.md`](https://github.com/google-labs-code/stitch-skills/blob/main/DESIGN.md) file contains a structured description of the visual theme, color palette grouped by functional roles, typography specifications, component styling patterns, and layout principles including grid systems and responsive breakpoints. It includes YAML front-matter required for Stitch design system creation.

### Can I use code-to-design with a production build or only development servers?

The skill requires a built web application directory containing [`index.html`](https://github.com/google-labs-code/stitch-skills/blob/main/index.html) and assets. While the Puppeteer snapshot strategy typically targets local development servers (e.g., `http://localhost:5173`), the final upload process accepts any properly built directory structure that meets the Stitch upload requirements.