Google Stitch + OpenCode Guide: Install Skills Manually and Configure MCP

Google Stitch's Agent Skills (stitch-skills) let AI coding agents operate Stitch directly: generating interfaces, managing design systems, and exporting designs as components. The official repository ships a one-command npx plugins install for Claude Code, Cursor, Codex, and more — but OpenCode isn't on that list. It takes manually copying the skill directories into a path OpenCode can discover, and dodging a few naming traps along the way.

This tutorial walks you through two things: getting Stitch Skills into OpenCode, and registering the Stitch MCP server in opencode.json. The steps are based on the OpenCode section of the official stitch-skills README and the official OpenCode documentation, and we've added a naming checklist verified skill by skill.

Scope note: stitch-skills is maintained by the google-labs-code organization, and its README states plainly, "This is not an officially supported Google product." This article is an installation guide only and does not represent Google's position.

Why OpenCode Gets Its Own Article

The standard way to install stitch-skills relies on a command-line tool:

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

But that machinery (including npx skills and the plugin-marketplace layouts for Codex and Claude) does not apply to OpenCode. In its "Quick Start" section, the official README lists OpenCode separately under "manual install": skills are installed by copying directories, and MCP by hand-writing config.

The contrast with the other two mainstream agents could not be clearer:

Aspect	Claude Code / Cursor	OpenCode
Skill install	npx plugins writes files automatically	Manually copy into .opencode/skills/
Skill naming	Tolerates the stitch:: prefix	Must be lowercase kebab-case and equal the directory name
MCP registration	claude mcp add / .cursor/mcp.json	The mcp field in opencode.json

Fortunately, a manual install boils down to just two moves: copy the skills and register the MCP server.

Prerequisites: Set Up the Official Stitch MCP First

Stitch Skills is essentially a layer of "instructions"; the real design-generation capability comes from the Stitch MCP Server. If the MCP isn't configured properly, the skills won't work even when installed.

Start by completing authentication and MCP setup using the official process (API Key or OAuth, your choice):

• Official setup guide (mirrored on this site): MCP Setup and Authentication
• Original source: stitch.withgoogle.com/docs/mcp/setup

When you're done, you should have two things in hand — Step 3 uses both:

1. The Stitch MCP endpoint: https://stitch.googleapis.com/mcp
2. Credentials: an API Key (sent in the X-Goog-Api-Key request header) or an OAuth token

Step 1: Copy the Skill Directories Manually

1.1 Clone the Repository

git clone https://github.com/google-labs-code/stitch-skills
cd stitch-skills

1.2 Copy the Skills You Need

# Create the OpenCode skills directory in your project
mkdir -p .opencode/skills

# Copy a single skill (generate-design as an example)
cp -R plugins/stitch-design/skills/generate-design .opencode/skills/generate-design

# Repeat for the other skills you need under plugins/*/skills/

The repository groups its skills into three plugins:

Plugin	Purpose
stitch-design	Design workflows: generate/edit screens, import frontend code, upload assets, manage design systems
stitch-build	Code generation: React components, React Native, Remotion videos, shadcn/ui, and more
stitch-utilities	Prompt enhancement, DESIGN.md generation, loop-building multi-page sites, and more

See the Skills Reference for the complete list.

Tip: Don't stop after copying a single skill — Stitch skills depend on one another (see the notes at the end of this article), and a missing one can derail a workflow halfway through.

1.3 Where OpenCode Looks for Skills

OpenCode discovers skills automatically from the following locations (searching upward from the current directory to the git repository root):

Scope	Path
Project (OpenCode)	.opencode/skills/<name>/SKILL.md
Global (OpenCode)	~/.config/opencode/skills/<name>/SKILL.md
Project (Claude-compatible)	.claude/skills/<name>/SKILL.md
Global (Claude-compatible)	~/.claude/skills/<name>/SKILL.md
Project (Agent-compatible)	.agents/skills/<name>/SKILL.md
Global (Agent-compatible)	~/.agents/skills/<name>/SKILL.md

