claude-skill-web-clone

🪞 Web Clone · 웹사이트 복제 방법론

어떤 웹사이트든 — 단일 파일 정적 페이지부터 WebGL 비중이 큰 인터랙티브 데모까지 — AI 환각으로 대충 만드는 게 아니라 충실히 재현합니다.

English · 中文

이 스킬이 하는 일
마음에 드는 웹사이트를 봤습니다. 복제하고 싶습니다 — 어떻게 동작하는지 배우기 위해, 내 것으로 리믹스하기 위해, 또는 오프라인에서 돌리기 위해. AI 도구는 그럴듯해 보이는 "복제 분석" 문서를 만들어내는 걸 좋아하는데, 그 안의 코드 블록은 전부 조작된 것이고 실행하는 순간 깨집니다.

이 스킬은 "실제 소스 우선"을 반복 가능한 프로세스로 만든 것으로, 6단계 의사결정 트리가 세 갈래를 다룹니다:

정적 HTML/CSS 사이트 → wget --mirror
React / Vue / Next 콘텐츠 사이트 → 템플릿 위에 재구축
멀티 페이지 사이트 → 템플릿 설계 전에 내부 라우트 크롤링
인터랙티브 사이트 → 복제 전에 hover / click / scroll / canvas-drag 상태 기록
WebGL / Canvas / Three.js 비중이 큰 프런트엔드 → 실제 소스를 한 줄씩 역공학; 찾을 수 있는 소스가 없을 때는 런타임 프레임 캡처 + baseline-first 재현 게이트 + SOURCE / PARTIAL / GUESS 증거 등급
정적 빌드 사이트(Astro / Vite SSG / Hugo), WebGL 비중이 커도 → mirror-site.mjs로 전체 스크롤 캡처 + 배포된 모든 에셋(런타임에 fetch되는 .sog/.buf/.wasm 포함) 미러링하여 진짜 1:1 충실 복제 — 정적 사이트에서 "실제 소스 확보" = "배포 번들 전체 미러링"
실제 브라우저에서 검증하고, 사실대로 기록하고, 콘텐츠를 내 것으로 교체
비주얼 / 리브랜딩 모드 → "그 사이트의 느낌"을 버전 관리 가능한 design-dna.json(디자인 토큰 + 스타일 + 효과)으로 증류한 뒤 "DNA는 유지하고 콘텐츠만 교체"

제1원칙: 실제 소스 우선, AI가 지어낸 코드는 절대 복사하지 않는다

AI가 작성한 "복제 분석"은 — 개념적 골격은 참고하되, 실행 가능한 코드 블록은 전부 환각이라고 가정하고 실제 소스 코드와 한 줄씩 대조해 검증해야 합니다.

실증 사례(참고: references/marbles-case.md): 실제 WebGL marbles 데모는 해석적 광선-구 교차 + SVG feDisplacementMap으로 라이브 DOM을 굴절시킵니다. AI 분석은 이를 자신 있게 ray-marching + SDF + DOM을 텍스처로 샘플링한다고 묘사했습니다 — 완전히 다른 두 구현입니다. AI 버전을 복사하면 원본과 전혀 다르게 나오고 몇 배는 느리게 돌아갑니다.

그래서 1단계는 항상: 실제 소스를 확보하라.

구성
claude-skill-web-clone/
├── SKILL.md ← 방법론 (Claude Code / Codex / Cursor가 로드)
├── README.md
├── LICENSE ← MIT
├── follow-wechat-qrcode.jpg
└── references/
├── reverse-engineering.md ← WebGL/Canvas 프런트엔드를 한 줄씩 해부하는 법
├── effect-extraction.md ← 효과 추출을 위한 증거 등급 + baseline-first 게이트
├── static-mirror.md ← 전체 에셋 미러링으로 정적 빌드 사이트(Astro/Vite SSG/Hugo) 1:1 복제
├── design-dna.md ← 구조화된 디자인 정체성 레이어 (비주얼 / 리브랜딩 모드)
├── marbles-case.md ← 대표 사례: 실제 아키텍처 vs AI 환각
└── deliverables.md ← NOTES.md / TEARDOWN.md / RECON/ 템플릿
└── scripts/
├── recon-site.mjs ← 브라우저 스크린샷 + DOM/프레임워크/리소스 신호
├── mirror-site.mjs ← 전체 스크롤 캡처 + 동일 출처 에셋 전부 미러링 (정적 사이트 1:1 복제)
├── route-crawl.mjs ← 동일 사이트 라우트 맵 + 라우트별 스크린샷
├── interaction-probe.mjs ← 스크롤/hover/click/canvas-drag 상태 증거
├── network-capture.mjs ← SPA 픽스처용 XHR/fetch 캡처
├── asset-harvest.mjs ← 발견된 소스 에셋 다운로드
├── dna-scaffold.mjs ← recon에서 미리 채운 design-dna.json 골격 생성
└── visual-diff.mjs ← 원본 vs 복제 스크린샷 픽셀 비교

