Google Stitch Skills 实战：从 React Dashboard 到设计与组件

如果你搜索过 Google Stitch Skills、Stitch MCP 或 Stitch Code-to-Design，可能会发现很多资料把 Stitch 网页产品、MCP 和 Agent Skills 混在一起。本文基于 Google Labs 最新的 stitch-skills GitHub 仓库，介绍这个项目的实际作用、插件结构、使用前提和前端开发工作流。

Google Stitch Skills 是什么？

google-labs-code/stitch-skills 是一组遵循 Agent Skills 开放规范的插件和技能，用来让 Coding Agent 调用 Google Stitch 的设计能力。

它不是独立的 UI 编辑器，也不是 Stitch 网页产品本身。它更像是连接 Coding Agent、Stitch MCP 和 Google Stitch 的工作流层：

Coding Agent
    ↓
Stitch MCP
    ↓
Google Stitch
    ↓
设计、原型和代码工作流

GitHub README 当前明确说明，这些 Skills 需要先配置并运行 Stitch MCP。仅复制技能文件，不能独立完成设计生成，也不能绕过 Stitch 的认证和环境配置。

注意：该 GitHub 仓库声明自己是 Google Labs 相关的开源项目，并不是 Google 官方支持产品。使用时应以仓库当前 README 和 Stitch MCP 文档为准。

Stitch Skills 能做什么？

当前仓库主要分为三个插件：

插件	主要作用	代表技能
stitch-design	生成、导入和管理 Stitch 设计	generate-design、code-to-design、manage-design-system
stitch-build	将设计转换为前端实现	react-components、react-native、shadcn-ui、remotion
stitch-utilities	提示词、设计规范和工作流辅助	enhance-prompt、design-md、stitch-loop、taste-design

仓库近期还增加了 site-md 相关能力，用于生成项目级的网站约束文件。由于仓库仍在持续更新，安装前建议查看 GitHub README 和 plugins/ 目录中的最新内容。

stitch-design：从需求到设计

generate-design

generate-design 用于让 Agent 生成新页面、编辑已有页面或创建设计变体。例如：

Make a responsive analytics dashboard for a small SaaS team.
Include KPI cards, a weekly revenue chart, recent activity,
and a clear action for inviting a teammate.
Use a compact desktop layout and bottom navigation on mobile.

它适合快速探索产品方向，但不应该替代页面状态、业务规则和交互验收。

code-to-design

code-to-design 用于把 React、Vue 等现有前端代码带回 Stitch：

Upload the frontend code at /src/pages/dashboard
into a Stitch project named "Analytics Dashboard Redesign".
Identify the navigation hierarchy, typography scale,
spacing system, color roles, and reusable card patterns.

适合以下场景：

• 旧项目没有完整设计稿。
• 多个页面风格不统一。
• 想在修改代码前先探索新的视觉方向。
• 希望从现有实现中提取设计系统。

它主要提取界面结构和视觉线索，并不等于理解完整业务逻辑。权限、数据请求、表单校验和复杂交互仍然需要开发者检查。

manage-design-system

这个技能用于上传和应用设计系统，让多个页面使用一致的颜色、字体、间距和组件规则。它通常会和 DESIGN.md 一起使用。

stitch-build：从设计到 React 组件

react-components

react-components 用于把 Stitch 页面转换为 React 组件系统。一个更稳妥的提示词应该明确要求 Agent 保留项目现有的业务代码：

Convert the selected Stitch screens into React components.
Use the existing routing and data-fetching patterns.
Reuse the project's UI primitives and keep design tokens centralized.
Do not add mock business logic or replace existing API calls.

生成后建议按照下面的顺序接入项目：

Stitch 组件
    ↓
检查结构和样式
    ↓
接入真实数据
    ↓
补充 loading / empty / error 状态
    ↓
检查响应式和无障碍
    ↓
运行 lint、测试和构建

react-native、shadcn-ui 和其他技能

• react-native：将 Stitch HTML 设计转换为 React Native 组件。
• shadcn-ui：在项目中实现 shadcn/ui 组件和数据界面。
• react-vite-dashboard：面向 React + Vite Dashboard 的实现工作流。
• remotion：根据 Stitch 项目生成产品演示视频。

这些技能是工作流辅助，不代表生成代码可以未经审查直接上线。

stitch-utilities：设计上下文和提示词辅助

enhance-prompt

将模糊的 UI 需求补充为更适合 Stitch 的提示词。例如把：

Make a settings page.

扩展为包含用户目标、信息层级、设备、状态和视觉约束的完整需求。

design-md

分析 Stitch 项目并生成 DESIGN.md。这个文件可以记录：

• 颜色及其使用场景
• 字体层级和信息密度
• 间距、圆角和阴影
• Button、Card、Input、Navigation 规则
• 响应式布局和可访问性要求

例如：

# Design System

## Colors

Primary: #2563EB — 用于主要操作和关键链接
Background: #F8FAFC
Foreground: #0F172A

## Components

