Stitch to React Components

Stitch에서 생성된 HTML 스크린을 재사용 가능한 React 컴포넌트 시스템으로 변환합니다. 디자인 토큰 추출, 컴포넌트 분해, 자동 검증을 포함합니다.

개요

이 스킬은 Stitch의 정적 HTML 출력을 프로덕션 레디 React 컴포넌트로 변환합니다:

1. 디자인 토큰 추출: 색상, 타이포그래피, 간격을 토큰으로 추출
2. 컴포넌트 분해: HTML을 재사용 가능한 컴포넌트로 분리
3. TypeScript 지원: Props 타입 정의 자동 생성
4. 검증: 생성된 컴포넌트의 문법 및 타입 검증

사전 요구사항

• Stitch MCP 서버 접근 권한
• Stitch 프로젝트와 생성된 스크린
• Node.js 환경 (React 프로젝트)
• DESIGN.md 파일 (선택, 토큰 일관성 향상)