Google Stitch Skills: Agent Skills for Design-to-Code With the Stitch MCP Server

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.

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.