AI 코딩 에이전트를 활용한 웹사이트 클론 템플릿

AI 코딩 에이전트를 사용하여 깔끔하고 현대적인 Next.js 코드베이스로 모든 웹사이트를 역공학 (reverse-engineering) 할 수 있는 재사용 가능한 템플릿입니다.

추천: Claude Code 와 Opus 4.6 사용 — 다양한 AI 코딩 에이전트와도 호환됩니다.

URL 을 지시하고 /clone-website 를 실행하면, AI 에이전트가 사이트를 검사하고 디자인 토큰과 자산을 추출하며, 컴포넌트 사양을 작성하고 병렬 빌더를派遣하여 모든 섹션을 재구성합니다.

위 이미지를 클릭하여 YouTube 에서 전체 데모를 시청하세요.

이 저장소를 클론하세요git clone https://github.com/JCodesMore/ai-website-cloner-template.git my-clone cd my-clone

의존성을 설치하세요npm install

AI 에이전트를 시작하세요— Claude Code 를 권장합니다:claude --chrome

스킬을 실행하세요: /clone-website <target-url1> [<target-url2> ...]

커스터마이징 (선택 사항) — 기본 클론이 구축된 후 필요에 따라 수정하세요.
다른 에이전트를 사용하시나요? 프로젝트 지침을 위해 AGENTS.md 를 열어보세요. 대부분의 에이전트는 자동으로 이를 인식합니다.

에이전트	상태
Claude Code	권장 — Opus 4.6
...

• Node.js 24+
• AI 코딩 에이전트 (지원 플랫폼 참조)

Next.js 16— App Router, React 19, TypeScript strict
shadcn/ui— Radix primitives + Tailwind CSS v4
Tailwind CSS v4— oklch 디자인 토큰
Lucide React— 기본 아이콘 (클론 시 추출된 SVG 로 대체됨)

/clone-website 스킬은 다단계 파이프라인을 실행합니다:

재확인 (Reconnaissance) — 화면 캡처, 디자인 토큰 추출, 상호작용 스윙 (스크롤, 클릭, 호버, 반응형)
기반 (Foundation) — 폰트, 색상, 전역 업데이트 및 모든 자산 다운로드
컴포넌트 사양 (Component Specs) — 정확한 계산된 CSS 값, 상태, 동작, 콘텐츠를 포함한 상세 사양 파일 (docs/research/components/) 작성
병렬 빌드 (Parallel Build) — 섹션/컴포넌트 하나당 git 워크트리에서 빌더 에이전트를派遣
조립 및 QA (Assembly & QA) — 워크트리를 병합하고 페이지를 연결하며 원본과 시각적 차이 비교 실행

각 빌더 에이전트는 정확한 getComputedStyle() 값, 상호작용 모델, 다중 상태 콘텐츠, 반응형 브레이크포인트, 자산 경로와 같은 전체 컴포넌트 사양을 인라인으로 받습니다. 추측 없이.

플랫폼 마이그레이션— WordPress/Webflow/Squarespace 에서 소유하는 사이트를 현대적인 Next.js 코드베이스로 재빌드
소스 코드 손실— 사이트가 라이브이지만 저장소가 사라졌거나 개발자가 떠났거나 스택이 레거시인 경우. 최신 형식으로 코드를 되찾으세요.
학습— 실제 코드로 작업하여 프로덕션 사이트가 특정 레이아웃, 애니메이션, 반응형 동작을 달성하는 방식을 해체하세요
피싱 또는 위장— 이 프로젝트는 사기적 목적으로 사용되어서는 안되며, 위장하거나 법을 위반하는 어떤 활동도 금지합니다.
다른 사람의 디자인을 자신의 것으로 넘기기— 로고, 브랜드 자산, 원래 텍스트는 소유자에게 속합니다.
서비스 약관 위반— 일부 사이트는 스크래핑이나 재산을 명시적으로 금지합니다. 먼저 확인하세요.

src/
app/ # Next.js 라우트
components/ # React 컴포넌트
...

npm run dev # 개발 서버 시작
npm run build # 프로덕션 빌드
npm run lint # ESLint 체크
...

docker compose up app --build # 앱 빌드 및 실행
docker compose up dev --build # 포트 3001 에서 개발 모드로 앱 실행

모든 플랫폼 지원을 위한 두 가지 진실의 소스 파일이 있습니다. 소스를 편집한 후 동기화 스크립트를 실행하세요:

| 항목 | 진실의 소스 | 동기화 명령 |
|---|---|
| 프로젝트 지침 | AGENTS.md |
bash scripts/sync-agent-rules.sh |
/clone-website 스킬 |
.claude/skills/clone-website/SKILL.md |
node scripts/sync-skills.mjs |

각 스크립트는 플랫폼별 복사본을 자동으로 재생성합니다. 원본 파일을 네이티브로 읽는 에이전트는 재생성이 필요 없습니다.

MIT