boyang-hu/website-rebuild-skill

해결하는 문제

이 프로젝트는 기존 웹사이트를 고정밀도로, 줄 단위로 재구성할 수 있는 시스템을 제공합니다. 단순한 웹사이트 스크래퍼나 '클론' 도구가 시각적 외관만을 캡처하는 것과 달리, 이 도구는 원본 로직과 구현을 역으로 분석하여, 원본 사이트와 증명 가능한 동일성을 갖는 기능성 있는 인간이 읽을 수 있는 소스 코드 프로젝트를 생성하는 데 초점을 맞춥니다.

작동 방식

이 과정은 AI 에이전트를 위한 엄격한 파이프라인을 따릅니다:

1. 분류: 에이전트는 사이트가 재구성 가능한지 판단합니다 (예: 정적 사이트, WebGL 장면, 서버 사이드 렌더링 앱 등).
2. 증거 미러링: 전체 사이트의 읽기 전용 스냅샷이 캡처되어, 향후 모든 비교의 절대적 진실로 사용됩니다.
3. 역설계: 압축되고 난독화된 코드가 확장되며, 재구성된 각 줄이 원본 번들에서 특정 줄로 추적될 수 있도록 매핑이 생성됩니다.
4. 포팅: 로직이 새 프로젝트로 이식되며, 모든 변경 사항이 차이 표에 기록됩니다.
5. 검증: 에이전트는 콘솔 로그, 네트워크 요청, DOM 구조, 기하학적 구조, 픽셀 단위 시각적 일치의 다섯 계층에서 정량적 비교를 수행합니다.
6. 소스화: 최종 출력은 원본과 바이트 수준에서 동일성을 유지하면서도, 적절한 이름과 주석을 갖춘 깔끔하고 모듈화된 인간이 읽을 수 있는 공학 프로젝트로 리팩터링됩니다.

대상 사용자

• 개발자 및 연구자: 복잡한 웹 애니메이션, WebGL 엔진, 또는 고급 프론트엔드 아키텍처의 구현 방식을 연구하고자 하는 사람.
• AI 에이전트 사용자: Claude Code나 Codex와 같은 에이전트를 사용하여 학습이나 마이그레이션을 위해 웹 자산을 자동으로 재구성하고자 하는 사람.
• 디지털 아카이브 담당자: 웨이백 머신과 같은 아카이브에서 "사라진" 웹사이트를 구출하려는 사람.

주요 특징

• 픽셀 단위 정확성: 재구성된 결과가 원본과 동일함을 보장하는 정량적 검증을 사용하며, 평균 절대 오차가 0.00에 도달하는 경우도 있습니다.
• RSC 지원: "flight" 스트림 출력을 분석하여 Next.js App Router 사이트를 재구성할 수 있습니다.
• 의존성 없는 도구 체인: 핵심 파이프라인은 npm 패키지가 필요 없는 70개의 Node 스크립트로 구성되며, 최종 소스화 단계까지 의존성이 없습니다.
• 사라진 사이트 복구: 캡처된 바이트에서 웨이백 머신의 사이트를 재구성하여 복구할 수 있습니다.
• 추적 가능한 로직: 재구성된 코드의 각 줄이 원본 사이트 번들의 특정 줄로 추적 가능합니다.