技能介绍

Stitch Design Skills 是 google-labs-code 做的一组用于 Google Stitch 的代理技能和插件，遵循 Agent Skills 开放标准。它把「设计生成 → 前端代码实现」这条链路自动化：实现从设计稿到 React / React Native 代码的转换，并快速构建高质量的 UI 组件与仪表盘。

兼容 Codex、Antigravity、Gemini CLI、Claude Code、Cursor 和 OpenCode 等编码代理（OpenCode 需手动安装）。

需要说明的是，这些技能并非 Google 官方支持产品，该项目也不参与 Google 开源软件漏洞奖励计划。

适用场景

  • 把已有的前端项目反向搬进 Stitch：用 HTML 提取 + 设计系统 + 上传，将 React、Vue 等代码转成 Stitch 设计
  • 设计阶段：从文本或图片生成新屏幕、编辑现有屏幕、批量生成设计变体
  • 建立与同步设计系统：从前端源码提取 DESIGN.md，或在 Stitch 中上传并应用主题
  • 实现阶段：把 Stitch 屏幕转成 React 组件系统、React Native 组件或 React + Vite 仪表盘
  • 从单个提示生成完整多页面网站，或为 Stitch 项目产出导览视频

核心能力

技能按三个插件分组：

设计（`stitch-design`）——在 Stitch 中创建、管理和优化设计的核心工作流：

  • stitch::code-to-design：通过 HTML 提取 + 设计系统 + 上传，将前端代码（React、Vue 等）转换为 Stitch 设计
  • stitch::generate-design：从文本或图片生成新屏幕，编辑现有屏幕，创建设计变体
  • stitch::manage-design-system：在 Stitch 中管理设计系统——上传 DESIGN.md 并将主题应用到屏幕
  • stitch::extract-design-md：直接从前端源代码提取全面的 DESIGN.md
  • stitch::extract-static-html：从运行中的 Web 应用程序提取自包含的静态 HTML，内联 CSS 和图片
  • stitch::upload-to-stitch：将本地资源（图片、模型、HTML）上传到 Stitch 项目

构建（`stitch-build`）——从 Stitch 设计生成代码、集成框架和编译资源：

  • stitch::react-components：将 Stitch 屏幕转换为 React 组件系统，带自动验证和设计 token 一致性
  • stitch::react-native：将 Stitch HTML 设计转换为生产就绪的 React Native 组件，包含 StyleSheet 和平台特定代码
  • remotion：使用 Remotion 从 Stitch 项目生成导览视频，带有平滑过渡和缩放效果
  • shadcn-ui：集成和构建 shadcn/ui 组件的专家指导
  • react-vite-dashboard：将 Stitch 屏幕转换为 React + Vite 仪表盘，使用 TanStack Query、DESIGN.md token 和 Web3 读取模式

实用工具（`stitch-utilities`）——增强提示、生成设计规范和执行设计标准的支持工具：

  • design-md：分析 Stitch 项目并生成语义化的综合 DESIGN.md 文件
  • enhance-prompt：将模糊的 UI 想法转化为优化过的、适合 Stitch 的提示，包含 UI/UX 关键词
  • stitch-loop：从单个提示生成完整的多页面网站，带自动验证
  • taste-design：生成强制执行高级、反通用 UI 标准的 DESIGN.md 文件

需要注意：技能之间可能存在相互依赖，如果选择选择性安装，请确保包含所有必需的依赖项。

效果预览

用 Google Stitch 自动化设计到代码 preview

工作方式

整体流程围绕 Stitch 项目展开：先在 Stitch 里生成或导入设计（屏幕、变体、设计系统），再由构建类技能把屏幕拉下来转成代码；设计系统以 DESIGN.md 为中间产物在源码与 Stitch 之间双向流转，代码生成时用设计 token 做一致性校验。

一组技能也可以串起来跑，例如用 extract-design-md 从现有源码提取设计系统、用 manage-design-system 上传并应用到屏幕、最后用 stitch::react-components 转回组件——这也是「同步应用程序至 Stitch 项目最新更新」这条工作流的典型形态。

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

你需要提供

  • 在代理环境中配置并运行 Stitch MCP 服务器，按 Stitch MCP 设置指南 注册服务器并设置相应的环境变量和凭证
  • 一个可用的编码代理（Codex、Antigravity、Gemini CLI、Claude Code、Cursor、OpenCode 等）
  • 如要反向转换，需要一个可运行的前端项目或可访问的页面地址
  • 使用 OpenCode 时需额外适配：技能 name frontmatter 必须为小写 kebab-case 且与目录名匹配，stitch::… 这类命名需要在 name 字段和文件夹重命名后才能被加载；额外的 frontmatter（如 allowed-tools）会被忽略，技能指令内部的工具名称也可能与 OpenCode 内置工具不同（例如 webfetch / bash 代替 web_fetch / run_command），适配时建议使用 OpenCode 工具名称

你会获得

  • 上传到 Stitch 项目的设计稿与设计变体
  • 从源码提取出的 DESIGN.md 设计系统文件
  • React 组件系统、React Native 组件或 React + Vite 仪表盘代码
  • 自包含的静态 HTML 快照（内联 CSS 与图片）
  • 由 Remotion 生成的 Stitch 项目导览视频
  • 增强后的、适合 Stitch 的提示词

使用示例

将 /path/to/dashboard 的前端代码上传到名为 'Dashboard-Migration-2026' 的 Stitch 项目。
为我的移动端应用生成一个包含浪漫约会点子功能的浏览页面设计。
编辑登录屏幕，添加“记住我”复选框，并将按钮颜色改为蓝色。
生成3个主页设计变体，包含深色模式和高密度布局。
扫描项目源代码并提取设计系统到 .stitch/DESIGN.md 文件中。
从 .stitch/DESIGN.md 上传我们的设计系统，并将其应用到所有屏幕。
将 Stitch 项目 projects/123 中的所有屏幕转换为 React 组件。
将 Stitch 设计转换为具有适当主题和导航的 React Native 组件。
使用我们的 DESIGN.md 从此 Stitch 屏幕构建一个 DeFi 投资组合仪表盘。
使用 Stitch 构建一个 5 页的个人作品集网站。