google-labs-code stitch-skills

google-labs-code/stitch-skills

Stitch 设计技能一系列面向 Google Stitch 的代理技能与插件，遵循 Agent Skills 开放标准。兼容 Codex、Antigravity、Gemini CLI、Claude Code 和 Cursor 等编码代理。

快速开始

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 UI

导航至 设置 → 插件市场 → 添加，并填写以下内容：

| 字段 | 值 | |------|-----| | 来源 | https://github.com/google-labs-code/stitch-skills | | Git 引用 | main | | 稀疏路径（可选） | .agents/plugins , plugins/stitch-design , plugins/stitch-build , plugins/stitch-utilities |

市场注册完成后，即可安装以下任意组合：

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

2. 选择性安装技能

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

重要提示：Stitch Design 技能通常存在相互依赖关系。如果你选择选择性安装技能，请确保包含所有必需的依赖项。

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

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

npx plugins --help
npx skills --help

前提条件

这些技能要求在你的代理环境中配置并运行 Stitch MCP 服务器。请确保已按照 [Stitch MCP 设置指南](https://github.com/google-labs-code/stitch-skills) 注册服务器，并设置好相应的环境变量和凭据。

可用插件

设计（`stitch-design`）

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

| 技能 | 描述 | 提示示例 | |------|------|----------| | stitch::code-to-design | 通过 HTML 提取 + 设计系统 + 上传，将前端代码（React、Vue 等）转换为 Stitch 设计 | "将位于 /path/to/dashboard 的前端代码上传到名为 'Dashboard-Migration-2026' 的 Stitch 项目中。" | | stitch::generate-design | 从文本或图像生成新屏幕，编辑现有屏幕，并创建设计变体 | · "为移动应用创建一个关于浪漫和约会点子的浏览标签页。" · "编辑登录屏幕，添加一个'记住我'复选框，并将按钮颜色改为蓝色。" · "生成主页的 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。" |

构建（`stitch-build`）

代码生成、框架集成以及从 Stitch 设计编译资源。

| 技能 | 描述 | 提示示例 | |------|------|----------| | stitch::react-components | 将 Stitch 屏幕转换为 React 组件系统，并带有自动验证和设计令牌一致性 | · "将 Stitch 项目 projects/123 中的所有屏幕转换为 React 组件。" · "将应用同步到 Stitch 项目 13039335308618232534 的最新更新。" | | stitch::react-native | 将 Stitch HTML 设计转换为生产就绪的 React Native 组件，包含 StyleSheet 和平台特定代码 | · "将 Stitch 设计转换为具有正确主题和导航的 React Native 组件。" · "将应用同步到 Stitch 项目 13039335308618232534 的最新更新。" | | remotion | 使用 Remotion 从 Stitch 项目生成带有平滑过渡和缩放效果的导览视频 | "生成 Stitch 项目 projects/456 的导览视频。" | | shadcn-ui | 集成和构建 shadcn/ui 组件的专家指导 | "设置 shadcn/ui 并构建一个带有排序和筛选功能的数据表格。" |

工具（`stitch-utilities`）

用于增强提示、生成设计规范和强制执行设计标准的支持工具。

| 技能 | 描述 | 提示示例 | |------|------|----------| | design-md | 分析 Stitch 项目并以语义语言生成全面的 DESIGN.md 文件 | "分析 Stitch 项目 projects/123 并生成一个 DESIGN.md 文件。" | | enhance-prompt | 将模糊的 UI 想法转化为精炼的、针对 Stitch 优化的提示，包含 UI/UX 关键词 | "增强这个提示：'制作一个设置页面'。" | | stitch-loop | 通过单个提示生成完整的多页面网站，并带有自动验证 | "用 Stitch 构建一个 5 页的作品集网站。" | | taste-design | 生成强制执行高级、反通用 UI 标准的 DESIGN.md 文件 | "生成一个具有严格排版和校准颜色的高级 DESIGN.md 文件。" |

仓库结构

plugins/
├── stitch-design/ — 核心设计工作流插件
│   ├── plugin.json
│   └── skills/
│       ├── code-to-design/
│       ├── generate-design/
│       ├── manage-design-system/
│       ├── extract-design-md/
│       ├── extract-static-html/
│       └── upload-to-stitch/
├── stitch-build/ — 代码生成与构建插件
│   ├── plugin.json
│   └── skills/
│       ├── react-components/ — stitch::react-components
│       ├── react-native/
│       ├── remotion/
│       └── shadcn-ui/
└── stitch-utilities/ — 设计工具与辅助插件

google-labs-code stitch-skills