stitch-react

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 파일 (선택, 토큰 일관성 향상)

변환 워크플로우

Step 1: Stitch 스크린 가져오기

# Stitch MCP로 스크린 HTML 다운로드
[prefix]:get_screen 호출
→ htmlCode.downloadUrl에서 HTML 다운로드
→ source.html로 저장

Step 2: 디자인 토큰 추출

Stitch HTML에서 Tailwind 클래스와 인라인 스타일을 분석하여 디자인 토큰을 추출합니다.

색상 토큰

// tokens/colors.ts
export const colors = {
  // Primary
  primary: {
    DEFAULT: '#0066FF',
    hover: '#0052CC',
    light: '#E6F0FF',
  },
  // Neutral
  neutral: {
    50: '#F9FAFB',
    100: '#F3F4F6',
    200: '#E5E7EB',
    // ...
    900: '#111827',
  },
  // Semantic
  success: '#10B981',
  error: '#EF4444',
  warning: '#F59E0B',
} as const;

타이포그래피 토큰

// tokens/typography.ts
export const typography = {
  fontFamily: {
    sans: ['Inter', 'system-ui', 'sans-serif'],
    mono: ['JetBrains Mono', 'monospace'],
  },
  fontSize: {
    xs: ['0.75rem', { lineHeight: '1rem' }],
    sm: ['0.875rem', { lineHeight: '1.25rem' }],
    base: ['1rem', { lineHeight: '1.5rem' }],
    lg: ['1.125rem', { lineHeight: '1.75rem' }],
    xl: ['1.25rem', { lineHeight: '1.75rem' }],
    '2xl': ['1.5rem', { lineHeight: '2rem' }],
    '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
  },
  fontWeight: {
    normal: '400',
    medium: '500',
    semibold: '600',
    bold: '700',
  },
} as const;

간격 토큰

// tokens/spacing.ts
export const spacing = {
  px: '1px',
  0: '0',
  0.5: '0.125rem',
  1: '0.25rem',
  2: '0.5rem',
  3: '0.75rem',
  4: '1rem',
  5: '1.25rem',
  6: '1.5rem',
  8: '2rem',
  10: '2.5rem',
  12: '3rem',
  16: '4rem',
  20: '5rem',
  24: '6rem',
} as const;