클로드 코드 스킬이 스티치 디자인을 제로 픽셀 드리프트로 Next.js로 변환합니다

이 도구의 기능

Claude Code 스킬(슬래시 명령어)은 Google Stitch AI 디자인을 Next.js 컴포넌트로 변환하면서, Claude를 사용할 때 일반적으로 발생하는 픽셀 드리프트를 방지합니다. 이 도구는 Claude가 text-[15px]와 같은 값을 text-sm으로 반올림하거나, #1E293B와 같은 정확한 색상을 bg-slate-800과 같은 근사치 Tailwind 클래스로 교체하거나, 만료된 CDN URL로 인해 이미지 에셋을 잃거나, 글꼴을 놓치는 등의 특정 문제점을 해결합니다.

주요 기능 및 프로세스

• MCP를 통해 Stitch에서 정확한 HTML/CSS 추출 - 복사 붙여넣기나 스크린샷 없음
• 전체적으로 정확한 픽셀 값 보존 (text-[15px]는 text-[15px]로 유지되며 Tailwind 클래스로 반올림되지 않음)
• URL이 만료되기 전에 Stitch CDN에서 모든 이미지 다운로드
• 29가지 Stitch 글꼴을 모두 next/font/google에 올바르게 매핑
• 진행하기 전에 출력을 소스와 비교하는 5개의 필수 검증 체크포인트 포함
• 정확히 무엇이 보존되었고 어떤 부분에 판단이 필요했는지 보여주는 전체 감사 보고서 생성
• 정확한 스타일 오버라이드를 통한 ShadCN/UI 컴포넌트 매핑 지원

설치 및 설정

설치 명령: curl -sL https://raw.githubusercontent.com/yshaish1/stitch-to-nextjs/main/install.sh | bash

설치는 또한 stitch-mcp 서버를 자동으로 구성합니다.

검증 체크포인트가 필요한 이유

검증 체크포인트는 Claude가 자체적으로 작동할 때 Tailwind 관례 쪽으로 드리프트하는 경향을 해결합니다. 이 스킬의 프롬프트는 이 패턴을 명시적으로 표시하고 각 단계에서 재검증을 강제합니다. 완벽하지는 않지만, 이 접근 방식은 일반적인 실패 모드가 누적되기 전에 이를 포착합니다.

이 도구는 GitHub에서 이용 가능합니다: https://github.com/yshaish1/stitch-to-nextjs