Code to Design roundtrip

The roundtrip workflow connects your codebase and Stitch in both directions. Start from a React app, extract its design system and screens into Stitch, make visual edits in the cloud, and export the updated designs back to clean React components.

What you’ll build

Starting from an existing React + Vite application, you’ll extract design tokens, capture screens as static HTML, upload everything to Stitch, edit the design, and convert it back to React components.

Prerequisites

• Completed Get started with skills (skills installed, MCP connected)
• An existing React application with a working dev server
• Node.js 18+ and puppeteer installed

Step 1: Extract design tokens from source

Scan your source files to reverse-engineer a design system document — no build step required.

The extract-design-md skill reads your components, stylesheets, Tailwind config, and theme files. It identifies colors, typography, spacing, and component patterns.

Open the resulting .stitch/DESIGN.md and you’ll see:

• YAML frontmatter with machine-readable color tokens
• Markdown sections describing visual atmosphere, palette, typography, and layout
• Descriptive names like “Deep Ocean Blue (#1a365d)” instead of raw hex codes

Step 2: Capture static HTML snapshots

Start your dev server, then capture the running app as self-contained HTML:

The skill launches headless Chrome, captures the fully rendered DOM, inlines all CSS, and converts images to base64 data URIs. Each output file is completely self-contained — no external dependencies.

For multiple pages, repeat for each route:

Step 3: Upload to Stitch

Push everything to a new Stitch project in one command:

The skill creates a project, uploads the DESIGN.md as a design system, and imports each HTML file as a screen. Open Stitch to see your project with all the uploaded screens, styled according to your design system.

Step 4: Edit the design

Make targeted visual changes without touching code:

The skill calls edit_screens with your instruction while preserving the existing design system. One change at a time produces the best results — iterate with additional edits rather than bundling everything into one prompt.

Step 5: Export back to React

Convert the updated Stitch screens back to component code:

The react-components skill downloads the latest screen HTML, extracts Tailwind theme values, breaks the design into modular components, creates type-safe interfaces, moves static data into src/data/mockData.ts, and validates everything via AST.

Start your dev server — the React components now reflect the design changes you made in Stitch, including the new testimonial section.

The full roundtrip

Here’s what you just completed:

Step	Direction	What happened
Extract tokens	Code → DESIGN.md	Reverse-engineered the design system from source
Capture HTML	Code → Static files	Snapshot the running app as self-contained HTML
Upload	Files → Stitch	Imported assets and design system to the cloud
Edit	Stitch → Updated design	Made targeted visual changes
Export	Stitch → React	Generated updated components from the design

What’s next

• Import from your codebase — More options for extracting design systems, including a quick prompt that needs no skills
• Create a premium design system — Generate a curated design system with anti-generic standards
• Why semantic tokens? — Understand why descriptive design language works better for AI than raw CSS