模块拆解：安装与接入方式

把 Stitch Skills 接入到 Codex、Claude Code 和 Cursor

安装与接入方式模块负责说明如何把 google-labs-code/stitch-skills 接入到常见 Coding Agent 中。

这个仓库是 Google Stitch 的 Agent Skills / Plugins 集合，遵循 Agent Skills 开放标准，适用于：

• Codex
• Claude Code
• Cursor
• Antigravity
• Gemini CLI

当前模块聚焦三类接入路径：

1. Codex：添加 Stitch Skills 插件市场，再安装需要的插件
2. Claude Code / Cursor：使用 npx plugins add 安装插件套件
3. 按需安装：使用 npx skills add 只安装指定技能

适合的使用场景：

场景	推荐方式
希望一次性接入 Stitch 的设计、构建、工具类能力	安装插件套件
团队统一管理 Codex 插件来源	Codex 插件市场
只想使用某个设计技能，例如 stitch::generate-design	按需安装 Skill
项目中已经有固定 Claude Code / Cursor 工作区	使用 npx plugins add 安装到当前项目或 workspace

---

Codex 插件市场、plugins CLI 和 skills CLI

Codex 添加 Stitch Skills 插件市场

Codex 推荐先把 Stitch Skills 仓库注册为插件市场：

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 ...	只拉取指定目录，减少下载体积
.agents/plugins	插件市场元数据
plugins/stitch-design	设计类插件
plugins/stitch-build	构建 / 组件类插件
plugins/stitch-utilities	工具类插件

--sparse 是可选项。网络较慢或只想加快初始化时建议保留；如果你希望拉取整个仓库，可以省略：

bash📋 复制
codex plugin marketplace add google-labs-code/stitch-skills --ref main

添加市场后，可以在 Codex 中安装需要的插件：

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

也可以通过 Codex UI 添加市场：

字段	值
Source	https://github.com/google-labs-code/stitch-skills
Git ref	main
Sparse paths	.agents/plugins, plugins/stitch-design, plugins/stitch-build, plugins/stitch-utilities

路径：

text📋 复制
Settings → Plugin Marketplaces → Add

---

Claude Code 安装到当前项目

Claude Code 使用 npx plugins add，并指定目标为 claude-code：

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

参数说明：

参数	作用
plugins add	安装插件
google-labs-code/stitch-skills	插件来源仓库
--scope project	安装到当前项目
--target claude-code	目标 Agent 是 Claude Code

这个方式适合把 Stitch Skills 作为项目级能力接入，不污染其他项目。

---

Cursor 安装到当前 workspace

Cursor 使用同一个 plugins CLI，但目标改为 cursor：

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

参数说明：

参数	作用
--scope workspace	安装到当前 Cursor workspace
--target cursor	目标 Agent 是 Cursor

这个方式适合在当前 Cursor 工作区中使用 Stitch 设计能力，例如让 Cursor 根据已有前端代码生成 Stitch Design。

---

按需安装单个 Skill

如果不想安装完整插件套件，可以使用 skills CLI：

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

执行后根据 CLI 提示选择需要的 Skill。

常见设计类 Skill 包括：

Skill	用途
stitch::code-to-design	将前端代码转换为 Stitch Design
stitch::generate-design	根据文本或图片生成设计，也可以编辑已有设计
stitch::manage-design-system	管理 Stitch 中的设计系统，上传 DESIGN.md 并应用主题

按需安装时要特别注意依赖关系。Stitch Design Skills 之间可能存在相互依赖，只安装一个 Skill 可能导致运行时缺少辅助能力或上下文文件。

可以先查看 CLI 帮助：

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

---

在真实项目里安装 Stitch Skills

示例一：Codex 中注册 Stitch 插件市场

适用于希望在 Codex 中统一管理 Stitch 插件来源的团队。

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 的插件列表中选择安装：

• stitch-design
• stitch-build
• stitch-utilities

如果只做设计相关任务，优先安装：

text📋 复制
stitch-design

安装后可以在 Agent 中使用类似提示：

text📋 复制
Upload the frontend code at ./apps/dashboard into a Stitch project named "Dashboard-Migration-2026".

---

示例二：Claude Code 项目中安装 Stitch 插件

进入你的项目目录：

bash📋 复制
mkdir stitch-claude-demo
cd stitch-claude-demo
npm init -y

安装 Stitch Skills 到当前 Claude Code 项目：

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

查看插件 CLI 帮助，确认本机环境可用：

bash📋 复制
npx plugins --help

安装完成后，可以在 Claude Code 中让 Agent 调用 Stitch 能力，例如：

text📋 复制
Generate a mobile login screen for a travel planning app. Use a clean Material-style layout.

如果使用的是 code-to-design 场景，可以准备一个简单前端目录：

bash📋 复制
mkdir -p src
cat > src/App.jsx <<'EOF'
export default function App() {
  return (
    <main style={{ padding: 32, fontFamily: 'Inter, sans-serif' }}>
      <h1>Travel Planner</h1>
      <p>Plan trips, save places, and share itineraries.</p>
      <button>Start planning</button>
    </main>
  );
}
EOF

