JCodesMore/ai-website-cloner-template

AI 에이전트로 웹사이트를 역엔지니어링해 깔끔한 Next.js 코드로 자동 변환하는 템플릿

템플릿맘대로 써도 됨 · MIT웹·Next.js·풀스택난이도
17,149+0이번 주2,6687TypeScript
데모·홈페이지 열기dsc.gg
중간맛 분석

스택: Next.js 16, React 19, TypeScript, shadcn/ui, Tailwind CSS v4 난이도: 중~상 (AI 에이전트 설정 필요) 바로 쓸 수 있나: 네. 템플릿을 복사해 AI 에이전트와 연결한 뒤 /clone-website <URL> 명령어만 실행하면 됨 데모: YouTube 데모 영상 포함. 레코나이샌스(스크린샷+디자인 토큰 추출) → 기초 구성 → 컴포넌트 스펙 작성 → 병렬 빌드 → 병합 및 QA 파이프라인으로 동작

이런 레포예요

이럴 때 쓰면 좋아요

  • WordPress/Webflow/Squarespace에서 현대적 Next.js로 마이그레이션하려 할 때
  • 소스 코드가 없는 라이브 웹사이트를 최신 스택으로 복구하려 할 때
  • 프로덕션 사이트의 레이아웃·애니메이션·반응형 설계를 분석해 학습하려 할 때

핵심 기능

AI 기반 자동 역엔지니어링 파이프라인디자인 토큰·컴포넌트 스펙 자동 추출다중 AI 에이전트 플랫폼 지원

대안 대비 차별점

단순 HTML 스크래핑이 아닌 설계 시스템 전체를 추출하고 정확한 computed CSS·상태·반응형 정보까지 컴포넌트 스펙으로 문서화해 AI 빌더에게 전달하므로 추측 없이 정밀한 복제 가능.

준비물
  • Node.js 24+
  • AI 코딩 에이전트 (Claude Code, GitHub Copilot, Cursor, Gemini CLI 등)
바로 시작하기
  1. GitHub의 "Use this template" 버튼으로 새 저장소 생성
git clone https://github.com/YOUR-USERNAME/YOUR-NEW-REPOSITORY.git
cd YOUR-NEW-REPOSITORY
  1. 의존성 설치
npm install
  1. AI 에이전트 실행 (Claude Code 권장)
claude --chrome
  1. 웹사이트 클론 스킬 실행
/clone-website <target-url1> [<target-url2> ...]
  1. 필요시 커스터마이징
별 추이 · 7일
17,149+0 / 7일
활용성 · 따라 만들기 좋은가
따라 하기 좋음샘플 점수 54/100
  • 관대한 라이선스
  • 테스트 있음
  • 예제 디렉토리
  • 최근 활동
  • AGENTS.md
  • llms.txt
  • 템플릿

🟢 최근 활동 있음 · 2026년 생성

AI가 README 기반으로 요약했습니다 · 원문 보기