프로젝트 소개

ui-clone-skills는 Claude Code 및 Codex와 호환되는 코딩 에이전트용 플러그인으로, 라이브 웹사이트를 React 및 Tailwind CSS 코드로 역공학하는 데 설계되었습니다. 일반적인 스크린샷 기반 코드 생성 도구가 픽셀에서 레이아웃을 유추하는 것과 달리, 이 도구는 실시간 DOM을 검사하고 실제 CSS 및 자산을 다운로드하며 GSAP, Framer Motion, Webflow IX2 등 JavaScript 번들에서 애니메이션 매개변수를 추출하는 '모션 포렌식'을 수행합니다. 파이프라인은 네 가지 주요 단계로 구성됩니다: 1. 캡처: 여러 뷰포트 및 상호작용 상태에서 참조 프레임, 비디오 및 DOM 맵을 기록합니다. 2. 디코딩: 타일시트, 계산된 값 및 모션 매개변수를 위한 `transition-spec.json`을 추출합니다. 3. 재생성: 관찰된 데이터를 바탕으로 React/TSX 및 Tailwind 코드를 생성합니다. 4. 검증: 절대 오차(AE) 및 구조적 유사도(SSIM)와 같은 결정론적 메트릭을 사용하여 구현 결과를 참조와 비교합니다. 주요 기능은 세 가지입니다: 전체 파이프라인을 처리하는 `ui-reverse-engineering`, 참조 증거 수집을 위한 `ui-capture`, 그리고 클론과 원본 사이의 불일치 진단을 위한 `visual-debug`.