stitch::code-to-designby Google Labs

Stitch Code to Design Skill.

A Claude Code and Codex skill for UI design: converts frontend code into a Stitch design via static HTML and design-system extraction.

Web & UI
Design file

Download OpenDesign View usage guide

google-labs-code/stitch-skills · plugins/stitch-design/skills/code-to-design/SKILL.mdSKILL.md

--- name: stitch::code-to-design description: - Convert frontend code (Vite, React, Angular, Vue, etc.) to a Stitch Design by chaining static HTML extraction, design system extraction, and file upload. **ALWAYS** use this skill when the user's intent is to move existing web apps or React/Angular/Vue components into Stitch (e.g., requests to "save", "migrate", or "upload"). You must use this skill even for simple "save" operations, as it is the only way to … --- ## Workflow

Front matter and section headings read from the upstream file on 2026-09-14 · 3,645 characters in full

01 What it does

What the stitch::code-to-design Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

Converts an existing frontend codebase (React + Vite, Next.js, Angular, Vue) into a Stitch Design by chaining three skills: extract-static-html, extract-design-md and upload-to-stitch. It targets designers and developers moving a running app or a built web directory into Stitch so they can iterate on it there.

The workflow extracts one self-contained HTML file, writes a design system to .stitch/DESIGN.md, creates the design system in Stitch, then uploads the HTML as a screen titled with the page's route path. It is the required path for save, migrate or upload requests, and HTML verification is optional and never blocks the run.

What it produces

One self-contained HTML file, for example /path/to/extracted/standalone.html.
A design system description written as DESIGN.md.
A screen uploaded to Stitch whose name and title identify the route it came from in the application.

See the example prompt ↗

How It Works

01
Extract a self-contained HTML File
Hands off to the extract-static-html skill, which works from the build output or a running dev server such as Vite or Angular CLI ng serve and produces one standalone HTML file.
02
Offer Verification Without Pausing
After extraction you tell the user where the file is so they can check it themselves in a browser, and the run continues to the next step regardless.
03
Analyze the Source into a Design System
The extract-design-md skill reads the project's components, stylesheets and theme configs, and its result is written out as a design system file.
04
Create the Design System in Stitch
The manage-design-system skill uploads DESIGN.md and calls create_design_system_from_design_md with the required schemas.
05
Upload the HTML as a Screen
The same upload script sends the standalone HTML using the Stitch API key and projectId, with the title argument set to the page route so the screen is identifiable in Stitch.

02 Find your fit

When to Use the stitch::code-to-design Skill

Use the stitch::code-to-design skill in Claude Code or Codex when the job is UI design of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

An existing app written in React + Vite, Next.js, Angular or Vue that the user wants to move into Stitch and keep improving there.
A request phrased loosely as save, migrate or upload rather than as an explicit conversion task.
A project already running on a Vite dev server or served through Angular CLI ng serve.
An Angular workspace organized with angular.json, external .html templates, theme files and components, all of which feed the design system extraction.

Know the Boundaries

There is nothing runnable to point at: the workflow needs either a running local dev server or a built web application directory containing index.html and assets.

What to Provide

The target Stitch projectIdThe uploads need a destination project; if it is unknown, look it up with list_projects first.
The path to the extracted HTMLThe standalone file produced in step 1 has to be handed to the upload step, together with the API key and projectId.
The project source filesComponents, stylesheets and theme configs are what the design system analysis reads to derive DESIGN.md.

03 Inside the skill

Rules the stitch::code-to-design Skill Gives Claude Code and Codex

6 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

Always Use It for Save, Migrate or Upload Intent
Any move of existing web apps or React/Angular/Vue components into Stitch must go through this skill, even a simple save, because it is the only path that also extracts the design system and links assets.
Write the Design System to .stitch/DESIGN.md
The design system file goes at .stitch/DESIGN.md and must follow the structure defined by the extract-design-md skill.
Never Block on Verification
Verification of the extracted HTML is user-driven and optional; the agent must proceed directly to the design system step instead of waiting.
Tag the Design System Upload
Pass the argument --generated-by 'stitch::code-to-design' when uploading DESIGN.md, so the origin of the generated artifact is recorded.
Tag the HTML Upload Differently
The HTML upload uses the other marker, --generated-by 'stitch::extract-static-html', not the code-to-design one.
Reuse One API Key for Both Uploads
The Stitch API key supplied in step 4 is the same key required for the HTML upload; there is no second credential.

04 Put it to work

Install stitch::code-to-design in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add stitch::code-to-design to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal

npx skills add https://github.com/google-labs-code/stitch-skills --skill stitch::code-to-design

Generic skills CLI form for plugins/stitch-design/skills/code-to-design/SKILL.md; the repository may document its own path.

Give the Skill a First UI Design Task

Written in the skill's own terms; replace the bracketed parts with your material.

Starter prompt

Take the frontend in [path to repo] and move it into my Stitch project [projectId]. The Vite dev server is already running at [http://localhost:5173]. Extract the standalone HTML, write the design system to .stitch/DESIGN.md, upload both, and title the screen '/[route]'.

Source: written from the SKILL.md in the skill's own terms.

Check the First Result

What the SKILL.md itself says a correct result looks like:

Open the extracted file in a browser to confirm the page renders as expected.
If the user comes back with problems after reviewing the extraction, fix them before continuing the workflow.

In OpenDesign import stitch::code-to-design from its SKILL.md link: Plugins → Add → Skill → Import from link, then pick it in the top bar.

Download OpenDesign Read the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author: Google Labs
Repository: github.com/google-labs-code/stitch-skills Branch main
Skill file: plugins/stitch-design/skills/code-to-design/SKILL.md Content checksum recorded at verification; commit 0337446
License: Apache-2.0 From LICENSE.
Repository stars: 8,304 GitHub snapshot taken 2026-09-14 for the whole google-labs-code/stitch-skills repository, which contains 12 skills in this catalog. Not a rating or usage count for stitch::code-to-design.
Verified by OpenDesign: 2026-09-14 Source file, path, license text and star count were checked. Not bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

WorkflowTells the agent to follow the listed steps to convert existing code.
PrerequisitesNeeds a running dev server or built app directory, plus a Stitch projectId.
StepsFive ordered steps, each delegating to another skill or script.

The Skill's Own Description

“- Convert frontend code (Vite, React, Angular, Vue, etc.) to a Stitch Design by chaining static HTML extraction, design system extraction, and file upload. **ALWAYS** use this skill when the user's intent is to move existing web apps or React/Angular/Vue components into Stitch (e.g., requests to "save", "migrate", or "upload"). You must use this skill even for simple "save" operations, as it is the only way to ensure the design system is extracted and assets are properly linked.”

Front-matter description from SKILL.md. The full file is about 3,645 characters. Read the full file on GitHub.

06 Before you install

Questions About the stitch::code-to-design Skill

Answers come from the SKILL.md as read on 2026-09-14, not from a recorded run.

Does it only upload a screen, or does it also build the design system?

Both. The DESIGN.md file is uploaded and the design system is created in Stitch through the manage-design-system workflow, which uses the upload script and the create_design_system_from_design_md call with the required schemas.

Which skill actually pulls the HTML out of my app?

extract-static-html does the extraction, producing a single self-contained HTML file from the build output or from a running dev server such as the Vite one.

Stitch Code to Design

Run stitch::code-to-design on a Real UI Design Task.

Download OpenDesign, import stitch::code-to-design from its SKILL.md link, paste the prompt above, and read the plan before the result.

Download OpenDesign Browse all skills