Communitygithub.com

GCW — Gao 복사 웹사이트

공인된 프로덕션 웹사이트를 배포 가능하고 증거 기반으로 검증된 로컬 프로젝트로 복구하며, 라우팅, 에셋, WebGL 및 시각적 회귀 도구를 제공합니다.

GCW — Gao 복사 웹사이트란 무엇인가요?

GCW(Gao Copy Website)는 공개 웹사이트의 실제 작동 방식을 연구하고, 중요한 부분을 재현하며, 실제 브라우저에서 결과를 검증하는 AI 에이전트 스킬입니다. 이 스킬은 소스 코드, 런타임 증거, 시각적 회귀 도구를 사용하여 추측성 AI 생성 결과보다 관찰 가능한 증거를 우선시합니다. Claude Code, Cursor, Codex 등 다양한 AI 에이전트 플랫폼에서 사용 가능하며, 에이전트가 프리플라이트 목표 설정, 사이트 리콘, 로컬 프로젝트 빌드, QA 시나리오 실행을 단계별로 안내합니다. 주로 Node.js, Playwright, Python 스크립트를 활용하며, 소유권 및 라이선스 검증을 엄격히 수행하여 법적 위험을 방지합니다. 테어다운, 충실한 복제, 창의적 재구축, 프로덕션 복구 등 여러 모드를 지원하여 학습 목적부터 실제 프로젝트 복구까지 폭넓게 활용할 수 있습니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add idonafraid-create/GCW

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

GCW — Gao Copy Website

공개 웹사이트가 실제로 어떻게 작동하는지 연구하고, 중요한 부분을 재현한 후, 실제 브라우저에서 결과를 검증하세요. 그럴듯한 AI 추측보다 실제 소스와 관찰 가능한 런타임 증거를 선호하세요.

세 가지 규칙을 기억하세요:

  1. 구현하기 전에 증거를 찾으세요.
  2. 리팩토링하기 전에 실행 가능하게 만드세요.
  3. 다듬기 전에 비교하세요.

경계

  • 대상이 사용자 소유이거나, 의도된 재사용을 위해 라이선스가 부여되었거나, 명시적으로 승인된 경우에만 진행하세요. 인증이 모호한 경우에만 물어보세요.
  • 명시적으로 승인되지 않은 한, 인증된 콘텐츠, 패스코드 전용 콘텐츠 및 비공개 콘텐츠는 범위 밖으로 간주하세요.
  • 접근 제어를 우회하거나 자격 증명을 복구, 전송 또는 커밋하지 마세요.
  • 공개 재사용 전에 코드, 폰트, 이미지, 모델 및 브랜드 권한을 별도로 확인하세요.
  • 불확실한 기술적 주장은 SOURCE, PARTIAL 또는 GUESS로 표시하세요.
  • 배포된 번들을 원본 작성 소스로 제시하지 마세요.

1. 도구보다 목표를 먼저 선택하세요

references/clone-modes.md를 읽고 하나의 기본 모드를 선택하세요:

  • TEARDOWN: 재구축을 약속하지 않고 실제 디자인과 구현을 이해합니다.
  • FAITHFUL_CLONE: 증거가 허용하는 한 관찰 가능한 사이트를 최대한 가깝게 재현합니다.
  • CREATIVE_REBUILD: 브랜드와 콘텐츠를 대체하면서 선택된 구조, 리듬 또는 상호작용 아이디어를 보존합니다.
  • PRODUCTION_RECOVERY: 유지 관리 가능한 소스를 사용할 수 없을 때 소유한 배포 사이트를 복구합니다.

간단한 프리플라이트를 기록하세요:

- 목표:
- 사이트 유형:
- 소스 가용성:
- 재사용 경계:
- 높은 신뢰도 범위:
- 근사 또는 제외 범위:
- 권장 경로:

모든 프로젝트에 프로덕션 복구 비용을 부담시키지 마세요. 선택한 목표를 지원할 수 있는 가장 가벼운 증거와 검증을 사용하세요.

2. 먼저 실제 구현을 찾으세요

스크래핑이나 재구축 전에:

  • 사이트 이름, 제품 이름, 도메인 소유자 및 배포 슬러그를 검색하여 공식 공개 저장소를 찾으세요.
  • 소스 맵, 프레임워크 메타데이터 및 공개 배포 아티팩트를 검사하세요.
  • 저장소 및 에셋 라이선스를 확인하세요. 공개 가용성이 재배포 권한을 의미하지는 않습니다.
  • 원본 소스, 배포된 아티팩트 및 편집 가능한 구현을 명확히 분리하세요.
  • 최종 표준 HTTP(S) URL을 사용하세요. GCW는 자격 증명이 포함된 URL과 구성된 오리진을 벗어나는 문서 리디렉션을 거부합니다.

공식 재사용 가능한 소스가 존재하면 그것부터 시작하세요. 존재하지 않으면 런타임 정찰을 계속하고 아직 알려지지 않은 부분을 명시하세요.

3. 프로젝트 기록을 초기화하세요

작업 공간 AGENTS.md를 읽으세요. 이 머신이 검증되지 않은 경우, GCW 저장소에서 npm install, npm run install:browser 및 npm run check를 실행하세요.

비파괴적 프로젝트 기록을 생성하세요:

python scripts/init_reconstruction.py <workspace> --url <canonical-url> --authorization <owned|licensed|authorized>

매니페스트, 스크린샷, 보고서 및 알려진 격차에는 .gcw/를 사용하세요. 기존 증거를 조용히 덮어쓰지 마세요.

4. 사이트를 정찰하고 표면을 분류하세요

Node.js와 Playwright를 사용할 수 있을 때 인벤토리를 실행하세요:

