AI Website Cloner Template
AI 코딩 에이전트로 웹사이트를 리버스 엔지니어링하여 Next.js 코드로 재구성하는 템플릿. Stars 9,752, v0.3.1.
핵심 특징
- 13개 AI 코딩 에이전트 지원 (Claude Code 권장, Opus 4.6 추천)
- Multi-Phase Pipeline: 정찰 → 기반 구축 → 컴포넌트 스펙 → 병렬 빌드 → 조립 & QA
- 각 빌더 에이전트가 git worktree에서 병렬 작업
- 비주얼 디프로 원본과 비교 검증
Quick Start
git clone https://github.com/JCodesMore/ai-website-cloner-template.git my-clone
cd my-clone
npm install
claude --chrome
/clone-website <target-url1> [<target-url2> ...]
사전 요구: Node.js 24+ 및 AI 코딩 에이전트
지원 에이전트 (13개)
| Tier | 에이전트 |
|---|
| 권장 | Claude Code (Opus 4.6) |
| 지원 | Codex CLI, OpenCode, GitHub Copilot, Cursor, Windsurf, Gemini CLI, Cline, Roo Code, Continue, Amazon Q, Augment Code, Aider |
기술 스택
| 구성요소 | 기술 |
|---|
| 프레임워크 | Next.js 16 (App Router, React 19, TypeScript strict) |
| UI | shadcn/ui (Radix primitives + Tailwind CSS v4) |
| 스타일 | Tailwind CSS v4 (oklch design tokens) |
| 아이콘 | Lucide React (클로닝 중 추출 SVG로 교체) |
Multi-Phase Pipeline
- Reconnaissance — 스크린샷, 디자인 토큰 추출, 인터랙션 스윕 (스크롤, 클릭, 호버, 반응형)
- Foundation — 폰트, 색상, 글로벌 업데이트, 모든 에셋 다운로드
- Component Specs — 정확한 computed CSS 값, 상태, 동작, 콘텐츠 포함 스펙 작성 (
docs/research/components/)
- Parallel Build — git worktree에서 섹션/컴포넌트별 빌더 에이전트 병렬 실행
- Assembly & QA — worktree 병합, 페이지 연결, 원본과 비주얼 디프
프로젝트 구조
src/
app/ # Next.js routes
components/ # React components
ui/ # shadcn/ui primitives
icons.tsx # 추출된 SVG 아이콘
lib/utils.ts
types/
hooks/
public/
images/ videos/ seo/
docs/
research/ # 추출 결과 & 컴포넌트 스펙
design-references/ # 스크린샷
활용 사례
- 플랫폼 마이그레이션 — WordPress/Webflow/Squarespace → Next.js
- 소스 코드 복구 — 개발자 퇴사/레포 유실 시 라이브 사이트에서 복구
- 학습 — 프로덕션 레이아웃, 애니메이션, 반응형 동작 분석
프로젝트 정보
| 항목 | 값 |
|---|
| Stars | 9,752 |
| License | MIT |
| Contributors | 5 (JCodesMore, biisal, SABU123472, krataratha, rishikeshmanohar) |
| Releases | 5 (latest: v0.3.1) |
| Default Branch | master |
| 언어 비율 | TS 23.1%, CSS 22.2%, JS 20.4%, Dockerfile 20.2%, Shell 14.1% |
Sources