·12 分钟阅读

Google Stitch + OpenCode 实战：手动安装 Skills 并配置 MCP

面向 OpenCode 用户的 Stitch Skills 手动安装教程：复制技能目录、绕开命名陷阱（stitch:: 前缀与 kebab-case 校验）、在 opencode.json 注册 Stitch MCP，并附与 Claude Code / Cursor 的安装对照。

S
Stitch Prompt Team
Content Team
StitchOpenCodeAI教程GitHub

Google Stitch 的 Agent Skills（stitch-skills）让 AI 编码代理直接操作 Stitch：生成界面、管理设计系统、把设计导出成组件。官方仓库为 Claude Code、Cursor、Codex 等工具提供了 npx plugins 一键安装，但 OpenCode 不在其中——它需要手动把技能目录复制到 OpenCode 能发现的路径，并绕开几个命名上的坑。

这篇教程带你完成两件事：把 Stitch Skills 装进 OpenCode，并在 opencode.json 里注册 Stitch MCP。步骤基于官方 stitch-skills README 的 OpenCode 段落与 OpenCode 官方文档，并补充了逐技能实测的命名清单。

边界说明：stitch-skills 由 google-labs-code 组织维护，README 明确声明 “This is not an officially supported Google product.”（非 Google 官方支持产品）。本文仅作安装指引，不代表 Google 立场。

为什么 OpenCode 需要单独一篇

stitch-skills 的常规安装依赖命令行工具：

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

但这套机制（含 npx skills、Codex / Claude 的插件市场布局）OpenCode 并不适用。官方 README 在 “Quick Start” 里把 OpenCode 单列为 “manual install（手动安装）”：技能靠复制目录，MCP 靠手写配置。

和另外两种主流代理的差异一目了然：

环节Claude Code / CursorOpenCode
技能安装npx plugins 自动写入手动复制到 .opencode/skills/
技能命名兼容 stitch:: 前缀必须小写 kebab-case 且等于目录名
MCP 注册claude mcp add / .cursor/mcp.jsonopencode.json 的 mcp 字段

好在手动安装总共只有两个动作：复制技能 + 注册 MCP。

前置：先完成 Stitch MCP 官方配置

Stitch Skills 本质是一层“说明书”，真正的设计生成能力来自 Stitch MCP Server。MCP 没配好，技能装上了也无法工作。

先按官方流程完成认证与 MCP 配置（API Key 或 OAuth 任选）：

完成后你应该拿到两样东西，Step 3 会用到：

  1. Stitch MCP 端点：https://stitch.googleapis.com/mcp
  2. 凭据：API Key（对应 X-Goog-Api-Key 请求头）或 OAuth 令牌

Step 1：手动复制技能目录

1.1 克隆仓库

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

1.2 复制需要的技能

# 在项目目录下创建 OpenCode 技能目录
mkdir -p .opencode/skills

# 复制单个技能（以 generate-design 为例）
cp -R plugins/stitch-design/skills/generate-design .opencode/skills/generate-design

# 其他技能同理：把 plugins/*/skills/ 下需要的目录逐个复制过去

仓库按三个插件组织技能：

插件用途
stitch-design设计工作流：生成/编辑屏幕、导入前端代码、上传素材、管理设计系统
stitch-build代码生成：React 组件、React Native、Remotion 视频、shadcn/ui 等
stitch-utilities提示词增强、DESIGN.md 生成、多页站点循环构建等

完整技能清单见技能参考。

建议：不要只复制单个技能就收工——Stitch 技能之间存在依赖关系（见文末注意事项），缺一个都可能让工作流半途失败。

1.3 OpenCode 的技能发现路径

OpenCode 会从以下位置自动发现技能（从当前目录向上查找，直到 git 仓库根）：

范围路径
项目级（OpenCode）.opencode/skills/<name>/SKILL.md
全局（OpenCode）~/.config/opencode/skills/<name>/SKILL.md
项目级（Claude 兼容）.claude/skills/<name>/SKILL.md
全局（Claude 兼容）~/.claude/skills/<name>/SKILL.md
项目级（Agent 兼容）.agents/skills/<name>/SKILL.md
全局（Agent 兼容）~/.agents/skills/<name>/SKILL.md

