google-labs-code/stitch-skills

What it solves

這款專案屬於為 AI 編碼代理人提供了一套專門的技能與插件，以便與 Google Stitch 整合。它透過讓代理人能夠生成設計、將現有代碼轉換為設計，並將這些設計轉換為可供生產使用的前端組件（例如 React 或 React Native），從而填補了設計與代碼之間的鴻溝。

How it works

它實作了 Agent Skills 開放標準，提供了一套結構化的指令、腳本與資源，讓 AI 代理人（如 Codex, Claude Code, Cursor, 和 OpenCode）可以載入。這些技能會與 Stitch MCP (Model Context Protocol) 伺服器互動，執行如從 Web App 中提取 HTML、透過 DESIGN.md 檔案管理設計系統，以及自動化建立 UI 組件等動作。

Who it's for

使用 AI 編碼代理人且希望自動化 Google Stitch 中的 UI 設計與前端實作之間的流程的開發者與設計師。

Highlights

• Design Automation: Generate 來自文字/圖片或將前端代碼轉換回 Stitch 設計。
• Code Generation: 將 Stitch 設計轉換為 React, React Native, 或 React + Vite 儀表板。
• Design System Management: 使用 DESIGN.md 檔案提取與應用設計標記 (Design Tokens) 與主題。
• Multi-Agent Compatibility: 與多種編碼代理人相容容，包括 Codex, Claude Code, Cursor, 和 OpenCode。
• Visual Walkthroughs: 包含一個使用 Remotion 生成專案展示影片的技能。