/clone-website https://example.com 한 줄이면 AI 에이전트가 정찰 → 스펙 작성 → 병렬 빌드 → QA까지 5단계를 자동 수행해 Next.js 16 프로젝트로 변환해줍니다. (저장소: JCodesMore/ai-website-cloner-template · ⭐16.2k · MIT)URL 하나만 주면, AI 코딩 에이전트가 알아서 웹사이트를 픽셀 퍼펙트하게 클론해주는 재사용 가능한 템플릿 프레임워크. /clone-website https://example.com 한 줄이면, 에이전트가 사이트를 분석하고 → 디자인 토큰과 에셋을 추출하고 → 컴포넌트 스펙을 작성하고 → 병렬 빌더를 띄워서 Next.js 16 프로젝트로 재구성합니다.
전통적 클론은 HTML 소스코드를 복사하는 것에 불과합니다. 이 도구는 Browser MCP로 렌더링된 최종 CSS 값을 추출하고, 인터랙션 패턴을 파악한 뒤, 컴포넌트 스펙 문서를 먼저 작성해 여러 빌더 에이전트에 동시에 배정합니다.
핵심은 "AI에게 알아서 해라"가 아니라 상세한 스펙 파일을 먼저 만들어 위임하는 것입니다. 스펙이 정확할수록 결과가 정확해집니다.
view-source로 HTML을 복사해도 getComputedStyle()로 계산된 실제 CSS 값은 가져오지 못합니다. 반응형 레이아웃, 호버 상태, 스크롤 애니메이션 같은 인터랙션은 보이지 않죠. 결국 수백 번의 수동 확인과 재작업이 필요합니다.
Browser MCP가 라이브 사이트에서 30개 이상의 CSS 속성을 정확히 추출하고, 인터랙션 모델(스크롤/클릭/시간 기반)을 판별합니다. 상세한 스펙 파일을 git worktree 기반 병렬 빌더들에 배정해, 하나의 기반 코드베이스에서 여러 섹션을 동시에 빌드합니다.
| 비교 대상 | ai-website-cloner-template의 차별점 |
|---|---|
| same.new (Same) | SaaS 서비스 vs. 로컬 오픈소스 — AI 에이전트를 내 입맛대로 제어 가능 |
| 수동 클론 | CSS를 getComputedStyle()로 정확히 추출, 반응형·인터랙션까지 캡처 |
| Figma → 코드 변환 | Figma 파일 없이 라이브 사이트에서 직접 추출 — 원본 사이트가 곧 디자인 시스템 |
| 단순 HTML 스크래퍼 | 단순 복사 아닌 Next.js 16 + shadcn/ui + TypeScript strict 모던 프로젝트로 재구성 |
출시 직후 ⭐16.2k (분석 시점 5.2k에서 급증)를 기록한 이 레포는 바이브코딩의 실전 템플릿으로 주목받고 있습니다. 다수의(10개 이상) AI 에이전트 플랫폼(Claude Code, Cursor, Windsurf, Gemini CLI 등)을 단일 AGENTS.md로 동기화하는 구조가 특히 화제입니다.
| 기술 | 버전 | 역할 |
|---|---|---|
| Next.js | 16.2.1 | App Router 기반 프레임워크. React 19와 함께 사용 |
| React | 19.2.4 | UI 라이브러리. Server Components, use() 훅 등 최신 기능 |
| TypeScript | 5.x (strict) | 타입 안전성. 추출한 데이터의 인터페이스도 자동 생성 |
| Tailwind CSS | v4 | oklch 컬러 시스템 기반 디자인 토큰. 유틸리티 퍼스트 스타일링 |
| shadcn/ui | 최신 | Radix Primitives 기반 접근성 보장 컴포넌트 |
| Lucide React | — | 기본 아이콘 (클론 시 추출된 SVG로 교체됨) |
| 기술 | 역할 |
|---|---|
| clsx | 조건부 클래스명 결합 |
| tailwind-merge | Tailwind 클래스 충돌 해결 |
| class-variance-authority (CVA) | 컴포넌트 변형(variant) 관리 |
| 기술 | 역할 |
|---|---|
| Node.js 24+ | 런타임 필수 요구사항 (.nvmrc: 24, engines: >=24) |
| ESLint 9.x | Next.js 설정 포함 코드 품질 관리 |
| Vercel | 권장 호스팅 플랫폼 |
| Browser MCP | Chrome/Playwright/Puppeteer로 사이트 분석 |
| git worktree | 멀티 에이전트 병렬 빌드에 사용 |
AGENTS.md 하나에 모든 에이전트 규칙을 작성하고, sync-agent-rules.sh가 다수의(10개 이상) 플랫폼 설정 파일을 자동 생성합니다. 규칙을 바꿀 때 파일 하나만 편집하면 모든 플랫폼에 자동 반영됩니다.
AGENTS.md (유일한 편집 대상)
├──▶ .github/copilot-instructions.md (GitHub Copilot)
├──▶ .clinerules (Cline/Roo Code)
├──▶ .continue/rules/project.md (Continue)
├──▶ CLAUDE.md → @AGENTS.md (Claude Code는 참조만)
└──▶ .windsurfrules (Windsurf)빌더 에이전트에게 "알아서 해"가 아니라, getComputedStyle() 값·인터랙션 모델·반응형 브레이크포인트를 담은 스펙 파일을 먼저 작성하고 인라인으로 전달합니다. 빌더는 추론할 필요 없이 스펙 그대로 구현합니다.
| 파일 | 한줄 설명 |
|---|---|
.claude/skills/clone-website/SKILL.md | 5단계 파이프라인의 모든 세부 사항. 이 파일이 프로젝트의 두뇌 |
AGENTS.md | 다수의(10개 이상) AI 에이전트를 위한 프로젝트 규칙. 편집은 여기서만 |
scripts/sync-agent-rules.sh | @file 임포트를 인라인으로 풀어서 각 플랫폼 설정 파일 생성 |
docs/research/components/ | 빌더에게 전달할 컴포넌트 스펙 파일 저장소 |
여러 AI 에이전트를 동시에 관리하는 패턴을 배웁니다. 메인 에이전트가 정찰+스펙 작성을 담당하고, 서브 에이전트들이 worktree에서 병렬 빌드하는 구조입니다. "에이전트에게 좋은 지시를 내리는 방법"이 곧 이 프로젝트의 핵심입니다.
Chrome MCP를 사용해 라이브 웹사이트의 CSS 값, DOM 구조, 에셋을 프로그래밍 방식으로 추출하는 기법을 배웁니다. getComputedStyle()로 실제 렌더링된 CSS 30개 이상의 속성을 가져오고, 멀티 스테이트 추출(초기 → 트리거 → 변경 후)을 수행합니다.
최신 Next.js의 App Router 구조와 React 19의 Server Components를 배웁니다. AGENTS.md에서 경고하듯, Next.js 16은 API와 파일 구조에 breaking changes가 많으므로 과거 지식을 그대로 적용하면 안 됩니다.
Tailwind v4의 새로운 디자인 토큰 시스템과 oklch 색상 공간을 배웁니다. oklch는 밝기(L)를 바꿔도 채도와 색상이 일정하게 유지되어 디자인 시스템에 이상적입니다.
하나의 설정 파일로 다수의(10개 이상) AI 에이전트 플랫폼을 관리하는 패턴을 배웁니다. shell 스크립트가 AGENTS.md의 @file 참조를 인라인으로 풀어, 각 플랫폼이 요구하는 포맷으로 변환합니다.
| 항목 | 최소 | 권장 |
|---|---|---|
| Node.js | 24+ | 24 LTS (현재 .nvmrc 기준) |
| AI 에이전트 | 지원 목록 중 1개 | Claude Code + Opus 4.6 |
| 브라우저 MCP | Chrome/Playwright/Puppeteer 중 1개 | Chrome MCP (Claude Code 연동) |
| RAM | 8GB | 16GB+ (병렬 빌드 시) |
| 저장 공간 | 1GB (에셋 다운로드 포함) | 여유 있게 |
| 네트워크 | 필수 (라이브 사이트 접근) | 안정적인 브로드밴드 |
개인 포트폴리오나 간단한 랜딩페이지를 클론해보세요. 5단계 파이프라인이 실제로 어떻게 동작하는지 직접 관찰하고, docs/research/components/에 스펙 파일이 어떻게 생성되는지 확인합니다.
git clone https://github.com/JCodesMore/ai-website-cloner-template.git
cd ai-website-cloner-template && npm install
# Claude Code에서:
/clone-website https://example.comBrowser MCP 없이, 좋아하는 웹사이트의 네비게이션 바 하나를 수동으로 분석해서 스펙 파일을 작성해보세요. getComputedStyle() 접근법을 이해하고, 왜 정확한 CSS 값이 중요한지 체감합니다.
동기화 스크립트를 분석하고, 새로운 에이전트 플랫폼을 위한 출력을 추가해보세요. shell 스크립트에서 @file 임포트를 인라인으로 해결하는 패턴과 멀티 플랫폼 설정 관리를 배울 수 있습니다.
스크롤 애니메이션, 탭 전환, 모달이 있는 SaaS 랜딩페이지를 클론해보세요. 멀티 스테이트 추출의 중요성과 인터랙션 모델 판별(스크롤 vs 클릭 vs 시간 기반)을 실전에서 익힙니다.
이 프로젝트의 구조를 참고해서, 완전히 다른 목적의 Claude Code 스킬을 만들어보세요. 예: /audit-accessibility(웹사이트 접근성 검사) 또는 /extract-api(사이트에서 API 엔드포인트를 역공학). SKILL.md 작성법과 멀티 에이전트 디스패치 패턴 설계를 마스터합니다.
| 주차 | 학습 내용 |
|---|---|
| 1주차 | Next.js 16 App Router 공식 문서 읽기 · React 19 Server Components 개념 잡기 · TypeScript strict 모드 설정 연습 · npm run dev로 빈 템플릿 띄워보기 |
| 2주차 | Tailwind CSS v4 마이그레이션 가이드 읽기 · oklch 색상 공간 이해 · shadcn/ui 커스터마이징 · CVA로 컴포넌트 변형 만들기 |
| 3주차 | Claude Code CLAUDE.md / AGENTS.md 작성법 학습 · .claude/skills/에 커스텀 스킬 만들기 · Browser MCP로 웹페이지 분석 실습 · getComputedStyle() API 깊이 이해 |
| 4주차 | git worktree 개념과 실전 활용 · Claude Code의 Task 도구로 서브 에이전트 띄우기 · 스펙 기반 빌더 패턴 직접 설계 · 병렬 빌드 후 merge conflict 해결 전략 |
| 5주차 | 실제 웹사이트 클론 (간단 → 복잡) · 클론 결과 QA 프로세스 · 나만의 스킬 파이프라인 설계 · 멀티 플랫폼 에이전트 설정 동기화 시스템 구축 |
| 키워드 | 설명 |
|---|---|
| Browser MCP | Model Context Protocol을 통해 AI 에이전트가 브라우저를 직접 제어하는 도구. Chrome, Playwright, Puppeteer 연결 가능 |
| getComputedStyle() | 브라우저 API. 엘리먼트에 실제 적용된 CSS 값을 반환. 클래스명이 아닌 계산된 최종 값을 가져오므로 정확한 클론에 필수 |
| Design Token | 색상, 폰트, 간격 등 디자인 시스템의 기본 단위. CSS 변수로 관리. 이 프로젝트에서는 oklch 형식 사용 |
| git worktree | 하나의 Git 저장소에서 여러 작업 디렉토리를 만드는 기능. 브랜치 전환 없이 여러 브랜치를 동시에 체크아웃 가능 |
| AGENTS.md | AI 코딩 에이전트에게 프로젝트 규칙을 알려주는 파일. 이 프로젝트에서는 모든 에이전트 설정의 단일 소스 |
| SKILL.md | Claude Code 스킬 정의 파일. 슬래시 명령어의 동작을 상세하게 기술 |
| Spec File | 컴포넌트 빌드를 위한 상세 명세서. 정확한 CSS 값, 인터랙션 모델, 반응형 동작 포함 |
| Interaction Sweep | 정찰 단계에서 수행하는 인터랙션 분석. 스크롤/클릭/호버를 모두 테스트하여 각 섹션의 동작 모델 파악 |
| Visual QA Diff | 원본 사이트와 클론을 나란히 놓고 비교하는 품질 검증 단계. 1440px, 768px, 390px 뷰포트에서 수행 |
| CVA | Class Variance Authority. 컴포넌트의 변형(variant)과 크기(size)를 타입 안전하게 관리하는 라이브러리 |
| App Router | Next.js 13+의 새 라우팅 시스템. src/app/ 디렉토리 기반, React Server Components 기본 사용 |
| 150줄 규칙 | 스펙 파일이 150줄을 넘으면 섹션을 분할해야 한다는 복잡도 관리 원칙. 작은 작업이 완벽한 결과를 만든다 |
| Radix Primitives | 접근성(a11y)이 내장된 헤드리스 UI 컴포넌트 라이브러리. shadcn/ui의 기반 |
| 바이브코딩 | AI 에이전트에게 자연어로 지시하면서 코드를 생성하는 개발 방식. 이 레포는 바이브코딩의 실전 템플릿 |