¿Qué hace GCW — Gao Copy Website?
Estudia cómo funciona realmente un sitio web público, reproduce las partes que importan y verifica el resultado en un navegador real. Prefiere la fuente real y la evidencia observable de ejecución sobre las suposiciones plausibles generadas por IA.
Recuerda tres reglas:
- Encuentra evidencia antes de implementar.
- Hazlo funcionar antes de refactorizar.
- Compara antes de pulir.
Límites
- Procede solo cuando el objetivo sea propiedad del usuario, esté licenciado para la reutilización prevista o autorizado explícitamente. Pregunta solo cuando la autorización sea ambigua.
- Trata el contenido autenticado, solo con código de acceso y privado como fuera del alcance a menos que esté explícitamente autorizado.
- No eludas los controles de acceso ni recuperes, envíes o confirmes credenciales.
- Verifica los derechos de código, fuentes, imágenes, modelos y marcas por separado antes de la reutilización pública.
- Etiqueta las afirmaciones técnicas inciertas como
SOURCE,PARTIALoGUESS. - No presentes paquetes desplegados como fuente de autoría original.
1. Elige el objetivo antes que las herramientas
Lee references/clone-modes.md y selecciona un modo principal:
TEARDOWN: comprende el diseño y la implementación reales sin prometer una reconstrucción.FAITHFUL_CLONE: reproduce el sitio observable lo más fielmente posible según la evidencia.CREATIVE_REBUILD: preserva la estructura, el ritmo o las ideas de interacción seleccionadas mientras se reemplazan la marca y el contenido.PRODUCTION_RECOVERY: recupera un sitio desplegado de propiedad cuando la fuente mantenible no está disponible.
Registra un breve pre-vuelo:
- Objetivo:
- Tipo de sitio:
- Disponibilidad de fuente:
- Límite de reutilización:
- Alcance de alta confianza:
- Alcance aproximado o excluido:
- Ruta recomendada:
No hagas que cada proyecto pague el costo de la recuperación de producción. Usa la evidencia y verificación más ligeras que puedan soportar el objetivo seleccionado.
2. Busca la implementación real primero
Antes de raspar o reconstruir:
- Busca el nombre del sitio, nombre del producto, propietario del dominio y slug de despliegue en busca de un repositorio público oficial.
- Inspecciona mapas de fuente, metadatos del framework y artefactos de despliegue públicos.
- Verifica las licencias del repositorio y los activos; la disponibilidad pública no es permiso para redistribuir.
- Mantén la fuente original, los artefactos desplegados y tu implementación editable claramente separados.
- Usa la URL HTTP(S) canónica final. GCW rechaza URLs con credenciales y redirecciones de documentos que abandonen el origen configurado.
Cuando exista una fuente oficial reutilizable, comienza desde ella. Cuando no exista, continúa con el reconocimiento en tiempo de ejecución y declara lo que permanece desconocido.
3. Inicializa el registro del proyecto
Lee el AGENTS.md del espacio de trabajo. Si esta máquina no ha sido verificada, ejecuta npm install, npm run install:browser y npm run check en el repositorio GCW.
Crea un registro de proyecto no destructivo:
python scripts/init_reconstruction.py <workspace> --url <canonical-url> --authorization <owned|licensed|authorized>
Usa .gcw/ para manifiestos, capturas de pantalla, informes y brechas conocidas. No sobrescribas evidencia existente silenciosamente.
4. Reconoce el sitio y clasifica sus superficies
Ejecuta el inventario cuando Node.js y Playwright estén disponibles:
node scripts/site_inventory.mjs --url <canonical-url> --out <workspace>/.gcw/evidence/network/site-inventory.json
Luego verifica lo que la automatización no puede inferir de manera confiable:
- rutas, familias de páginas, enlaces profundos y puntos de interrupción responsivos
- raíces del DOM, superposiciones fijas y contenedores de desplazamiento interno
- estados de hover, clic, arrastre, desplazamiento, tiempo, redimensionamiento, tema y almacenamiento
- Canvas, WebGL, WebGPU, workers, iframes, video, audio y recursos diferidos
- estado de carga versus el estado estable de la aplicación
- APIs públicas y dependencias de datos que necesitan fixtures locales
Usa web-shader-extractor para la propiedad de Canvas/WebGL/WebGPU, shaders y pipelines de renderizado. Usa design-dna cuando el objetivo sea preservar la tipografía, el espaciado, la paleta, el diseño, el movimiento o el lenguaje visual en lugar de artefactos a nivel de bytes.
5. Elige la ruta de implementación
Selecciona la ruta según la evidencia y el tipo de sitio:
| Evidencia o tipo de sitio | Ruta predeterminada |
|---|---|
| Fuente oficial reutilizable | Ejecuta y adapta la fuente dentro de su licencia |
| Sitio estático simple | Preserva archivos públicos y rutas URL, luego elimina el rastreo y reemplaza el contenido |
| Sitio React/Vue/Next con mucho contenido | Reconstruye plantillas de página y usa datos públicos o fixtures locales |
| Sitio de marketing con varias páginas | Mapa de rutas y familias de páginas antes de construir plantillas compartidas |
| Sitio con mucha interacción | Captura estados primero, luego reproduce las transiciones de estado |
| Sitio WebGL/Canvas | Recupera el modelo de render/entrada/salida antes de proyectizarlo |
| Solo inspiración visual | Extrae el ADN de diseño y construye una implementación original |
| Sitio de producción sin fuente | Lee references/recovery-tiers.md y references/gates.md, luego establece un oráculo de reproducción verificado |
No archives ni copies artefactos de terceros que el modo seleccionado no necesite.
6. Construye un proyecto local ejecutable
- Mantén un registro de referencia o evidencia estable mientras editas el nuevo proyecto.
- Restaura cada ruta dentro del alcance, no solo la página de inicio.
- Preserva la navegación y el comportamiento de enlaces profundos en el host elegido.
- Reemplaza el comportamiento del servidor no disponible con fixtures explícitos o fallbacks seguros.
- Verifica la compilación de producción y la vista previa estática, no solo el servidor de desarrollo.
Ejecuta verificaciones de ruta cuando corresponda:
python scripts/route_smoke.py --base-url <preview-url> --route / --route /example
7. Verifica en un navegador real
Lee references/qa-scenarios.md y references/tooling.md.
Define escenarios de origen y candidatos, luego captura los estados coincidentes:
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
Empareja viewport, DPR, ruta, puntero, desplazamiento, semilla aleatoria, disposición y fase de tiempo. Inspecciona las capturas de pantalla y las imágenes de diferencia; una puntuación global única no puede explicar fallos de interacción o del compositor.
No ocultes cableado faltante ajustando colores, desplazamientos o velocidad de animación. Mantén las regiones sensibles a la fase separadas de los fallos deterministas.
8. Entrega el aprendizaje, no solo el clon
Genera solo los documentos requeridos por el modo seleccionado:
TEARDOWN.md: implementación real, nivel de evidencia y técnicas transferiblesDESIGN_DNA.json: sistema de diseño, lenguaje visual y efectos para una reconstrucción creativaREPLACE_GUIDE.md: dónde reemplazar texto, medios, colores, fuentes, modelos y datosCLONE_REPORT.md: comparación fuente vs local, compensaciones y brechas conocidas- proyecto ejecutable, comando de compilación y notas de despliegue
Para casos avanzados de activos como texto horneado en geometría GLTF/GLB, lee references/special-cases.md en lugar de expandir el flujo de trabajo principal.
9. Endurece solo cuando sea necesario
Para proyectos mantenidos o recuperación de producción, instala el ejecutor de regresión de capturas de pantalla:
python scripts/install_ci.py <project-root> --source-url <canonical-url>
CI es opcional para un desmontaje único o ejercicio de aprendizaje. Cuando esté instalado, debe subir capturas de pantalla, diferencias e informes incluso cuando fallen los umbrales.
10. Cierra honestamente
- Vuelve a ejecutar la compilación y los escenarios de QA prometidos en el pre-vuelo.
- Registra las brechas conocidas y la siguiente evidencia necesaria; nunca inventes interacciones exitosas.
- Elimina el rastreo y los residuos de la marca original antes de publicar una versión adaptada.
- Deja un punto de control Git limpio; nunca envíes cambios sin autorización del usuario.
- Distingue ideas originales, activos reutilizados con licencia, comportamiento observado y tu propia implementación.