任务技能（Skills）
Stitch Skills
让 AI 根据文字或参考图设计页面，再把设计转成前端组件。
内容介绍
少装一点整理 · 依据项目公开文档
适合想先看界面设计、再开发网页或应用的人。这个技能包连接你自己的 Google Stitch 项目，指导 AI 生成和修改页面、整理设计样式，并按所选技能转换为 React 等界面代码。使用前需要可用的 Stitch 账号、项目权限和配置好的 MCP 连接，也就是让助手调用设计工具的接口。按文档选择技能并保留所需配套文件。仓库由 Google Labs 代码组织发布，但文档注明不属于 Google 官方支持的产品；服务额度以官方说明为准。
开始使用
先核对使用条件，再选择你的 AI 助手查看接入步骤。
- 需要准备
- 可使用插件的 Codex、Claude Code 或 Cursor；后两者的安装命令需要 Node.js 和 npm。
- 先在 Stitch 使用自己的账号，再按官方说明准备 MCP 连接凭据；生成设计需要联网。
- 费用说明
- 插件代码采用 Apache-2.0 开源许可；Stitch 的可用额度与限制以账号内说明为准，AI 助手使用费用另计。
- 需要的权限
- MCP 可读取或修改授权范围内的 Stitch 项目；设计提示词和选择上传的图片、HTML 等资料会发送到 Stitch，生成文件会保存到本地。只上传获准使用的资料，账号凭据保存在自己的助手配置中。
Codex有官方接入说明
当前 README 单独列出 Codex 的安装方式；还需连接 Stitch MCP（让助手访问你的 Stitch 设计的工具连接）。
接入步骤
- 在 Codex 的“设置 → 插件市场 → 添加”中填写来源 https://github.com/google-labs-code/stitch-skills，Git ref 填 main。
- 在新增的市场安装 stitch-design；第一次只使用设计插件即可。
- 按下方 Stitch MCP setup 配置账号凭据和连接，开启新会话后让它列出自己的 Stitch 项目。
怎样确认接入有效
应能得到自己的真实项目列表；没有项目时返回空列表也可用于核对连接。之后再请求生成一个测试页面，并在 Stitch 中检查结果；装好技能不等于 MCP 已连接。
官方依据
Claude Code有官方接入说明
当前 README 单独列出 Claude Code 的安装方式；还需连接 Stitch MCP（让助手访问你的 Stitch 设计的工具连接）。
接入步骤
- 在要使用的项目目录打开终端，确认已安装 Node.js 和 npm。
- 运行 npx plugins add google-labs-code/stitch-skills --scope project --target claude-code，按安装提示核对插件。
- 按下方 Stitch MCP setup 配置账号凭据和连接，开启新会话后让它列出自己的 Stitch 项目。
怎样确认接入有效
应能得到自己的真实项目列表；没有项目时返回空列表也可用于核对连接。之后再请求生成一个测试页面，并在 Stitch 中检查结果；装好技能不等于 MCP 已连接。
官方依据
Cursor有官方接入说明
当前 README 单独列出 Cursor 的安装方式；还需连接 Stitch MCP（让助手访问你的 Stitch 设计的工具连接）。
接入步骤
- 在要使用的项目目录打开终端，确认已安装 Node.js 和 npm。
- 运行 npx plugins add google-labs-code/stitch-skills --scope workspace --target cursor，按安装提示核对插件。
- 按下方 Stitch MCP setup 配置账号凭据和连接，开启新会话后让它列出自己的 Stitch 项目。
怎样确认接入有效
应能得到自己的真实项目列表；没有项目时返回空列表也可用于核对连接。之后再请求生成一个测试页面，并在 Stitch 中检查结果；装好技能不等于 MCP 已连接。
官方依据
官方依据
接入说明核对于 2026-10-13 · 依据公开文档整理，未逐一安装实测。
可以怎么用
- 根据文字或参考图生成、修改页面
- 整理设计样式并保持页面一致
- 按所选技能将设计转换为前端组件
官方项目与文档
项目说明译文
与 Stitch MCP 服务器配合使用的 Agent Skills 技能库。每个技能遵循开放 Agent Skills 标准，面向 Antigravity、Gemini CLI、Claude Code、Cursor 等编程助手。
用途相近的插件
优先匹配当前插件的主要用途，再参考共同用途和收藏数；接入方法可能不同。
- Anthropic Skills · Frontend Design — 从产品用途出发，规划页面、编写界面，再检查布局、文字和交互是否合适。
- Taste Skill — 让展示型网站有明确的设计方向，做完后再用浏览器检查真实效果。
- Text to CAD — 把尺寸和形状要求交给 AI，生成可继续修改的三维零件模型。