# Google Stitch Skills: Agent Skills for Design-to-Code With the Stitch MCP Server > Source: > Published: 2026-11-15 00:00:00+00:00 **google-labs-code/stitch-skills is Google Labs' open Agent Skills pack for [Google Stitch](https://stitch.withgoogle.com/?ref=explainx) — design generation, DESIGN.md discipline, and React-oriented exports through the Stitch MCP server.** The repository gained roughly **250 stars in a day** and sits near **9,000 stars** total on GitHub, which puts it on the weekly trending list alongside other skill libraries builders already track. If you have been following [Agent Skills](https://explainx.ai/blog/what-are-agent-skills-complete-guide) and [MCP hosts](https://explainx.ai/blog/what-is-mcp-model-context-protocol-guide), this repo is the **Google-side counterpart** to vendor packs like [Scenario's game-art skills](https://explainx.ai/blog/scenario-labs-skills-agent-skills-scenario-mcp-game-art-blender-unity-install-github-trending-2026): procedural instructions an agent loads, backed by a **remote MCP server** instead of local scripts alone. ## TL;DR: install and prerequisites | Question | Answer ( [README](https://github.com/google-labs-code/stitch-skills?ref=explainx) ) | |---|---| | What do I need first? | Stitch MCP configured per [stitch.withgoogle.com/docs/mcp/setup](https://stitch.withgoogle.com/docs/mcp/setup?ref=explainx) | | Fastest full install (Codex) | `codex plugin marketplace add google-labs-code/stitch-skills` then install`stitch-design` ,`stitch-build` ,`stitch-utilities` | | Claude Code | `npx plugins add google-labs-code/stitch-skills --scope project --target claude-code` | | Cursor | `npx plugins add google-labs-code/stitch-skills --scope workspace --target cursor` | | Pick individual skills | `npx skills add google-labs-code/stitch-skills` | | Open standard? | Yes — [agentskills.io](https://agentskills.io/?ref=explainx) format with`SKILL.md` , scripts, resources, examples | | Supported Google product? | **No** — README disclaimer | Design-system tiles illustrating Stitch Skills turning UI tokens into coded components ## What Google shipped in the repository The README organizes skills into **three Codex plugins**, each with multiple skills underneath. **stitch-design** is the creative layer. Skills include `stitch::generate-design` for new screens and variants, `stitch::code-to-design` to push existing front-end trees into Stitch, `stitch::manage-design-system` and `stitch::extract-design-md` for DESIGN.md workflows, plus utilities to snapshot static HTML or upload local assets. If you already use [DESIGN.md templates for agent UI work](https://explainx.ai/blog/design-md-templates-professional-ui-ai-agents), the naming will feel familiar — these skills automate the **extract → upload → apply** loop against Stitch projects rather than a generic repo. **stitch-build** is the compile layer. It includes `stitch::react-components`, `stitch::react-native`, a Remotion walkthrough generator, shadcn/ui guidance, and a React + Vite dashboard skill that references DESIGN.md tokens and optional Web3 read patterns. The pitch is not "one-shot codegen" but **repeatable sync**: prompts in the README explicitly mention syncing an app to the latest Stitch project revision. **stitch-utilities** polishes inputs and output quality. `enhance-prompt` turns vague UI requests into Stitch-friendly language; `stitch-loop` aims at multi-page sites from one prompt; `taste-design` pushes anti-generic typography and color discipline. Together they address a problem every design MCP faces — **garbage prompts produce garbage screens**. Each skill follows the standard folder shape the README documents: `SKILL.md` as mission control, `scripts/` for validation, `resources/` for checklists, and `examples/` for gold-standard references. That is the same contract [Chrome DevTools MCP skills](https://explainx.ai/blog/chrome-devtools-mcp-chrome-devtools-for-agents-55k-stars-setup-skills-guide-2026) and other trending repos use, which is why one marketplace install can pull dozens of workflows without forking your harness. Agent skills library cards representing installable Stitch design and build plugins ## How Stitch MCP fits the stack None of the skills replace MCP setup. The README's **Prerequisites** section is explicit: configure the **Stitch MCP server** and credentials before agents can create or edit Stitch projects. In practice you are wiring a **remote MCP endpoint** (documented on Stitch's site) into whichever host you use — Claude Code, Cursor, Codex, Gemini CLI, Antigravity, or OpenCode. Skills then teach **which tools to call, in what order**, and how to recover when a screen or token set drifts. OpenCode users get extra friction the README calls out honestly. OpenCode ignores some frontmatter fields, requires **kebab-case** skill names matching directories, and may need you to rename skills that use `stitch::` prefixes. It also wants MCP declared in `opencode.json` with the URL from Stitch's setup flow. If you run multiple hosts, plan on **one MCP config per host**, not one global file. ## Install paths that actually differ by agent **Codex** users can register a sparse marketplace checkout — the README shows optional `--sparse` paths so clones stay small — then install three plugins independently. That matters when you only want design skills without React build automation chewing context. **Claude Code and Cursor** share the `npx plugins add` path with different `--scope` flags (`project` vs `workspace`). Both land skills where those products discover plugins; you do not manually copy `SKILL.md` files unless you are pinning a fork. **OpenCode** is manual: copy skill folders into `.opencode/skills`, fix naming, add MCP JSON. The README links OpenCode's own skills documentation for discovery paths (`.claude/skills/`, `.agents/skills/`, etc.). For selective installs, `npx skills add google-labs-code/stitch-skills` still works, but the README warns about **inter-dependencies** — pulling only one design skill without its helpers can break validation scripts. ## Example prompts from Google's README The repository ships concrete prompt patterns, not abstract feature lists. Examples include: - *"Make a browse tab for a mobile app for romance and date night ideas."* (`generate-design` ) - *"Upload our design system from `.stitch/DESIGN.md` and apply it to all screens."* (`manage-design-system` ) - *"Convert all screens in Stitch project `projects/123` to React components."* (`react-components` ) - *"Build a 5-page portfolio website with Stitch."* (`stitch-loop` ) Those lines are useful because they show **how Google expects you to scope tasks**: name deliverables, reference project IDs when syncing, and tie build steps back to DESIGN.md when tokens matter. ## How this compares to other skill marketplaces | Axis | Stitch Skills | Scenario skills pack | Generic `npx skills` repos | |---|---|---|---| | Backend | Google Stitch MCP | Scenario MCP + local DCC apps | Varies | | Sweet spot | UI → code + DESIGN.md | Game/media art | Single-domain automation | | Account gating | Stitch credentials | Scenario OAuth/API key | Often none | | Plugin packaging | Codex plugins + skills CLI | Skills CLI | Skills CLI | Stitch is strongest when your team already lives in **Stitch projects** or wants **Google-adjacent design iteration** inside an agent harness. It is weaker as a generic "build any app" kit — compare [Vercel's UI SDK behaviors](https://explainx.ai/blog/vercel-labs-ui-sdk-behaviors-for-agents-react-vue-svelte-beta-2026) if you need framework-level component contracts without a design tool in the loop. ## Risks and review checklist Because skills can shell out via `scripts/` and instruct agents to call remote MCP tools: 1. **Read `SKILL.md` and scripts** before install, the same way you would audit a npm postinstall script. 2. **Confirm Stitch MCP scopes** — credentials tied to a Google account can modify shared design projects. 3. **Remember the unsupported-product disclaimer** — no enterprise SLA from Google on this repo. 4. **Track dependencies between skills** if you install selectively; missing companion skills is a common failure mode in the README's warnings. For MCP security hygiene more broadly, pair this install with our [MCP protocol guide](https://explainx.ai/blog/what-is-mcp-model-context-protocol-guide) and keep Stitch endpoints out of public CI logs. ## What developers are asking Search trends around **"stitch skills"** mostly mean this repository, not sewing tutorials — but install questions split by host: - **"How to install stitch skills in Antigravity"** — use the same skills marketplace patterns Antigravity documents; the README lists Antigravity among compatible agents via the open standard. - **"How to use stitch skills"** — start from Stitch MCP setup, then run one design skill with a narrow prompt before attempting full`stitch-loop` multi-page builds. - **"What is stitch skills"** — Google's Labs-packaged Agent Skills for Stitch, not a separate Google Cloud product SKU. We did not find a large Hacker News thread on this repo in today's candidate set; traction is primarily GitHub trending and X posts from builders wiring design MCPs. ## Gemini CLI, Antigravity, and the same skill folders The README lists **Gemini CLI** and **Google Antigravity** alongside Claude Code and Cursor because Stitch Skills follow the portable [Agent Skills open standard](https://agentskills.io/?ref=explainx). Antigravity in particular shows up in search queries as **"stitch skills antigravity"** — builders want to know whether Google's design MCP works outside Codex. The answer in-repo is yes at the **skill text** layer, but you still wire Stitch MCP per host documentation; Antigravity's discovery paths may differ from Claude's plugin marketplace. For Gemini CLI users, treat this repository like other Google Labs drops: install skills, confirm MCP endpoints, then run a **single** `generate-design` task before chaining `stitch-loop` multi-page builds. Google's disclaimer that Stitch Skills is **not** a supported product applies regardless of which Google-branded agent frontend you prefer. ## Troubleshooting installs that silently fail Common failure modes from the README and issue patterns on similar skill repos: | Symptom | Likely cause | Fix | |---|---|---| | Agent says Stitch tools missing | MCP not registered | Complete [MCP setup](https://stitch.withgoogle.com/docs/mcp/setup/?ref=explainx) first | | OpenCode ignores a skill | `stitch::` name not kebab-case | Rename folder + frontmatter per README | | Partial plugin install breaks validation | Missing companion skill scripts | Install full plugin or copy dependencies | | Docs links 404 | Host redirect quirk | Open path directly on stitch.withgoogle.com | When skills call `web_fetch` vs `webfetch`, OpenCode users must align tool names with OpenCode builtins — the README calls this out explicitly because copy-pasted Codex instructions fail on other hosts. ## DESIGN.md as the contract between design and code Several Stitch utilities (`extract-design-md`, `manage-design-system`, `taste-design`) assume you treat **DESIGN.md** as the cross-team contract. That aligns with explainx.ai's broader push for [DESIGN.md templates](https://explainx.ai/blog/design-md-templates-professional-ui-ai-agents) in agent-built UIs. Stitch Skills automate extraction from `/src` trees or Stitch projects, but humans still approve typography and color decisions before agents sync React exports. If your organization already standardized tokens in Figma, the realistic workflow is: export or transcribe tokens into DESIGN.md, upload via `manage-design-system`, then let `react-components` sync — not "prompt once and ship production CSS blindly." ## Licensing, support, and production gates Google's README disclaims official product status and excludes the repo from Google's open-source vulnerability rewards program. For enterprise design systems, that means legal and security review sits **on your side** — no implied SLA from Google Labs. Run third-party skill review parallel to MCP credential scoping: separate Stitch projects for experiments vs brand-approved design libraries. ## Who should install it this week | Reader | Recommendation | |---|---| | Product engineer using Claude Code | Install `stitch-build` after MCP works; sync one real screen before automating | | Design-minded founder | Start with `generate-design` +`enhance-prompt` , keep humans in the loop on brand | | Agent harness maintainer | Study plugin.json layout as a reference for packaging many skills | | Security reviewer | Treat like any third-party skill repo — static review + scoped MCP credentials | ## Related reading - [What are Agent Skills?](https://explainx.ai/blog/what-are-agent-skills-complete-guide) — format basics - [DESIGN.md for agent UI](https://explainx.ai/blog/design-md-templates-professional-ui-ai-agents) — token discipline Stitch skills automate - [Scenario Agent Skills](https://explainx.ai/blog/scenario-labs-skills-agent-skills-scenario-mcp-game-art-blender-unity-install-github-trending-2026) — another vendor MCP skill pack - [Chrome DevTools MCP](https://explainx.ai/blog/chrome-devtools-mcp-chrome-devtools-for-agents-55k-stars-setup-skills-guide-2026) — debugging live pages agents build - [MCP explained](https://explainx.ai/blog/what-is-mcp-model-context-protocol-guide) — how remote servers attach to hosts - [Claude Code projects coordinator](https://explainx.ai/blog/claude-code-projects-proactive-coordinator-november-2026) — keeping multi-skill projects organized **Official sources:** [google-labs-code/stitch-skills README](https://github.com/google-labs-code/stitch-skills?ref=explainx) · [Stitch MCP setup](https://stitch.withgoogle.com/docs/mcp/setup/?ref=explainx) · [Agent Skills standard](https://agentskills.io/?ref=explainx) *Repository structure and install commands are accurate as of November 15, 2026 per the main-branch README.*