Stitch Design Skills: from a text prompt to a screen and a component
Google Stitch draws interfaces, but tying it to a real codebase by hand is slow. These skills talk to the Stitch MCP server and come in three plugins: stitch-design for screens, stitch-build for code and stitch-utilities for prompts and design systems. The agent can generate screens, push an existing frontend into Stitch and turn designs back into components.
Claude Code, Codex, Cursor, Gemini CLI, Antigravity, OpenCode
What it does
generate-design creates screens from text or an image, edits existing ones and produces variants such as dark mode or denser layouts.
code-to-design and extract-static-html move a React or Vue frontend into a Stitch project via self-contained static HTML.
extract-design-md and design-md write the design system to DESIGN.md; manage-design-system uploads it and applies it to screens.
react-components, react-native and react-vite-dashboard convert Stitch screens into components with consistent tokens and validation.
enhance-prompt sharpens a vague UI idea, and stitch-loop builds a multi-page website from a single request.
When to use it
You have a working app with no design files and want its screens in Stitch so a designer can iterate on them.
The design is finished in Stitch and you want React components without rebuilding the markup by hand.
You need to show a client several takes on a home screen in different styles, fast.
Ask your agent
Generate a Stitch login screen for a food delivery app, plus three dark-mode variants
Scan /src and extract our design system into .stitch/DESIGN.md
Convert every screen in Stitch project projects/123 into React components
Questions
How do I install Stitch Design Skills in Claude Code?
Run npx plugins add google-labs-code/stitch-skills --scope project --target claude-code, which installs the plugins into the current project. Single skills are available through npx skills add.
Do the Stitch skills work in Codex and OpenCode?
In Codex you register the repo as a plugin marketplace and install stitch-design, stitch-build and stitch-utilities. In OpenCode you copy skill folders by hand and add the Stitch MCP entry to opencode.json.
Is this an official Google product?
No. The README states it is not an officially supported Google product and is not covered by Google's open source vulnerability rewards program.
