Stitch Skills —— 一套遵循 Agent Skills 开放标准、与 Stitch MCP 服务器配合使用的 Agent 技能库

这是什么

google-labs-code/stitch-skills 是一个基于 TypeScript 的开源项目（★6578），为 Google Stitch 设计工具提供了一套遵循 Agent Skills 开放标准的智能体技能（skills）与插件（plugins）集合。该项目兼容多个主流的 coding agent，包括 Codex、Antigravity、Gemini CLI、Claude Code 和 Cursor，允许开发者通过统一的接口让 AI 助手直接操控 Stitch 设计工作流——从设计生成、代码抽取到组件编译，全部在 agent 对话中完成。

项目本身不包含 Stitch 核心引擎，而是作为插件市场（marketplace）形态存在，用户可通过 CLI 或 UI 快速注册并安装所需技能插件，每个技能插件内部遵循固定的 SKILL.md + scripts/ + resources/ + examples/ 目录结构，便于二次开发和扩展。

解决的问题

传统 UI 开发中，设计师输出设计稿，开发者手动翻译为代码，两者之间存在巨大的信息损耗和重复劳动。即便有 Figma 插件或自动生成工具，也往往需要手动复制、调整格式，且难以与主流 AI 编码助手深度集成。Stitch Skills 瞄准三个具体痛点：

• 设计到代码的断点：设计师在 Stitch 中调整设计后，开发者需要重新截图、测量、手写组件。本插件能将 Stitch HTML 直接转换为 React、React Native、Remotion、shadcn/ui 等框架的代码。
• 设计系统一致性：管理组件库、色彩变量、排版规范通常依赖人工同步。manage-design-system 技能可自动读取 Stitch 设计系统并生成对应 tokens 或 CSS 变量。
• Agent 工具碎片化：每个 AI 编码 agent 有自己的工具格式。Agent Skills 开放标准统一了技能声明与调用方式，让同一个技能集合同时服务于 Codex、Claude Code、Cursor 等，无需为每个 agent 分别适配。

核心功能

项目包含三个顶层插件，每个插件下分多个具体技能：

stitch-design —— 设计工作流核心

• code-to-design：从已有代码片段反向生成 Stitch 设计（HTML 结构），实现“代码即设计”闭环。
• generate-design：根据文本描述或数据 schema 在 Stitch 中生成新的设计屏幕。
• manage-design-system：管理色彩、间距、图标等设计 tokens，自动同步到 Stitch。
• extract-design-md：将 Stitch 设计导出为 Markdown 格式的设计规约。
• extract-static-html：从 Stitch 设计提取静态 HTML，用于快速原型或静态站点。
• upload-to-stitch：将外部生成的 HTML / CSS 上传回 Stitch 项目。

stitch-build —— 代码生成与构建

• react-components（stitch::react-components）：将 Stitch 设计转换为 React 函数组件（JSX/TSX），支持属性映射和样式提取。
• react-native：输出 React Native 组件（适配移动端布局）。
• remotion：生成 Remotion 动画框架所需的组件代码。
• shadcn-ui：适配 shadcn/ui 组件库的格式与变量命名。

stitch-utilities —— 设计辅助工具

• design-md：从设计内容生成标准化的设计文档（Markdown）。
• enhance-prompt：根据当前设计上下文优化用户输入的 prompt，提高 agent 生成质量。
• stitch-loop：在 agent 对话中反复迭代设计，支持“生成→调整→再生成”循环。
• taste-design：对设计进行风格一致性检查（如间距、字体、色彩使用是否符合设计系统）。

每个技能遵循 Agent Skills 标准，包含 SKILL.md（任务说明）、scripts/（可执行脚本，负责校验和网络请求）、resources/（知识库，如 checklist、样式指南）、examples/（语法正确的参考示例）。

亮点 / 与同类相比

• 标准化优于插件化：不同于 npm 包或 Figma 插件这种绑定单一平台的方式，Agent Skills 是一个跨 agent 开放标准。同一个技能可以用在 Codex、Claude Code、Cursor 等上，通过 CLI 或 UI 集中管理插件市场，大幅降低迁移成本。
• 稀疏克隆加速安装：CLI 安装时支持 --sparse 参数，只拉取选定的插件路径而非整个仓库，适合大型技能库场景。
• 技能间依赖自动提示：stitch-design 下的技能常互相依赖（如 code-to-design 可能需要 manage-design-system 的 token 数据），项目在文档中明确提醒手动安装时需补齐所有依赖，避免运行时断裂。
• 非官方但实用：明确声明“这不是 Google 官方产品”，也不在 Google OSS 漏洞奖励计划范围内，但代码质量高、社区活跃（★6578），且兼容 Google 的 Stitch 工具生态。
• 端到端工作流：从设计生成、代码导出、组件编译到设计文档提取，所有技能围绕“设计→代码”闭环设计，而非零散的工具函数。

适合谁用 / 上手

适合人群：

• 使用 Stitch 作为 UI 设计工具的前端开发团队，希望减少手动编码时间。
• 正在训练或使用 AI 编码助理（Codex、Claude Code、Cursor 等）的开发者，想要让 agent 直接读取 Stitch 设计并输出组件。
• 设计系统管理员，需要自动化同步设计 tokens 到代码仓库。
• 对 Agent Skills 开放标准感兴趣，想为自家设计工具编写兼容技能的开发者。

上手步骤：

1. 确保已经配置并运行 Stitch MCP 服务器，注册好相关环境变量和认证凭据。
2. 全局安装插件市场（推荐 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
   

   也可以去掉 --sparse 拉取整个仓库。
3. （或在 Codex UI 中：Settings → Plugin Marketplaces → Add，填入仓库地址。）
4. 安装一个或多个插件：
   • codex plugin install stitch-design 或等效命令。
5. 若使用 Claude Code 或 Cursor，通过 npx plugins add google-labs-code/stitch-skills --scope project --target claude-code 在项目级安装。
6. 确认安装成功后，在 agent 对话中使用自然语言调用技能，例如：“使用 stitch-design 中的 generate-design 技能，根据这份 JSON 数据生成一个用户资料页面”。