ai-website-cloner-template
기타JCodesMore/ai-website-cloner-template
AI로 어떤 웹사이트든 Next.js 프로젝트로 클론합니다.
개요
재사용 가능한 템플릿으로, AI 코딩 에이전트를 활용하여 임의의 웹사이트를 모던 Next.js 코드베이스로 리버스 엔지니어링합니다. URL을 지정한 후 /clone-website 명령을 실행하면 에이전트가 웹사이트를 검사하고, 디자인 토큰을 추출하며, 컴포넌트를 병렬로 빌드합니다.
README 미리보기
# AI Website Cloner Template\n\n \n\nA reusable template for reverse-engineering any website into a clean, modern Next.js codebase using AI coding agents. \n\n**Recommended: [Claude Code](https://docs.anthropic.com/en/docs/claude-code) with Opus 4.7 for best results** — but works with a variety of AI coding agents.\n\nPoint it at a URL, run `/clone-website`, and your AI agent will inspect the site, extract design tokens and assets, write component specs, and dispatch parallel builders to reconstruct every section.\n\n## Demo\n\n[](https://youtu.be/O669pVZ_qr0)\n\n> Click the image above to watch the full demo on YouTube.\n\n## Quick Start\n\n> **Important:** Start by making your own copy with GitHub's **Use this template** button. Do not clone this template repository directly for your website project, and do not open pull requests here with your generated website.\n\n1. **Create your own repository from this template**\n\n On the GitHub page for this project, click **Use this template**, then click **Create a new repository**.\n\n Give your new repository a name, choose whether it should be public or private, then click **Create repository**. If GitHub shows an **Include all branches** option, you can leave it off.\n\n This gives you your own separate project to work in, so your website changes stay in your account instead of coming back to the main template.\n\n2. **Open your new repository on your computer**\n\n After GitHub creates your copy, open that new repository. Click **Code** and open or clone your new repository with your preferred coding tool.\n\n If you use the terminal, the command will look like this:\n\n ```bash\n git clone https://github.com/YOUR-USERNAME/YOUR-NEW-REPOSITORY.git\n cd YOUR-NEW-REPOSITORY\n ```\n\n3. **Install dependencies**\n ```bash\n npm install\n ```\n4. **Start your AI agent** — Claude Code recommended:\n ```bash\n claude --chrome\n ```\n5. **Run the skill**:\n ```\n /clone-website [ ...]\n
FAQ (4)
문제 해결npm audit에서 보고된 Next.js 16.3.0의 치명적인 비인증 RCE 취약점은 어떻게 수정하나요?
Next.js를 패치가 적용된 버전 16.3.5 이상으로 업그레이드하세요. 버전 16.0.0–16.3.2는 GHSA-p293-qw3h-jr36 및 GHSA-2xp9-vwfh-vxw4의 영향을 받습니다. 두 패키지를 모두 업데이트하고 lockfile을 새로 고치세요:
npm install next@^16.3.5 eslint-config-next@^16.3.5
npm audit fix정확한 버전 고정을 원한다면 package.json에 다음과 같이 설정하세요:
"next": "16.3.5",
"eslint-config-next": "16.3.5"그런 다음 실행하세요:
rm -rf node_modules package-lock.json
npm install
npm audit
npm run checknpm audit는 취약점이 0개라고 보고해야 합니다. npm이 고정된 의존성 범위를 벗어난 버전을 설치할 수 있으므로 npm audit fix --force에만 의존하지 마세요. next와 eslint-config-next를 명시적으로 올리는 것이 정확한 해결 방법입니다.
문제 해결/clone-website가 이전에 복제된 페이지를 삭제하는 이유는 무엇이며, 페이지가 덮어쓰여지는 것을 방지하려면 어떻게 해야 하나요?
이 문제는 이후 /clone-website 실행이 이전 실행에서 생성된 페이지와 출력 파일을 초기화하거나 충돌하기 때문에 발생합니다. 수정 사항은 PR fix: preserve pages across clone runs에 포함되어 있습니다. 해당 수정이 포함된 릴리스로 업데이트한 후 클론을 다시 실행하세요. 이 업데이트는 기존에 클론된 페이지와 사용자가 작성한 페이지를 보존하고, 충돌 방지 라우트를 사용하며, research, screenshot, component, asset, downloader 출력을 대상별로 격리합니다. 또한 동일 경로의 쿼리 상태, Next.js 예약 라우트 구문, 여러 origin을 처리합니다. 이전 버전에서는 임시 해결 방법으로 별도의 명령을 여러 번 실행하는 대신 한 번의 호출로 모든 대상을 클론하세요: /clone-website https://example.com/page-a https://example.com/page-b https://example.com/page-c. 또는 추가 클론 실행 전에 생성된 페이지를 백업하세요.
문제 해결sync-skills.mjs가 Cline, Roo Code 또는 Aider용 clone-website 스킬 파일을 생성하지 않는 문제를 어떻게 해결하나요?
이것은 ai-website-cloner-template v0.3.1 (커밋 4cd764f)의 generator/README 불일치 문제입니다: scripts/sync-skills.mjs가 9개의 타겟만 정의하므로 Cline, Roo Code 및 Aider 파일이 생성되지 않습니다.
PR fix: complete Cline and Roo skill support가 포함된 릴리스 또는 커밋으로 업그레이드한 후, 스킬을 다시 생성하십시오:
git pull
node scripts/sync-skills.mjs
find . -name 'clone-website*' -not -path './node_modules/*'이 수정은 네이티브 Cline 워크스페이스 스킬, 표준을 준수하는 Roo Code 스킬, 그리고 Roo Code /clone-website 슬래시 명령 브리지를 추가합니다. 또한 영어, 중국어 간체, 일본어 README도 업데이트합니다.
Aider는 완전 지원 플랫폼 목록에서 제거되었기 때문에 이 수정으로 생성되지 않습니다. 별도의 Aider 지원이 구현될 때까지 Cline, Roo Code 또는 목록에 있는 다른 지원 에이전트를 사용하십시오.
설정기본 browser MCP 대신 clone-website 스킬과 함께 Playwright MCP를 사용하려면 어떻게 해야 하나요?
별도의 백엔드 또는 .env 구성이 필요하지 않습니다. clone-website 스킬의 browser-automation pre-flight는 이미 Chrome MCP, Browserbase MCP, Puppeteer MCP와 함께 Playwright MCP(@playwright/mcp)를 지원합니다. MCP 클라이언트에서 Playwright MCP를 구성한 다음, 코딩 에이전트에게 browser-automation 단계에서 Playwright를 사용하도록 지시하세요. 그러면 동일한 웹사이트 추출 및 클로닝 워크플로가 기본 browser MCP 대신 Playwright를 통해 실행됩니다.