stitch-skills 是一套面向 Stitch MCP 服务器的 Agent Skills 集合，遵循 Agent Skills 开放标准，可与 Claude Code、Cursor 和 Gemini CLI 兼容。该项目并非 Google 官方支持的产品。
用途 stitch-skills 用于 AI 驱动的 UI 设计生成、提示词优化以及从界面到代码的工作流。它适合通过 Stitch 从自然语言提示生成高保真 UI 界面、用单个提示创建多页网站并自动组织文件、生成面向 AI 代理的设计系统文档 DESIGN.md、将模糊的 UI 想法细化为 Stitch 优化提示、把 Stitch 设计转换为 React 组件架构、使用 Remotion 从 Stitch 项目生成走查视频，以及在 React 应用中集成 shadcn/ui 组件。
主要能力 该集合包含以下技能：
- stitch-design：通过 Stitch MCP 系统进行提示词优化和界面生成的主要技能。工作流为：优化用户给 Stitch 的提示、调用 stitch_generate_screen MCP 工具、验证并迭代输出。
- stitch-loop：从单个提示自动创建多页网站。工作流为：解析提示中的顶层页面、通过 stitch_generate_screen 生成每个界面、组织文件并验证输出、生成完整且相互链接的网站。
- enhance-prompt：将模糊的 UI 想法转化为经过打磨、针对 Stitch 优化的提示。示例：输入“a login page”，输出“A clean, minimal login page with email/password fields, a primary CTA button using brand colors, subtle card elevation, and a 'Forgot password?' link below the form.”
- design-md：生成 DESIGN.md 文档，将设计系统转换为自然、语义化且针对 Stitch 界面生成优化的语言。输出为仓库根目录的 DESIGN.md，包含以 Stitch 友好语言表达的 brand tokens。
- react-components：将 Stitch 界面转换为 React 组件架构并进行一致性验证。工作流为：解析 Stitch 界面 JSON/HTML 输出、将元素映射到 React 组件树、验证组件命名和 prop 一致性、输出带 TypeScript 类型的组件文件。
- remotion：使用 Remotion 从 Stitch 项目创建走查视频，支持平滑过渡、缩放和文字叠加。需要 npx remotion studio，输出为 Stitch 界面的 MP4 走查视频。
- shadcn-ui：提供在基于 Stitch 设计构建的 React 应用中实现 shadcn/ui 组件的指导。命令示例：npx shadcn-ui@latest init、npx shadcn-ui@latest add button card input form。
使用方式 安装方式包括：
- 插件（Claude Code）：claude plugin marketplace add google-labs-code/stitch-skills
- 技能（任意平台）：列出可用技能 npx skills add google-labs-code/stitch-skills --list；全局安装特定技能，例如 npx skills add google-labs-code/stitch-skills --skill stitch-design --global，也可安装 stitch-loop、enhance-prompt、react-components、remotion、shadcn-ui、design-md。
- 从 jeo-skills 安装：npx skills add https://github.com/akillness/jeo-skills --skill stitch-skills
仓库结构遵循 Agent Skills 开放标准，每个技能目录包含 SKILL.md（代理任务文档）、scripts/（验证和网络可执行文件）、resources/（知识库，如检查清单、风格指南）、examples/（参考实现）。
操作规则包括：在任何 stitch-design 生成之前先运行 enhance-prompt 以获得更好结果；在开始 stitch-loop 多页工作前使用 design-md 生成 DESIGN.md；在 react-components 输出后验证 React 组件命名一致性；将 Stitch 界面输出保存在专用 screens/ 目录中供 remotion 使用；仅在 react-components 建立组件树后使用 shadcn-ui 集成；推荐循环为 enhance → generate → review → refine。
示例工作流：
- 优化提示：stitch enhance-prompt "a dashboard for monitoring server health"
- 通过 Stitch MCP 生成界面：stitch generate "..." --pages overview,alerts,settings
- 转换为 React：stitch react-components ./screens/
- 添加 shadcn/ui：npx shadcn-ui@latest add card badge table
- 生成走查视频：stitch remotion ./screens/ --output walkthrough.mp4
适用场景 适用于需要从自然语言快速生成高保真 UI、批量创建多页网站、将设计系统文档化、把设计稿转为 React 组件、生成产品走查视频，以及在 React 项目中集成 shadcn/ui 的场景。
限制 以下情况不建议使用：需要 token 级设计系统 lint/diff/export 时，应转向 google-design；仅需 WCAG 对比度审计时，应转向 web-accessibility；需要完整后端 API 设计时，应转向 backend-api；需要通用 React 状态管理时，应转向 react-patterns。
来源：google-labs-code/stitch-skills，Apache-2.0 许可证。