google-labs-code / stitch-skills

Google Labs: Stitch Skills

Stitch Design Skills A collection of agent skills and plugins for Google Stitch, following the Agent Skills open standard. Compatible with coding agents such as Codex, Antigravity, Gemini CLI, Claude Code, and Cursor.

Stitch Design Skills 这是一套为 Google Stitch 设计的智能体（Agent）技能与插件集合，遵循 Agent Skills 开放标准。兼容 Codex、Antigravity、Gemini CLI、Claude Code 和 Cursor 等编码智能体。

Quick Start

1. Install Plugins (Recommended)

The fastest way to set up the full Stitch plugin suite globally.

快速入门

1. 安装插件（推荐）

这是在全球范围内快速设置完整 Stitch 插件套件的最快方法。

Codex Add the Stitch Skills marketplace, then install the plugins you need.

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

Via CLI (recommended)

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

通过 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] The --sparse flags are optional — they limit the checkout to only the listed paths for a faster clone. Omit them to pull the entire repository.

[!TIP] --sparse 标志是可选的——它们将检出范围限制在列出的路径中，从而实现更快的克隆。如果省略它们，则会拉取整个仓库。

Via the Codex UI Navigate to Settings → Plugin Marketplaces → Add and fill in:

Field	Value
Source	https://github.com/google-labs-code/stitch-skills
Git ref	main
Sparse paths (optional)	.agents/plugins, plugins/stitch-design, plugins/stitch-build, plugins/stitch-utilities

通过 Codex UI 导航至 Settings → Plugin Marketplaces → Add，并填写以下内容：

字段	值
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

Once the marketplace is registered, install any combination of:

stitch-design — design-focused skills
stitch-build — build and component skills
stitch-utilities — utility and helper skills

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

stitch-design — 设计导向技能
stitch-build — 构建与组件技能
stitch-utilities — 工具与辅助技能

Claude Code & Cursor

# Claude Code — installs into the current project
npx plugins add google-labs-code/stitch-skills --scope project --target claude-code

# Cursor — installs into the current workspace
npx plugins add google-labs-code/stitch-skills --scope workspace --target cursor

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. Install Skills Selectively

Choose only the specific skills you need. Important: Stitch Design Skills often have inter-dependencies. If you choose to install skills selectively, ensure you include all required dependencies.

2. 选择性安装技能

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

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

You can run the following commands to see the help documentation for plugins and skills:

npx plugins --help
npx skills --help

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

npx plugins --help
npx skills --help

Prerequisites

These skills require the Stitch MCP server to be configured and running in your agent’s environment. Make sure you have followed the Stitch MCP Setup Instructions to register the server and set up appropriate environment variables and credentials.

前置要求

这些技能要求在你的智能体环境中配置并运行 Stitch MCP 服务器。请确保你已按照《Stitch MCP 设置指南》注册服务器，并设置了相应的环境变量和凭据。

Available Plugins

Design (stitch-design)

Core design workflows for creating, managing, and optimizing designs within Stitch.

可用插件

设计 (stitch-design)

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

Skill	Description	Prompt Example
`stitch::code-to-design`	Convert frontend code to a Stitch Design	”Upload the frontend code at /path/to/dashboard into a Stitch project named ‘Dashboard-Migration-2026’.”
`stitch::generate-design`	Generate/edit screens and variants	”Make a browse tab for a mobile app…”
`stitch::manage-design-system`	Manage design systems	”Upload our design system from .stitch/DESIGN.md…”

技能	描述	提示词示例
`stitch::code-to-design`	将前端代码转换为 Stitch 设计	“将 /path/to/dashboard 的前端代码上传到名为 ‘Dashboard-Migration-2026’ 的 Stitch 项目中。”
`stitch::generate-design`	生成/编辑屏幕及变体	“为移动应用制作一个浏览标签页…”
`stitch::manage-design-system`	管理设计系统	“从 .stitch/DESIGN.md 上传我们的设计系统…”

(Note: Additional plugins for Build and Utilities follow the same structure.)

(注：Build 和 Utilities 的其他插件遵循相同的结构。)