ai-website-cloner-template: AI 코딩 에이전트를 사용해 웹사이트를 Next.js 코드베이스로 역공학하는 재사용 가능한 템플릿

ai-website-cloner-template: AI 코딩 에이전트를 사용해 웹사이트를 Next.js 코드베이스로 역공학하는 재사용 가능한 템플릿

해결하는 문제

이 프로젝트는 개발자가 기존 웹사이트를 깔끔하고 최신의 Next.js 코드베이스로 역공학할 수 있게 해주는 재사용 가능한 템플릿을 제공합니다. WordPress나 Webflow와 같은 플랫폼에서 Next.js로 마이그레이션하거나, 라이브 사이트에서 손실된 소스 코드를 복구하거나, 프로덕션 수준 사이트가 어떻게 구축되는지 학습하고자 할 때 도움이 되도록 설계되었습니다.

작동 방식

템플릿은 AI 코딩 에이전트(예: Claude Code, Cursor, Aider)를 활용해 /clone-website 명령으로 다단계 파이프라인을 실행합니다:

  1. 정찰(Reconnaissance): 에이전트가 스크린샷을 찍고 디자인 토큰 및 인터랙션 동작을 추출합니다.
  2. 기반 구축(Foundation): 전역 스타일, 폰트, 색상을 설정하고 필요한 에셋을 다운로드합니다.
  3. 컴포넌트 사양(Component Specs): 에이전트가 각 컴포넌트에 대한 상세 사양을 작성합니다(정확한 CSS 값 및 동작 포함).
  4. 병렬 빌드(Parallel Build): 여러 빌더 에이전트를 배정해 개별 섹션이나 컴포넌트를 동시에 재구성합니다.
  5. 조립 및 QA(Assembly & QA): 최종 결과물을 병합하고 원본 사이트와 시각적으로 비교해 정확성을 검증합니다.

대상 사용자

현대 스택(Next.js 16, Tailwind CSS v4, shadcn/ui)으로 웹사이트를 마이그레이션하고 싶거나 기존 웹 디자인을 분해·학습하고자 하는 개발자.

주요 특징

  • 에이전트 비종속(Agent-Agnostic): Claude Code, Cursor, Windsurf, GitHub Copilot 등 다양한 AI 코딩 에이전트를 지원합니다.
  • 핸드오프 없이 자동화(Handoff-Free): 디자인 토큰, 에셋 추출 및 컴포넌트 사양 생성을 자동화합니다.
  • 최신 기술 스택(Modern Tech Stack): Next.js 16, React 19, TypeScript, Tailwind CSS v4 기반으로 구축되었습니다.
  • 병렬화된 구축(Parallelized Construction): git worktree를 활용해 여러 AI 에이전트가 사이트의 서로 다른 섹션을 동시에 빌드할 수 있습니다.

SUMMARY

AI 코딩 에이전트를 사용해 디자인 추출 및 컴포넌트 재구성을 자동화함으로써 웹사이트를 Next.js 코드베이스로 역공학하는 재사용 가능한 템플릿.

TITLE

ai-website-cloner-template: AI 코딩 에이전트를 사용해 웹사이트를 Next.js 코드베이스로 역공학하는 재사용 가능한 템플릿

Sources