·15 分钟阅读

Stitch Skills + Claude Code 入门教程：用 AI 代理生成 UI 设计

详细介绍 Google 官方 stitch-skills 项目，如何在 Claude Code 中配置和使用，实现从自然语言到 UI 设计再到代码的完整工作流。

S
Stitch Prompt Team
Content Team
StitchClaude CodeAITutorialGitHubStitchClaude CodeAITutorialGitHub

什么是 Stitch Skills？

Stitch Skills 是 Google 官方维护的 Agent Skills 库（GitHub: google-labs-code/stitch-skills，6.4k Stars），它让 AI 编码代理能够直接与 Google Stitch 交互，实现：

  • 生成设计 — 从文本/图片生成 Stitch UI 界面
  • 管理设计系统 — 上传和应用 DESIGN.md
  • 代码生成 — 将 Stitch 设计转换为 React/React Native 组件
  • 提取设计规范 — 从前端代码中提取 DESIGN.md

简单来说，Stitch Skills 让你可以在 Claude Code 中直接命令 AI 生成 UI 设计，然后自动转换为可用的前端代码。

前置条件

在开始之前，你需要准备：

  1. Google 账号 — 用于访问 Stitch
  2. Node.js 18+ — 运行环境
  3. Claude Code — AI 编码代理
  4. Google Cloud 项目 — 用于 Stitch API 认证

第一步：配置 Stitch MCP Server

Stitch Skills 依赖 Stitch MCP Server 与 Stitch 通信。首先配置 MCP 连接。

1.1 创建 Google Cloud 项目

  1. 访问 Google Cloud Console
  2. 点击项目选择器 → "新建项目"
  3. 输入项目名称（如 my-stitch-project）
  4. 点击"创建"

1.2 启用 Stitch API

  1. 在左侧菜单点击 "API 和服务" → "库"
  2. 搜索 "Stitch API"
  3. 点击 "启用"

1.3 安装并配置 MCP Server

运行自动配置向导：

npx @_davideast/stitch-mcp init

这个向导会自动处理 gcloud CLI 检查、Google 登录、项目配置和 Stitch API 激活。

或者手动配置：

# 登录 Google Cloud
gcloud auth login
gcloud config set project YOUR_PROJECT_ID

# 配置应用默认凭据
gcloud auth application-default login
gcloud auth application-default set-quota-project YOUR_PROJECT_ID

# 启用 Stitch API
gcloud beta services mcp enable stitch.googleapis.com --project=YOUR_PROJECT_ID

1.4 在 Claude Code 中注册 MCP

claude mcp add   -e GOOGLE_CLOUD_PROJECT=YOUR_PROJECT_ID   -s user stitch   -- npx -y @_davideast/stitch-mcp proxy

验证连接：

claude mcp list | grep stitch

第二步：安装 Stitch Skills

2.1 安装完整插件集（推荐）

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

这会安装三个插件包：

插件包功能
stitch-design核心设计工作流（生成、编辑、管理设计）
stitch-build代码生成（React、React Native、shadcn/ui）
stitch-utilities辅助工具（提示词增强、DESIGN.md 生成）

2.2 选择性安装

如果只需要部分技能：

npx skills add google-labs-code/stitch-skills

第三步：实战演示

配置完成后，你可以在 Claude Code 中直接使用自然语言命令来操作 Stitch。

3.1 生成 UI 设计

在 Claude Code 中输入：

> Make a mobile app homepage for a fitness tracker with a dashboard, 
> activity chart, and bottom navigation

Claude Code 会调用 Stitch 的 generate-design 技能，在你的 Stitch 项目中生成对应的 UI 设计。

3.2 编辑现有设计

> Edit the login screen to add a "Remember Me" checkbox and change 
> the button color to blue

3.3 生成设计变体

> Generate 3 design variants of the home screen with dark mode, 
> light mode, and high-density layouts

3.4 将设计转换为 React 组件

> Convert all screens in my Stitch project to React components

Claude Code 会自动从 Stitch 拉取设计，生成 React 组件代码，并确保设计 token 一致性。

3.5 从前端代码提取设计系统

> Scan /src and extract the design system into .stitch/DESIGN.md

可用技能一览

Design 技能

技能说明示例命令
stitch::generate-design从文本/图片生成设计"Make a settings page for a SaaS app"
stitch::code-to-design将前端代码转为 Stitch 设计"Upload /src/dashboard into Stitch"
stitch::manage-design-system管理设计系统"Apply our DESIGN.md to all screens"
stitch::extract-design-md从代码提取 DESIGN.md"Extract design system from /src"
stitch::upload-to-stitch上传本地资源到 Stitch"Upload landing_page.html to Stitch"

Build 技能

技能说明示例命令
stitch::react-components生成 React 组件"Convert Stitch screens to React"
stitch::react-native生成 React Native 组件"Convert design to React Native"
shadcn-uishadcn/ui 开发指导"Build a data table with shadcn/ui"

Utilities 技能

技能说明示例命令
enhance-prompt增强提示词"Enhance: make a settings page"
stitch-loop生成多页面网站"Build a 5-page portfolio website"
taste-design生成高端 DESIGN.md"Generate premium DESIGN.md"

完整工作流示例

以下是一个从零开始的完整工作流：

步骤 1：创建项目

mkdir my-app && cd my-app
npm init -y
npx plugins add google-labs-code/stitch-skills --scope project --target claude-code

步骤 2：描述需求

在 Claude Code 中：

> Build a mobile fitness tracking app with:
> - Dashboard showing today's stats (steps, calories, heart rate)
> - Activity chart for the last 7 days
> - Bottom navigation with Home, Activities, Profile tabs
> - Clean modern design with blue accent color

步骤 3：生成设计

Claude Code 会调用 Stitch 生成对应的 UI 设计，你可以在 stitch.withgoogle.com 中查看和编辑。

步骤 4：导出代码

> Now convert these designs to React Native components with proper 
> theme and navigation

步骤 5：迭代优化

> Change the primary color to green and add a dark mode variant

常见问题

Q: 需要付费吗？

A: 完全免费。Stitch 使用 Google Labs 免费额度（每月 350 次生成），Stitch Skills 也是开源免费的。

Q: 支持哪些编码代理？

A: 支持 Claude Code、Cursor、Gemini CLI、Codex CLI、Antigravity 等所有 MCP 兼容的编码代理。

Q: 生成的代码质量如何？

A: Stitch 生成的是 HTML/CSS 代码，通过 stitch-build 插件可以转换为 React/React Native 组件。代码质量依赖于提示词的清晰度。

Q: 可以和现有项目集成吗？

A: 可以。使用 code-to-design 技能可以将现有前端代码上传到 Stitch，然后用 Stitch 进行设计迭代，再导出更新后的代码。

总结

Stitch Skills + Claude Code 的组合提供了一种全新的 UI 开发方式：

  1. 用自然语言描述需求 → Stitch 生成 UI 设计
  2. 在 Claude Code 中迭代 → 调整设计细节
  3. 自动转换为代码 → 生成 React/React Native 组件

这种工作流特别适合快速原型开发、非设计师独立开发、以及需要快速探索设计方向的场景。

如果你想了解更多 Stitch 提示词技巧，可以查看我们的 Stitch 提示词教程 和 风格示例库。

← 返回博客