Skip to content
Get packs

Stitch to React Components

Turns Google Stitch designs into modular Vite and React components and keeps them in sync.

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

What it does

When installed, the agent can take screens designed in Google's Stitch design tool and turn them into a structured Vite and React app with TypeScript components, hooks, and a data file. It downloads each screen's HTML and screenshot, pulls color and typography tokens from the design, and applies rules such as splitting UI into reusable components and wiring links with React Router. It can also update existing React components so they match a newer Stitch design.

Great for

  • Frontend developers who want a fast starting point for a React app based on a Stitch design
  • Designers and product teams who prototype in Stitch and want working code that matches the design
  • Teams that already use the Stitch MCP server and want repeatable design-to-code syncing

Skip it if

  • Projects that do not use Stitch, since the workflow depends on Stitch MCP tools and Stitch download URLs
  • Anyone who wants the agent to run without review: the skill requires running shell scripts and fetching files from the internet, so changes should be checked by a person
  • Production code that needs hand-written design decisions, because the skill imposes strict rules that may not suit every project

Try asking

  • “Convert my Stitch project's screens into a Vite and React app with reusable components”
  • “Sync the components in src/components to the latest Stitch designs”
  • “Update my navigation so the logo links home and the bottom nav links to each page”
Step-by-step guide: how to use Stitch to React ComponentsInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

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

    react-components.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip react-components.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip react-components.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

  • Answer the prompts about existing files carefully; the skill asks before re-downloading designs, and you can choose to reuse local copies.
  • Review the generated code and the updated resources/style-guide.json before trusting it, since the skill overwrites that file with tokens from the current project.
  • The skill says validation and dev-server steps need your permission; decline them if you do not want scripts or a browser run on your machine.

What's inside

  • package-lock.json
  • package.json
  • README.md
  • resources/architecture-checklist.md
  • resources/stitch-api-reference.md
  • resources/style-guide.json
  • scripts/fetch-stitch.sh
  • scripts/validate.js
  • 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.