·15 分鐘閱讀

Stitch Skills + Claude Code 入門教學：用 AI 代理生成 UI 設計

詳細介紹 Google 官方 stitch-skills 專案，如何在 Claude Code 中設定和使用，實現從自然語言到 UI 設計再到程式碼的完整工作流程。

S
Stitch Prompt Team
Content Team
StitchClaude CodeAI教學GitHub

什麼是 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

2026 年 10 月更新：官方 CLI 現已提供更簡的安裝路徑——stitch agent-skills add --user 一條命令即可為 Claude Code、Cursor、Codex、Gemini CLI 和 Antigravity 統一安裝 Skills，詳見 Stitch CLI 完全指南。上面介紹的手動流程仍然適用於需要精細控制的情境。

第三步：實戰示範

設定完成後，你可以在 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 提示詞教學 和 風格範例庫。

← ← 返回部落格