Button: 8px radius, solid primary color for the main action
Card: 12px radius, subtle border, no heavy shadow

DESIGN.md 的价值不只是保存颜色值，而是告诉 Agent 什么时候使用某条规则。它更接近设计上下文文件，而不是所有设计工具都统一支持的正式行业标准。

stitch-loop 和 taste-design

• stitch-loop：把多页面设计、构建、验证和下一轮任务组织成循环。
• taste-design：生成更有约束性的设计规范，减少页面风格漂移。

如果只需要生成一个页面，不必一次安装全部插件。根据项目目标选择技能，通常更容易控制依赖和输出结果。

如何安装 Google Stitch Skills？

Claude Code

GitHub README 当前给出的项目级安装方式是：

npx plugins add google-labs-code/stitch-skills \
  --scope project \
  --target claude-code

Cursor

npx plugins add google-labs-code/stitch-skills \
  --scope workspace \
  --target cursor

Codex

Codex 可以先添加 Stitch Skills marketplace，再选择需要的插件：

codex plugin marketplace add google-labs-code/stitch-skills --ref main

OpenCode

OpenCode 不使用 Claude Code 或 Codex 的插件市场格式，需要手动复制技能目录：

mkdir -p .opencode/skills
cp -R plugins/stitch-design/skills/generate-design \
  .opencode/skills/generate-design

README 还提醒，OpenCode 要求 Skill 的 name 使用小写 kebab-case，并与目录名匹配；另外还需要在 opencode.json 中配置 Stitch MCP。

一个完整的 Code-to-Design 实战流程

下面以一个已经运行的 SaaS Dashboard 项目为例。根据当前 code-to-design 技能文档，前置条件是本地开发服务器正在运行，或者项目已经构建出包含 index.html 和静态资源的目录。

先启动项目并确认目标页面可以访问：

npm install
npm run dev

假设页面地址为：

http://localhost:5173/dashboard

如果页面依赖登录、接口或运行时数据，先准备稳定的演示账号或 mock 数据。否则导入结果可能只包含 Loading 状态。

第一步：配置 MCP 和安装 Skills

先按照 Stitch MCP 配置文档 完成认证和环境配置，再安装对应的 Skill。以 Claude Code 为例：

npx plugins add google-labs-code/stitch-skills \
  --scope project \
  --target claude-code

安装 Skills 和连接 Stitch 是两个步骤。Skills 文件本身不能代替 MCP，也不能绕过 Stitch 的账号和认证配置。

第二步：明确项目约束

在调用 Agent 前，先写清楚哪些内容不能被改动：

• 保留现有路由和 API 契约。
• 保留数据结构和业务逻辑。
• 只调整 Dashboard、Analytics 和 Settings 的界面。
• 生成组件后再由开发者接入真实数据。

这样可以避免 Agent 把“重新设计”误解成“重写整个应用”。

第三步：导入现有代码

Use the stitch::code-to-design skill.

Convert the running frontend at http://localhost:5173/dashboard
into a Stitch design in the project named "Analytics Dashboard Redesign".

Keep the existing routes, API contracts, and business behavior unchanged.
Extract the navigation hierarchy, typography scale, spacing system,
color roles, card patterns, table patterns, and responsive behavior.

该技能会串联三个工作：

1. 使用 extract-static-html 提取自包含 HTML。
2. 使用 extract-design-md 从源代码和主题配置中提取设计系统。
3. 使用 upload-to-stitch 上传 HTML 和设计系统到目标 Stitch 项目。

第四步：检查 DESIGN.md

检查生成的 .stitch/DESIGN.md，确认它描述的是跨页面规则，而不是某个页面的偶然细节。重点检查颜色用途、字体层级、间距、圆角、组件规则、响应式行为和可访问性要求。

如果项目还没有 Design System，应先使用 manage-design-system，再使用 generate-design。生成新页面时，提示词应主要描述页面结构、内容和交互；不要重复写完整颜色、字体和主题 token，以免和项目级 Design System 冲突。

第五步：生成和比较设计方向

Generate three redesign directions:
1. Dense enterprise dashboard
2. Calm modern SaaS dashboard
3. Mobile-first analytics dashboard

Keep the existing information hierarchy and primary user tasks.
Focus the comparison on layout and navigation.

变体建议从 3 个开始。当前技能支持通过 variantCount、creativeRange 和 aspects 控制变体范围，确认方向后优先使用针对性编辑，不要反复从零生成。

第六步：下载并审查 HTML 和截图

生成或编辑完成后，将设计产物保存到项目中：

.stitch/
├── designs/
│   ├── dashboard.html
│   ├── dashboard.png
│   └── analytics.png
├── DESIGN.md
└── metadata.json

逐个打开截图检查桌面和移动布局、文字溢出、导航、主要操作、图表、表格和空状态。不要只依赖 Agent 返回的文字描述。

第七步：生成 React 组件

Convert all approved screens in the Stitch project
"Analytics Dashboard Redesign" into modular React components.

