用 Google Stitch 自动化设计到代码

stitch-skills

一套专为 Google Stitch MCP 服务器设计的代理技能库，支持从设计生成到前端代码实现的自动化工作流。

google-labs-code

开发者 / 设计师

编程开发图片设计已认证开源许可: Apache

试试这样做

将 Stitch 项目中的设计稿转换为 React 组件，并确保其符合我们现有的设计系统规范。

为我的移动端应用生成一个包含浪漫约会点子功能的浏览页面设计。

扫描项目源代码并提取设计系统到 .stitch/DESIGN.md 文件中。

一组用于 Google Stitch 的代理技能和插件，遵循 Agent Skills 开放标准。兼容 Codex、Antigravity、Gemini CLI、Claude Code、Cursor 和 OpenCode 等编码代理（OpenCode 需手动安装）。

这些技能需要 Stitch MCP 服务器在您的代理环境中配置并运行。请按照 Stitch MCP 设置指南注册服务器并设置相应的环境变量和凭证。

文档导航提示： 如果 stitch.withgoogle.com/docs 上的链接重定向错误，请在同一主机下打开目标路径（例如 https://stitch.withgoogle.com/docs/learn/device-types/）。

在 Stitch 中创建、管理和优化设计的核心设计工作流。

stitch::code-to-design
通过 HTML 提取 + 设计系统 + 上传，将前端代码（React、Vue 等）转换为 Stitch 设计。
示例：
```
将 /path/to/dashboard 的前端代码上传到名为 'Dashboard-Migration-2026' 的 Stitch 项目。  
```

stitch::generate-design
从文本或图片生成新屏幕，编辑现有屏幕，创建设计变体。
示例：

为移动应用制作一个用于浪漫和约会夜想法的浏览标签。

编辑登录屏幕，添加“记住我”复选框，并将按钮颜色改为蓝色。

生成3个主页设计变体，包含深色模式和高密度布局。

stitch::manage-design-system
在 Stitch 中管理设计系统 — 上传 DESIGN.md 并将主题应用到屏幕。
示例：
```
从 .stitch/DESIGN.md 上传我们的设计系统，并将其应用到所有屏幕。  
```
stitch::extract-design-md
直接从前端源代码提取全面的 DESIGN.md。
示例：
```
扫描 /src 并将设计系统提取到 .stitch/DESIGN.md。  
```
stitch::extract-static-html
从运行中的 Web 应用程序提取自包含的静态 HTML，内联 CSS 和图片。
示例：
```
提取 http://localhost:3000/profile 的静态 HTML 快照。  
```
stitch::upload-to-stitch
将本地资源（图片、模型、HTML）上传到 Stitch 项目。
示例：
```
将 .stitch/landing_page.html 上传到 Stitch 项目 projects/987654321。  
```

从 Stitch 设计生成代码、集成框架和编译资源。

stitch::react-components
将 Stitch 屏幕转换为 React 组件系统，带自动验证和设计 token 一致性。
示例：

将 Stitch 项目 projects/123 中的所有屏幕转换为 React 组件。

同步应用程序至 Stitch 项目 13039335308618232534 的最新更新。

stitch::react-native
将 Stitch HTML 设计转换为生产就绪的 React Native 组件，包含 StyleSheet 和平台特定代码。
示例：

将 Stitch 设计转换为具有适当主题和导航的 React Native 组件。

同步应用程序至 Stitch 项目 13039335308618232534 的最新更新。

remotion
使用 Remotion 从 Stitch 项目生成导览视频，带有平滑过渡和缩放效果。
示例：
```
生成 Stitch 项目 projects/456 的导览视频。  
```

shadcn-ui
集成和构建 shadcn/ui 组件的专家指导。
示例：

设置 shadcn/ui 并构建一个带有排序和过滤功能的数据表格。

react-vite-dashboard
将 Stitch 屏幕转换为 React + Vite 仪表盘，使用 TanStack Query、DESIGN.md token 和 Web3 读取模式。
示例：
```
使用我们的 DESIGN.md 从此 Stitch 屏幕构建一个 DeFi 投资组合仪表盘。  
```

增强提示、生成设计规范和执行设计标准的支持工具。

design-md
分析 Stitch 项目并生成语义化的综合 DESIGN.md 文件。
示例：
```
分析 Stitch 项目 projects/123 并生成 DESIGN.md。  
```
enhance-prompt
将模糊的 UI 想法转化为优化过的、适合 Stitch 的提示，包含 UI/UX 关键词。
示例：
```
增强这个提示：“制作一个设置页面”。  
```
stitch-loop
从单个提示生成完整的多页面网站，带自动验证。
示例：
```
使用 Stitch 构建一个 5 页的个人作品集网站。  
```
taste-design
生成强制执行高级、反通用 UI 标准的 DESIGN.md 文件。
示例：
```
生成一个具有严格排版和校准颜色的高级 DESIGN.md。  
```

这些技能并非 Google 官方支持产品。该项目不参与 Google 开源软件漏洞奖励计划。
技能之间可能存在相互依赖。如果选择选择性安装，请确保包含所有必需的依赖项。
OpenCode 兼容性： OpenCode 要求技能 name frontmatter 为小写 kebab-case 且与目录名匹配。使用 stitch::… 命名（或其他非 kebab 形式）的技能需要在 name 字段和文件夹重命名后才能被 OpenCode 加载。额外的 frontmatter（如 allowed-tools）将被忽略。技能指令内部的工具名称可能与 OpenCode 内置工具不同（例如 webfetch / bash 代替 web_fetch / run_command）。在 OpenCode 中适配技能时，建议使用 OpenCode 工具名称。