google-labs-code/stitch-skills

What it solves

이 프로젝트는 AI 코딩 에이전트가 Google Stitch와 통합될 수 있도록 전문화된 기술(Agent Skills) 및 플러그인 세트를 제공합니다. 에이전트가 디자인을 생성하고, 기존 코드를 디자인으로 변환하며, 해당 디자인을 프로덕션 레디(production-ready) 프론트엔드 컴포넌트(예: React 또는 React Native)로 변환하는 기능을 통해 디자인과 코드 사이의 간극을 수행합니다.

How it works

Agent Skills 오픈 표준을 구현합니다. Codex, Claude Code, Cursor, 및 OpenCode와 같은 AI 에이전트가 로드할 수 있는 구조화된 지침, 스크립트 및 리소스를 제공합니다. 이러한 기술은 Stitch MCP (Model Context Protocol) 서버와 상호작용하여 웹 앱에서 HTML을 추출하거나, DESIGN.md 파일을 통해 디자인 시스템을 관리하거나, UI 컴포넌트를 자동 생성하는 작업을 수행합니다.

Who it's for

Google Stitch에서의 UI 디자인과 프론트엔드 구현 사이의 워크플로우를 자동화하고 싶은 AI 코딩 에이전트를 사용하는 개발자 및 디자이너.

Who it's for

Google Stitch에서의 UI 디자인과 프론ต์엔드 구현 사이의 워크플로우를 자동화하고 싶은 AI 코ging_agent_id

Highlights

• Design Automation: 텍스트/이미지로부터 새로운 화면을 생성하거나 프론트엔드 코드를 Stitch 디자인으로 다시 변환합니다.
• Code Generation: Stitch 디자인을 React, React Native, 또는 React + Vite 대시보드로 변환합니다.
• Design System Management: DESIGN.md 파일을 사용하여 디자인 토큰과 테마를 추출하고 적용합니다.
• Multi-Agent Compatibility: 最kan_id
• Multi-Agent Compatibility: Codex, Claude Code, Cursor, 및 OpenCode를 포함한 다양한 코딩 에이전트와 호환됩니다.
• Visual Walkthroughs: Remotion을 사용하여 프로젝트의 walkthrough-video를 생성하는 기술이 포함되어 있습니다.