google-labs-code/stitch-skills

面向 Google Stitch 的开源 Agent Skills 插件库，让编码代理完成设计与代码互转

面向 Google Stitch 的开源 Agent Skills 插件库，让编码代理完成设计与代码互转

产品定位

该项目定位为 Stitch 生态的技能扩展层，而非独立工具：所有 skills 都要求先在代理环境中配置并运行 Stitch MCP 服务器，选型时需把这一前置条件纳入评估。它以 Apache-2.0 许可证开源，主要语言为 TypeScript，但 README 明确声明这不是 Google 官方支持的产品，也不符合 Google 开源软件漏洞奖励计划的资格，使用时应据此设定支持预期。兼容性方面，Codex、Antigravity、Gemini CLI、Claude Code、Cursor 可按各自机制安装，OpenCode 则需手动复制 skill 文件夹并自行配置远程 Stitch MCP 条目。

适合用户

  • 使用编码代理的开发者
  • UI/UX 设计师与前端工程师

功能亮点

  • 生成与编辑 Stitch 设计

    从文本或图像生成新屏幕、编辑现有屏幕并创建设计变体。

  • 前端代码转换为 Stitch 设计

    通过 HTML 提取、设计系统与上传，将 React、Vue 等前端代码转换为 Stitch 设计。

  • 设计系统管理

    上传 DESIGN.md 并将主题应用到屏幕，也可从前端源码提取 DESIGN.md。

  • 静态 HTML 提取与上传

    从运行中的 Web 应用提取内联 CSS 与图片的自包含静态 HTML，并可上传本地资产到 Stitch 项目。

  • 转换为 React 组件系统

    将 Stitch 屏幕转换为带自动验证与设计 token 一致性的 React 组件系统。

使用步骤

安装 Stitch 插件套件

  1. 在 Codex 中添加 Stitch Skills marketplace（CLI 或 UI）
  2. 安装 stitch-design、stitch-build、stitch-utilities 中的任意组合
  3. Claude Code 与 Cursor 用户使用 npx plugins add 命令安装
  4. OpenCode 用户手动复制 skill 文件夹并配置远程 Stitch MCP 条目

配置 Stitch MCP 前置条件

  1. 按照 Stitch MCP 设置说明注册服务器
  2. 配置相应的环境变量与凭据
  3. 确保 Stitch MCP 服务器在代理环境中运行

选择性安装单个 skills

  1. 运行 npx skills add google-labs-code/stitch-skills
  2. 选择所需的特定 skills
  3. 确保包含所有必需的依赖项

适用场景

从文本或图像生成 UI 设计

UI/UX 设计师与前端工程师

通过 generate-design skill 从文本或图像生成新屏幕、编辑屏幕并创建设计变体。

前端代码迁移到 Stitch

前端工程师

使用 code-to-design 将现有 React、Vue 等前端代码转换为 Stitch 设计项目。

设计转换为生产代码

使用编码代理的开发者

将 Stitch 屏幕转换为 React 组件、React Native 组件或 React + Vite 仪表盘。

优化设计提示词

使用编码代理的开发者

使用 enhance-prompt 将模糊的 UI 想法转化为经过优化的 Stitch 提示词。

访问与价格

可用状态: 当前可用

价格信息: 开源

支持平台: 自托管

价格说明: 仓库以 Apache-2.0 许可证开源发布，可免费获取和使用。

官方入口

常见问题

使用这些 skills 需要什么前置条件？

需要在代理环境中配置并运行 Stitch MCP 服务器，并按照 Stitch MCP 设置说明注册服务器和配置环境变量与凭据。

支持哪些编码代理？

兼容 Codex、Antigravity、Gemini CLI、Claude Code、Cursor；OpenCode 需要手动安装 skills 和 Stitch MCP。

这是 Google 官方产品吗？

不是。README 明确声明这不是 Google 官方支持的产品，也不符合 Google 开源软件漏洞奖励计划的资格。

来源核验

资料核验于 2026-09-01