{"slug": "google-stitch-skills-agent-skills-for-design-to-code-with-the-stitch-mcp-server", "title": "Google Stitch Skills: Agent Skills for Design-to-Code With the Stitch MCP Server", "summary": "Google Labs released stitch-skills, an open Agent Skills pack for Google Stitch that runs through the Stitch MCP server and covers design generation, DESIGN.md workflows and React-oriented exports. The google-labs-code/stitch-skills repository gained roughly 250 stars in a day and sits near 9,000 stars total on GitHub, with installs available via Codex plugin marketplace, Claude Code and Cursor. The README states the pack is not a supported Google product and requires Stitch MCP to be configured first.", "body_md": "**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.\n\nIf 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.\n\n## TL;DR: install and prerequisites\n\n| Question | Answer ( [README](https://github.com/google-labs-code/stitch-skills?ref=explainx) ) | \n|---|---|\n| What do I need first? | Stitch MCP configured per [stitch.withgoogle.com/docs/mcp/setup](https://stitch.withgoogle.com/docs/mcp/setup?ref=explainx) | \n| Fastest full install (Codex) | `codex plugin marketplace add google-labs-code/stitch-skills` then install`stitch-design` ,`stitch-build` ,`stitch-utilities` | \n| Claude Code | `npx plugins add google-labs-code/stitch-skills --scope project --target claude-code` | \n| Cursor | `npx plugins add google-labs-code/stitch-skills --scope workspace --target cursor` | \n| Pick individual skills | `npx skills add google-labs-code/stitch-skills` | \n| Open standard? | Yes — [agentskills.io](https://agentskills.io/?ref=explainx) format with`SKILL.md` , scripts, resources, examples | \n| Supported Google product? | **No** — README disclaimer | \n\nDesign-system tiles illustrating Stitch Skills turning UI tokens into coded components\n\n## What Google shipped in the repository\n\nThe README organizes skills into **three Codex plugins**, each with multiple skills underneath.\n\n**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.\n\n**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.\n\n**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**.\n\nEach 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.\n\nAgent skills library cards representing installable Stitch design and build plugins\n\n## How Stitch MCP fits the stack\n\nNone 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.\n\nIn 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.\n\nOpenCode 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.\n\n## Install paths that actually differ by agent\n\n**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.\n\n**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.\n\n**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.).\n\nFor 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.\n\n## Example prompts from Google's README\n\nThe repository ships concrete prompt patterns, not abstract feature lists. Examples include:\n\n- *\"Make a browse tab for a mobile app for romance and date night ideas.\"* (`generate-design` )\n- *\"Upload our design system from `.stitch/DESIGN.md` and apply it to all screens.\"* (`manage-design-system` )\n- *\"Convert all screens in Stitch project `projects/123` to React components.\"* (`react-components` )\n- *\"Build a 5-page portfolio website with Stitch.\"* (`stitch-loop` )\n\nThose 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.\n\n## How this compares to other skill marketplaces\n\n| Axis | Stitch Skills | Scenario skills pack | Generic `npx skills` repos | \n|---|---|---|---|\n| Backend | Google Stitch MCP | Scenario MCP + local DCC apps | Varies | \n| Sweet spot | UI → code + DESIGN.md | Game/media art | Single-domain automation | \n| Account gating | Stitch credentials | Scenario OAuth/API key | Often none | \n| Plugin packaging | Codex plugins + skills CLI | Skills CLI | Skills CLI | \n\nStitch 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.\n\n## Risks and review checklist\n\nBecause skills can shell out via `scripts/` and instruct agents to call remote MCP tools:\n\n1. **Read `SKILL.md` and scripts** before install, the same way you would audit a npm postinstall script.\n2. **Confirm Stitch MCP scopes** — credentials tied to a Google account can modify shared design projects.\n3. **Remember the unsupported-product disclaimer** — no enterprise SLA from Google on this repo.\n4. **Track dependencies between skills** if you install selectively; missing companion skills is a common failure mode in the README's warnings.\n\nFor 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.\n\n## What developers are asking\n\nSearch trends around **\"stitch skills\"** mostly mean this repository, not sewing tutorials — but install questions split by host:\n\n- **\"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.\n- **\"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.\n- **\"What is stitch skills\"** — Google's Labs-packaged Agent Skills for Stitch, not a separate Google Cloud product SKU.\n\nWe 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.\n\n## Gemini CLI, Antigravity, and the same skill folders\n\nThe 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.\n\nFor 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.\n\n## Troubleshooting installs that silently fail\n\nCommon failure modes from the README and issue patterns on similar skill repos:\n\n| Symptom | Likely cause | Fix | \n|---|---|---|\n| Agent says Stitch tools missing | MCP not registered | Complete [MCP setup](https://stitch.withgoogle.com/docs/mcp/setup/?ref=explainx) first | \n| OpenCode ignores a skill | `stitch::` name not kebab-case | Rename folder + frontmatter per README | \n| Partial plugin install breaks validation | Missing companion skill scripts | Install full plugin or copy dependencies | \n| Docs links 404 | Host redirect quirk | Open path directly on stitch.withgoogle.com | \n\nWhen 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.\n\n## DESIGN.md as the contract between design and code\n\nSeveral 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.\n\nIf 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.\"\n\n## Licensing, support, and production gates\n\nGoogle'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.\n\n## Who should install it this week\n\n| Reader | Recommendation | \n|---|---|\n| Product engineer using Claude Code | Install `stitch-build` after MCP works; sync one real screen before automating | \n| Design-minded founder | Start with `generate-design` +`enhance-prompt` , keep humans in the loop on brand | \n| Agent harness maintainer | Study plugin.json layout as a reference for packaging many skills | \n| Security reviewer | Treat like any third-party skill repo — static review + scoped MCP credentials | \n\n## Related reading\n\n- [What are Agent Skills?](https://explainx.ai/blog/what-are-agent-skills-complete-guide) — format basics\n- [DESIGN.md for agent UI](https://explainx.ai/blog/design-md-templates-professional-ui-ai-agents) — token discipline Stitch skills automate\n- [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\n- [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\n- [MCP explained](https://explainx.ai/blog/what-is-mcp-model-context-protocol-guide) — how remote servers attach to hosts\n- [Claude Code projects coordinator](https://explainx.ai/blog/claude-code-projects-proactive-coordinator-november-2026) — keeping multi-skill projects organized\n\n**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)\n\n*Repository structure and install commands are accurate as of November 15, 2026 per the main-branch README.*", "url": "https://wpnews.pro/news/google-stitch-skills-agent-skills-for-design-to-code-with-the-stitch-mcp-server", "canonical_source": "https://explainx.ai/blog/google-stitch-skills-agent-skills-mcp-claude-code-cursor-install-2026?utm_source=rss&utm_medium=feed&utm_campaign=blog", "published_at": "2026-11-15 00:00:00+00:00", "updated_at": "2026-11-15 15:23:29.444471+00:00", "lang": "en", "topics": ["ai-agents", "agent-protocols", "ai-tools", "developer-tools", "generative-ai"], "entities": ["Google Labs", "Google Stitch", "stitch-skills", "Stitch MCP server", "Codex", "Claude Code", "Cursor", "agentskills.io"], "also_reported_by": [], "alternates": {"html": "https://wpnews.pro/news/google-stitch-skills-agent-skills-for-design-to-code-with-the-stitch-mcp-server", "markdown": "https://wpnews.pro/news/google-stitch-skills-agent-skills-for-design-to-code-with-the-stitch-mcp-server.md", "text": "https://wpnews.pro/news/google-stitch-skills-agent-skills-for-design-to-code-with-the-stitch-mcp-server.txt", "jsonld": "https://wpnews.pro/news/google-stitch-skills-agent-skills-for-design-to-code-with-the-stitch-mcp-server.jsonld"}}