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

如果頁面依賴登入、API 或執行時資料，先準備穩定的示範帳號或 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.

該技能會串聯三個工作：

使用 extract-static-html 擷取自包含 HTML。
使用 extract-design-md 從原始碼和主題設定中擷取設計系統。
使用 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 技能文件還要求：

透過 MCP 取得專案中的每一個 Screen。
使用儲存庫的 fetch-stitch.sh 下載最新 HTML 和截圖。
逐個查看截圖並完成視覺審查。
更新 .stitch/metadata.json，記錄專案、Screen、尺寸和最後同步時間。
從每個 HTML 的 tailwind.config 擷取顏色、字型、間距、圓角和排版 token。
將卡片、表格、導覽和篩選器拆成獨立元件。

不要直接讀取舊的 .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 才能發揮價值。