웹사이트 픽셀 단위로 복제하는 오픈소스 AI 스킬 'clone-website' 공개

clone-website는 웹사이트를 픽셀 단위로 정밀하게 복제하는 오픈소스 에이전트 스킬이다. 지원 환경에서 /clone-website와 URL을 입력하면 에이전트가 디자인 토큰과 에셋을 수집해 프론트엔드를 그대로 재구축한다.

에이전트의 대충 넘어가기를 막는 법

전체 웹페이지 생성을 AI에게 통째로 맡기면 여백과 폰트를 임의로 추측해 겉보기만 비슷하고 디테일이 엉망인 결과물이 나오기 쉽다. 이 프로젝트는 엄격한 엔지니어링 규칙으로 이 문제를 풀었다.

핵심은 작업의 강제 분할이다. 단일 컴포넌트의 명세가 약 150줄을 넘어가면 작업을 쪼개도록 강제하며, 에이전트에는 getComputedStyle()로 추출한 실제 CSS 계산값과 개별 컴포넌트만 전달해 자의적인 추측을 차단한다.

작업 전에는 스크린샷, 실제 문구, 로컬 에셋 경로, 상태별 화면을 정리한 명세서를 만들어 일종의 계약서처럼 프롬프트에 넣는다. 또한 화면을 먼저 스크롤해 보며 인터랙션이 스크롤 기반인지 클릭 기반인지 확인해 전면 재작업 위험을 줄인다. 이후 여러 에이전트가 각자의 git worktree 브랜치에서 병렬로 코드를 작성하고, 병합 후 원본 사이트와 시각적 차이를 비교 검증한다.

왜 중요한가

웹페이지 코드를 긁어오는 도구는 많지만, AI가 대충 때려 맞춘 스타일을 사람이 일일이 수정하느라 품이 더 드는 경우가 잦았다. 이 프로젝트는 작업을 잘게 쪼개고 실제 렌더링 데이터로 제약을 걸며 격리 환경에서 검증하면 에이전트도 정교한 프론트엔드 복제를 해낼 수 있음을 보여준다. 웹 프로토타입을 빠르게 만들거나 UI를 재구축해야 하는 개발자라면 이 엔지니어링 방식을 눈여겨볼 만하다.