Stitch 设计技能（Stitch Design Skills）

一组面向 Google Stitch 的智能体技能（agent skills）与插件，遵循 Agent Skills 开放标准。兼容 Codex、Antigravity、Gemini CLI、Claude Code、Cursor 以及 OpenCode（需手动安装）等编程智能体。

快速入门

1. 安装插件（推荐）

这是全局安装完整 Stitch 插件套件的最快方式。

Codex

添加 Stitch Skills 市场，然后安装你需要的插件。

通过 CLI（推荐）

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]
--sparse 标志为可选项——它们用于将检出范围限定到上述路径，从而加快克隆速度。如果省略，会拉取整个仓库。

通过 Codex 界面

进入 Settings → Plugin Marketplaces → Add 并填写：

注册好市场之后，可以任意组合安装：

• stitch-design —— 面向设计的技能
• stitch-build —— 构建与组件相关的技能
• stitch-utilities —— 工具与辅助类技能

Claude Code 与 Cursor

# 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

OpenCode

OpenCode 不使用 npx plugins / npx skills，也不使用 Codex/Claude 的市场结构。需要手动安装技能与 Stitch MCP 服务器：

1. 技能（Skills） —— 将所需的技能目录复制到一个可被自动发现的路径：

# 项目本地安装（推荐）
mkdir -p .opencode/skills
cp -R plugins/stitch-design/skills/generate-design .opencode/skills/generate-design
# 对 plugins/*/skills/ 下的其他技能重复上述操作

OpenCode 同样会自动发现 .claude/skills/ 与 .agents/skills/（参见 OpenCode 技能文档）。

命名说明： OpenCode 要求技能的 name 前置字段（frontmatter）必须使用小写 kebab-case（短横线连接的全小写格式），且与所在目录名一致。使用 stitch::… 这类名称（或非 kebab 形式名称）的技能，需要先重命名 name 字段与目录，OpenCode 才会加载。其余的前置字段（例如 allowed-tools）将被忽略。

2. Stitch MCP —— 在完成 Stitch MCP 设置 后，在项目中的 opencode.json 或 ~/.config/opencode/opencode.json 中添加一个远程 MCP 条目：

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

请将 YOUR_STITCH_MCP_URL 替换为 Stitch MCP 设置流程中提供的端点（该指南中的凭据/环境变量同样适用）。

技能指令中出现的工具名称可能与 OpenCode 内置工具不同（例如使用 webfetch / bash 而非 web_fetch / run_command）。在为 OpenCode 适配技能时，请优先使用 OpenCode 的工具名称。

2. 选择性安装技能

仅选择并安装你需要的特定技能。

[!IMPORTANT]
Stitch Design Skills 之间常常存在相互依赖关系。如果选择按需安装，请务必包含所有必需的依赖技能。

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

你可以运行以下命令查看插件与技能相关的帮助文档：

npx plugins --help

npx skills --help

前置条件

这些技能要求 Stitch MCP 服务器已在你的智能体环境中配置并运行。请务必按照 Stitch MCP 设置说明 完成服务器注册，并设置相应的环境变量与凭据。

文档导航提示： 如果 stitch.withgoogle.com/docs 上的某个链接跳转不正确，请直接在该域名下打开对应的目标路径（例如 https://stitch.withgoogle.com/docs/learn/device-types/）。

可用插件

Design（stitch-design）

在 Stitch 中用于创建、管理与优化设计的核心工作流。

· "编辑登录界面，新增一个 'Remember Me' 复选框，并将按钮颜色改为蓝色。"
· "为主页生成 3 个设计变体，需包含深色模式与高密度布局。" |
| stitch::manage-design-system | 在 Stitch 中管理设计系统——上传 DESIGN.md，并将主题应用到界面 | "从 .stitch/DESIGN.md 上传我们的设计系统，并将其应用到所有界面。" |
| stitch::extract-design-md | 直接从前端源码中提取一份完整的 DESIGN.md | "扫描 /src 目录，并将设计系统提取到 .stitch/DESIGN.md。" |
| stitch::extract-static-html | 从正在运行的 Web 应用中提取自包含的静态 HTML，内联 CSS 与图片 | "提取 http://localhost:3000/profile 的静态 HTML 快照。" |
| stitch::upload-to-stitch | 将本地资源（图片、摹本、HTML 文件）上传到 Stitch 项目 | "将 .stitch/landing_page.html 上传到 Stitch 项目 projects/987654321。" |

---

Build（stitch-build）

基于 Stitch 设计进行代码生成、框架集成以及资源编译。

---

Utilities（stitch-utilities）

用于优化提示词、生成设计规范并强制执行设计标准的辅助工具。