然后在 Claude Code 中输入：

text📋 复制
Upload the frontend code in ./src into a Stitch project named "Travel-Planner-Demo".

---

示例三：Cursor workspace 中安装 Stitch 插件

进入 Cursor 当前 workspace 的根目录：

bash📋 复制
mkdir stitch-cursor-demo
cd stitch-cursor-demo
npm init -y

安装 Stitch Skills：

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

确认 skills CLI 可用：

bash📋 复制
npx skills --help

创建一个简单页面，方便测试 code-to-design 类工作流：

bash📋 复制
mkdir -p app
cat > app/page.html <<'EOF'
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Subscription Settings</title>
  </head>
  <body>
    <section>
      <h1>Subscription Settings</h1>
      <p>Manage your billing plan and renewal preferences.</p>
      <button>Upgrade plan</button>
      <button>Cancel subscription</button>
    </section>
  </body>
</html>
EOF

在 Cursor 中输入：

text📋 复制
Convert the UI in ./app/page.html into a Stitch Design named "Subscription-Settings".

---

示例四：只安装需要的 Skills

适合只需要少量 Stitch 能力的项目。

bash📋 复制
mkdir stitch-skills-selective-demo
cd stitch-skills-selective-demo
npm init -y

运行：

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

根据命令行提示选择需要的 Skill，例如：

text📋 复制
stitch::generate-design

安装后可以使用类似提示：

text📋 复制
Make a browse tab for a mobile app for romance and date night ideas.

如果需要基于已有设计进行修改，可以这样描述：

text📋 复制
Edit the login screen to add a "Remember Me" checkbox and change the primary button color to blue.

---

Stitch MCP、依赖关系和安装范围

必须先配置 Stitch MCP

这些 Skills 依赖 Stitch MCP server。仅安装插件或 Skill 不代表可以直接访问 Stitch。

在使用前需要确认：

• Stitch MCP server 已配置
• Agent 环境中已经注册 MCP server
• 必要的环境变量已设置
• Stitch 所需凭据可用
• 当前 Agent 能访问 MCP server

官方配置入口：

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

如果 MCP 没有配置好，常见结果是：

• Agent 能识别 Skill，但执行失败
• 上传设计时报认证错误
• 无法创建或修改 Stitch 项目
• 找不到 Stitch MCP 工具

---

selective install 容易漏依赖

按需安装单个 Skill 时，需要确认依赖是否完整。

例如你只安装：

text📋 复制
stitch::generate-design

但实际任务可能还需要设计系统、上传、资源处理等辅助能力。缺少依赖时，Agent 可能无法完成完整链路。

稳妥做法：

项目阶段	建议
初次接入	先安装完整插件，例如 stitch-design
已确认只需要某个能力	再改成 selective install
团队多人使用	固定插件版本、安装范围和 MCP 配置
CI 或受限网络环境	使用 Codex sparse paths 减少拉取内容

---

project、workspace 和 global 不要混用

不同 Agent 的安装范围不同：

Agent	推荐命令	安装范围
Codex	codex plugin marketplace add ...	插件市场，全局或 Codex 管理范围
Claude Code	npx plugins add ... --scope project --target claude-code	当前项目
Cursor	npx plugins add ... --scope workspace --target cursor	当前 workspace

排查问题时先确认插件装到了哪里。

常见误区：

text📋 复制
在 Cursor workspace 安装了插件，却期待 Claude Code 项目里也能使用。

或者：

text📋 复制
只在 Codex 添加了 marketplace，但没有安装具体插件。

---

sparse paths 只影响拉取内容，不影响能力声明

Codex 中的 --sparse 用于减少 Git checkout 内容：

bash📋 复制
--sparse .agents/plugins
--sparse plugins/stitch-design
--sparse plugins/stitch-build
--sparse plugins/stitch-utilities

如果你后续想使用没有包含在 sparse paths 里的目录，需要重新调整市场配置或取消 sparse checkout。

简单理解：

配置	结果
保留 sparse paths	下载快，只包含指定插件目录
省略 sparse paths	拉取完整仓库，体积更大
sparse paths 缺目录	对应插件或 Skill 可能不可见

---

CLI 版本和 Node 环境会影响安装

npx plugins add 和 npx skills add 依赖本机 Node/npm 环境。

建议先确认：

bash📋 复制
node --version
npm --version

如果命令不可用，需要先安装 Node.js。

如果不确定当前 CLI 支持哪些参数，直接查看帮助：

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

---

安装完成后用最小任务验证

不要一上来就跑复杂项目迁移。建议先用一个小页面验证链路：

bash📋 复制
mkdir stitch-smoke-test
cd stitch-smoke-test

cat > index.html <<'EOF'
<!doctype html>
<html>
  <body>
    <h1>Hello Stitch</h1>
    <p>This is a smoke test page.</p>
    <button>Create design</button>
  </body>
</html>
EOF

然后在 Agent 中输入：

text📋 复制
Convert ./index.html into a Stitch Design named "Smoke-Test".

如果这个任务能完成，再迁移真实项目。