node scripts/site_inventory.mjs --url <canonical-url> --out <workspace>/.gcw/evidence/network/site-inventory.json

그런 다음 자동화가 안정적으로 추론할 수 없는 것을 확인하세요:

  • 라우트, 페이지 패밀리, 딥 링크 및 반응형 중단점
  • DOM 루트, 고정 오버레이 및 내부 스크롤 컨테이너
  • 호버, 클릭, 드래그, 스크롤, 시간, 크기 조정, 테마 및 저장소 상태
  • Canvas, WebGL, WebGPU, 워커, iframe, 비디오, 오디오 및 지연 리소스
  • 로딩 상태와 안정적인 애플리케이션 상태
  • 로컬 픽스처가 필요한 공개 API 및 데이터 종속성

Canvas/WebGL/WebGPU 소유권, 셰이더 및 렌더 파이프라인에는 web-shader-extractor를 사용하세요. 바이트 수준 아티팩트보다 타이포그래피, 간격, 팔레트, 레이아웃, 모션 또는 시각적 언어를 보존하는 것이 목표일 때 design-dna를 사용하세요.

5. 구현 경로를 선택하세요

증거 및 사이트 유형에서 경로를 선택하세요:

증거 또는 사이트 유형기본 경로
공식 재사용 가능 소스라이선스 내에서 소스를 실행하고 적응
간단한 정적 사이트공개 파일 및 URL 경로 보존, 추적 제거 및 콘텐츠 교체
콘텐츠 중심 React/Vue/Next 사이트페이지 템플릿 재구축 및 공개 또는 로컬 픽스처 데이터 사용
다중 페이지 마케팅 사이트공유 템플릿 구축 전에 라우트 및 페이지 패밀리 매핑
상호작용 중심 사이트먼저 상태 캡처 후 상태 전환 재현
WebGL/Canvas 사이트프로젝트화 전에 렌더/입력/출력 모델 복구
시각적 영감 전용Design DNA 추출 및 원본 구현 구축
소스 손실 프로덕션 사이트references/recovery-tiers.md 및 references/gates.md 읽기, 검증된 재생 오라클 설정

선택한 모드에 필요하지 않은 타사 아티팩트를 보관하거나 복사하지 마세요.

6. 실행 가능한 로컬 프로젝트를 구축하세요

  • 새 프로젝트를 편집하는 동안 안정적인 참조 또는 증거 기록을 유지하세요.
  • 홈페이지뿐만 아니라 범위 내 모든 라우트를 복원하세요.
  • 선택한 호스트에서 탐색 및 딥 링크 동작을 보존하세요.
  • 사용할 수 없는 서버 동작을 명시적 픽스처 또는 안전한 폴백으로 대체하세요.
  • 개발 서버뿐만 아니라 프로덕션 빌드 및 정적 미리보기도 확인하세요.

해당되는 경우 라우트 검사를 실행하세요:

python scripts/route_smoke.py --base-url <preview-url> --route / --route /example

7. 실제 브라우저에서 확인하세요

references/qa-scenarios.md 및 references/tooling.md를 읽으세요.

소스 및 후보 시나리오를 정의한 후 일치하는 상태를 캡처하세요:

node scripts/capture_compare.mjs --config <capture-scenarios.json> --output <results-dir>
python scripts/batch_image_diff.py <results-dir> --diff-dir <results-dir>/diff

뷰포트, DPR, 라우트, 포인터, 스크롤, 랜덤 시드, 준비 상태 및 시간 단계를 일치시키세요. 스크린샷과 차이 이미지를 검사하세요. 단일 글로벌 점수는 상호작용 또는 컴포지터 실패를 설명할 수 없습니다.

색상, 오프셋 또는 애니메이션 속도를 조정하여 누락된 배선을 숨기지 마세요. 위상에 민감한 영역을 결정론적 실패와 분리하세요.

8. 클론뿐만 아니라 학습 내용을 전달하세요

선택한 모드에 필요한 문서만 출력하세요:

  • TEARDOWN.md: 실제 구현, 증거 수준 및 전이 가능한 기술
  • DESIGN_DNA.json: 창의적 재구축을 위한 디자인 시스템, 시각적 언어 및 효과
  • REPLACE_GUIDE.md: 텍스트, 미디어, 색상, 폰트, 모델 및 데이터를 교체할 위치
  • CLONE_REPORT.md: 소스 대 로컬 비교, 트레이드오프 및 알려진 격차
  • 실행 가능한 프로젝트, 빌드 명령 및 배포 노트

텍스트가 GLTF/GLB 형상에 구워진 고급 에셋의 경우, 메인 워크플로우를 확장하는 대신 references/special-cases.md를 읽으세요.

9. 필요할 때만 강화하세요

유지 관리되는 프로젝트 또는 프로덕션 복구의 경우, 스크린샷 회귀 러너를 설치하세요:

python scripts/install_ci.py <project-root> --source-url <canonical-url>

CI는 일회성 테어다운 또는 학습 연습에서는 선택 사항입니다. 설치된 경우, 임계값이 실패하더라도 스크린샷, 차이 및 보고서를 업로드해야 합니다.

10. 정직하게 마무리하세요

  • 빌드와 프리플라이트에서 약속한 QA 시나리오를 다시 실행하세요.
  • 알려진 격차와 필요한 다음 증거를 기록하세요. 성공적인 상호작용을 절대 만들어내지 마세요.
  • 적응된 버전을 게시하기 전에 추적 및 원본 브랜드 잔여물을 제거하세요.
  • 깨끗한 Git 체크포인트를 남기세요. 사용자 승인 없이 푸시하지 마세요.
  • 원본 아이디어, 재사용된 라이선스 자산, 관찰된 동작 및 자체 구현을 구분하세요.

관련 스킬