stitch-skills

Stitch Design Skills

一套面向 Google Stitch 的智能体技能（agent skills）与插件集合，遵循 Agent Skills 开放标准。兼容 Codex、Antigravity、Gemini CLI、Claude Code、Cursor 等编程智能体（coding agent）。

快速开始

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 界面

导航至 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

注册市场后，安装任意组合的插件：

• 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. 选择性安装技能

只选择你需要的具体技能。

[!IMPORTANT] Stitch Design Skills 之间常有相互依赖。如果你选择选择性安装技能，请确保包含所有必需的依赖项。

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

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

npx plugins --help

npx skills --help

前提条件

这些技能需要 Stitch MCP 服务器已配置并在智能体环境中运行。确保已按照 Stitch MCP 设置说明 注册服务器，并设置好相应的环境变量和凭据。

文档导航： 如果 stitch.withgoogle.com/docs 上的链接跳转不正确，请在同一主机下打开目标路径（例如 https://stitch.withgoogle.com/docs/learn/device-types/）。

可用插件

Design（stitch-design）

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

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

---

Build（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 并构建一个带有排序和筛选功能的数据表格。"
react-vite-dashboard	将 Stitch 界面转换为 React + Vite 仪表盘，集成 TanStack Query、DESIGN.md 令牌和 Web3 读取模式	"根据这个 Stitch 界面和我们的 DESIGN.md 构建一个 DeFi 投资组合仪表盘。"

---

Utilities（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/
│       ├── react-vite-dashboard/
│       ├── remotion/
│       └── shadcn-ui/
└── stitch-utilities/       — 设计工具与辅助插件
    ├── plugin.json
    └── skills/
        ├── design-md/
        ├── enhance-prompt/
        ├── stitch-loop/
        └── taste-design/

每个技能遵循 Agent Skills 标准：

skills/<skill-name>/
├── SKILL.md           — 智能体的“任务控制中心”
├── scripts/           — 可执行执行器（验证与网络连接）
├── resources/         — 知识库（检查表与样式指南）
└── examples/          — “黄金标准”语法有效参考文献

添加新技能

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

非常适合作为新技能的方向

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

这不是一个官方支持的 Google 产品。本项目不符合 Google 开源软件漏洞奖励计划 的参与条件。