Claude Code一条命令安装stitch-skillsnpx plugins实战教程【免费下载链接】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-skillsstitch-skills是专为 Google StitchAI 界面设计平台打造的一组Agent Skills 插件库让 Claude Code、Cursor、Gemini CLI 等 AI 编程助手直接获得设计超能力——用一句自然语言生成设计稿、提取设计系统、批量搭建多页网站。本教程教你用一条npx plugins命令把整套技能快速装进 Claude Code5 分钟即可上手实战。一、stitch-skills 是什么为什么值得装一句话理解它给你的 AI 编程助手装上了设计师的手。普通场景下你让 AI 写前端代码装上 stitch-skills 后AI 还能帮你从文字生成界面说做一个移动端浏览页直接产出 Stitch 设计稿提取设计系统扫描现有前端源码自动沉淀成 DESIGN.md 规范一键建站单条提示词驱动多页网站循环构建代码与设计互转前端代码转设计稿、设计稿转静态 HTML它遵循 Agent Skills 开放标准每个技能都是标准化的SKILL.md目录可被多种编码智能体识别安装即生效。二、一条命令安装到 Claude Code最快方法确保已安装 Node.js 并登录 Claude Code在项目根目录执行npx plugins add google-labs-code/stitch-skills --scope project --target claude-code✅ 这条命令会从插件市场拉取 stitch-skills 仓库识别其中所有符合标准的技能目录安装到当前项目--scope project只影响本项目不污染全局环境 如果是给 Cursor 安装把参数换成--scope workspace --target cursor即可同样一条命令搞定。安装命令详情可参考官方说明README.md三、安装前必备条件先配置 Stitch MCP⚠️这是新手最容易踩的坑stitch-skills 的所有技能都依赖Stitch MCP 服务器。安装完插件后请确认已按 Stitch 官方文档完成 MCP 服务器注册已配置好对应的环境变量与凭据在 Claude Code 中能看到stitch*前缀的工具如list_projects、generate_screen_from_textMCP 配置完成前技能命令会找不到工具属正常现象先补上这一步再重试。四、装完能得到哪些技能插件清单一览安装完成后你会得到两大插件共 11 个开箱即用的技能 stitch-design核心设计工作流技能一句话说明源码位置generate-design从文字/图片生成新屏幕、编辑现有屏幕generate-design/SKILL.mdcode-to-design前端代码转 Stitch 设计稿code-to-design/SKILL.mdextract-design-md从源码提取完整设计系统extract-design-md/SKILL.mdmanage-design-system上传并应用主题到所有屏幕manage-design-system/SKILL.mdextract-static-html提取运行中网页的静态 HTMLextract-static-html/SKILL.mdupload-to-stitch上传本地资源到 Stitch 项目upload-to-stitch/SKILL.md️ stitch-utilities设计与建站助手技能一句话说明源码位置stitch-loop接力棒式循环自动生成多页网站stitch-loop/SKILL.mdenhance-prompt把模糊想法润色成高质量 Stitch 提示词enhance-prompt/SKILL.mddesign-md分析项目并生成语义化 DESIGN.mddesign-md/SKILL.mdtaste-design生成高级感反模板化的设计规范taste-design/SKILL.mdsite-md生成网站愿景与路线图文档site-md/SKILL.md两个插件的元信息分别定义在 stitch-design/plugin.json 和 stitch-utilities/plugin.json 中可以看到作者、版本与关键词。五、实战演示让 Claude Code 替你画页面安装完成后直接在 Claude Code 对话框输入自然语言即可例如帮我用 Stitch 生成一个恋爱约会灵感 App 的浏览页AI 会自动调用 generate-design 技能并且会先走一套提示词增强流水线——自动补全平台、页面类型、UI/UX 专业术语再把模糊描述结构化为 Stitch 能理解的布局指令。你完全不需要自己研究 Stitch 的提示词写法。想体验单条指令生成整站的效果试试 stitch-loop用 Stitch 帮我搭一个 5 页的开发者个人网站它采用接力棒模式每生成一页就把下一页任务写入.stitch/next-prompt.md持续迭代直到整站完成。机制细节见 stitch-loop 说明。六、只想装个别技能用 npx skills 选择性安装如果你只想要某一个技能比如只装提示词增强可以跳过整套插件npx skills add google-labs-code/stitch-skills⚠️注意技能之间存在依赖关系选择性安装时要一并装齐所需依赖否则会断链。想查帮助文档执行npx plugins --help或npx skills --help。七、常见问题 FAQQ1安装后 Claude Code 里看不到新技能确认命令带的是--scope project且你在项目根目录下执行。技能按项目级安装换目录会消失。Q2为什么技能调用时报找不到 stitch 工具99% 是 Stitch MCP 服务器没配好回到第三步检查 MCP 配置。Q3一个项目能同时装 Claude Code 和 Cursor 的插件吗可以两者安装参数不同、互不冲突。Q4怎么了解如何贡献新技能参考 CONTRIBUTING.md项目遵循标准技能目录结构SKILL.md指令核心scripts/校验脚本references/知识库examples/范例。八、总结一条命令解锁的设计工作流步骤操作耗时1️⃣ 配置 Stitch MCP按官方文档注册服务器~5 min2️⃣ 一条命令安装npx plugins add ... --target claude-code~1 min3️⃣ 自然语言开工生成一个 XX 页面即刻stitch-skills 把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），仅供参考 Claude Code一条命令安装stitch-skills：npx plugins实战教程
Claude Code一条命令安装stitch-skillsnpx plugins实战教程【免费下载链接】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-skillsstitch-skills是专为 Google StitchAI 界面设计平台打造的一组Agent Skills 插件库让 Claude Code、Cursor、Gemini CLI 等 AI 编程助手直接获得设计超能力——用一句自然语言生成设计稿、提取设计系统、批量搭建多页网站。本教程教你用一条npx plugins命令把整套技能快速装进 Claude Code5 分钟即可上手实战。一、stitch-skills 是什么为什么值得装一句话理解它给你的 AI 编程助手装上了设计师的手。普通场景下你让 AI 写前端代码装上 stitch-skills 后AI 还能帮你从文字生成界面说做一个移动端浏览页直接产出 Stitch 设计稿提取设计系统扫描现有前端源码自动沉淀成 DESIGN.md 规范一键建站单条提示词驱动多页网站循环构建代码与设计互转前端代码转设计稿、设计稿转静态 HTML它遵循 Agent Skills 开放标准每个技能都是标准化的SKILL.md目录可被多种编码智能体识别安装即生效。二、一条命令安装到 Claude Code最快方法确保已安装 Node.js 并登录 Claude Code在项目根目录执行npx plugins add google-labs-code/stitch-skills --scope project --target claude-code✅ 这条命令会从插件市场拉取 stitch-skills 仓库识别其中所有符合标准的技能目录安装到当前项目--scope project只影响本项目不污染全局环境 如果是给 Cursor 安装把参数换成--scope workspace --target cursor即可同样一条命令搞定。安装命令详情可参考官方说明README.md三、安装前必备条件先配置 Stitch MCP⚠️这是新手最容易踩的坑stitch-skills 的所有技能都依赖Stitch MCP 服务器。安装完插件后请确认已按 Stitch 官方文档完成 MCP 服务器注册已配置好对应的环境变量与凭据在 Claude Code 中能看到stitch*前缀的工具如list_projects、generate_screen_from_textMCP 配置完成前技能命令会找不到工具属正常现象先补上这一步再重试。四、装完能得到哪些技能插件清单一览安装完成后你会得到两大插件共 11 个开箱即用的技能 stitch-design核心设计工作流技能一句话说明源码位置generate-design从文字/图片生成新屏幕、编辑现有屏幕generate-design/SKILL.mdcode-to-design前端代码转 Stitch 设计稿code-to-design/SKILL.mdextract-design-md从源码提取完整设计系统extract-design-md/SKILL.mdmanage-design-system上传并应用主题到所有屏幕manage-design-system/SKILL.mdextract-static-html提取运行中网页的静态 HTMLextract-static-html/SKILL.mdupload-to-stitch上传本地资源到 Stitch 项目upload-to-stitch/SKILL.md️ stitch-utilities设计与建站助手技能一句话说明源码位置stitch-loop接力棒式循环自动生成多页网站stitch-loop/SKILL.mdenhance-prompt把模糊想法润色成高质量 Stitch 提示词enhance-prompt/SKILL.mddesign-md分析项目并生成语义化 DESIGN.mddesign-md/SKILL.mdtaste-design生成高级感反模板化的设计规范taste-design/SKILL.mdsite-md生成网站愿景与路线图文档site-md/SKILL.md两个插件的元信息分别定义在 stitch-design/plugin.json 和 stitch-utilities/plugin.json 中可以看到作者、版本与关键词。五、实战演示让 Claude Code 替你画页面安装完成后直接在 Claude Code 对话框输入自然语言即可例如帮我用 Stitch 生成一个恋爱约会灵感 App 的浏览页AI 会自动调用 generate-design 技能并且会先走一套提示词增强流水线——自动补全平台、页面类型、UI/UX 专业术语再把模糊描述结构化为 Stitch 能理解的布局指令。你完全不需要自己研究 Stitch 的提示词写法。想体验单条指令生成整站的效果试试 stitch-loop用 Stitch 帮我搭一个 5 页的开发者个人网站它采用接力棒模式每生成一页就把下一页任务写入.stitch/next-prompt.md持续迭代直到整站完成。机制细节见 stitch-loop 说明。六、只想装个别技能用 npx skills 选择性安装如果你只想要某一个技能比如只装提示词增强可以跳过整套插件npx skills add google-labs-code/stitch-skills⚠️注意技能之间存在依赖关系选择性安装时要一并装齐所需依赖否则会断链。想查帮助文档执行npx plugins --help或npx skills --help。七、常见问题 FAQQ1安装后 Claude Code 里看不到新技能确认命令带的是--scope project且你在项目根目录下执行。技能按项目级安装换目录会消失。Q2为什么技能调用时报找不到 stitch 工具99% 是 Stitch MCP 服务器没配好回到第三步检查 MCP 配置。Q3一个项目能同时装 Claude Code 和 Cursor 的插件吗可以两者安装参数不同、互不冲突。Q4怎么了解如何贡献新技能参考 CONTRIBUTING.md项目遵循标准技能目录结构SKILL.md指令核心scripts/校验脚本references/知识库examples/范例。八、总结一条命令解锁的设计工作流步骤操作耗时1️⃣ 配置 Stitch MCP按官方文档注册服务器~5 min2️⃣ 一条命令安装npx plugins add ... --target claude-code~1 min3️⃣ 自然语言开工生成一个 XX 页面即刻stitch-skills 把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），仅供参考