설치
이것은 Claude Code 스킬입니다. skills 디렉터리에 넣으세요:

git clone https://github.com/Jane-xiaoer/claude-skill-web-clone.git ~ /.claude/skills/web-clone
그런 다음 이렇게 말하면 됩니다:

"이 웹사이트 복제해줘: https://..."
"Clone this site for me"
"Reverse-engineer this WebGL demo"
"이 사이트 베껴서 내 걸로 바꿔줘"

Claude / Codex가 SKILL.md를 로드하고 의사결정 트리를 따라갑니다.

의사결정 트리 (한 화면 요약)

단계
할 일

1
gh api search/repositories?q=<name> — GitHub에서 실제 소스를 먼저 찾기

2
소스가 없으면: 사이트를 브라우저로 프로브하고, 라우트를 크롤링하고, 네트워크를 캡처하고, 인터랙션을 프로브

3
경로 선택: wget 미러 / 템플릿 재구축 / WebGL 역공학 / 테마 마켓

4
~/projects/website-clones/<name>-clone/ (또는 동등한 위치) 설정, index-original.html은 읽기 전용으로 유지

5
트래킹 제거, NOTES.md + TEARDOWN.md 작성, 실제 브라우저에서 스크린샷으로 검증

6
텍스트 / 미디어 / 브랜드 색상을 내 것으로 교체

라이선스 & 출처 표기 원칙
공개 배포 전에 소스 저장소의 라이선스를 확인하세요:

라이선스
할 수 있는 것

MIT / Apache / BSD / Unlicense
수정, 재배포 가능, 크레딧만 유지

NONE / 명시 없음
기본값 = All Rights Reserved. 로컬 학습만, 출처 표기 필수, 허가 없이 공개 재배포 금지

독점 / 명시적 금지
읽기 전용 학습, 복사 금지, 배포 금지

⚠️ "코드가 GitHub에 있다" ≠ "코드가 MIT다". 많은 바이럴 데모는 LICENSE 파일이 없어 기본적으로 All Rights Reserved입니다.

대표 사례
marbles-case.md는 chiuhans111/marbles — 1067줄 단일 파일 WebGL + SVG 필터 유리구슬 인터랙티브 데모 — 의 전체 역공학을 문서화하고, 실제 아키텍처와 핵심 메커니즘을 완전히 반대로 짚은 AI 생성 복제 분석을 대조합니다. 실제 소스와 대조 검증해야 하는 이유를 보여주는 정석 예시입니다.

中文
이 스킬은 무엇을 하는가
좋아하는 웹사이트를 봤습니다. 복제하고 싶습니다 — 어떻게 만드는지 배우기 위해, 내 버전으로 바꾸기 위해, 또는 오프라인에서 돌리기 위해. AI 도구는 그럴듯해 보이는 "복제 분석 문서"를 만들어내는 걸 좋아하는데, 그 안의 코드 블록은 거의 전부 지어낸 것이고 그대로 복사하면 반드시 깨집니다.

이 스킬은 "실제 소스 우선"을 반복 가능한 프로세스로 만든 것으로, 6단계 의사결정 트리가 세 갈래를 다룹니다:

정적 HTML/CSS 사이트 → wget --mirror
React / Vue / Next 콘텐츠 사이트 → 템플릿 재구축 후 콘텐츠 주입
WebGL / Canvas / Three.js 비중이 큰 프런트엔드 → 실제 소스 역공학, 한 줄씩 대조; 소스를 찾을 수 없을 때는 런타임 프레임 캡처 + baseline-first 재현 게이트 + SOURCE/PARTIAL/GUESS 증거 등급
정적 빌드 사이트(Astro/Vite SSG/Hugo), WebGL 비중이 커도 → mirror-site.mjs로 전체 스크롤 캡처 + 배포된 모든 에셋(런타임에 fetch되는 .sog/.buf/.wasm 포함) 미러링하여 진짜 1:1 충실 복제 — 정적 사이트에서 "실제 소스 확보" = "배포 에셋 전체 미러링" (예: Lusion oryzo.ai, 가우시안 스플래팅, hero 픽셀 diff 5/5)
비주얼 복제 / 콘텐츠 대개조 모드 → "그 사이트의 느낌"을 버전 관리 가능한 design-dna.json(디자인 토큰 + 스타일 + 효과)으로 증류한 뒤 "DNA는 유지하고 콘텐츠만 교체"
브라우저에서 실제 검증, 사실대로 기록, 마지막에 내 콘텐츠로 교체

