简介
Stitch Agent Skills 是由 Google Labs Code 团队维护的开源技能库，专为Stitch MCP Server 设计。它遵循Agent Skills 开放标准，旨在为 Claude Code、Gemini CLI、Cursor、Antigravity 等主流 AI 编程助手（Coding Agents）注入 UI 设计与前端工程化能力。
简单来说，它是一套“外挂技能”，让原本只能写业务逻辑的 AI 智能体，能够理解设计规范、生成高保真界面、自动转译 React 代码，甚至制作产品演示视频，实现从“自然语言描述”到“可交付 UI 产物”的全链路自动化。
主要功能
该库包含了一系列高度模块化的技能，覆盖了 UI 工作流的各个环节：
技能名称 | 核心能力 | 应用场景 |
|---|---|---|
stitch-design | 统一设计入口。增强 Prompt（注入 UI/UX 关键词、氛围词），合成设计系统（ | 将模糊想法转化为具体的设计指令 |
stitch-loop | 多页网站生成器。从单条 Prompt 生成完整多页网站，自动处理文件组织与验证，支持迭代优化。 | 快速搭建 Landing Page 或营销站点 |
design-md | 设计系统分析器。分析 Stitch 项目，生成语义化的 | 建立团队设计规范，保证 UI 一致性 |
enhance-prompt | 提示词炼金术。将模糊的 UI 想法（如“做个好看的管理后台”）转化为结构化、Stitch 优化的详细 Prompt。 | 解决“AI 听不懂需求”的问题，提升出图质量 |
react-components | 代码转换器。将 Stitch 生成的屏幕转换为 React 组件系统，保持设计令牌（Design Token）一致性。 | 打通“设计稿”到“生产代码”的最后一公里 |
remotion | 演示视频生成。利用 Remotion 将 Stitch 项目截图合成为带转场、缩放、文字叠加的演示视频。 | 制作产品介绍视频，用于汇报或上线评审 |
shadcn-ui | 组件集成专家。提供 shadcn/ui 组件的发现、安装、定制与优化最佳实践指导。 | 快速构建现代、可复用的 React 组件库 |
所有技能均遵循标准目录结构（SKILL.md+scripts/+examples/），支持 AI 智能体进行Few-shot Learning（小样本学习）和自动化质量检查。
安装与配置
前置环境
Node.js 18+：确保本地环境可用。
Stitch MCP Server：需提前配置好 Stitch MCP 服务端（通常需配置
STITCH_API_KEY）。支持的 AI Agent：确保你的 IDE 或 CLI 已安装 Claude Code、Gemini CLI 或 Cursor 等。
安装步骤（使用skillsCLI）
推荐使用skills命令行工具进行安装，它能自动检测你当前的 AI Agent 环境。
查看可用技能：
npx skills add google-labs-code/stitch-skills --list安装特定技能（以
react-components为例）：npx skills add google-labs-code/stitch-skills --skill react-components一键安装全部技能（到所有检测到的 Agent）：
npx skills add google-labs-code/stitch-skills --all
如何使用
安装后，技能会作为“工具”集成到你的 AI Agent 中，无需手动调用代码。
启动 AI 会话：在 Claude Code、Cursor 或 Gemini CLI 中开启一个新对话。
自然语言触发：直接向 AI 描述你的 UI 需求，AI 会自动识别并调用对应的 Stitch 技能。
示例指令：“帮我设计一个 SaaS 仪表盘首页，使用深色主题，包含图表卡片和侧边导航。”
技能自动执行：
enhance-prompt 会先介入，将你的描述细化成专业的设计指令。
stitch-design 会调用 Stitch MCP 生成具体的 UI 屏幕。
design-md 会同步生成设计规范文档。
如果需要代码，react-components 会自动将设计稿转为 React 代码。
迭代优化：如果对生成结果不满意，使用stitch-loop 技能进行多轮自动优化。
应用场景实例
场景一：独立开发者的“全栈”周末项目
痛点：独立开发者小明想做一个“个人书单管理”应用，但不懂 UI 设计，也不想花时间写前端样式。
解决方案：小明在 Claude Code 中安装 Stitch Skills。他描述需求：“生成一个书单列表页，有搜索栏和卡片布局”。AI 自动调用enhance-prompt补充细节，再通过stitch-design生成 3 套视觉方案。小明选中一套后，AI 继续调用react-components生成对应的 React + TypeScript 代码。半天时间，一个具备完整 UI 的前端应用就完成了，小明只需专注后端逻辑。
场景二：创业团队的 MVP 极速验证
痛点：创业团队需要快速上线一个“智能客服平台”的 MVP 给投资人演示，但设计师排期已满。
解决方案：团队使用 Cursor + Stitch Skills。产品经理写出 PRD（产品需求文档）后，AI 利用stitch-loop技能，直接生成包含“登录页”、“客服工作台”、“数据看板”的多页面应用原型。最后，利用remotion技能将这几个页面生成一段带有解说文字的演示视频，直接用于下周的融资路演。
场景三：企业级设计系统（Design System）落地
痛点：大公司有严格的设计规范，但 AI 生成 UI 时常常“放飞自我”，导致风格不一致。
解决方案：开发团队先使用design-md技能，将现有的 Figma 设计规范转化为标准的DESIGN.md文件。此后，所有 AI 生成的 Stitch 界面都会强制引用这份规范，确保生成的按钮、颜色、间距与公司标准一致。新员工入职时，也能通过此文档快速让 AI 产出符合规范的组件。
GitHub 地址
项目仓库：https://github.com/google-labs-code/stitch-skills
开源协议：Apache-2.0
官方说明：本项目属于 Google Labs 实验性项目，非官方正式产品。
