102.7K+Download
Skip to the usage guide
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 OpenDesignView 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 HTML snapshot, writes .stitch/DESIGN.md, creates the design system in Stitch and uploads a screen titled with its route. Optional post-extraction review does not pause the workflow, but reported defects must be fixed; the extraction skill has its own confirmation checkpoints.

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

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

  2. 02
    Offer Verification Without Pausing

    The agent reports the extracted file path and continues without requiring a review. If the user reports an extraction problem, it must be fixed before continuing.

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

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

  5. 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.
  • Running app or built directory and routeProvide a local server URL or a built directory containing index.html and assets, plus the route to capture. The workflow creates the standalone HTML; you do not need to extract it beforehand. Configure the Stitch API key securely in the tool environment.
  • 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.

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

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

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

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

  5. Tag the HTML Upload Differently

    The HTML upload uses the other marker, --generated-by 'stitch::extract-static-html', not the code-to-design one.

  6. 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]'.

Editorial starter example based on the source workflow; not a recorded run.

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 check your installed version’s skill list and supported tools. If this skill is absent, consult the current import guide and the upstream setup instructions. The source review is not a live compatibility test.

Download OpenDesignRead 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

  1. WorkflowTells the agent to follow the listed steps to convert existing code.
  2. PrerequisitesNeeds a running dev server or built app directory, plus a Stitch projectId.
  3. 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.

Start with the example task above, supply the listed inputs and check the required tools. Review the output against the checklist before using it in a project.

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