In other words: if your project already has .claude/skills/ or .agents/skills/ (say, from a previous Claude Code install), OpenCode will read them directly — no duplicate copy needed. If you want skills exclusively for OpenCode, put them in .opencode/skills/.

Step 2: Defuse the Naming Traps

This is where manual installation on OpenCode most often goes wrong: you copied the skills over, but OpenCode won't load them — nine times out of ten, it's a non-compliant name.

2.1 OpenCode's name Validation Rules

In the frontmatter of SKILL.md, name must satisfy:

• 1–64 characters
• Lowercase letters/digits with single hyphens between words (kebab-case)
• No leading or trailing -, and no consecutive --
• Must match the containing directory name exactly

The equivalent regular expression:

^[a-z0-9]+(-[a-z0-9]+)*$

2.2 Renaming Checklist for the stitch:: Prefix

For compatibility with Claude Code's namespace mechanism, some stitch-skills skills write their name in stitch::xxx form, for example:

# plugins/stitch-design/skills/generate-design/SKILL.md
name: stitch::generate-design

OpenCode doesn't recognize this prefix, so name needs to be changed to the lowercase form matching the directory name:

name: generate-design

We went through the frontmatter of every skill in the repository, one by one. The following skills need renaming (as of the time of writing):

Directory	Original name	Change to
code-to-design	stitch::code-to-design	code-to-design
generate-design	stitch::generate-design	generate-design
manage-design-system	stitch::manage-design-system	manage-design-system
extract-design-md	stitch::extract-design-md	extract-design-md
extract-static-html	stitch::extract-static-html	extract-static-html
upload-to-stitch	stitch::upload-to-stitch	upload-to-stitch
react-components	stitch::react-components	react-components
react-native	stitch::react-native	react-native

The remaining skills (react-vite-dashboard, remotion, shadcn-ui, design-md, enhance-prompt, stitch-loop, taste-design) already have compliant name values and need no changes.

If the directory name and name don't match, there are two ways to fix it: change name to match the directory, or rename the directory to match name. We recommend the former — it's the smaller change.

2.3 allowed-tools Is Ignored

The frontmatter of stitch-skills often includes allowed-tools (such as Bash, web_fetch) — that's a Claude Code field, and OpenCode ignores it, so it doesn't affect skill loading.

OpenCode's own extension fields live under metadata, for example:

metadata:
  opencode/slash: "true"        # Expose the skill as a /generate-design command
  opencode/autoinvoke: "false"  # Keep the model from auto-invoking it

(Optional — everything works without it.)

Step 3: Register the Stitch MCP in opencode.json

3.1 Minimal Configuration (from the Official README)

Add the following to the opencode.json at your project root (or the global ~/.config/opencode/opencode.json):

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

Replace YOUR_STITCH_MCP_URL with the Stitch MCP endpoint you obtained in the prerequisites section.

3.2 Full Configuration with an API Key (Recommended)

If you're authenticating with an API Key, add the headers field:

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "stitch": {
      "type": "remote",
      "url": "https://stitch.googleapis.com/mcp",
      "enabled": true,
      "headers": {
        "X-Goog-Api-Key": "YOUR_API_KEY"
      }
    }
  }
}

Generate YOUR_API_KEY on the Stitch settings page (see the MCP Setup Guide for detailed steps).

3.3 OAuth Approach

OpenCode handles OAuth for remote MCP servers automatically: if the Stitch MCP side uses an OAuth flow, just keep the configuration from 3.1 (no headers), and OpenCode will walk you through authorization when needed.

Step 4: Tool-Name Differences — the Trap When Rewriting Skills

A skill's body (the instruction section of SKILL.md) mentions which tool to call. stitch-skills was written against Claude Code's tool names, which don't line up with OpenCode's built-in tool names:

Name used in stitch-skills	Corresponding OpenCode tool
web_fetch	webfetch
run_command / Bash	bash

The allowed-tools field is ignored (see 2.3), so skill loading is unaffected; but if you find a skill "stalling because it wants to call some tool," just rename the tool in the skill body to the OpenCode name from the table above.