也就是说：如果你的项目里已经有 .claude/skills/ 或 .agents/skills/（比如之前给 Claude Code 装过），OpenCode 会直接读取，无需重复复制。想单独给 OpenCode 用，就放在 .opencode/skills/。

Step 2：解决命名陷阱

这是 OpenCode 手动安装最容易翻车的一步：技能复制过去了，但 OpenCode 不加载——九成是 name 不合规。

2.1 OpenCode 的 name 校验规则

SKILL.md 的 frontmatter 中，name 必须满足：

  • 1–64 个字符
  • 小写字母/数字，单词之间用单个连字符（kebab-case）
  • 不以 - 开头或结尾，不出现连续 --
  • 必须与所在目录名完全一致

等价正则：

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

2.2 stitch:: 前缀改名清单

stitch-skills 为兼容 Claude Code 的命名空间机制，部分技能的 name 写成了 stitch::xxx 形式，例如：

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

OpenCode 不认这种前缀，需要把 name 改成与目录名一致的小写形式：

name: generate-design

我们逐个核对了仓库中全部技能的 frontmatter，以下技能需要改名（截至本文写作时）：

目录原 name改为
code-to-designstitch::code-to-designcode-to-design
generate-designstitch::generate-designgenerate-design
manage-design-systemstitch::manage-design-systemmanage-design-system
extract-design-mdstitch::extract-design-mdextract-design-md
extract-static-htmlstitch::extract-static-htmlextract-static-html
upload-to-stitchstitch::upload-to-stitchupload-to-stitch
react-componentsstitch::react-componentsreact-components
react-nativestitch::react-nativereact-native

其余技能（react-vite-dashboard、remotion、shadcn-ui、design-md、enhance-prompt、stitch-loop、taste-design）的 name 已经合规，无需改动。

如果目录名与 name 不一致，两种修法任选：改 name 匹配目录，或把目录重命名成 name。推荐前者，改动面最小。

2.3 allowed-tools 会被忽略

stitch-skills 的 frontmatter 里常带 allowed-tools（如 Bash、web_fetch）——这是 Claude Code 的字段，OpenCode 会忽略它，不影响技能加载。

OpenCode 自己的扩展字段放在 metadata 下，例如：

metadata:
  opencode/slash: "true"        # 把技能暴露为 /generate-design 命令
  opencode/autoinvoke: "false"  # 不让模型自动调用

（可选，不配也能用。）

Step 3：在 opencode.json 注册 Stitch MCP

3.1 最小配置（官方 README 片段）

在项目根目录的 opencode.json（或全局 ~/.config/opencode/opencode.json）加入：

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

把 YOUR_STITCH_MCP_URL 替换为前置章节拿到的 Stitch MCP 端点。

3.2 带 API Key 的完整配置（推荐）

如果使用 API Key 认证，补上 headers 字段：

{
  "$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"
      }
    }
  }
}

YOUR_API_KEY 在 Stitch 设置页生成（步骤详见 MCP 配置指南）。

3.3 OAuth 方式

OpenCode 会自动处理远程 MCP 的 OAuth 认证：如果 Stitch MCP 侧走的是 OAuth 流程，保持 3.1 的配置（不加 headers）即可，OpenCode 会在需要时引导授权。

Step 4：工具名差异——改写技能时的坑

技能正文（SKILL.md 的指令部分）里会提到“调用哪个工具”。stitch-skills 是按 Claude Code 的工具名写的，与 OpenCode 内置工具名不一致：

stitch-skills 里的写法OpenCode 对应工具
web_fetchwebfetch
run_command / Bashbash

allowed-tools 字段会被忽略（见 2.3），所以技能加载不受影响；但如果你发现技能“说要调用某工具却卡住”，把技能正文里的工具名按上表改成 OpenCode 名称即可。

