google-labs-code/stitch-skills

# Stitch 设计技能 [Google Stitch](https://stitch.withgoogle.com) 的 agent 技能和插件集合，遵循 [Agent Skills](https://agentskills.io) 开放标准。兼容 Codex、Antigravity、Gemini CLI、Claude Code 和 Cursor 等编码 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 ```

通过 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. 选择性安装技能 仅选择您需要的特定技能。 ``` npx skills add google-labs-code/stitch-skills ``` 您可以运行以下命令查看插件和技能的帮助文档： ``` npx plugins --help npx skills --help ``` ## 前置条件 这些技能需要在您的 agent 环境中配置并运行 **Stitch MCP** 服务器。请确保您已按照 [Stitch MCP 设置说明](https://stitch.withgoogle.com/docs/mcp/setup/) 注册服务器并设置了相应的环境变量和凭据。 ## 可用插件 ### 设计 (`stitch-design`) 用于在 Stitch 中创建、管理和优化设计的核心设计工作流。 | 技能 | 描述 | 提示词示例 | |---|---|---| | [stitch::code-to-design](plugins/stitch-design/skills/code-to-design/) | 通过 HTML 提取 + 设计系统 + 上传，将前端代码（React、Vue 等）转换为 Stitch 设计 | *“将 `/path/to/dashboard` 下的前端代码上传到名为 'Dashboard-Migration-2026' 的 Stitch 项目中。”* | | [stitch::generate-design](plugins/stitch-design/skills/generate-design/) | 根据文本或图像生成新屏幕、编辑现有屏幕以及创建设计变体 | · *“为关于浪漫和约会创意的移动应用制作一个浏览标签页。”*
· *“编辑登录屏幕，添加一个‘记住我’复选框，并将按钮颜色更改为蓝色。”*
· *“生成 3 种主页屏幕的设计变体，采用深色模式和高密度布局。”* | | [stitch::manage-design-system](plugins/stitch-design/skills/manage-design-system/) | 在 Stitch 中管理设计系统 — 上传 DESIGN.md 并将主题应用到屏幕 | *“从 `.stitch/DESIGN.md` 上传我们的设计系统，并将其应用到所有屏幕。”* | | [stitch::extract-design-md](plugins/stitch-design/skills/extract-design-md/) | 直接从前端源代码中提取全面的 DESIGN.md | *“扫描 `/src` 并将设计系统提取到 `.stitch/DESIGN.md` 中。”* | | [stitch::extract-static-html](plugins/stitch-design/skills/extract-static-html/) | 从正在运行的 Web 应用中提取独立的静态 HTML，内联 CSS 和图像 | *“提取 `http://localhost:3000/profile` 的静态 HTML 快照。”* | | [stitch::upload-to-stitch](plugins/stitch-design/skills/upload-to-stitch/) | 将本地资产（图像、模型、HTML）上传到 Stitch 项目 | *“将 `.stitch/landing_page.html` 上传到 Stitch 项目 `projects/987654321`。”* | ### 构建 (`stitch-build`) 从 Stitch 设计进行代码生成、框架集成和资产编译。 | 技能 | 描述 | 提示词示例 | |---|---|---| | [stitch::react-components](plugins/stitch-build/skills/react-components/) | 将 Stitch 屏幕转换为 React 组件系统，带有自动化验证和设计 token 一致性 | · *“将 Stitch 项目 `projects/123` 中的所有屏幕转换为 React 组件。”*
· *“将应用同步到 Stitch 项目 `13039335308618232534` 的最新更新。”* | | [stitch::react-native](plugins/stitch-build/skills/react-native/) | 将 Stitch HTML 设计转换为生产级 React Native 组件，包含 StyleSheet 和特定平台代码 | · *“将 Stitch 设计转换为具有适当主题和导航的 React Native 组件。”*
· *“将应用同步到 Stitch 项目 `13039335308618232534` 的最新更新。”* | | [remotion](plugins/stitch-build/skills/remotion/) | 使用 Remotion 从 Stitch 项目生成带有平滑过渡和缩放的演示视频 | *“生成 Stitch 项目 `projects/456` 的演示视频。”* | | [shadcn-ui](plugins/stitch-build/skills/shadcn-ui/) | 为集成和构建带有 shadcn/ui 组件的应用提供专家指导 | *“设置 shadcn/ui 并构建一个具有排序和过滤功能的数据表。”* | ### 实用工具 (`stitch-utilities`) 用于增强提示词、生成设计规范和执行设计标准的支持工具。 | 技能 | 描述 | 提示词示例 | |---|---|---| | [design-md](plugins/stitch-utilities/skills/design-md/) | 分析 Stitch 项目并以语义语言生成全面的 DESIGN.md 文件 | *“分析 Stitch 项目 `projects/123` 并生成一个 DESIGN.md。”* | | [enhance-prompt](plugins/stitch-utilities/skills/enhance-prompt/) | 将模糊的 UI 想法转化为带有 UI/UX 关键词的、经过润色的 Stitch 优化提示词 | *“增强此提示词：‘制作一个设置页面’。”* | | [stitch-loop](plugins/stitch-utilities/skills/stitch-loop/) | 通过单一提示词生成完整的多页网站，并带有自动化验证 | *“使用 Stitch 构建一个 5 页的作品集网站。”* | | [taste-design](plugins/stitch-utilities/skills/taste-design/) | 生成执行高级、反通用 UI 标准的 DESIGN.md 文件 | *“生成一个具有严格排版和校准颜色的高级 DESIGN.md。”* | ## 仓库结构 ``` 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/ ``` 每个技能都遵循 Agent Skills 标准： ``` skills// ├── 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 ``` ## 添加新技能 所有新技能都需要遵循上述文件结构以实现 Agent Skills 开放标准。 ### 适合作为新技能的候选者 * **验证**：将 Stitch HTML 转换为其他 UI 框架并验证语法的技能。 * **解耦数据**：将静态设计内容转换为外部模拟数据文件的技能。 * **生成设计**：根据给定数据集在 Stitch 中生成新设计屏幕的技能。 这不是 Google 官方支持的产品。本项目不符合参与 [Google 开源软件漏洞奖励计划](https://bughunters.google.com/open-source-security) 的条件。

标签：AI智能体, MCP, SOC Prime, UI设计, 开发工具, 插件库, 编码辅助, 自动化攻击