stitch-skills 不是一个单体插件，而是把 Stitch 相关能力拆成了三个插件包，放在 plugins/ 目录下：
textplugins/ stitch-design/ stitch-build/ stitch-utilities/
这种拆分适合两类使用方式：
stitch-design。stitch-design：从需求、图片、代码进入 Stitch 设计稿stitch-design 面向设计工作流，是最核心的一组技能。
典型场景：
DESIGN.md、应用主题。README 中列出的示例技能包括：
textplugins/stitch-design/skills/code-to-design/ plugins/stitch-design/skills/generate-design/ plugins/stitch-design/skills/manage-design-system/
调用时通常以 skill 名称暴露，例如：
textstitch::code-to-design stitch::generate-design stitch::manage-design-system
stitch-build：把设计落到组件和实现stitch-build 面向“从设计到可用代码”的环节。
它通常会和 stitch-design 配合使用：
stitch-design 负责创建、编辑、整理 Stitch 设计。stitch-build 负责根据设计输出组件、页面结构或实现建议。适合的场景：
stitch-utilities：补齐辅助操作stitch-utilities 放的是工具型、辅助型技能。
这类技能一般不直接负责“生成完整设计”或“实现完整组件”，而是服务于前两类插件，例如：
如果团队只做最小化安装，通常先装 stitch-design；如果发现某些技能依赖工具能力，再补装 stitch-utilities。
plugin.json 声明插件，用 skills/ 承载技能每个插件目录通常包含两类关键内容：
textplugins/stitch-design/ plugin.json skills/ code-to-design/ generate-design/ manage-design-system/ plugins/stitch-build/ plugin.json skills/ ... plugins/stitch-utilities/ plugin.json skills/ ...
plugin.json 是插件入口plugin.json 是插件管理器读取的入口文件。Codex、Claude Code、Cursor 等工具通过它识别：
可以把它理解成插件的清单文件。
在这个仓库中，推荐安装方式会把以下路径作为 sparse checkout 目标：
bash--sparse .agents/plugins --sparse plugins/stitch-design --sparse plugins/stitch-build --sparse plugins/stitch-utilities
其中：
.agents/plugins：提供插件市场相关索引或元数据。plugins/stitch-design：设计类插件。plugins/stitch-build：构建类插件。plugins/stitch-utilities：工具类插件。skills/ 是实际能力目录每个插件下面的 skills/ 目录保存具体 skill。
例如：
textplugins/stitch-design/skills/generate-design/
代表一个具体技能目录。Agent Skills open standard 通常要求每个 skill 目录包含技能说明、调用方式、依赖、提示词或执行脚本等内容。实际文件名和字段应以仓库内对应目录为准。
从使用者视角看，skills/ 目录的作用是把能力拆小：
generate-design 只关心生成或编辑设计。code-to-design 只关心从前端代码转换到 Stitch Design。manage-design-system 只关心设计系统上传和主题应用。这样做的好处是安装和调用都更精确，Agent 不需要把所有 Stitch 能力混在一个大提示词里。
如果使用 Codex，可以先把 Stitch Skills 仓库加入插件市场。
bashcodex 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
sparse 参数不是必需的，但建议保留。它只拉取插件相关目录，避免把整个仓库都下载到本地。
之后可以在 Codex 中安装需要的插件：
textstitch-design stitch-build stitch-utilities
如果使用 Claude Code：
bashnpx plugins add google-labs-code/stitch-skills --scope project --target claude-code
如果使用 Cursor：
bashnpx plugins add google-labs-code/stitch-skills --scope workspace --target cursor
如果只想挑选某些技能，可以使用 skills CLI：
bashnpx skills add google-labs-code/stitch-skills
这种方式适合只需要少量能力的项目，例如只安装 stitch::generate-design。
不过 Stitch 相关技能之间可能有依赖关系。比如一个设计生成技能可能依赖工具类 skill 或 MCP 上下文能力。选择性安装时，需要确认依赖 skill 是否也被安装。
可以先查看 CLI 帮助：
bashnpx plugins --help
npx skills --help下面的命令可以直接克隆并检查仓库结构。
bashgit clone --filter=blob:none --sparse https://github.com/google-labs-code/stitch-skills.git
cd stitch-skills
git sparse-checkout set \
.agents/plugins \
plugins/stitch-design \
plugins/stitch-build \
plugins/stitch-utilities
find plugins -maxdepth 3 -type d | sort查看三个插件的 plugin.json：
bashfind plugins -maxdepth 2 -name plugin.json -print如果本地安装了 jq，可以快速读取插件名和描述：
bashfor file in plugins/*/plugin.json; do
echo "== $file =="
jq '.name, .description' "$file"
done没有 jq 也可以用 Node.js：
bashnode - <<'NODE'
const fs = require('fs');
const path = require('path');
for (const pluginDir of fs.readdirSync('plugins')) {
const file = path.join('plugins', pluginDir, 'plugin.json');
if (!fs.existsSync(file)) continue;
const json = JSON.parse(fs.readFileSync(file, 'utf8'));
console.log(`\n${pluginDir}`);
console.log(`name: ${json.name ?? '(no name)'}`);
console.log(`description: ${json.description ?? '(no description)'}`);
}
NODE列出每个插件下面的 skill 目录：
bashnode - <<'NODE'
const fs = require('fs');
const path = require('path');
for (const pluginDir of fs.readdirSync('plugins')) {
const skillsDir = path.join('plugins', pluginDir, 'skills');
if (!fs.existsSync(skillsDir)) continue;
console.log(`\n${pluginDir}`);
for (const skill of fs.readdirSync(skillsDir)) {
const full = path.join(skillsDir, skill);
if (fs.statSync(full).isDirectory()) {
console.log(`- ${skill}`);
}
}
}
NODE场景：团队有一个现成的 dashboard 前端项目，希望迁移到 Stitch 中继续设计。
推荐安装：
textstitch-design stitch-utilities
原因：
stitch-design 提供 stitch::code-to-design。stitch-utilities 可能提供辅助检查、资源处理或上下文能力。给 Agent 的提示词可以写成：
textUpload the frontend code at `/path/to/dashboard` into a Stitch project named "Dashboard-Migration-2026".
对应会使用的能力通常是：
textstitch::code-to-design
这个 skill 的职责不是“重写前端项目”，而是从现有代码中提取可用于 Stitch 的 HTML、设计系统信息和页面结构，并上传到 Stitch 项目中。
场景：产品经理要一个约会灵感 App 的 browse tab。
推荐安装：
textstitch-design
提示词可以写成：
textMake a browse tab for a mobile app for romance and date night ideas.
对应能力通常是：
textstitch::generate-design
如果后续要生成多个风格变体，可以继续给 Agent：
textGenerate 3 design variants of the home screen with dark mode and high-density layouts.
如果需要修改已有 screen：
textEdit the login screen to add a "Remember Me" checkbox and change the button color to blue.
这些插件和 skills 不是独立的本地生成器。它们依赖 Stitch MCP server。
在使用前需要确认：
如果 MCP 没有连上，插件可以被安装，但实际调用 Stitch 相关能力时会失败。
README 特别提醒：Stitch Design Skills 经常存在相互依赖。
因此不要只看 skill 名称就删除其它目录。比如：
如果不确定依赖关系，优先安装整个插件：
textstitch-design stitch-build stitch-utilities
等流程稳定后，再按项目需要缩小安装范围。
常见误用是让 stitch-design 同时完成设计生成和最终代码实现。
更稳定的拆法是：
text需求 / 图片 / 旧代码 ↓ stitch-design ↓ Stitch Design / screens / design system ↓ stitch-build ↓ 组件 / 页面代码 / 实现建议 ↓ 编码 Agent 修改项目
stitch-utilities 则作为辅助层，给前两个插件提供通用支持。
如果要给仓库新增一个 skill，不应只新增目录，还要同步检查插件清单。
建议流程：
skills/ 下新增 skill 目录。plugin.json。.agents/plugins 中的索引或元数据。npx plugins 或 npx skills 验证安装。否则可能出现“目录存在，但 Agent 安装后看不到 skill”的问题。