Stitch Skills for AI Agents: Google's Design Skill Library
/stitch-skills
Reach for these Stitch skills for AI agents if you already use Google Stitch and want a coding agent — Claude Code, Codex, Cursor, or Gemini CLI — to drive design-to-code work through repeatable prompts instead of ad-hoc glue. Skip them if you don't use Stitch, or you're not ready to stand up the Stitch MCP server and its credentials first, since none of the skills do anything without it.
Three Plugins for Google Stitch, One Open Standard
Stitch Skills is a collection of Stitch skills for AI agents, published by Google Labs (google-labs-code) under Apache-2.0. Each skill follows the Agent Skills open standard from agentskills.io, working across Codex, Antigravity, Gemini CLI, Claude Code, and Cursor. The repo groups skills into three plugins — stitch-design, stitch-build, and stitch-utilities — each a folder with a SKILL.md, scripts, and examples. Not an officially supported Google product.
Every Team Re-Inventing Its Own Stitch Prompts
Google Stitch exposes an MCP server so agents can generate and manage designs, but wiring a coding agent to it usually means writing your own prompts and glue for each task — convert this code to a design, generate three screen variants, sync the project into React. That work gets re-invented in every repo and every agent. This collection packages those workflows as reusable skills so the prompting and validation live in one place.
Design, Build, and Utilities — What Each Plugin Does
- ✓stitch-design plugin: skills for code-to-design conversion, generating and editing screens, managing a design system, and uploading assets to a Stitch project
- ✓stitch-build plugin: skills that turn Stitch screens into React or React Native components, generate walkthrough videos with Remotion, and integrate shadcn/ui
- ✓stitch-utilities plugin: enhance-prompt (turns a vague idea into a Stitch-optimized prompt), stitch-loop (multi-page site from one prompt), and DESIGN.md generators
- ✓Built on the Agent Skills open standard, so a skill runs across Codex, Antigravity, Gemini CLI, Claude Code, and Cursor without rewrites
- ✓Each skill ships as SKILL.md plus scripts, resources, and examples — the prompting logic and validation are checked into the repo, not left to you
- ✓Install everything as plugins via a marketplace, or pull individual skills selectively with the npx skills command
From a Text Prompt to a DESIGN.md System
- •Uploading an existing frontend codebase into a Stitch project to migrate or iterate on the design
- •Generating new screens, editing existing ones, or producing several design variants from a natural-language prompt
- •Converting Stitch screens into a React or React Native component system with design-token consistency
- •Extracting a DESIGN.md design system straight from source code, then applying it back across screens
- •Building a multi-page website from a single prompt with the stitch-loop skill
Installing via Marketplace — Plus the MCP Prerequisite
Install the plugins globally through the Stitch Skills marketplace. For Codex: `codex plugin marketplace add google-labs-code/stitch-skills --ref main`, then install any of stitch-design, stitch-build, or stitch-utilities. For Claude Code: `npx plugins add google-labs-code/stitch-skills --scope project --target claude-code`; for Cursor, swap in `--scope workspace --target cursor`. To pull single skills instead of full plugins, run `npx skills add google-labs-code/stitch-skills`. Prerequisite: the Stitch MCP server must be configured and running in your agent's environment first, following Google's Stitch MCP setup docs, or the skills have nothing to talk to.
Driving Skills With Plain-Language Prompts
The skills are prompt-driven. Once the plugin and the Stitch MCP server are in place, you drive them in plain language and the skill handles the workflow — for example, "Make a browse tab for a mobile app for romance and date night ideas," "Convert all screens in Stitch project projects/123 to React components," or "Scan /src and extract the design system into .stitch/DESIGN.md." The README lists a prompt example for each skill. Note that skills often depend on each other, so if you install selectively you need to include their dependencies.
Riding Both Stitch and the Agent Skills Standard
Stitch skills for AI agents sit at the intersection of two things people are watching: Google Stitch as a design generator, and the Agent Skills open standard as a portable way to teach coding agents new workflows. The repo has drawn about 6,900 GitHub stars, and the pitch is that one skill folder runs the same across Claude Code, Cursor, Codex, and Gemini CLI rather than being locked to a single agent. It covers the full loop — text prompt to design, design to React or React Native, and back to a DESIGN.md system.
One Skill Folder, Five Agent Hosts
- ✓One skill folder works across Codex, Claude Code, Cursor, and Gemini CLI, so you're not locked to one agent
- ✓Covers the full loop — text-to-design, design-to-React, and code-to-DESIGN.md — rather than a single step
- ✓The README documents a concrete prompt example for every skill, so you can see exactly what each one does
- ✓Open source under Apache-2.0, and skills ship with their own validation scripts and reference examples checked in
Nothing Works Without the Stitch MCP Server First
- △Nothing runs standalone — you must configure and run the Stitch MCP server, with credentials, before any skill does anything
- △This is curated content you wire into your own agent, not an installable app; the value is the packaged prompts and scripts, not a runnable tool
- △The README warns that skills have inter-dependencies, so a selective install can break unless you also add every required dependency
- △It's tied to Google Stitch specifically, so the whole collection is only useful if Stitch is part of your workflow
- △The README states this is not an officially supported Google product and is excluded from Google's open-source vulnerability rewards program
Anthropic Agent Skills, superpowers, and shadcn/ui
For Teams Already Committed to Google Stitch
Teams already using Google Stitch who drive a coding agent — Claude Code, Codex, Cursor, or Gemini CLI — and want a repeatable way to go from prompt to design to React without re-writing the glue each time. If you don't use Stitch, or you're not willing to set up the Stitch MCP server and credentials first, this collection has nothing to offer you. It's also a useful reference if you're studying how the Agent Skills open standard structures a real, published skill library.
Stitch Skills FAQ
Stitch Skills is a collection of Stitch skills for AI agents from Google Labs. It packages agent skills and plugins that connect coding agents to Google Stitch, the design tool, through the Stitch MCP server, covering workflows from text-to-design to design-to-React.
Yes. The README lists the Stitch MCP server as a prerequisite — it must be configured and running in your agent's environment, with credentials, before any skill works. The skills are the workflow layer; the MCP server does the actual talking to Stitch.
Because the skills follow the Agent Skills open standard, the same skill runs across Codex, Antigravity, Gemini CLI, Claude Code, and Cursor. The README gives install commands for Codex, Claude Code, and Cursor specifically.
Install the full plugin suite via the marketplace (for example npx plugins add google-labs-code/stitch-skills for Claude Code), or pull individual skills with npx skills add google-labs-code/stitch-skills. Configure the Stitch MCP server first.
No. The README explicitly states this is not an officially supported Google product and is not eligible for Google's open-source software vulnerability rewards program, even though it's published under the google-labs-code organization.
Want a second opinion on stitch-skills?
Ask an AI that can read this page — one click and you get its take on stitch-skills.