Cursor配置stitch-skills:工作区级安装逐步指南
【免费下载链接】stitch-skillsA library of Agent Skills designed to work with the Stitch MCP server. Each skill follows the Agent Skills open standard, for compatibility with coding agents such as Antigravity, Gemini CLI, Claude Code, Cursor.项目地址: https://gitcode.com/GitHub_Trending/st/stitch-skills
想在 Cursor 中配置 stitch-skills 吗?本教程带你 5 分钟完成工作区级安装。stitch-skills 是一套遵循 Agent Skills 开放标准的 AI 智能体技能库,专为 Google Stitch 设计工具打造,让你的 Cursor 智能体获得生成设计稿、管理设计系统、提取静态 HTML 等能力。跟着步骤走,即可完成 Cursor 工作区级安装并立即上手。
stitch-skills 是什么?
stitch-skills 将"设计能力"打包成一个个可被 AI 智能体调用的技能(Skill),目前包含三大插件:
| 插件 | 作用 | 技能示例 |
|---|---|---|
stitch-design | 核心设计工作流 | 代码转设计稿、文/图生成屏幕、管理设计系统 |
stitch-build | 从 Stitch 设计生成代码 | React 组件、React Native、Remotion 视频 |
stitch-utilities | 辅助增强工具 | 优化提示词、生成 DESIGN.md、整站构建循环 |
每个技能都遵循统一目录规范:SKILL.md是智能体的"任务手册",scripts/放可执行脚本,examples/放标准参考,例如 plugins/stitch-design/skills/generate-design/SKILL.md。
配置前的准备工作
安装只需满足两个前提:
- 已安装 Node.js:
npx命令依赖 Node 环境,终端输入node -v确认即可。 - 已配置 Stitch MCP 服务器:这些技能通过 Stitch MCP 与 Stitch 平台交互,需先按 Stitch 官方文档完成 MCP 注册与凭据配置,否则技能无法调用 Stitch 工具。
方法一:一键完成 Cursor 工作区级安装(推荐)
在 Cursor 中打开你的项目,通过终端执行官方推荐命令,将技能安装到当前工作区:
npx plugins add google-labs-code/stitch-skills --scope workspace --target cursor📌 关键点:--scope workspace表示技能只作用于当前 Cursor 工作区,不会影响其他项目;--target cursor指定安装目标为 Cursor。命令执行完毕后,重启 Cursor 或重新打开会话即可生效。
安装过程中如想查看完整参数说明,可随时运行:
npx plugins --help方法二:手动克隆到工作区(适合离线或无网络环境)
如果npx不可用,可以先克隆仓库,再按需拷贝技能目录到工作区:
git clone https://gitcode.com/GitHub_Trending/st/stitch-skills然后只把需要的技能文件夹复制到工作区的智能体技能目录下(例如.cursor/skills/),再重启 Cursor。推荐从最常用的设计技能开始:
- 文生屏 / 改屏:plugins/stitch-design/skills/generate-design/
- 代码转设计:plugins/stitch-design/skills/code-to-design/
- 上传素材:plugins/stitch-design/skills/upload-to-stitch/
- 增强提示词:plugins/stitch-utilities/skills/enhance-prompt/
各技能的插件元信息可在 plugins/stitch-design/plugin.json 与 plugins/stitch-utilities/plugin.json 中查看。
按需精选安装:只装你要的技能
如果不想装全套,可以单独添加某个技能:
npx skills add google-labs-code/stitch-skills⚠️ 注意:技能之间存在依赖关系,官方特别提醒(见 README.md)——如果只装单个技能,请确认它依赖的技能也已包含。比如stitch-loop整站构建循环依赖DESIGN.md与SITE.md,建议搭配design-md与site-md一起使用,可参考 plugins/stitch-utilities/skills/stitch-loop/README.md。
安装后的快速验证
装好后直接在 Cursor 的对话中用自然语言测试,例如:
- "Enhance this prompt: 'make a settings page'."(测试 enhance-prompt)
- "Generate 3 design variants of the home screen with dark mode."(测试 generate-design)
若智能体正确识别技能并调用 Stitch 工具,说明工作区级安装成功。更多提示词示例可参考 README.md 中的技能列表。
常见问题
- 技能未生效?检查是否重启了 Cursor,以及是否在工作区根目录执行了安装命令。
- 调用 Stitch 工具报错?99% 是 Stitch MCP 服务器未配置,先完成 MCP 注册与环境凭据设置。
- 想升级技能?重新执行一次
npx plugins add命令即可覆盖更新。
小结
Cursor 配置 stitch-skills 的核心就三步:配好 Stitch MCP → 运行一条 npx 命令 → 重启 Cursor 验证。工作区级安装让每个项目独享自己的设计技能组合,互不干扰。现在就可以打开你的第一个项目,让 AI 智能体帮你"画"出专业设计稿了 🎨
【免费下载链接】stitch-skillsA library of Agent Skills designed to work with the Stitch MCP server. Each skill follows the Agent Skills open standard, for compatibility with coding agents such as Antigravity, Gemini CLI, Claude Code, Cursor.项目地址: https://gitcode.com/GitHub_Trending/st/stitch-skills
创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考