TL;DR

이 템플릿은 AI 코딩 에이전트를 이용해 대상 웹사이트를 자동으로 분석하고 디자인 토큰·자산·컴포넌트 스펙을 생성해 Next.js 코드베이스로 재구성하는 워크플로를 제공한다. 레포는 브라우저 기반 탐지(스크린샷·클릭·호버)로 정확한 getComputedStyle() 값을 추출하고, 섹션 단위로 병렬 빌더를 git worktree에서 실행해 병렬화와 충돌 분리를 구현한다. 결과는 병합 후 시각적 diff로 검증되며 Claude Code를 권장하지만 여러 코딩 에이전트를 플랫폼별 스킬로 지원한다. 법적·서비스 약관 제약(무단 복제·사칭 등)은 사용자가 확인해야 하며, 완전한 보완·커스터마이즈는 수동 수정이 필요하다.

주요 기능

• 대상 URL을 스크린샷·상호작용으로 탐색해 디자인 토큰과 자산을 추출한다
• getComputedStyle() 기반의 정확한 CSS 값으로 컴포넌트 스펙 파일을 생성한다
• 섹션별로 별도 git worktree에 빌더 에이전트를 띄워 병렬로 컴포넌트를 구축한다
• 빌더 작업을 병합해 최종 페이지를 어셈블하고 시각적 diff로 검증한다

어떻게 동작하는가

클론 스킬은 정찰 단계에서 페이지 스크린샷과 상호작용(스크롤·클릭·호버)을 수행해 디자인 토큰과 자산을 수집한다. 각 컴포넌트에 대해 정확한 getComputedStyle() 값과 상태를 명시한 스펙을 작성한 뒤 섹션별로 병렬 빌더(worktree)를 실행해 코드를 생성하고 최종적으로 병합·시각 비교로 QA를 수행한다.

해결 문제

실제 브라우저 렌더링 값을 기반으로 타깃 웹사이트를 현대적 Next.js 코드베이스로 자동 재구성해 수작업 레이아웃 재구현과 자산 회수를 줄인다.

지금 주목받는 이유

AI 코딩 에이전트의 실무 활용과 에이전트 오케스트레이션 수요가 증가하면서 사이트 복원·마이그레이션 자동화 수단으로 주목받고 있다.

차별점

• 컴포넌트 스펙에 브라우저의 정확한 getComputedStyle() 값을 포함해 수치 기반 시각적 일치도를 높인다
• 섹션·컴포넌트 단위로 병렬 빌더를 git worktree에 배치해 복제 작업을 병렬화한다
• Claude Code 등 여러 AI 코딩 에이전트 플랫폼을 플랫폼별 스킬로 지원하며, Claude Code(Opus 4.7)를 권장한다

사용 사례

• WordPress/Webflow/Squarespace 등 기존 플랫폼에서 Next.js로 플랫폼 마이그레이션할 때 초기 코드베이스를 자동 생성
• 라이브 사이트는 존재하지만 소스 코드가 유실된 경우 빠르게 현대적 코드로 복구
• 실제 프로덕션 레이아웃의 CSS·반응형 동작을 학습·분해해 UI 구현 학습 자료로 활용

시작하기

GitHub의 'Use this template'로 자신의 새 리포지토리를 만든 뒤 로컬로 복제하고 npm install로 종속성을 설치한다. 권장 에이전트(README 권장: Claude Code)를 실행(claude --chrome)한 다음 /clone-website <target-url> 명령으로 클론 스킬을 호출하면 기본 복제가 시작된다.

요구사항

• Node.js 24+
• Next.js 16 (App Router, React 19, TypeScript strict)
• AI 코딩 에이전트(예: Claude Code 권장) 실행 환경
• 선택적: Docker 사용 시 docker compose 지원

이미지 분석