제1원칙: 실제 소스 우선, AI가 지어낸 코드는 절대 복사하지 않는다

AI가 작성한 "복제 분석"은 — 개념적 골격은 참고할 수 있지만, 그 안의 실행 가능한 코드 블록은 기본적으로 전부 환각이며, 실제 소스 코드로 대조 검증해야 하고, 그대로 복사하면 반드시 깨집니다.

실증 사례: 한 AI 분석 문서가 원본 사이트의 "해석적 방법으로 광선-구 교차 계산 + 광학 결과를 변위 맵으로 인코딩 + SVG feDisplacementMap에 넘겨 실제 DOM을 왜곡"하는 실제 아키텍처를 "ray-marching + SDF + DOM을 텍스처로 샘플링"으로 지어냈습니다 — 완전히 다른 두 구현이며, 그대로 복사하면 원본 효과가 나오지 않고 N배 느립니다. 자세한 내용은 references/marbles-case.md 참고.

설치
이것은 Claude Code 스킬입니다. skills 디렉터리에 clone하세요:

git clone https://github.com/Jane-xiaoer/claude-skill-web-clone.git ~ /.claude/skills/web-clone
그런 다음 Claude / Codex / Cursor에게 이렇게 말하세요:

「이 웹사이트 복제해줘: https://...」
「이 사이트 베껴서 내 걸로 바꿔줘」
「이 WebGL 데모 역공학해서 뜯어줘」

AI가 자동으로 SKILL.md를 로드하고 의사결정 트리를 따라갑니다.

대표 사례
references/marbles-case.md는 chiuhans111/marbles — 1067줄 단일 파일 WebGL + SVG filter 유리구슬 사이트 — 를 해부하고, 실제 아키텍처와 AI 분석 문서의 오류를 대조한 것으로, "왜 실제 소스 대조가 필수인가"를 보여주는 표준 교재입니다.

감사의 말 / Credits

방법론 출처 / Origin: Jane의 클론 허브 ~/projects/website-clones/ 워크플로(2026-05-27 marbles 사례 완주 후 스킬로 추출)
대표 사례 원작 / Flagship case author: chiuhans111/marbles by Hans Chiu — 이 1067줄 단일 파일 유리구슬 소스가 없었다면 이 스킬의 "실제 소스 우선" 원칙도 없었습니다
디자인 정체성 레이어 스키마 / Design-DNA schema: references/design-dna.md의 3차원 DNA JSON은 zanwei/design-dna(MIT)를 각색한 것으로, "비주얼 복제 / 콘텐츠 대개조" 모드에 사용됩니다
효과 추출 규율 / Effect-extraction discipline: references/effect-extraction.md의 증거 등급 + baseline-first 게이트는 lixiaolin94/skills · web-shader-extractor에서 영감을 받았습니다(해당 저장소는 LICENSE가 없어, 이 스킬은 방법 개념만 빌려 자체 언어로 재작성했으며 그 코드나 원문을 복사하지 않았습니다)
반복 다듬기 / Iteration: Jane(@xiaoerzhan) + Claude Code (다회차 reverse-engineering)

License
MIT. 자유롭게 사용하고, 리믹스하고, 배포하세요. 출처 표기는 환영이지만 필수는 아닙니다.

이 스킬 덕분에 AI가 지어낸 코드 디버깅으로 오후를 날리지 않았다면, 이 저장소에 ⭐를 눌러주세요.
If this skill saves you a frustrating afternoon of debugging fake AI code, ⭐ the repo.

📱 작성자 팔로우 / Follow Me
이 저장소가 도움이 되었다면 팔로우해 주세요. 앞으로 더 많은 AI Skill, 디자인 방법론, 웹 미학, 크리에이티브 워크플로를 계속 업데이트할 예정입니다.

If this repo helped you, follow me for more AI skills, design systems, web aesthetics, and creative workflows.

X (Twitter): @xiaoerzhan
微信公众号 / WeChat Official Account: QR 스캔하여 팔로우 / Scan to follow

中文: 제 위챗 공식 계정을 팔로우해 주세요. 함께 AI Skill, 디자인 원칙, 웹 표현, 크리에이티브 워크플로를 연구합니다.

English: Follow my WeChat Official Account for more AI skills, design principles, web aesthetics, and creative workflows.