Google为何开源stitch-skills一个面向AI设计与设计到代码的Agent 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-skillsstitch-skills是 Google 开源的一个Agent Skills 技能库专为 Google StitchAI 设计工具的 MCP 服务器打造。它把AI 生成界面设计和设计到代码Design to Code这类复杂流程拆解成一个个开箱即用的技能Skill让 Antigravity、Gemini CLI、Claude Code、Cursor 等 AI 编程助手都能直接调用实现从一句话生成 UI、设计系统提取到多页面网站自动搭建的完整工作流。对新手来说你不需要理解底层协议——只要安装插件用自然语言下指令Agent 就会自动完成剩下的事。为什么 Google 要开源这套技能库核心原因有三点拥抱 Agent Skills 开放标准每个技能都遵循 Agent Skills 开放标准不绑定单一平台任何支持该标准的编码 Agent 都能加载补齐设计到代码链路Google Stitch 负责 AI 生成设计而 stitch-skills 负责让代码 Agent 与 Stitch 无缝协作打通生成设计 → 管理设计系统 → 转回代码的闭环社区共建官方在 CONTRIBUTING.md 中鼓励社区提交新技能比如把 Stitch HTML 转换成其他 UI 框架并做语法校验。3 大插件stitch-skills 能做什么技能库按插件plugin组织每个插件由 plugin.json 描述元信息技能目录位于plugins/下。1️⃣ 设计生成一句话生成 UI 界面stitch-design插件是核心其中 generate-design 技能可以从文本或图片生成新屏幕、编辑现有界面、批量生成设计变体为手机 App 做一个浏览页展示约会和浪漫之夜的好点子它会先自动优化你的提示词把做个好看的头部翻译成带毛玻璃效果的吸顶导航栏这类专业 UI 术语再调用 Stitch 生成界面。参考词库见 references/prompt-keywords.md。2️⃣ 代码转设计把现有前端项目搬进Stitch反向流程同样重要。code-to-design 技能能把 React、Vue、Angular 等现有前端代码转换为 Stitch 设计用extract-static-html提取自包含的静态 HTML 快照用extract-design-md从源码反向提取设计系统颜色、字体、间距产出DESIGN.md用upload-to-stitch把 HTML 和设计系统上传到 Stitch 项目之后就能在 Stitch 里对原有界面继续用 AI 迭代改进。相关实现可查看 plugins/stitch-design/skills/extract-design-md/ 下的多框架参考React、Vue、Svelte、Angular、纯 CSS。3️⃣ 实用工具让 AI 设计更懂审美stitch-utilities插件提供了一组提效技能见 plugins/stitch-utilities/plugin.json技能作用enhance-prompt把模糊的 UI 想法变成专业、优化的生成提示词design-md分析 Stitch 项目自动合成语义化设计系统文件taste-design生成反 AI 套路的高品质设计规范杜绝千篇一律的界面stitch-loop通过接力棒机制从单条提示词自主搭建多页面完整网站其中stitch-loop的接力棒系统很有意思Agent 每完成一页就把下一页任务写入.stitch/next-prompt.md循环往复直到整个网站搭建完成。技能库结构每个技能如何组织每个技能都是标准的 Agent Skills 目录结构清晰值得学习skills/skill-name/ ├── SKILL.md — Agent 的任务手册核心指令 ├── scripts/ — 可执行脚本校验、网络请求 ├── resources/ — 知识库清单与风格指南 └── examples/ — 高质量的参考示例以 extract-static-html 为例它的 scripts/ 目录里就有snapshot.ts截取页面快照、extract_inline_html.ts提取内联 HTML等工具脚本配合 SKILL.md 一起工作。快速安装指南3 种接入方式前置条件需要先按 Stitch 官方文档配置好Stitch MCP 服务器。方式一Codex 插件市场推荐codex plugin marketplace add google-labs-code/stitch-skills --ref main注册市场后按需安装stitch-design、stitch-build、stitch-utilities三个插件。方式二Claude Code / Cursor 一行命令# Claude Code安装到当前项目 npx plugins add google-labs-code/stitch-skills --scope project --target claude-code # Cursor安装到当前工作区 npx plugins add google-labs-code/stitch-skills --scope workspace --target cursor方式三手动克隆适合 OpenCode 等工具git clone https://gitcode.com/GitHub_Trending/st/stitch-skills把plugins/*/skills/下需要的技能文件夹复制到 Agent 的技能发现路径如.opencode/skills/即可。⚠️ 注意技能之间常有依赖关系例如code-to-design会串联调用另外 3 个技能选择性安装时请确认依赖完整。适合谁用设计师用generate-design快速产出多套设计方案与变体前端开发者用code-to-design把存量项目导入 Stitch 做 AI 化迭代再用设计到代码技能回传组件独立开发者用stitch-loopsite-md从一句话需求生成多页面网站Agent 开发者把这里的 SKILL.md 写法当作编写自己的 Agent Skills 的最佳模板项目采用 Apache-2.0 协议见 LICENSE可自由用于商业与学习。需要注意的是官方在 README 中声明这并非 Google 官方支持的产品属于社区与实验室风格的开放项目。一句话总结stitch-skills 证明了设计到代码的 AI 工作流可以被标准化、可组合、跨工具复用——这正是 Google 开源它的最大价值所在。【免费下载链接】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），仅供参考