技能參考

Stitch Design Skills 分成三個外掛。每項技能都遵循 Agent Skills 開放標準，並可搭配任何相容的程式碼代理程式。

stitch-design

用於建立、擷取與管理設計的核心設計工作流程。

code-to-design

協調完整的匯入流程：偵測框架 → 擷取靜態 HTML → 擷取設計 token → 上傳到 Stitch。

相依項目：extract-static-html、extract-design-md、upload-to-stitch

generate-design

從文字或圖像產生新螢幕、編輯既有螢幕，並建立設計變體。

MCP 工具：generate_screen_from_text、edit_screens、generate_variants、list_projects、create_project、list_design_systems

manage-design-system

上傳 DESIGN.md 規範、建立專案層級的設計系統，並將它們套用到螢幕。

MCP 工具：create_design_system_from_design_md、apply_design_system、list_design_systems、upload_design_md

extract-design-md

從前端原始碼反向推導出 DESIGN.md——React、Vue、Svelte、Angular、純 CSS 或 Tailwind。不需要建置步驟。

**流程：**掃描原始碼樹 → 偵測框架 → 擷取 token → 正規化 → 去除重複 → 產生 DESIGN.md

extract-static-html

從執行中的網路應用程式擷取自帶內容的 HTML 快照，內嵌 CSS 並將圖像轉換成 base64。

upload-to-stitch

透過獨立指令碼把本機素材（圖像、HTML）上傳到 Stitch REST API，繞過 LLM 輸出 token 的限制。

stitch-build

從 Stitch 設計產生程式碼與媒體編譯。

react-components

將 Stitch 螢幕轉換成模組化的 React 元件階層，包含 Tailwind 主題擷取與以 AST 為基礎的驗證。

remotion

使用 Remotion 從 Stitch 專案產生導覽影片，具備彈簧動畫縮放效果與可設定的轉場。參閱產生導覽影片。

shadcn-ui

整合 shadcn/ui 元件的專業指引——探索、安裝，以及搭配 Radix UI 與 Tailwind CSS 的自訂。

stitch-utilities

在流程兩端提升品質。

design-md

分析既有的 Stitch 專案螢幕，並從算繪輸出合成一份 DESIGN.md。這是設計 → token 的方向（相對於 extract-design-md 的程式碼 → token）。

MCP 工具：list_screens、get_screen、upload_design_md、list_projects、get_project

enhance-prompt

將模糊的想法轉換成結構化、可直接用於生成的提示詞，包含 UI/UX 關鍵字、設計系統脈絡與頁面結構。

stitch-loop

使用接力棒模式協調自主的多頁面網站產生流程。參閱建構多頁面網站。

taste-design

以反千篇一律的標準產生高質感 DESIGN.md——校準過的色彩科學、音程字級階層、彈簧物理動態，以及明確的反模式目錄。參閱建立高質感設計系統。

安裝個別技能

建議安裝完整的外掛套件。如果你只需要特定技能：

# Design only (generate and edit screens)
npx skills add google-labs-code/stitch-skills \
  --skills stitch::generate-design,stitch::manage-design-system,enhance-prompt

# Import existing code (full migration pipeline)
npx skills add google-labs-code/stitch-skills \
  --skills stitch::code-to-design,stitch::extract-design-md,stitch::extract-static-html,stitch::upload-to-stitch

# Code generation (Stitch to React)
npx skills add google-labs-code/stitch-skills \
  --skills react:components,shadcn-ui

許多技能彼此相依。選擇性安裝之前，請先查看上方的相依項目列表。