AI 요약
ai-website-cloner-template은 Playwright와 멀티 에이전트 시스템을 활용해 웹사이트를 원클릭으로 복제하는 오픈소스 도구입니다. Claude Code의 skill 기능을 통해 /clone-website 명령만 실행하면 대상 사이트의 디자인 토큰, 레이아웃, 인터랙션을 자동으로 분석해 React/Tailwind 기반 코드를 생성합니다. 4단계 파이프라인(Reconnaissance → Foundation → Spec & Build → Assembly & QA)으로 구성되며, 각 섹션별로 독립적인 에이전트가 병렬 작업 후 통합하는 구조입니다. 실제 테스트 결과 UI 복원도가 70% 이상으로 확인되었습니다.
핵심 포인트
- Playwright로 3개 표준 뷰포트(1440×900, 768×1024, 390×844)에서 스크린샷과 design tokens를 수집
getComputedStyle()을 통해 최종 계산값 기반으로 디자인 토큰 추출 (CSS 변수·미디어쿼리 관통)- 각 섹션별 150줄 이하의 spec 파일을 작성해 12개 builder agent가 git worktree에서 병렬 개발
- "Build Must Always Compile" 원칙으로 main 브랜치의 항상 빌드 가능 상태 유지
향후 전망
- AI 기반 웹 클로닝 도구가 프론트엔드 개발 워크플로우의 표준 도구로 자리잡을 가능성
- 모델 성능 향상에 따라 UI 복원 정확도가 90% 이상으로 개선될 전망
출처:juejin