ai-website-cloner-template
무엇인가
ai-website-cloner-template은 대상 웹사이트의 시각·구조 정보를 추출해 Next.js 코드베이스로 다시 세우는 전 과정을 에이전트 절차로 고정하는 스킬 팩이다. 규율하는 영역은 정찰, 디자인 토큰 추출, 컴포넌트 명세 작성, 병렬 구현, 조립·검증이며 각 단계의 산출물 형식과 실행 순서를 규칙으로 못 박는다.
어떻게 동작하나
규칙의 단일 원천은 AGENTS.md이고, CLAUDE.md와 GEMINI.md는 이를 import하는 얇은 설정 파일이다. scripts/sync-skills.mjs가 플랫폼별 /clone-website 스킬을 생성해 .kiro/skills, .cline/skills, .roo/skills, .roo/commands에 배치하고, scripts/sync-agent-rules.sh가 에이전트 지시 파일을 재생성한다. 발동은 슬래시 명령 `/clone-website [URL]`이며, 자연어 요청으로 스킬을 활성화하는 클라이언트에서는 "Clone [URL] using the clone-website workflow" 형태로 진입한다. 파이프라인은 1) 스크린샷·디자인 토큰·인터랙션(스크롤·클릭·호버·반응형) 정찰, 2) 폰트·색·globals 갱신과 에셋 다운로드, 3) docs/research/components/에 계산된 CSS 값·상태·동작·콘텐츠를 담은 명세 파일 작성, 4) git worktree마다 빌더 에이전트를 배치한 섹션별 병렬 빌드, 5) worktree 병합·페이지 연결·원본 대비 시각 diff 순으로 진행된다.
무엇과 다른가
프롬프트를 매번 직접 작성하는 방식과 달리, 중간 산출물을 파일로 남겨 다음 단계가 그 파일을 입력으로 받는다. 빌더 에이전트는 getComputedStyle() 실측값, 인터랙션 모델, 다중 상태 콘텐츠, 반응형 브레이크포인트, 에셋 경로를 명세에서 인라인으로 받으므로 추측 없이 구현한다. 단일 CLAUDE.md에 규칙을 몰아넣는 구성과도 다르다. AGENTS.md를 원본으로 두고 플랫폼별 파일을 스크립트로 파생시켜, 여러 에이전트가 같은 규칙을 공유하게 만든다.
어떻게 쓰나
설치는 이 저장소를 직접 clone하는 방식이 아니다. GitHub에서 Use this template → Create a new repository로 자기 저장소를 만든 뒤 `git clone https://github.com/YOUR-USERNAME/YOUR-NEW-REPOSITORY.git`, `cd YOUR-NEW-REPOSITORY`, `npm install`을 실행한다. 이어 `claude --chrome`으로 에이전트를 띄우고 `/clone-website [URL]`을 호출하면 파이프라인이 시작된다. 기본 클론이 끝난 뒤에는 생성된 Next.js 코드를 직접 수정한다.
전제와 한계
전제는 Node.js 24+와 AI 코딩 에이전트다. Claude Code + Opus 조합에서 가장 좋은 결과를 내며 Codex, Cursor, Gemini 등도 지원한다. 기술 스택은 Next.js 16 App Router, React 19, TypeScript strict, shadcn/ui, Tailwind CSS v4, Lucide React로 고정되어 있다. 피싱·사칭, 타인 디자인의 자기 것化, 서비스 약관 위반 목적의 사용은 명시적으로 금지되며, 로고·브랜드 자산·원문 카피의 권리는 원 소유자에게 있다.