AI가 웹사이트를 Next.js 앱으로 복제하는 템플릿 공개

핵심 요약

• AI 코딩 에이전트에 URL을 입력하면 웹사이트를 깔끔한 Next.js 앱으로 자동 재구성하는 템플릿을 공개했다.
• Claude Code 및 Opus 5.5를 기준으로 개발했으며, Codex, Cursor, OpenCode도 지원한다.
• 클론 프로세스는 매핑(소스 URL을 로컬 라우트로 변환), 관찰(데스크톱·모바일 페이지 검사, 자산·폰트 추출), 빌드(컴포넌트·상호작용 구현), 비교(원본과 로컬 페이지 대조, 시각적 차이 수정) 4단계로 진행된다.
• Framer 페이지와 애니메이션 사이트의 경우 반응형 변형, 스크롤/시간 기반 모션에 대한 별도 검사 지침을 제공한다.
• Next.js 16, React 19, shadcn/ui, Tailwind CSS v4, Lucide React 기술 스택을 사용한다.
• WordPress·Webflow·Squarespace에서 모던 Next.js로 마이그레이션하거나 손실된 소스 코드를 복구하거나 프로덕션 사이트의 레이아웃·애니메이션·반응형 동작을 학습하는 데 활용할 수 있다.
• Node.js 24 이상이 필요하며, MIT 라이선스로 공개되어 있다.
• 저장소는 에이전트별로 호환되는 스킬 파일을 제공하며, Claude Code는 명령어 브리지를 통해 `/clone-website` 명령을 지원한다.
• 개인의 디자인과 자산으로 타인을 사칭하거나 사이트 약관을 위반하는 데 사용하는 것을 명시적으로 금지한다.