Stitch Design Skills

A collection of agent skills and plugins for Google Stitch, following the Agent Skills open standard. Compatible with coding agents such as Codex, Antigravity, Gemini CLI, Claude Code, Cursor, and OpenCode (manual install).

Quick Start

1. Install Plugins (Recommended)

The fastest way to set up the full Stitch plugin suite globally.

Codex

Add the Stitch Skills marketplace, then install the plugins you need.

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

[!TIP] The --sparse flags are optional — they limit the checkout to only the listed paths for a faster clone. Omit them to pull the entire repository.

Navigate to Settings → Plugin Marketplaces → Add and fill in:

Once the marketplace is registered, install any combination of:

• stitch-design — design-focused skills
• stitch-build — build and component skills
• stitch-utilities — utility and helper skills

Claude Code & Cursor

# Claude Code — installs into the current project
npx plugins add google-labs-code/stitch-skills --scope project --target claude-code

# Cursor — installs into the current workspace
npx plugins add google-labs-code/stitch-skills --scope workspace --target cursor

OpenCode

OpenCode does not use npx plugins / npx skills or the Codex/Claude marketplace layout. Install skills and the Stitch MCP server manually:

1. Skills — copy the skill folders you need into a discoverable path:

# Project-local (recommended)
mkdir -p .opencode/skills
cp -R plugins/stitch-design/skills/generate-design .opencode/skills/generate-design
# repeat for other skills under plugins/*/skills/

OpenCode also discovers .claude/skills/ and .agents/skills/ (see OpenCode skills docs).

Naming: OpenCode requires skill name frontmatter to be lowercase kebab-case and match the directory name. Skills that use stitch::… names (or other non-kebab forms) need the name field and folder renamed before OpenCode will load them. Extra frontmatter such as allowed-tools is ignored.

2. Stitch MCP — add a remote MCP entry in project opencode.json or ~/.config/opencode/opencode.json after completing the Stitch MCP setup:

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "stitch": {
      "type": "remote",
      "url": "YOUR_STITCH_MCP_URL",
      "enabled": true
    }
  }
}

Replace YOUR_STITCH_MCP_URL with the endpoint from the Stitch MCP setup flow (credentials/env vars from that guide still apply).

Tool names inside skill instructions may differ from OpenCode builtins (webfetch / bash instead of web_fetch / run_command). Prefer the OpenCode tool names when adapting a skill for OpenCode.

2. Install Skills Selectively

Choose only the specific skills you need.

[!IMPORTANT] Stitch Design Skills often have inter-dependencies. If you choose to install skills selectively, ensure you include all required dependencies.

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

You can run the following commands to see the help documentation for plugins and skills:

npx plugins --help

npx skills --help

Prerequisites

These skills require the Stitch MCP server to be configured and running in your agent's environment. Make sure you have followed the Stitch MCP Setup Instructions to register the server and set up appropriate environment variables and credentials.

Docs navigation: If a link on stitch.withgoogle.com/docs redirects incorrectly, open the target path under the same host (e.g. https://stitch.withgoogle.com/docs/learn/device-types/).

Available Plugins

Design (stitch-design)

Core design workflows for creating, managing, and optimizing designs within Stitch.

Build (stitch-build)

Code generation, framework integration, and asset compilation from Stitch designs.

Utilities (stitch-utilities)

Supporting tools for enhancing prompts, generating design specs, and enforcing design standards.

Repository Structure

plugins/
├── stitch-design/          — Core design workflow plugin
│   ├── plugin.json
│   └── skills/
│       ├── code-to-design/
│       ├── generate-design/
│       ├── manage-design-system/
│       ├── extract-design-md/
│       ├── extract-static-html/
│       └── upload-to-stitch/
├── stitch-build/           — Code generation & build plugin
│   ├── plugin.json
│   └── skills/
│       ├── react-components/    — stitch::react-components
│       ├── react-native/
│       ├── react-vite-dashboard/
│       ├── remotion/
│       └── shadcn-ui/
└── stitch-utilities/       — Design utilities & assistants plugin
    ├── plugin.json
    └── skills/
        ├── design-md/
        ├── enhance-prompt/
        ├── stitch-loop/
        └── taste-design/

Each skill follows the Agent Skills standard:

skills/<skill-name>/
├── SKILL.md           — The "Mission Control" for the agent
├── scripts/           — Executable enforcers (Validation & Networking)
├── resources/         — The knowledge base (Checklists & Style Guides)
└── examples/          — The "Gold Standard" syntactically valid references

Adding New Skills

All new skills need to follow the file structure above to implement the Agent Skills open standard.

Great candidates for new skills

• Validation: Skills that convert Stitch HTML to other UI frameworks and validate the syntax.
• Decoupling Data: Skills that convert static design content into external mock data files.
• Generate Designs: Skills that generate new design screens in Stitch from a given set of data.

This is not an officially supported Google product. This project is not eligible for the Google Open Source Software Vulnerability Rewards Program.