How to Use Stitch Skills

By the RunLocalModel editorial team · October 13, 2026

Reference: github.com/google-labs-code/stitch-skills

Google Stitch turns a written description into UI screens. Stitch Skills is a library of Agent Skills that teach Cursor, Claude Code, Codex, Gemini CLI, and Antigravity how to do that work through the Stitch MCP server. Each skill is a folder with a SKILL.md file. The agent reads that file when your request matches it.

The repository is Apache-2.0. Its README says the project is not an officially supported Google product.

What you need

• A Google account that can open Stitch.
• Node.js, so npx can install the plugins.
• One coding agent that loads skills: Cursor, Claude Code, Codex, Gemini CLI, or Antigravity. OpenCode works after a manual copy, described below.
• The Stitch MCP server connected in that same agent. The skills call Stitch. Without the server, design and build requests have nothing to talk to.

1. Create an API key

1. Open Stitch Settings.
2. Find the API Keys section.
3. Click Create API Key.
4. Copy the key into a private note. You will paste it once into your agent's config.

The Stitch MCP setup guide recommends an API key for Cursor, Antigravity, Gemini CLI, Claude Code, and VS Code. Keep the key out of git and out of any code that ships to a browser.

OAuth is the other sign-in method. Use it when the tool only offers a browser login, or when you cannot store a long-lived secret. Those access tokens usually last about an hour, and you refresh them by hand. The same setup page has that path.

2. Connect Stitch to your agent

Stitch's MCP server is remote. It lives at https://stitch.googleapis.com/mcp. Your agent sends the API key with each request.

Cursor

In the project you are designing for, create .cursor/mcp.json:

{
  "mcpServers": {
    "stitch": {
      "url": "https://stitch.googleapis.com/mcp",
      "headers": {
        "X-Goog-Api-Key": "YOUR-API-KEY"
      }
    }
  }
}

If that file sits in a git repository, add it to .gitignore, or put the same block in your user-level Cursor MCP config so the key stays on your machine. Then open Cursor Settings, find MCP, and confirm stitch is connected. A failed connection is usually the key or the URL.

Claude Code

This saves the server for your user account:

claude mcp add stitch --transport http https://stitch.googleapis.com/mcp --header "X-Goog-Api-Key: YOUR-API-KEY" -s user

Gemini CLI

gemini extensions install https://github.com/gemini-cli-extensions/stitch

Antigravity

In the Agent panel, open the three-dot menu, choose MCP Servers, then Manage MCP Servers, then View raw config. Antigravity uses serverUrl where Cursor uses url:

{
  "mcpServers": {
    "stitch": {
      "serverUrl": "https://stitch.googleapis.com/mcp",
      "headers": {
        "X-Goog-Api-Key": "YOUR-API-KEY"
      }
    }
  }
}

VS Code

Open the Command Palette, run MCP: Add Server, choose HTTP, enter https://stitch.googleapis.com/mcp, and name it stitch. Then add the X-Goog-Api-Key header in that mcp.json. The setup guide shows the full VS Code block, including "type": "http".

3. Install the skills

The library ships as three plugins. Install all three. Design skills call each other, and a partial install stops halfway through a job.

Cursor

From the project root. This installs into the current workspace:

npx plugins add google-labs-code/stitch-skills --scope workspace --target cursor

Claude Code

From the project root. This installs into the current project:

npx plugins add google-labs-code/stitch-skills --scope project --target claude-code

Codex

Register the marketplace, then install stitch-design, stitch-build, and stitch-utilities:

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

The --sparse flags only download those folders. Leave them off if you want the whole repository. In the Codex app, the same step is Settings → Plugin Marketplaces → Add, with source https://github.com/google-labs-code/stitch-skills and git ref main.

One skill at a time

Run npx skills add google-labs-code/stitch-skills and pick the folders you want. npx plugins --help and npx skills --help list the flags.

