어떤 URL이든 깔끔한 Next.js 앱으로 재구성하는 원커맨드 웹사이트 클로너

What they did

ai-website-cloner-template을 독립형 프로젝트로 설정했습니다. 코딩 에이전트에게 저장소를 새 폴더에 클론하고, origin remote를 제거하고, 의존성을 설치하고, `npm run check`를 실행하도록 요청하여 템플릿이 검증되고 준비되도록 했습니다. 그런 다음 에이전트에서 브라우저 접근을 활성화한 상태로 대상 사이트에 대해 `/clone-website https://example.com`을 실행했습니다. 에이전트는 페이지의 디자인 레퍼런스를 캡처하고 레이아웃, 스타일링, 콘텐츠를 템플릿 내부의 Next.js 앱으로 재현하여, 원시 HTML 덤프가 아닌 깔끔한 코드베이스를 만들어냈습니다. 첫 빌드 이후에는 섹션, 카피, 스타일링에 대한 조정을 에이전트에게 요청하며 반복했고, 생성된 앱을 편집하고 확장할 수 있는 일반 저장소처럼 다뤘습니다.

How it went

이 템플릿은 단일 명령으로 대상 페이지를 동작하는 Next.js 재현물로 만들어내도록 설계되었으며, 에이전트가 구조, 스타일링, 콘텐츠 추출을 처리합니다. 결과는 Claude Code와 강력한 모델을 함께 사용할 때 가장 좋으며, Codex, Cursor, OpenCode도 지원됩니다. 출력물은 추가 편집을 위한 출발점일 뿐 픽셀 단위로 완벽한 프로덕션 클론이 아니며, 복잡한 인터랙티브 동작이나 백엔드 로직은 일반적으로 수동 후속 작업이 필요합니다.

Worth knowing

브라우저 접근이 활성화된 에이전트가 필요하며, 품질은 모델과 대상 사이트의 복잡도에 따라 달라집니다. 다른 사람의 사이트를 클론하는 것은 저작권 및 상표권 문제를 야기할 수 있으므로, 영감을 얻기 위한 용도, 자신의 사이트, 또는 허가를 받은 경우에만 사용하세요. 동적 콘텐츠, 인증 흐름, 백엔드 동작은 자동으로 반영되지 않으며, 템플릿의 `npm run check`는 설정만 검증할 뿐 클론 충실도를 검증하지 않습니다.

Wiring

템플릿 repo를 새 폴더에 clone하고 origin remote를 제거해서 독립적인 프로젝트로 만드세요. install 단계를 실행하고 `npm run check`를 돌려 Next.js 툴체인이 정상인지 확인하세요. 브라우저 접근이 가능한 에이전트(Claude Code, Codex, Cursor, OpenCode)에서 프로젝트를 여세요. `/clone-website <url>` 명령이 에이전트를 구동해 대상 페이지를 가져오고, 디자인 레퍼런스와 콘텐츠를 추출한 뒤, Next.js 컴포넌트와 스타일을 템플릿의 app 구조에 작성합니다. 생성 후에는 일반 dev 서버로 미리보기하고, 레이아웃, 카피, 스타일링에 대해 에이전트와 계속 반복 작업하세요.

Try it yourself

I can't do this for you. I don't have access to your computer's filesystem, can't run terminal commands, can't clone repositories, can't install dependencies, and can't execute `npm run check` or `/clone-website`. I also don't have browser access enabled in this conversation, and I can't ask you interactive questions and then act on your answers.

Here's what you'd need to do yourself, step by step:

**1. Choose a location**
Pick a folder, e.g. `~/projects/ai-website-cloner-template`.

**2. Clone and detach from origin**
```bash
cd ~/projects
git clone https://github.com/JCodesMore/ai-website-cloner-template.git
cd ai-website-cloner-template
git remote remove origin
```

**3. Install dependencies and verify**
```bash
npm install
npm run check
```

**4. Run the clone command**
In Claude Code (or Cursor, with browser/MCP access enabled), from inside the project folder:
```
/clone-website https://example.com
```
This requires the agent to have browser tooling (e.g. Playwright MCP) configured — the template's README covers that setup.

**5. Inspect and run**
```bash
ls -R          # or `tree -L 2` if installed
npm run dev    # typically serves on http://localhost:3000
```

If you paste the output of `npm run check` or the resulting file tree back here, I can help you interpret errors or explain the structure.