JCodesMore/ai-website-cloner-template

Clone any website with one command using AI coding agents

해결하는 문제

사용자가 AI 코딩 에이전트에게 URL을 제공함으로써 기존 웹사이트를 깔끔하고 현대적인 Next.js 애플리케이션으로 재구성할 수 있게 해줍니다. 이는 WordPress에서 Next.js로의 플랫폼 이전, 라이브 사이트에서 잃어버린 소스 코드 복구, 또는 전문적인 사이트가 어떻게 구축되는지 공부하는 데 특히 유용합니다.

작동 방식

이 프로젝트는 AI 코딩 에이전트가 다단계 파이프라인을 실행할 수 있도록 템플릿과 지침("스킬")을 제공합니다:

  1. 조사: 에이전트는 스크린샷을 캡처하고 디자인 토큰 및 상호작용 행동을 추출합니다.
  2. 기반 구축: 폰트, 색상, 전역 스타일을 설정하고 필요한 자산을 다운로드합니다.
  3. 컴포넌트 사양: 각 컴포넌트의 정확한 CSS 값과 행동을 포함하는 상세한 사양 파일을 생성합니다.
  4. 병렬 빌드: 여러 빌드 에이전트가 병렬로 개별 섹션 또는 컴포넌트를 생성합니다.
  5. 조립 및 품질 보증: 조각들을 최종 페이지에 통합하고 시각적 차이 비교를 통해 원본 사이트와 비교합니다.

대상 사용자

  • 레거시 웹사이트를 현대적인 스택으로 마이그레이션하고자 하는 개발자
  • 원본 소스 코드에 접근할 수 없게 된 사이트 소유자
  • 프로덕션 수준의 레이아웃과 애니메이션을 분석하고 싶은 학습자

주요 특징

  • 광범위한 에이전트 호환성: Claude Code, Cursor, Windsurf, GitHub Copilot, Gemini CLI 등과 호환됩니다.
  • 현대적인 기술 스택: Next.js 16, React 19, Tailwind CSS v4, shadcn/ui를 사용하여 코드를 생성합니다.
  • 고정밀도: 추측이 아닌 getComputedStyle()를 사용하여 정확한 시각적 재현을 보장합니다.
  • 자동화된 워크플로우: 지원되는 AI 에이전트를 위한 전용 /clone-website 명령어를 포함합니다.

관련

  • 프로젝트
    langchain-ai/langchain-nextjs-template

    LangChain.js와 Next.js를 사용한 AI 애플리케이션을 위한 스타터 템플릿으로, 스트리밍 채팅, RAG, 에이전트 워크플로우를 지원합니다.

  • 프로젝트
    HKUDS/CLI-Anything

    CLI‑Anything은 어떤 소프트웨어에도 AI 에이전트 친화적인 Click CLI를 자동 생성하는 Python 프레임워크로, 구조화된 JSON을 출력하여 쉽게 파싱할 수 있도록 설계되었습니다. 7단계 생성 파이프라인(분석 → 설계 → 구현 → 테스트 → 문서화 → 공개)과 GIMP, Blender, Zoom 등 증가하는 사전 빌드된 CLI 카탈로그를 탐색, 설치, 실행할 수 있는 패키지 매니저인 CLI‑Hub를 포함합니다. 이 프로젝트는 Claude Code, Cursor, OpenClaw 등 결정론적이고 조합 가능한 명령 인터페이스를 필요로 하는 AI 에이전트를 대상으로 하며, 포괄적인 테스트 스위트와 보안 강화 기능을 제공합니다.

  • 프로젝트
    vercel/next-evals-oss

    Next.js Evals is a Vercel‑maintained framework for automatically testing AI coding agents on real‑world Next.js tasks. It syncs eval fixtures from the `vercel/next.js` repo, runs agents in a Vercel sandbox, checks hidden assertions, records pass/fail, token usage, and cost, and exports a JSON leaderboard that powers the public Next.js evaluation site.

  • 프로젝트
    ConardLi/easy-agent

    TypeScript와 Node.js로 구축된 터미널 기반 코딩 에이전트로, LLM을 로컬 파일 및 쉘 도구와 통합하여 자동 소프트웨어 개발을 가능하게 합니다.

  • 프로젝트
    Shubhamsaboo/awesome-llm-apps

    Awesome LLM Apps는 Apache-2.0 라이선스 하에 100개 이상의 실행 가능한 AI 에이전트, 에이전트 스킬, RAG 파이프라인을 포함한 컬렉션입니다. 리포지토리는 스타터 에이전트, 고급 다단계 에이전트, 항상 작동하는 서비스, 음성 에이전트, 생성형 UI 에이전트, 게임 플레이 봇, MCP 지원 도구, 상세한 RAG 튜토리얼로 분류됩니다. 각 항목은 실제 코드, 보안 검증된 CI, Claude, Gemini, GPT-4/4o, DeepSeek, Llama, Qwen 등 다양한 모델과 호환됩니다. 사용자는 `npx skills add …`로 수초 내에 스킬을 추가하거나 `pip install && streamlit run`으로 약 30초 내에 전체 에이전트를 실행할 수 있습니다. 이 프로젝트는 Unwind AI에서 유지보수되며 상용 사용에 무료입니다.