Skip to content
Get packs

Code to Stitch Design

Turn an existing React, Vue, Angular or Vite web app into an editable Stitch design project.

Source Download skill
Repository
google-labs-code/stitch-skills
Stars
8,657
Licence
Apache-2.0
Files
1 file

What it does

This skill teaches an AI agent how to take a working frontend app (for example a React or Vite project running locally, or a built folder with index.html) and move it into Google's Stitch design tool. The agent extracts the page into a single standalone HTML file, analyzes the project's components, styles and theme files to write a design system document (DESIGN.md), and then uploads both the HTML and the design system to a Stitch project so the screens can be iterated on there. It chains three other helper skills in sequence to do this.

Great for

  • Frontend developers who want to bring an existing web app's screens into Stitch for visual iteration
  • Designers who need a Stitch project that reflects the design system already coded in a React, Vue or Angular codebase
  • Teams migrating component-based apps into Stitch while keeping styles and theme tokens

Skip it if

  • Projects that are not yet built or running locally, since the workflow needs a dev server or build output (the skill cannot create them)
  • Users who only want to design from scratch or generate new screens with no existing code
  • Repositories containing secrets or proprietary code you are not comfortable sending to a third-party service, because files are uploaded to Stitch

Try asking

  • “Move my React + Vite dashboard app into a Stitch project so I can iterate on the design”
  • “Upload the Angular app in this folder to Stitch and extract its design system”
  • “Save my Vue settings pages to Stitch as separate screens titled by route”
Step-by-step guide: how to use Code to Stitch DesignInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 1 original files, the Apache-2.0 licence and an attribution note.

    code-to-design.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip code-to-design.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip code-to-design.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Start your dev server or build the app before asking the agent to convert it, and confirm the Stitch projectId in advance (or let the agent call list_projects).
  • Review the extracted standalone HTML file path the agent reports, since the skill does not block on verification and you may want to check it in a browser first.
  • Keep your Stitch API key out of shared code and check which files will be uploaded before running the migration.

What's inside

  • SKILL.md

Redistributed unmodified from google-labs-code/stitch-skills under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.