$web-clone

$web-clone은 공개 URL을 받아 로컬에서 실행 가능한 복제본을 만듭니다. Playwright MCP로 DOM 구조·계산된 스타일·인터랙티브 요소를 추출하고, 대상 프레임워크에 맞는 코드로 재구성한 뒤, $visual-verdict로 점수 85 이상이 나올 때까지 이터레이션합니다.

언제 쓰나

• URL을 주고 자신의 프레임워크 스택으로 로컬 복제본을 만들고 싶을 때
• 시각적 정확도뿐 아니라 링크·폼·토글 같은 기능 동작도 재현해야 할 때
• 빈 캔버스 대신 실제 디자인에서 시작하는 프로토타이핑을 할 때

정적 스크린샷만 있는 경우에는 $visual-verdict를 직접 쓰세요.

트리거 키워드: "web-clone", "clone site", "clone website", "copy webpage", "replicate this URL"

호출 방법

codex
> web-clone https://news.ycombinator.com

codex
> $web-clone https://example.com/pricing output_dir=./clones/pricing tech_stack=react

동작 방식

5개 패스로 진행합니다.

Pass 1 (추출) Playwright로 URL에 접근해 레퍼런스 기준선으로 쓸 전체 페이지 스크린샷을 찍고, 접근성 트리로 구조를 파악하고, DOM과 계산된 스타일을 추출하고, 인터랙티브 요소를 목록으로 만듭니다.

Pass 2 (빌드 계획) 추출 결과를 분석해 페이지 영역을 컴포넌트로 매핑하고, 색상 팔레트·폰트 스택·간격 단위 같은 디자인 토큰을 추출하고, 클론의 파일 구조를 설계합니다.

Pass 3 (클론 생성) 디자인 토큰 → 레이아웃 셸 → 각 영역을 위에서 아래로 → 내비게이션·폼·드롭다운·토글 인터랙션 순서로 컴포넌트별 구현합니다.

Pass 4 (검증) 클론을 로컬에서 서빙하고 전체 스크린샷을 찍어 $visual-verdict로 원본과 비교합니다. 인터랙션 2-3개를 Playwright로 점검합니다.

Pass 5 (반복) verdict에서 영향이 큰 수정 사항을 적용하고 재검증합니다. 판정이 pass이거나 5회 상한에 도달할 때까지 반복합니다.

출력

• output_dir에 요청한 기술 스택으로 생성된 클론 프로젝트 파일
• .omx/state/{scope}/web-clone-extraction.json — 랜드마크와 인터랙션 수가 포함된 추출 요약
• .omx/state/{scope}/web-clone-verdicts.json — 각 검증 패스 후 누적 판정
• 클론 성공 항목과 남은 차이점을 정리한 최종 리포트

관련 스킬

• $frontend-ui-ux — 클론 패스 내에서 컴포넌트 생성에 사용하는 UI 스킬
• $visual-verdict — 각 클론 이터레이션을 판정하는 시각 QA 도구