JCodesMore/ai-website-cloner-template

AI Website Cloner Template

어떤 웹사이트든 깔끔하고 현대적인 Next.js 코드베이스로 리버스 엔지니어링할 수 있는 재사용 가능한 템플릿입니다. AI 코딩 에이전트를 사용합니다.

권장: 최상의 결과를 위해 Claude Code with Opus 4.7 사용 — 하지만 다양한 AI 코딩 에이전트와 함께 작동합니다.

URL을 지정하고 /clone-website를 실행하면 AI 에이전트가 사이트를 검사하고, 디자인 토큰과 에셋을 추출하며, 컴포넌트 명세를 작성하고, 각 섹션을 재구성하기 위해 병렬 빌더를 파견합니다.

데모

위 이미지를 클릭하면 YouTube에서 전체 데모를 볼 수 있습니다.

빠른 시작

중요: GitHub의 Use this template 버튼을 사용하여 자신만의 복사본을 만드십시오. 웹사이트 프로젝트를 위해 이 템플릿 저장소를 직접 클론하지 마시고, 생성된 웹사이트로 여기에 풀 리퀘스트를 보내지 마십시오.

1. 이 템플릿에서 자신의 저장소 생성

이 프로젝트의 GitHub 페이지에서 Use this template를 클릭한 다음 Create a new repository를 클릭합니다.

새 저장소의 이름을 지정하고, 공개 또는 비공개 여부를 선택한 다음 Create repository를 클릭합니다. GitHub에 Include all branches 옵션이 표시되면 선택하지 않은 상태로 둘 수 있습니다.

이렇게 하면 작업할 수 있는 별도의 프로젝트가 생성되므로 웹사이트 변경 사항이 기본 템플릿으로 돌아가지 않고 계정에 유지됩니다.

1. 컴퓨터에서 새 저장소 열기

GitHub에서 복사본을 만든 후 해당 새 저장소를 엽니다. Code를 클릭하고 선호하는 코딩 도구로 새 저장소를 열거나 클론합니다.

터미널을 사용하는 경우 명령어는 다음과 같습니다:

   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. 커스터마이즈 (선택 사항) — 기본 클론이 빌드된 후 필요에 따라 수정

다른 에이전트를 사용하시나요? AGENTS.md를 열어 프로젝트 지침을 확인하세요. 대부분의 에이전트가 자동으로 읽습니다.

지원 플랫폼

사전 요구 사항

• 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 스킬은 다단계 파이프라인을 실행합니다:

1. 정찰 — 스크린샷, 디자인 토큰 추출, 상호작용 스윕 (스크롤, 클릭, 호버, 반응형)
2. 기반 — 폰트, 색상, 전역 스타일 업데이트, 모든 에셋 다운로드
3. 컴포넌트 명세 — 정확한 계산된 CSS 값, 상태, 동작 및 콘텐츠를 포함한 상세 명세 파일(docs/research/components/) 작성
4. 병렬 빌드 — git worktree에 빌더 에이전트를 파견, 섹션/컴포넌트별로 하나씩
5. 조립 및 QA — worktree 병합, 페이지 연결, 원본과의 시각적 차이 비교

각 빌더 에이전트는 전체 컴포넌트 명세를 인라인으로 받습니다 — 정확한 getComputedStyle() 값, 상호작용 모델, 다중 상태 콘텐츠, 반응형 중단점, 에셋 경로. 추측이 필요 없습니다.

사용 사례

• 플랫폼 마이그레이션 — WordPress/Webflow/Squarespace에서 소유한 사이트를 현대적인 Next.js 코드베이스로 재구축
• 소스 코드 분실 — 사이트는 라이브 상태지만 저장소가 사라졌거나, 개발자가 떠났거나, 스택이 레거시인 경우. 현대적인 형식으로 코드를 되찾으세요.
• 학습 — 실제 코드로 작업하여 프로덕션 사이트가 특정 레이아웃, 애니메이션 및 반응형 동작을 어떻게 구현하는지 분석

의도되지 않은 용도

• 피싱 또는 사칭 — 이 프로젝트는 기만적인 목적, 사칭 또는 법을 위반하는 활동에 사용되어서는 안 됩니다.
• 타인의 디자인을 자신의 것으로 가장 — 로고, 브랜드 에셋 및 원본 콘텐츠는 해당 소유자에게 귀속됩니다.
• 서비스 약관 위반 — 일부 사이트는 스크래핑 또는 복제를 명시적으로 금지합니다. 먼저 확인하세요.

프로젝트 구조

src/
  app/              # Next.js 라우트
  components/       # React 컴포넌트
    ui/             # shadcn/ui 프리미티브
    icons.tsx       # 추출된 SVG 아이콘
  lib/utils.ts      # cn() 유틸리티
  types/            # TypeScript 인터페이스
  hooks/            # 커스텀 React 훅
public/
  images/           # 대상에서 다운로드한 이미지
  videos/           # 대상에서 다운로드한 비디오
  seo/              # 파비콘, OG 이미지
docs/
  research/         # 추출 결과 및 컴포넌트 명세
  design-references/ # 스크린샷
scripts/
  sync-agent-rules.sh  # 에이전트 지침 파일 재생성
  sync-skills.mjs      # 모든 플랫폼에 대해 /clone-website 재생성
AGENTS.md           # 에이전트 지침 (단일 진실 공급원)
CLAUDE.md           # Claude Code 설정 (AGENTS.md 가져오기)
GEMINI.md           # Gemini CLI 설정 (AGENTS.md 가져오기)

명령어

npm run dev    # 개발 서버 시작
npm run build  # 프로덕션 빌드
npm run lint   # ESLint 검사
npm run typecheck # TypeScript 검사
npm run check  # lint + typecheck + build 실행

Docker 사용 시

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

다른 플랫폼 업데이트

두 개의 단일 진실 공급원 파일이 모든 플랫폼 지원을 제공합니다. 소스를 편집한 후 동기화 스크립트를 실행하세요:

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