Google Stitch Design Skills
围绕 Google Stitch MCP 完成界面生成、设计系统管理、代码转设计和 React/React Native 构建。
技能说明
围绕 Google Stitch MCP 的设计到代码技能集合，提供界面生成、设计系统、代码转设计、React/React Native 构建和辅助工具。适合 Codex、Claude Code、Cursor、Antigravity、Gemini CLI 和 OpenCode。仓库使用 Apache-2.0，但 README 明确说明它不是 Google 官方产品；使用前必须配置 Stitch MCP、账号和环境变量，并检查技能中的网络、读写和命令权限。
关于此技能
围绕 Google Stitch MCP 的设计到代码技能集合，覆盖从文本或图片生成界面、设计系统管理、代码转设计、React/React Native 构建和多页面网站工作流。
核心能力
生成和编辑界面
stitch::generate-design 可从文字、图片或 mockup 生成页面，编辑已有页面并创建设计变体；生成前会先增强提示词和检查项目设计系统。
设计系统和代码转换
支持提取 DESIGN.md、管理设计令牌、把前端代码转成 Stitch 设计，并将 Stitch 页面转换为模块化 React 或 React Native 组件。
多平台插件
提供 stitch-design、stitch-build、stitch-utilities 三组插件，可在 Codex、Claude Code、Cursor、Antigravity、Gemini CLI 和 OpenCode 中使用。
适用场景
从想法快速生成页面
把产品需求、截图或 mockup 转成 Stitch 页面，先统一设计系统，再逐步编辑优化。
设计转 React 或 React Native
把 Stitch 页面转换成模块化组件，抽离数据和 hooks，并按规则处理路由、主题和深色模式。
设计系统维护
从现有前端提取 DESIGN.md，上传到 Stitch 项目并应用到多张页面。
使用步骤
- 01
准备 Stitch MCP
先按 Google Stitch MCP 文档配置服务、账号和所需环境变量，确认 Agent 能访问 Stitch 工具。
- 02
安装插件
Codex 可添加 google-labs-code/stitch-skills marketplace 后安装 stitch-design、stitch-build 或 stitch-utilities；Claude Code 和 Cursor 可用 npx plugins add。
- 03
选择具体技能
生成页面前先查项目和设计系统；转换 React 前必须获取所有页面、下载 HTML/截图并完成视觉检查。
- 04
校验和落地
按技能要求抽离组件、数据和 hooks，使用设计令牌，修复占位链接，并在允许的情况下运行校验。
常见问题
使用前需要什么？+
这些技能依赖 Google Stitch MCP 服务，需要先完成 Stitch 的 MCP 配置并准备账号或环境变量；没有 MCP 时不能执行核心生成和读取操作。
支持哪些 Agent？+
README 明确兼容 Codex、Antigravity、Gemini CLI、Claude Code、Cursor 和 OpenCode；OpenCode 需要手动复制技能，并可能要把 stitch:: 前缀改成小写连字符名称。
它是 Google 官方产品吗？+
不是。仓库 README 明确说明项目不属于 Google 官方产品，也不在 Google 开源软件漏洞奖励计划范围内。
许可证和安全风险是什么？+
仓库使用 Apache-2.0。MCP 会接触项目设计和账号配置，安装前应确认远程端点和凭据来源；技能包含 Bash、读写和网络工具权限，生成或下载文件前要检查目标路径。
codex plugin marketplace add google-labs-code/stitch-skills --ref main