项目概览与运行前提

这个模块负责把 Stitch 接入到代理工作流

google-labs-code/stitch-skills 是一组面向 Google Stitch 的 Agent Skills 与插件集合，主要用于让编码代理在对话中完成设计相关任务，例如：

• 从前端代码生成 Stitch Design
• 根据文字或图片生成界面设计
• 编辑已有 Stitch 设计
• 管理设计系统
• 执行构建、组件和辅助类工作流

项目当前定位不是一个独立 CLI 应用，而是作为 代理工具的技能库 / 插件市场源 使用。代理工具安装这些 skills 后，会在合适的任务中调用对应能力，并通过 Stitch MCP server 与 Stitch 服务通信。

该项目遵循 Agent Skills 开放标准，因此同一套 skills 可以被多个兼容 Agent Skills 标准的工具发现、安装和调用。

项目仓库：

text📋 复制
google-labs-code/stitch-skills

项目简介：

text📋 复制
A library of Agent Skills designed to work with the Stitch MCP server.
Each skill follows the Agent Skills open standard, for compatibility with
coding agents such as Antigravity, Gemini CLI, Claude Code, Cursor.

适用场景示例：

text📋 复制
“把 /path/to/dashboard 里的 React 前端上传到一个名为 Dashboard-Migration-2026 的 Stitch 项目。”

“生成 3 个移动端首页设计变体，包含暗色模式和高信息密度布局。”

“编辑登录页，增加 Remember Me 复选框，并把主按钮改成蓝色。”

这些代理工具可以直接使用

README 中明确列出的兼容工具包括：

工具	支持方式
Codex	通过 plugin marketplace 安装
Antigravity	兼容 Agent Skills 标准
Gemini CLI	兼容 Agent Skills 标准
Claude Code	通过 npx plugins add 安装到项目
Cursor	通过 npx plugins add 安装到工作区

其中 Codex 的推荐方式是添加 Stitch Skills marketplace，然后按需安装插件。

Claude Code 和 Cursor 可以直接使用 npx plugins add 从 GitHub 仓库安装插件。

Agent Skills 标准带来的目录和能力约定

Stitch Skills 遵循 Agent Skills open standard。对使用者来说，这意味着：

1. skill 不是散落的脚本，而是有标准描述信息的能力单元。
2. 支持 Agent Skills 的代理可以识别 skill 的名称、说明和调用方式。
3. 同一 skill 可以在不同代理中复用，减少工具绑定。
4. 可以选择安装整套插件，也可以只安装部分 skills。

仓库中主要插件分组包括：

插件	说明
stitch-design	设计工作流，例如生成设计、代码转设计、管理设计系统
stitch-build	构建和组件相关能力
stitch-utilities	工具类、辅助类能力

设计插件中的典型 skill：

Skill	作用
stitch::code-to-design	将 React、Vue 等前端代码提取为 HTML，再结合设计系统上传到 Stitch
stitch::generate-design	根据文本或图片生成新屏幕，编辑已有屏幕，创建设计变体
stitch::manage-design-system	管理 Stitch 中的设计系统，上传 DESIGN.md，并把主题应用到屏幕

运行前必须有 Stitch MCP

这些 skills 依赖 Stitch MCP server。

也就是说，仅安装插件或 skill 还不够。代理运行环境中必须已经配置好 Stitch MCP，否则代理虽然能识别 skill，但无法真正访问 Stitch 服务。

需要完成的前提包括：

1. 注册 Stitch MCP server。
2. 在代理环境中启用该 MCP server。
3. 配置访问 Stitch 所需的环境变量。
4. 配置对应账号、凭据或授权信息。
5. 确认代理工具能够看到并调用 Stitch MCP。

官方配置说明：

text📋 复制
https://stitch.withgoogle.com/docs/mcp/setup/

在排查问题时，可以先确认两个层面：

text📋 复制
代理是否安装了 Stitch Skills
代理是否已经接入并启动 Stitch MCP server

很多“skill 找得到但执行失败”的问题，根因通常在第二项。

安装入口和命令说明

Codex 添加 Stitch Skills marketplace

推荐先把仓库作为 Codex plugin marketplace 添加进去：

bash📋 复制
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

这里的参数含义：

参数	说明
google-labs-code/stitch-skills	GitHub 仓库
--ref main	使用 main 分支
--sparse ...	只拉取需要的目录，加快 checkout
.agents/plugins	插件元信息目录
plugins/stitch-design	设计插件
plugins/stitch-build	构建插件
plugins/stitch-utilities	工具插件

--sparse 是可选的。如果希望拉取完整仓库，可以省略这些参数。

Claude Code 安装到当前项目

bash📋 复制
npx plugins add google-labs-code/stitch-skills --scope project --target claude-code

适合在某个具体项目里启用 Stitch Skills。

Cursor 安装到当前工作区

bash📋 复制
npx plugins add google-labs-code/stitch-skills --scope workspace --target cursor

