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

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, 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.

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 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, the skill detects the framework via 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 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 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 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.

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

- 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 – Top-level orchestration logic that sequences the three conversion steps
• 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 – Source code analysis and DESIGN.md synthesis
• 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 – 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 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.
• 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 analysis as implemented in 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 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 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.

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