Requirements:
- preserve the existing routes and data-fetching logic
- reuse existing UI primitives where possible
- use the current DESIGN.md as the visual source of truth
- replace href="#" placeholders with real application routes
- create separate components for cards, tables, navigation, and filters
- do not add mock business logic

当前 react-components 技能文档还要求：

1. 通过 MCP 获取项目中的每一个 Screen。
2. 使用仓库的 fetch-stitch.sh 下载最新 HTML 和截图。
3. 逐个查看截图并完成视觉审查。
4. 更新 .stitch/metadata.json，记录项目、Screen、尺寸和最后同步时间。
5. 从每个 HTML 的 tailwind.config 提取颜色、字体、间距、圆角和排版 token。
6. 将卡片、表格、导航和筛选器拆成独立组件。

不要直接读取旧的 .stitch/designs/*.html 代替 MCP 获取最新 Screen，也不要复用其他项目遗留的 style-guide.json。

第八步：接回真实项目并验收

生成组件后不要直接覆盖生产代码，建议在分支或临时目录中合并：

生成组件
  ↓
检查组件拆分和设计 token
  ↓
接回真实路由和数据
  ↓
补充 loading / empty / error 状态
  ↓
检查 href、权限、表单和键盘操作
  ↓
运行 lint、测试和构建

至少确认所有 href="#" 已替换为真实路由，Logo、侧边栏和底部导航可用，组件有明确的 Props 类型，并且没有绕开设计 token 的硬编码颜色。

现有 React / Vue 项目
    ↓
code-to-design
    ↓
导入 Stitch
    ↓
生成多个设计方向
    ↓
提取 DESIGN.md
    ↓
react-components
    ↓
合并回现有项目

可以分成五步：

第一步：整理现有页面

选择一个页面或一个页面集合，例如 Dashboard、Analytics 和 Settings。先明确不需要修改的路由、API 和业务逻辑。

第二步：导入 Stitch

让 Agent 提取现有页面中的导航层级、颜色角色、字体层级、间距和重复组件。

第三步：探索新方向

Generate three redesign directions:
1. Dense enterprise dashboard
2. Calm modern SaaS dashboard
3. Mobile-first analytics dashboard

Keep the existing information hierarchy and primary user tasks.

第四步：固定设计规则

Create a DESIGN.md for the selected direction.
Document color roles, typography, spacing, card treatment,
button hierarchy, responsive behavior, and accessibility rules.

第五步：生成并审查组件

Convert the selected screens into React components.
Preserve existing routes and data-fetching logic.
Use the generated DESIGN.md as the visual source of truth.

Stitch Skills 和 Stitch MCP 的区别

名称	作用	是否单独运行
Stitch	Google 的 AI 界面设计产品	否，产品本身提供设计能力
Stitch MCP	让外部 Agent 连接 Stitch 的通道	需要配置和认证
Stitch Skills	设计、构建和辅助工作流	依赖 Stitch MCP
Coding Agent	理解任务并调用 Skills	需要兼容 Agent Skills 的工具

不要把 stitch-skills 理解成一个 React 组件库，也不要把它理解成无需账号和配置的本地生成器。

常见问题

Stitch Skills 是 Google 官方产品吗？

不是。GitHub README 明确说明该仓库不是 Google 官方支持产品。它是 Google Labs 相关的开源 Agent Skills 项目，使用时应以仓库当前文档为准。

需要先配置 Stitch MCP 吗？

需要。仓库 README 将 Stitch MCP 列为前置条件。没有 MCP、认证和对应环境配置，Skills 无法正常调用 Stitch。

生成的 React 代码可以直接上线吗？

不建议。至少需要检查 API、权限、状态处理、无障碍、响应式、性能和安全性。

必须使用 Claude Code 吗？

不必须。当前 README 列出了 Codex、Antigravity、Gemini CLI、Claude Code、Cursor 和 OpenCode。不同工具的安装方式不同，OpenCode 需要手动安装。

是否需要安装全部 Skills？

不需要。可以从 generate-design、code-to-design 或 react-components 中选择与当前任务相关的技能。部分技能存在依赖关系，选择性安装前应阅读仓库说明。

总结

Google Stitch Skills 的主要作用，不是单次生成一个漂亮页面，而是把 Stitch 接入 AI 编程工作流：

需求
  ↓
Stitch 设计探索
  ↓
Code-to-Design / DESIGN.md
  ↓
React 或 React Native 组件
  ↓
Coding Agent 实现和验证
  ↓
继续迭代

如果你只想体验 Stitch 网页设计，可以直接使用 Stitch；如果你已经在使用 Claude Code、Cursor、Codex 或 OpenCode，并且希望让 Agent 参与设计、设计系统和代码实现，那么 stitch-skills 才能发挥价值。

官方资料

• Google Labs：stitch-skills GitHub 仓库
• Stitch MCP 配置文档
• Agent Skills 开放规范
• Stitch Skills + Claude Code 入门教程
• Google Stitch 2026 功能更新
• Stitch 风格示例库