AI Website Cloner Template
URL 하나로 사이트를 Next.js 앱으로 다시 만드는 템플릿
git clone https://github.com/YOUR-USERNAME/YOUR-NEW-REPOSITORY.git && npm install코딩 에이전트에게 주소를 건네면 그 사이트를 깨끗한 Next.js 앱으로 다시 만들어 주는 템플릿입니다. 저장소를 템플릿으로 복사해 두고 에이전트를 브라우저 모드로 띄운 뒤 스킬 명령에 주소를 넘기면 페이지 구조와 스타일을 읽어 코드로 옮깁니다. 여러 주소를 한 번에 넘길 수 있고 다시 돌려도 기존 페이지를 지우지 않습니다. Next.js 16 앱 라우터와 리액트 19, 타입스크립트 엄격 모드, shadcn/ui 와 테일윈드 4 를 기본 구성으로 깔아 둡니다. 클로드 코드 외에 코덱스, 커서, 코파일럿, 제미나이 CLI 등 열세 가지 도구에서 씁니다.
판단
이럴 때 씁니다
- 기존 사이트의 구조를 코드로 옮겨 출발점을 만들고 싶을 때
- 디자인 참고용으로 여러 페이지를 한 번에 재현해야 할 때
- Next.js 기본 구성을 매번 다시 잡기 싫을 때
이럴 땐 쓰지 마세요
- 남의 사이트를 그대로 복제해 공개하면 저작권 문제가 됩니다
- 동적 데이터나 로그인 뒤 화면은 재현되지 않습니다
- Next.js 가 아닌 스택을 쓴다면 기본 구성이 맞지 않습니다
차별점
- 결과물이 프레임워크 기본 구성을 갖춘 프로젝트로 나옵니다.
- 여러 주소를 한 번에 넘기고 다시 돌려도 기존 페이지를 지우지 않습니다.
- 열세 개 코딩 도구에서 같은 스킬로 동작합니다.
워크플로
- 01깃허브에서 템플릿 사용 버튼으로 내 저장소를 만듭니다.
- 02만들어진 저장소를 받아 의존성을 설치합니다.
- 03에이전트를 브라우저 모드로 띄웁니다.
- 04스킬 명령에 대상 주소를 하나 이상 넘깁니다.
- 05기본 결과가 나온 뒤 필요한 부분을 직접 고칩니다.
주요 명령
| 명령 | 설명 |
|---|---|
npm install | 템플릿 의존성을 설치합니다. |
claude --chrome | 브라우저를 붙인 상태로 에이전트를 띄웁니다. |
/clone-website <target-url> | 대상 주소를 넘겨 복제를 시작합니다. 주소를 여러 개 넘길 수 있습니다. |
함정
설치 전에 확인하세요
- 템플릿 저장소를 직접 클론하면 안 됩니다. 템플릿 사용 버튼으로 내 저장소를 만들어야 작업이 원본으로 되돌아가지 않습니다.
- 생성한 사이트로 원본 저장소에 풀리퀘스트를 열지 말라고 명시돼 있습니다.
- 스킬 명령을 직접 노출하지 않는 클라이언트도 있습니다. 그런 경우에는 자연어로 워크플로 이름을 불러야 합니다.
비교
사이트를 긁는 도구는 HTML 과 자산을 그대로 내려받아 줍니다. 이쪽은 구조를 읽어 컴포넌트로 다시 쓰기 때문에 결과가 고쳐 쓸 수 있는 코드입니다. 대신 원본과 픽셀 단위로 같지는 않고, 동적 데이터가 붙은 부분은 재현되지 않습니다.
최근 변경
v0.4.0 에서 지원하는 코딩 도구가 늘었고 여러 페이지를 반복해서 복제해도 앞서 만든 페이지가 유지되도록 바뀌었습니다. 의존성을 최신으로 올리고 도커 지원과 생성 파일 동기화를 함께 정리했습니다.