Verification: Let OpenCode Operate Stitch

Restart your OpenCode session (or start a new one), then verify in order:

1. Whether skills are loaded: ask in the conversation, "What skills do you have available?" — OpenCode lists skill names and descriptions in the skill tool's description.

2. List Stitch projects (verifies MCP connectivity):

   List all my Stitch projects.
   

   OpenCode should call list_projects and return your project list.

3. Generate a screen (verifies the full chain):

   Create a new Stitch project called "OpenCode Demo" and generate a clean login screen.
   

   It should call create_project and generate_screen_from_text in sequence, and the new screen will then appear at stitch.withgoogle.com.

If step 2 errors out, go back to the prerequisites section and check your MCP configuration and credentials.

Install Methods Compared: Claude Code / Cursor / OpenCode

Aspect	Claude Code	Cursor	OpenCode
Skill install	npx plugins add ... --target claude-code	npx plugins add ... --target cursor	Manually copy into .opencode/skills/
Skill directory	.claude/skills/ (written automatically)	Current workspace (written automatically)	.opencode/skills/ (or read .claude, .agents for compatibility)
Naming requirement	Tolerates the stitch:: prefix	Tolerates the stitch:: prefix	Must be kebab-case and equal the directory name
MCP registration	claude mcp add stitch ...	.cursor/mcp.json	The mcp field in opencode.json
Updating skills	Re-run the install command	Re-run the install command	Re-copy the skill directories

Things to Watch Out For

1. Configure MCP before installing skills: skills are only instructions; without MCP you won't get far.
2. Install dependency skills together: the official README specifically warns that Stitch skills depend on one another — for example, code-to-design depends on extract-static-html, extract-design-md, and upload-to-stitch. When installing selectively, be sure to copy the dependencies too.
3. Uninstalling = deleting the directory manually: no package manager is involved, so deleting .opencode/skills/<name>/ is the uninstall.
4. Updating = re-copying: after the repository updates (git pull), just re-run cp -R and overwrite.
5. Unofficial support notice: stitch-skills is maintained by the google-labs-code organization, and its README states plainly that it is not an officially supported Google product ("This is not an officially supported Google product.").

FAQ

Q: The skills are installed but OpenCode says it can't find them?

Check in order: ① whether the directory is on a discovery path (.opencode/skills/ is recommended); ② whether the SKILL.md filename is all uppercase; ③ whether the frontmatter's name is lowercase kebab-case and exactly matches the directory name (the stitch:: prefix is the most common culprit — see Step 2); ④ restart the session.

Q: Why can't OpenCode use the one-command npx plugins install?

OpenCode doesn't adopt npx plugins / npx skills or the plugin-marketplace layouts of Codex and Claude, so the official README gives it a dedicated "manual install" section — copy the skills, hand-write the MCP config: that's the process in this article.

Q: What if the MCP won't connect?

Work through the MCP Setup first: confirm the url is https://stitch.googleapis.com/mcp, enabled is true, and the API Key hasn't expired. If you're using OAuth, make sure you haven't also configured conflicting headers.

Q: Are these the same skills as in the Claude Code tutorial?

Yes. The skills themselves are identical; the only difference is "how to install them": Claude Code writes them automatically via npx plugins, while OpenCode requires a manual copy and a naming fix.

Summary

Installing Stitch Skills on OpenCode boils down to four steps:

1. Configure MCP — follow the official guide to get your endpoint and credentials
2. Copy the skills — cp -R plugins/*/skills/<name> .opencode/skills/<name>
3. Fix the naming — drop the stitch:: prefix from name, make it lowercase kebab-case matching the directory
4. Register the MCP — add mcp.stitch in opencode.json (remote + headers)

Once that's done, you can use natural language in OpenCode to have Stitch generate interfaces, manage design systems, and export components — the same capabilities Claude Code users get.

To go deeper on the skills themselves, keep reading: Skills Reference, Claude Code Install Tutorial, and Code-to-Design in Action.