用 Google Stitch 自动化设计到代码

实现从设计稿到 React/React Native 代码的自动化转换，并快速构建高质量的 UI 组件与仪表盘。

详细介绍

Stitch Design Skills

一组用于 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-design ）

在 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-build ）

从 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 投资组合仪表盘。

实用工具（ stitch-utilities ）

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

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 工具名称。