REPO PACKAGE
google-labs-code stitch-skills
COMMUNITY14skills
2ready to use
LABSCO SUMMARY
The design plugin (six skills) covers the core Stitch loop: generating or editing screens from a prompt or image, creating variants, managing a stored design system, and extracting or uploading the HTML, screenshots, and design docs a Stitch project needs. The build plugin (four skills) turns a finished Stitch screen into code -- React or React Native components with automated validation, or a Remotion walkthrough video -- plus a fourth skill, shadcn-ui, that is generic shadcn/ui guidance unrelated to Stitch itself. The utilities plugin (four skills) adds prompt enhancement, an autonomous multi-page build loop called stitch-loop, and two separate skills for writing a DESIGN.md file -- design-md and the more opinionated taste-design, which pushes specifically against generic-looking interfaces.
This is for someone automating work specifically inside Google's Stitch product, using one of the coding agents the README lists as compatible -- Codex, Antigravity, Gemini CLI, Claude Code, or Cursor -- not a general Figma-to-code or design-system toolkit; the shadcn-ui skill only reaches outside Stitch by accident of packaging. The repository itself says plainly that it is not an officially supported Google product, and our own data agrees: it isn't marked official.
READ THE FULL ANALYSIS
Our per-skill review found only six of the fourteen actually require a live Stitch MCP connection, not all of them. The README's Prerequisites section states blanket that "these skills require the Stitch MCP server to be configured and running," but checking dependencies skill by skill puts five as needing nothing beyond the skill file itself and three as needing a local tool instead -- shadcn-ui and taste-design, for instance, are pure guidance with no Stitch connection to set up.
ALSO IN THIS PACKAGE
PLUGINS
3 itemsPLUGIN
stitch-build
Code generation and build tools for Google Stitch — convert designs to React components, generate walkthrough videos with Remotion, and integrate shadcn/ui.
PLUGIN
stitch-design
Design workflows for Google Stitch — convert code to designs, generate screens from text/images, manage design systems, extract static HTML, and upload assets.
PLUGIN
stitch-utilities
Design utilities and assistants for Google Stitch — generate DESIGN.md specs, enhance prompts, build multi-page sites with stitch-loop, and enforce premium design standards.
WHAT'S INSIDE
14 showing · 14 totalReady to use
Nothing else to set up — install it and go.
14 of 14
SETUP
Showing all 14 skills
design-md
Looks at a screen you already designed in Google's Stitch and writes its colors, fonts and shapes down as a style guide, so every new screen Stitch makes matches the ones you have.
enhance-prompt
Takes a rough one-line idea for a screen and expands it into the kind of detailed brief Stitch needs to generate something close to what you pictured.
remotion
Makes a demo video out of a Stitch project's screens, so you have something to show people who can't sit down and click through the app themselves.
shadcn-ui
Ready-made pieces of a web interface — buttons, menus and the like — that you copy into your own project as plain code you own, instead of installing a library you can't change.
stitch-loop
A way of letting an agent build a website on its own, one page per run: each run designs a page, adds it to the site, then leaves a note saying what the next run should build.
stitch::code-to-design
Imports a website you have already built into Stitch — the page itself plus the colors, fonts and component styling it really uses — so you can redesign it there.
stitch::extract-design-md
Works out the visual rules a website follows — colors, fonts, spacing, button and card styling — by reading its source files, with nothing to install or start up first.
stitch::extract-static-html
One page of your running web app, frozen into a single HTML file that carries its own styling and images so it still looks right anywhere you open it.
stitch::generate-design
Turns a plain description or a screenshot into a screen in Stitch, rewriting your rough wording into the specifics the generator needs first.
stitch::manage-design-system
Puts a project's house style into Stitch and keeps it there, so the look belongs to the project instead of to whatever you typed that day.
stitch::react-components
Turns a Stitch design into the code of a working React website — split into reusable pieces, with the links between pages wired up and a dark mode included.
stitch::react-native
Rebuilds a Stitch design as real phone-app screens for iPhone and Android, translating the web layout into the native building blocks React Native uses.
stitch::upload-to-stitch
Gets a file from your computer — a screenshot, a saved web page, a style guide — into your Stitch project, including files too big for the normal upload to handle.
taste-design
House design rules you hand to Stitch, built mostly out of bans, so the screens it generates stop looking like every other AI-made site.
No skill in this package matches that.
HOW TO GET IT
WHOLE PACKAGEInstall the whole package (14 skills)
npx skills add google-labs-code/stitch-skillsSINGLE SKILLOr install a single skill
npx skills add google-labs-code/stitch-skills --skill <name> --full-depthPick the skill name from the Skills tab — each entry there installs independently.