一组适用于 Google Stitch 的代理技能和插件集合，遵循 Agent Skills 开放标准。兼容 Codex、Antigravity、Gemini CLI、Claude Code 和 Cursor 等编程代理。

1. 安装插件（推荐）

快速全局设置完整 Stitch 插件套件的最快方法。

添加 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 ref	main
稀疏路径	（可选） .agents/plugins、plugins/stitch-design、plugins/stitch-build、plugins/stitch-utilities

市场注册后，安装以下任意组合：

• stitch-design — 设计类技能
• stitch-build — 构建与组件技能
• stitch-utilities — 实用工具与辅助技能

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 设置指南 注册服务器并设置相应的环境变量和凭据。

核心设计工作流 (stitch-design)

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

技能	描述	提示示例
stitch::code-to-design	将前端代码（React、Vue 等）通过 HTML 提取、设计系统转换和上传转换为 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 项目生成 Walkthrough 视频，具有平滑过渡和缩放效果	“为 Stitch 项目 projects/456 生成一个 Walkthrough 视频。”
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/ — 设计实用工具与助手插件 ├── plugin.json └── skills/ ├── design-md/ ├── enhance-prompt/ ├── stitch-loop/ └── taste-design/

每个技能遵循 Agent Skills 标准：

skills// ├── SKILL.md — 代理的“任务控制中心” ├── scripts/ — 可执行的强制执行器（验证与网络） ├── resources/ — 知识库（检查清单与样式指南） └── examples/ — “黄金标准”语法有效的参考示例

所有新技能都需要遵循上述文件结构以实现 Agent Skills 开放标准。

新技能的候选方向

• 验证：将 Stitch HTML 转换为其他 UI 框架并验证语法的技能。
• 解耦数据：将静态设计内容转换为外部模拟数据文件的技能。
• 生成设计：从给定数据集在 Stitch 中生成新设计屏幕的技能。

---

本项目不是 Google 官方支持的产品，不参与 Google 开源软件漏洞奖励计划。

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.

1. Install Plugins (Recommended)

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

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

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

[!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.

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

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

  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

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.

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

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.

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

Skill	Description	Prompt Example
stitch::code-to-design	Convert frontend code (React, Vue, etc.) to a Stitch Design via HTML extraction + design system + upload	"Upload the frontend code at/path/to/dashboard into a Stitch project named 'Dashboard-Migration-2026'."
stitch::generate-design	Generate new screens from text or images, edit existing screens, and create design variants	· "Make a browse tab for a mobile app for romance and date night ideas."
· "Edit the login screen to add a 'Remember Me' checkbox and change the button color to blue."
· "Generate 3 design variants of the home screen with dark mode and high-density layouts."
stitch::manage-design-system	Manage design systems in Stitch — upload DESIGN.md and apply themes to screens	"Upload our design system from.stitch/DESIGN.md and apply it to all screens."
stitch::extract-design-md	Extract a comprehensive DESIGN.md directly from frontend source code	"Scan/src and extract the design system into .stitch/DESIGN.md."
stitch::extract-static-html	Extract self-contained static HTML from running web apps, inlining CSS and images	"Extract a static HTML snapshot ofhttp://localhost:3000/profile."
stitch::upload-to-stitch	Upload local assets (images, mockups, HTML) to a Stitch project	"Upload.stitch/landing_page.html to Stitch project projects/987654321."

---

Code generation, framework integration, and asset compilation from Stitch designs.

Skill	Description	Prompt Example
stitch::react-components	Convert Stitch screens to React component systems with automated validation and design token consistency	· "Convert all screens in Stitch projectprojects/123 to React components."
· "Sync the app to the last updates of the Stitch project13039335308618232534."
stitch::react-native	Convert Stitch HTML designs to production-ready React Native components with StyleSheet and platform-specific code	· "Convert the Stitch design to React Native components with proper theme and navigation."
· "Sync the app to the last updates of the Stitch project13039335308618232534."
remotion	Generate walkthrough videos from Stitch projects using Remotion with smooth transitions and zooming	"Generate a walkthrough video of the Stitch projectprojects/456."
shadcn-ui	Expert guidance for integrating and building applications with shadcn/ui components	"Set up shadcn/ui and build a data table with sorting and filtering."

---

Utilities (stitch-utilities)

Supporting tools for enhancing prompts, generating design specs, and enforcing design standards.

Skill	Description	Prompt Example
design-md	Analyze Stitch projects and generate comprehensive DESIGN.md files in semantic language	"Analyze Stitch projectprojects/123 and generate a DESIGN.md."
enhance-prompt	Transform vague UI ideas into polished, Stitch-optimized prompts with UI/UX keywords	"Enhance this prompt: 'make a settings page'."
stitch-loop	Generate complete multi-page websites from a single prompt with automated validation	"Build a 5-page portfolio website with Stitch."
taste-design	Generate DESIGN.md files enforcing premium, anti-generic UI standards	"Generate a premium DESIGN.md with strict typography and calibrated colors."

plugins/
├── stitch-design/          — Core design workflow plugin
│   ├── plugin.json
│   └── skills/
│       ├── code-to-design/
│       ├── generate-design/
│       ├── manage-design-system/
│       ├── extract-design-md/
│       ├── extract-static-html/
│       └── upload-to-stitch/
├── stitch-build/           — Code generation & build plugin
│   ├── plugin.json
│   └── skills/
│       ├── react-components/    — stitch::react-components
│       ├── react-native/
│       ├── remotion/
│       └── shadcn-ui/
└── stitch-utilities/       — Design utilities & assistants plugin
    ├── plugin.json
    └── skills/
        ├── design-md/
        ├── enhance-prompt/
        ├── stitch-loop/
        └── taste-design/

Each skill follows the Agent Skills standard:

skills/<skill-name>/
├── SKILL.md           — The "Mission Control" for the agent
├── scripts/           — Executable enforcers (Validation & Networking)
├── resources/         — The knowledge base (Checklists & Style Guides)
└── examples/          — The "Gold Standard" syntactically valid references

All new skills need to follow the file structure above to implement the Agent Skills open standard.

Great candidates for new skills

• Validation : Skills that convert Stitch HTML to other UI frameworks and validate the syntax.
• Decoupling Data : Skills that convert static design content into external mock data files.
• Generate Designs : Skills that generate new design screens in Stitch from a given set of data.

This is not an officially supported Google product. This project is not eligible for the Google Open Source Software Vulnerability Rewards Program.