验证：让 OpenCode 操作 Stitch

重启 OpenCode 会话（或新开一个），依次验证：

  1. 技能是否被加载：在对话里问“你有哪些技能可用？”——OpenCode 会在 skill 工具描述里列出技能名与描述。

  2. 列出 Stitch 项目（验证 MCP 连通）：

    用 Stitch 列出我的所有项目。

    OpenCode 应调用 list_projects 并返回项目列表。

  3. 生成一屏（验证完整链路）：

    在 Stitch 新建一个项目 “OpenCode Demo”，并生成一个简洁的登录页屏幕。

    正常会依次调用 create_project 与 generate_screen_from_text，新屏幕随后出现在 stitch.withgoogle.com。

如果第 2 步报错，先回到前置章节检查 MCP 配置与凭据。

与 Claude Code / Cursor 的安装方式对照

环节Claude CodeCursorOpenCode
技能安装npx plugins add ... --target claude-codenpx plugins add ... --target cursor手动复制到 .opencode/skills/
技能目录.claude/skills/（自动写入）当前工作区（自动写入）.opencode/skills/（或兼容读取 .claude、.agents）
命名要求兼容 stitch:: 前缀兼容 stitch:: 前缀必须 kebab-case 且等于目录名
MCP 注册claude mcp add stitch ....cursor/mcp.jsonopencode.json 的 mcp 字段
更新技能重新执行安装命令重新执行安装命令重新复制技能目录

注意事项

  1. 先配 MCP，再装技能：技能只是说明书，没有 MCP 寸步难行。
  2. 依赖技能要连带安装：官方 README 特别提醒 Stitch 技能之间存在互相依赖——例如 code-to-design 依赖 extract-static-html、extract-design-md 和 upload-to-stitch。选择性安装时务必把依赖一并复制。
  3. 卸载 = 手动删目录：没有包管理器参与，删除 .opencode/skills/<name>/ 即卸载。
  4. 更新 = 重新复制：仓库更新后（git pull）重新执行 cp -R 覆盖即可。
  5. 非官方支持声明：stitch-skills 由 google-labs-code 组织维护，README 明确声明它不是 Google 官方支持的产品（“This is not an officially supported Google product.”）。

常见问题

Q: 技能装好了但 OpenCode 说找不到？

按顺序检查：① 目录是否在发现路径内（推荐 .opencode/skills/）；② SKILL.md 文件名是否全大写；③ frontmatter 的 name 是否小写 kebab-case 且与目录名完全一致（stitch:: 前缀是最常见原因，见 Step 2）；④ 重启会话。

Q: 为什么 OpenCode 不能用 npx plugins 一键装？

OpenCode 不采用 npx plugins / npx skills 或 Codex / Claude 的插件市场布局，官方 README 为它单列了 “manual install” 段落——技能复制、MCP 手写，就是本文的流程。

Q: MCP 连不上怎么办？

先完成 MCP 配置：确认 url 为 https://stitch.googleapis.com/mcp、enabled 为 true、API Key 未过期。若走 OAuth，确认没有同时配置冲突的 headers。

Q: 和 Claude Code 教程里的技能是同一批吗？

是。技能本身完全相同，差异只在“怎么装”：Claude Code 用 npx plugins 自动写入，OpenCode 需要手动复制并修正命名。

总结

OpenCode 的 Stitch Skills 安装可以浓缩成四步：

  1. 配 MCP — 按官方指南拿到端点与凭据
  2. 复制技能 — cp -R plugins/*/skills/<name> .opencode/skills/<name>
  3. 改命名 — name 去掉 stitch::，改成小写 kebab-case 并与目录名一致
  4. 注册 MCP — opencode.json 里加 mcp.stitch（remote + headers）

完成后，你就可以在 OpenCode 里用自然语言让 Stitch 生成界面、管理设计系统、导出组件——和 Claude Code 用户拿到的是同一套能力。

想深入技能本身，可以继续阅读：技能参考、Claude Code 安装教程、Code-to-Design 实战。

← ← 返回博客