stitch-skills: Google Stitch MCP Skills for UI Design → React Dashboards

Designing UI in Stitch, then hand-converting screens into React or React Native code, then writing the dashboard wiring by hand — that loop is slow and lossy. google-labs-code/stitch-skills ships three plugin bundles (stitch-design, stitch-build, stitch-utilities) that follow the Agent Skills open standard and slot into Claude Code, Codex, Gemini CLI, or Cursor, so the design-to-code handoff becomes a single prompt.

Why This Skill Matters

The repo gives you 15 skills that fall into three roles: stitch-design moves code into Stitch (code-to-design, generate-design, manage-design-system, extract-design-md, extract-static-html, upload-to-stitch); stitch-build moves Stitch screens back into frameworks (react-components, react-native, remotion, shadcn-ui, react-vite-dashboard); stitch-utilities analyzes and primes designs (design-md, enhance-prompt, stitch-loop, taste-design). The same skill names work across Codex, Claude Code, Cursor, and Gemini CLI, with OpenCode as a manual-install fallback.

For teams already using Stitch, this is the shortest path between "approved design in Stitch" and "running component in our app". For teams new to Stitch, the code-to-design direction is the cheapest way to migrate an existing frontend into a design system.

Installation

Each agent has its own install path. Pick the one matching your setup.

Codex (Antigravity) — recommended, all three plugins at once:

codex plugin marketplace add google-labs-code/stitch-skills --ref main \
  --sparse .agents/plugins \
  --sparse plugins/stitch-design \
  --sparse plugins/stitch-build \
  --sparse plugins/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

Selective install (only the bundles you actually need):

npx skills add google-labs-code/stitch-skills

Before any of this works, the Stitch MCP server must be configured with credentials and a reachable endpoint. OpenCode users copy skill folders into .opencode/skills/ manually; OpenCode also requires renaming any stitch::... skill name frontmatter to lowercase kebab-case, and tool names in the skill instructions may need remapping to OpenCode's webfetch / bash style.

Real Workflow: Migrate an Existing Frontend Into Stitch

You have a working React + Vite dashboard at /path/to/dashboard and you want to bring it into Stitch so designers can iterate on it without touching code.

Step 1. With the Stitch MCP server configured and the stitch-design plugin installed, open the project in your agent and run:

Upload the frontend code at /path/to/dashboard into a Stitch project named
'Dashboard-Migration-2026'.

Step 2. The code-to-design skill activates. It walks the repo, extracts self-contained static HTML, generates a DESIGN.md summary of the visual system, and uploads the assets into the named Stitch project.

Step 3. Open Stitch, confirm the project exists and the screens are populated. Designers can now edit screens, create variants, and apply themes through manage-design-system without going near the source code.

Step 4. When design changes ship back, run extract-design-md to regenerate the local design summary so downstream code-generation skills (react-components, react-vite-dashboard) stay aligned.

Real Workflow: Generate a React Dashboard From a Stitch Screen

You have an approved DeFi portfolio screen in Stitch and a DESIGN.md that captures the design tokens. You want a real React + Vite dashboard with TanStack Query wired in.

Step 1. Confirm stitch-build is installed. Then ask:

Build a DeFi portfolio dashboard from this Stitch screen using our DESIGN.md.
Use TanStack Query for data fetching and match the spacing scale from DESIGN.md.

Step 2. The react-vite-dashboard skill activates. It pulls the Stitch screen, applies the tokens from DESIGN.md, scaffolds a Vite app, sets up TanStack Query, and emits component files that match the layout. Expected output:

src/
├── components/
│   ├── PortfolioHeader.tsx
│   ├── HoldingsTable.tsx
│   └── AllocationChart.tsx
├── hooks/
│   └── usePortfolio.ts          ← TanStack Query
├── lib/
│   └── tokens.ts                ← values from DESIGN.md
└── App.tsx

Step 3. pnpm dev, eyeball the result against the Stitch screen, and iterate by editing the screen and re-running the skill — design changes propagate through the same prompt.

• Install all three plugins even if you start with one; skills depend on each other and selective install needs the full dep closure.
• Keep DESIGN.md in version control next to your app code so react-vite-dashboard and manage-design-system stay synchronized across the team.
• For walkthrough videos of a Stitch project, run remotion after react-components — the skill expects the React component output, not raw Stitch HTML.
• When moving between agents (Claude Code → Cursor), the skill names are stable; you do not need to rewrite prompts.

When Not to Use This

If your team does not use Stitch and has no plan to adopt it, these skills add no value — they are an MCP wrapper around a specific design tool. For purely code-to-code refactors, stick with a stack-specific skill (for example Jeffallan/claude-skills) and skip the design round-trip entirely.

See the leaderboard for more design-to-code skills.