适合在当前 Cursor workspace 中启用 Stitch Skills。

只安装部分 skills

如果不想安装完整插件套件，可以按需选择 skills：

bash📋 复制
npx skills add google-labs-code/stitch-skills

需要注意：Stitch Design Skills 之间可能存在依赖关系。选择性安装时，需要确认相关依赖也被安装，否则某些设计工作流可能执行不完整。

查看插件和 skills 工具帮助

bash📋 复制
npx plugins --help

bash📋 复制
npx skills --help

这两个命令适合用来确认本机是否可以正常运行插件 / skill 安装工具。

可运行示例：在 Cursor 工作区启用 Stitch Skills

下面示例演示一个常见场景：在 Cursor 当前工作区安装 Stitch Skills，并检查工具命令是否可用。

前提：

• 已安装 Node.js 和 npm。
• 当前目录是一个 Cursor 打开的项目目录。
• 已按照 Stitch MCP 文档完成 MCP server 配置。
• 当前 shell 可以访问代理运行时需要的环境变量和凭据。

进入项目目录：

bash📋 复制
cd /path/to/your/project

查看插件工具是否可用：

bash📋 复制
npx plugins --help

安装到 Cursor 当前工作区：

bash📋 复制
npx plugins add google-labs-code/stitch-skills --scope workspace --target cursor

查看 skills 工具帮助：

bash📋 复制
npx skills --help

安装完成后，可以在 Cursor 中发起类似请求：

text📋 复制
使用 Stitch 生成一个移动端电商商品详情页，包含商品图、价格、规格选择、评价摘要和底部购买按钮。

如果 Stitch MCP 配置正常，代理会在需要时调用 Stitch 相关 skill，并通过 MCP server 与 Stitch 服务交互。

可运行示例：为 Codex 添加 marketplace

如果使用 Codex，可以先注册 marketplace：

bash📋 复制
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

注册后，在 Codex 中按需安装这些插件：

text📋 复制
stitch-design
stitch-build
stitch-utilities

常见设计任务可以这样描述：

text📋 复制
Upload the frontend code at `/path/to/dashboard` into a Stitch project named 'Dashboard-Migration-2026'.

或中文描述：

text📋 复制
把 `/path/to/dashboard` 里的前端代码上传到一个名为 `Dashboard-Migration-2026` 的 Stitch 项目。

可运行示例：只确认本机安装入口是否正常

如果只是做环境检查，可以执行：

bash📋 复制
npx plugins --help
npx skills --help

这不会创建 Stitch 设计，但可以确认 plugins 和 skills 这两个安装入口是否能被 npx 正常调用。

如果这些命令都无法运行，需要先处理 Node.js、npm、网络或包管理器问题，再继续安装 Stitch Skills。

容易踩到的边界

只安装 skills 不等于能访问 Stitch

Stitch Skills 只是代理可调用的能力描述和工作流集合。真正访问 Stitch 服务依赖 Stitch MCP server。

如果没有配置 Stitch MCP，可能出现：

text📋 复制
代理能识别 stitch::generate-design
但执行时无法连接 Stitch

处理方式是回到 MCP 配置，确认 server、环境变量和凭据是否都在代理运行环境中生效。

选择性安装时要检查依赖

README 明确提示：Stitch Design Skills often have inter-dependencies。

如果只安装单个 skill，可能缺少它依赖的辅助 skill、插件文件或共享逻辑。生产项目中更稳妥的方式是先安装完整插件套件：

text📋 复制
stitch-design
stitch-build
stitch-utilities

确认工作流稳定后，再考虑裁剪。

MCP 环境变量要配置在代理能读到的位置

很多桌面代理、IDE 插件和命令行代理的环境变量来源不同。

例如：

• 终端里 echo 能看到变量，不代表 IDE 插件也能看到。
• 当前 shell 配好了凭据，不代表后台 MCP server 已重新加载。
• 修改环境变量后，可能需要重启代理工具或 MCP server。

不同代理的安装作用域不同

Claude Code 示例使用：

bash📋 复制
--scope project

Cursor 示例使用：

bash📋 复制
--scope workspace

这意味着安装结果和生效范围不同。多人项目中要提前确认是希望只在当前项目使用，还是在更大的工作区范围内启用。

--sparse 只是加速拉取，不是功能开关

Codex marketplace 添加命令里的 --sparse 用于限制 checkout 路径，加快克隆速度。

如果省略 --sparse，会拉取整个仓库；通常不会影响功能，只是下载内容更多。

代理兼容 Agent Skills 标准仍可能有实现差异

项目遵循 Agent Skills open standard，但不同代理对插件市场、安装范围、MCP 配置和权限模型的处理方式可能不同。

排查时建议按这个顺序检查：

1. 当前代理是否支持 Agent Skills。
2. Stitch Skills 是否安装成功。
3. Stitch MCP server 是否配置成功。
4. 环境变量和凭据是否对代理进程可见。
5. 目标 skill 是否依赖其他未安装的 skills。