Stitch Design Skills面向 AI 编码代理的 Google 设计工作流技能库核心观点stitch-skills是 Google Labs 开源的一套Agent Skills代理技能集合专为 Google Stitch 设计平台量身打造。它遵循 Agent Skills 开放标准可无缝接入多种主流 AI 编码代理Codex、Gemini CLI、Claude Code、Cursor 等实现从UI 设计生成 → 代码构建 → 辅助工具的全链路自动化。关键信息一、三大插件模块总览插件包定位核心能力stitch-design设计工作流生成设计稿、管理设计系统、代码转设计stitch-build代码构建设计稿转 React / React Native 组件、生成演示视频stitch-utilities辅助工具Prompt 增强、设计规范生成、多页面自动构建二、快速安装方式方式 1插件方式推荐全量安装Codex CLI 安装codex plugin marketplace add google-labs-code/stitch-skills --ref main \ --sparse .agents/plugins \ --sparse plugins/stitch-design \ --sparse plugins/stitch-build \ --sparse plugins/stitch-utilities--sparse参数可选限定只拉取指定路径加快克隆速度。Claude Code 安装# 安装到当前项目作用域 npx plugins add google-labs-code/stitch-skills --scope project --target claude-codeCursor 安装# 安装到当前工作区作用域 npx plugins add google-labs-code/stitch-skills --scope workspace --target cursor方式 2技能方式按需选装npx skills add google-labs-code/stitch-skills⚠️ 注意Stitch Design 各技能之间存在相互依赖选装时须确保依赖项完整。三、各模块技能详解 设计模块stitch-design技能功能描述示例 Promptstitch::code-to-design将前端代码React/Vue 等转为 Stitch 设计稿将/path/to/dashboard的代码上传到名为 Dashboard-Migration-2026 的 Stitch 项目stitch::generate-design从文本/图片生成界面、编辑已有界面、生成设计变体为约会 App 设计一个浏览标签页stitch::manage-design-system管理 Stitch 设计系统上传 DESIGN.md 并应用主题上传设计系统并应用到所有界面stitch::extract-design-md从前端源码中提取完整的 DESIGN.md 设计规范扫描/src并提取设计系统到.stitch/DESIGN.mdstitch::extract-static-html从运行中的 Web 应用提取内联 CSS/图片的静态 HTML提取localhost:3000/profile的静态 HTML 快照stitch::upload-to-stitch上传本地资源图片、mockup、HTML到 Stitch 项目上传.stitch/landing_page.html到指定 Stitch 项目️ 构建模块stitch-build技能功能描述示例 Promptstitch::react-components将 Stitch 界面转为 React 组件系统含设计 Token 一致性校验将 Stitch 项目的所有界面转为 React 组件stitch::react-native将 Stitch HTML 设计转为生产级 React Native 组件转为含主题和导航的 React Native 组件remotion从 Stitch 项目生成带平滑过渡动效的演示视频为 Stitch 项目生成演示视频shadcn-ui集成 shadcn/ui 组件库的专家级指导搭建 shadcn/ui 并构建带排序过滤的数据表格️ 工具模块stitch-utilities技能功能描述示例 Promptdesign-md分析 Stitch 项目并生成语义化 DESIGN.md 规范文档分析项目并生成 DESIGN.mdenhance-prompt将模糊的 UI 想法转化为精准的 Stitch 优化 Prompt增强这个 Prompt做一个设置页面stitch-loop从单个 Prompt 生成完整的多页面网站含自动校验用 Stitch 构建一个 5 页的作品集网站taste-design生成强制执行高品质、反通用化 UI 标准的 DESIGN.md生成带严格排版和精准配色的高端 DESIGN.md四、仓库目录结构plugins/ ├── stitch-design/ — 核心设计工作流插件 │ ├── plugin.json │ └── skills/ │ ├── code-to-design/ │ ├── generate-design/ │ ├── manage-design-system/ │ ├── extract-design-md/ │ ├── extract-static-html/ │ └── upload-to-stitch/ ├── stitch-build/ — 代码生成与构建插件 │ └── skills/ │ ├── react-components/ │ ├── react-native/ │ ├── remotion/ │ └── shadcn-ui/ └── stitch-utilities/ — 设计工具与辅助插件 └── skills/ ├── design-md/ ├── enhance-prompt/ ├── stitch-loop/ └── taste-design/五、单个技能的标准文件结构Agent Skills 规范skills/skill-name/ ├── SKILL.md — 代理的任务控制中心描述技能目标与行为 ├── scripts/ — 可执行脚本验证 网络请求 ├── resources/ — 知识库检查清单 风格指南 └── examples/ — 语法有效的黄金参考示例六、前置条件使用前必须配置并运行Stitch MCP Server参考 官方配置文档完成服务器注册及环境变量/凭据设置。七、适合新增的技能方向官方建议Validation验证类将 Stitch HTML 转换为其他 UI 框架并验证语法Decoupling Data数据解耦类将静态设计内容转为外部 mock 数据文件Generate Designs设计生成类基于给定数据集在 Stitch 中生成新设计界面个人启发设计与开发的鸿沟正在被 AI 抹平code-to-design和react-components这两个技能实现了设计与代码的双向转化意味着设计师和开发者可以真正用同一套资产协作减少重复劳动。Prompt 工程 本身也需要工具化enhance-prompt技能的存在说明即使是给 AI 写指令这件事也可以进一步被 AI 优化——这是一种元自动化思路值得借鉴到其他场景。Agent Skills 开放标准的意义统一的SKILL.md scripts resources examples文件结构让技能像 npm 包一样可复用、可分发预示着 AI 代理的能力扩展将走向生态化和标准化。延伸思考DESIGN.md作为设计系统的单一真相来源是否可行代码库里通常有README.md未来设计系统是否应该像代码规范一样以文本文件DESIGN.md存在于版本库中由 AI 自动维护这对设计协作流程会产生怎样的颠覆Agent Skills 开放标准能否成为 AI 工具链的 npm当前 MCP、Agent Skills 等协议百花齐放谁会成为 AI 代理能力扩展的事实标准各家编码代理Claude Code、Cursor、Copilot的插件生态割裂问题如何解决设计生成的质量护城河在哪里taste-design技能强调反通用化、高品质 UI 标准这暗示 AI 生成的设计容易陷入同质化。未来如何在自动化与品牌独特性之间取得平衡是产品设计团队需要深度思考的命题。