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

google-labs-code/stitch-skills is Google Labs' open Agent Skills pack for Google Stitch — 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 and MCP hosts, this repo is the Google-side counterpart to vendor packs like Scenario's game-art skills: procedural instructions an agent loads, backed by a remote MCP server instead of local scripts alone.

TL;DR: install and prerequisites

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, 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 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

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 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 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. 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:

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 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

Related reading

• What are Agent Skills? — format basics
• DESIGN.md for agent UI — token discipline Stitch skills automate
• Scenario Agent Skills — another vendor MCP skill pack
• Chrome DevTools MCP — debugging live pages agents build
• MCP explained — how remote servers attach to hosts
• Claude Code projects coordinator — keeping multi-skill projects organized

Official sources: google-labs-code/stitch-skills README · Stitch MCP setup · Agent Skills standard

Repository structure and install commands are accurate as of November 15, 2026 per the main-branch README.