If you take this path, also install every skill that one names. stitch::code-to-design runs extract-static-html, extract-design-md, and upload-to-stitch in that order. stitch::generate-design calls manage-design-system when the project has no design system, and upload-to-stitch when you start from an image. stitch-loop expects a DESIGN.md and a SITE.md already written.

OpenCode

OpenCode does not use npx plugins. Copy the skill folders into the project:

mkdir -p .opencode/skills
cp -R plugins/stitch-design/skills/generate-design .opencode/skills/generate-design

Repeat for each skill under plugins/*/skills/. OpenCode also reads .claude/skills/ and .agents/skills/. Two extra rules: the name in SKILL.md must be lowercase kebab-case and must match the folder name, so a name like stitch::generate-design has to be renamed before OpenCode will load it. And the Stitch server goes in opencode.json as a remote MCP entry, using the URL from the setup guide.

4. Ask in plain language

Start a new chat after installing, so the agent sees the new folders. In Cursor you can also type / and pick the skill for that message. How to Use Skills in Cursor covers / and custom modes.

You describe the outcome. The skill's description tells the agent when to open the folder. The agent then calls Stitch tools such as list_projects, generate_screen_from_text, edit_screens, and generate_variants. You do not run those tools yourself.

A project id looks like projects/123456789. If you do not know it, say the project name. The agent looks it up. Screen targets are MOBILE, DESKTOP, or TABLET. Saying "mobile" or "desktop" in the prompt is enough.

A first session you can copy

Paste this as your first message, after the server is connected and the plugins are installed:

Create a Stitch project named Date Night. Make a mobile browse tab for romance and date-night ideas: a top bar, a short intro, and a card list. Each card has a title, a one-line description, and a save button.

What happens, in order:

1. The agent searches your Stitch projects and creates Date Night if it is missing.
2. It rewrites your sentence into a layout prompt: platform, then header, then the card list. When a design system already exists, colors and fonts stay out of that prompt. The design system owns them.
3. Stitch returns the screen, plus a short description and suggestions. The agent should show you those notes.
4. It saves the HTML and a screenshot under .stitch/designs/.

The first screen is a draft. Ask for a specific change:

On the browse screen, add a filter row for Tonight, This weekend, and At home, and make the save button blue.

Name the control and the change. An edit may include a color. A brand-new screen should describe layout and content, and leave the palette to the design system. If the layout itself is wrong, ask for a new screen. If it is close, keep editing.

Then lock the look, and tell the agent to wait for your approval before uploading:

Read the screens in this project, write .stitch/DESIGN.md, and apply that design system to every screen. Show me the colors and type before you upload anything.

When you want code in the repo:

Convert the screens in this Stitch project into React components in this repository.

Four jobs, and the skill that does each

Design a new screen

Use stitch::generate-design. It covers four cases. Say which one you want.

Variants take a count from 1 to 5. The range is REFINE (small changes), EXPLORE (a balanced spread), or REIMAGINE (a different layout). You can limit the change to layout, color, images, type, or the words on the screen. "Explore layout and color" is enough. The agent fills in the tool fields.

If your sentence is still vague, ask for a rewrite first. enhance-prompt does not generate a screen. It hands you a prompt you can send next:

Enhance this prompt: make a settings page.

A strong prompt names the platform, the page type, and the sections in order. "Menu at the top" becomes "a navigation bar with a logo and menu items." Stitch's own prompting guide is the reference the skill tells the agent to read.

Bring an existing app into Stitch

Use stitch::code-to-design when the UI already exists in a repo. One request runs three skills: a static HTML snapshot, a DESIGN.md taken from the source, then an upload into a Stitch project.

Upload the frontend at this repo into a Stitch project named Dashboard-Migration-2026.

Have the app running, or have a built folder that contains index.html. The agent should stop and ask how to capture the page. For a local app with no login wall, the Puppeteer snapshot is the default: it opens the URL, inlines the CSS and images, and writes one HTML file. If someone must click, type, or sign in before the right screen appears, say so. That path uses the browser instead.

The agent should also stop before it uploads, and show you the files. On a Mac, an upload that fails with CERTIFICATE_VERIFY_FAILED is a Python certificate issue. pip install certifi gives the upload script a certificate bundle it can use.

Turn Stitch screens into code

Say the stack. The build plugin has a skill for each of these:

• React on the web. "Convert all screens in Stitch project projects/123 to React components." A later pass is "Sync the app to the latest updates of that Stitch project." The agent downloads every screen, then writes modular Vite and React components.
• React Native. "Convert the Stitch design to React Native components with a theme and navigation." You get native components and StyleSheet code, mapped from the HTML.
• A data dashboard. "Build a dashboard from this Stitch screen using our DESIGN.md." The target stack is React, Vite, TypeScript, TanStack Query, and React Router. Have a DESIGN.md in the project first. Wallet-style reads are optional and stay isolated from the layout components.
• shadcn/ui. "Set up shadcn/ui and build a data table with sorting and filtering." This skill copies components into your repo. It is written for the shadcn MCP server as well as Stitch.
• A walkthrough video. "Generate a walkthrough video of Stitch project projects/456." You also need Remotion, either the Remotion MCP server or the Remotion CLI. The skill lines the screens up with transitions, zooms, and text overlays, then renders.

Build a multi-page site

Two files keep a long job from drifting. site-md writes .stitch/SITE.md: the name, the audience, the sitemap, and the backlog. design-md or taste-design writes .stitch/DESIGN.md. stitch-loop then builds one page, updates the site, and writes the next assignment into .stitch/next-prompt.md.

Write a SITE.md for a five-page portfolio: home, work, about, notes, and contact. Then build the site with Stitch, one page at a time.

design-md describes screens that already exist in a Stitch project. taste-design writes a stricter system for a new look: one accent color, no neon purple glow, and type rules the generator has to follow. stitch::manage-design-system is the step that uploads DESIGN.md and applies it to screens. It is written to show you the colors, fonts, and corner radius, and to wait for a yes.

Every skill, and a prompt that starts it

Skill names are what you can search for with /. The sentence in the middle column is a real request from the project, shortened only where a path or id is yours to fill in.

Design

Build

Utilities

Files the agent writes

These land in the project you have open. They are the memory for the next chat.

If a design file is already there, the agent is supposed to ask before it downloads a fresh copy over the top.

When the agent should stop and ask

Several skills are written to wait for you. If it skips ahead, tell it to stop and confirm.

• Before an upload. It should list the file paths, sizes, and types, and wait for a yes.
• Before a design system goes to Stitch. It should show the display name, colors, fonts, and corner radius.
• Before a snapshot of your app. It should tell you the local URL and which capture method it will use.
• When it cannot find the API key. Paste the key from Stitch Settings into the local config. Do not commit it.

If a request does nothing

• The skill never opens. Confirm stitch is connected under MCP, and that you installed the plugins in this workspace. Start a new chat. In Cursor, type / and search for stitch.
• Stitch says unauthenticated. The API key is missing or wrong. If you used OAuth, the access token has likely expired. Create a new one and update the config.
• The agent tries to paste a huge file into the chat. Tell it to use stitch::upload-to-stitch. That skill sends the file over HTTP because a base64 copy of even a small image does not fit in the model's reply.
• OpenCode ignores a skill. Rename the folder and the name field to lowercase kebab-case, and make them match.
• A docs link on stitch.withgoogle.com lands on the wrong page. Open the path directly, for example https://stitch.withgoogle.com/docs/learn/prompting/.

Questions people ask first

Related on this site

• How to Use Skills in Cursor, including how to run one skill with /
• What Are Agent Skills?, the folder format these plugins use
• What Is MCP?, the connection Stitch uses
• All guides