AI 코딩 에이전트와 함께 Next.js 애플리케이션을 입력하여 라이브 웹 사이트를 재건하기위한 생산 지향적인 스타터. 템플릿은 엄격한 TypeScript 툴체인, 선택적 Redis-backed session persistence, 멀티 플랫폼 에이전트 기술을 제공하므로 /clone-website 워크플로우는 팀 전반에 걸쳐 재현 가능합니다.

자본에서 시작. GitHub **이 템플릿 사용 ** 별도의 저장소를 만들 수 있습니다. 생성된 clone 산출을 이 상류 템플렛으로 바꾸지 마십시오.

---

내용 표

• 왜이 템플릿
• 시스템 아키텍처
• Clone 워크플로우
• 특징
• 요구 사항
• 설치
• 구성
• 개발
• 테스트
• 프로젝트 구조
• 문제 해결
• 기여
• 자주 묻는 질문
• 라이센스

---

왜 이 템플릿

대부분의 웹 사이트는 디자인 추출 및 구성 요소 구현 사이에 handoff에 실패합니다. 이 저장소는 경계를 표준화:

Website Cloner — Next.js Agent Template

A production-oriented starter for rebuilding live websites as typed Next.js applications with AI coding agents. The template ships a strict TypeScript toolchain, optional Redis-backed session persistence, and multi-platform agent skills so /clone-website workflows stay reproducible across teams.

Start from your own copy. Use GitHub Use this template to create a separate repository. Do not commit generated clone output back to this upstream template.

---

Table of contents

• Why this template
• System architecture
• Clone workflow
• Features
• Requirements
• Installation
• Configuration
• Development
• Testing
• Project structure
• Troubleshooting
• Contributing
• FAQ
• License

---

Why this template

Most website rebuilds fail in the handoff between design extraction and component implementation. This repository standardizes that boundary:

---

System architecture

flowchart TB
  subgraph agents [AI Coding Agents]
    CC[Claude Code]
    CX[Codex / Cursor / Copilot]
    Others[Gemini / Windsurf / ...]
  end

  subgraph template [Template Repository]
    SKILL["/clone-website skill"]
    AGENTS[AGENTS.md rules]
    APP[Next.js App Router]
    CACHE[Cache layer]
    API["/api/cache/*"]
  end

  subgraph persistence [Optional Persistence]
    MEM[(In-memory store)]
    REDIS[(Redis)]
  end

  subgraph output [Generated Clone]
    COMP[React components]
    ASSETS[public/images + seo]
    SPECS[docs/research/components]
  end

  agents --> SKILL
  SKILL --> AGENTS
  AGENTS --> APP
  APP --> API
  API --> CACHE
  CACHE --> MEM
  CACHE --> REDIS
  SKILL --> SPECS
  SPECS --> COMP
  SKILL --> ASSETS

Cache layer

sequenceDiagram
  participant Agent
  participant API as /api/cache/sessions
  participant Service as CacheService
  participant Backend as Memory or Redis

  Agent->>API: POST session metadata
  API->>Service: saveCloneSession()
  Service->>Backend: SET session:{id}
  Backend-->>Service: OK
  Service-->>API: session record
  API-->>Agent: 201 Created

  Agent->>API: GET ?id=session-1
  API->>Service: getCloneSession()
  Service->>Backend: GET session:{id}
  Backend-->>Service: JSON payload
  Service-->>API: CloneSessionRecord
  API-->>Agent: 200 OK

---

Clone workflow