Stitch Design Skills plugin
Three skill plugins for Google Stitch: screen generation, code to design and React builds from mockups
- 8,632 ★ on the repository
- Last commit
- Apache-2.0
Extended access
Why this level
- Skills run download scripts and write files into the project
- Code and assets are uploaded to the Stitch cloud service
Install
- Works in
Manual install
npx plugins add google-labs-code/stitch-skills --scope project --target claude-codeAccess and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- Skills run download scripts and write files into the project
- Code and assets are uploaded to the Stitch cloud service
This is third-party code. Review the repository files before installing.
What it does
The Google Labs set runs on top of the Stitch MCP server. The stitch-design plugin generates and edits screens from text or images, moves existing frontend code into a Stitch project, extracts DESIGN.md from code and manages design systems. stitch-build turns Stitch screens into React, React Native or a Vite dashboard, helps with shadcn/ui and renders a project walkthrough video with Remotion. stitch-utilities sharpens prompts, writes DESIGN.md for a project and builds a multi-page site from one request.
Who it is for. For designers and frontend developers who design screens in Google Stitch and turn them into code.
Good fit when
- You want to generate Stitch screens or variants from the agent
- You need to turn Stitch mockups into React or React Native components
- You need to extract a design system from existing code into DESIGN.md
Not a fit when
- You do not use Google Stitch, since most skills need its MCP server
- Your design lives in Figma and you are not moving it
Example request
Generate three variants of the home screen in Stitch with dark mode and a dense layoutLimitations
Requires a configured Stitch MCP server and a Google account. Skills depend on each other, so selective installs must include dependencies. OpenCode needs stitch::... skill names renamed. Not an officially supported Google product.
How to disable. Remove the stitch-design, stitch-build and stitch-utilities plugins through the agent's plugin manager or delete the skill folders from the project.
FAQ
Can I install only some skills?
Yes, with npx skills add google-labs-code/stitch-skills, but keep track of dependencies between skills.
Which agents are supported?
Codex, Antigravity, Gemini CLI, Claude Code and Cursor; OpenCode needs a manual install.
Discussion
No questions or reviews yet.
Related
PluginsA Gemini CLI extension for Google Stitch: the /stitch command lists projects and screens, downloads images and HTML and generates screens from text
A plugin and npx CLI that scaffold DESIGN.md from the official google-labs-code/design.md templates
A skill that turns reference UIs into a structured design profile in JSON and generates matching UI from your content
A registry of installable design skills: ready SKILL.md and DESIGN.md files with tokens, component rules and accessibility for different styles
A skill that designs UI and landing page mockups and rebuilds screenshots as HTML, a React project or a WeChat mini program
A skill set that locks a project's design decisions into rules and checks the UI with a score gate and rendered screenshots
README in short
The README covers adding the marketplace in Codex, npx plugins commands for Claude Code and Cursor, and manual OpenCode setup with a remote MCP config snippet. Each of the three plugins has a table of skills with sample prompts. It describes the skill layout: SKILL.md, scripts, resources and examples. Apache-2.0 licensed.