Communitygithub.com

GCW — Gao Copy Website

Recupera sitios web de producción autorizados en proyectos locales desplegables con verificación de evidencia, enrutamiento, assets, WebGL y herramientas de regresión visual.

¿Qué es GCW — Gao Copy Website?

GCW (Gao Copy Website) es una habilidad para agentes de IA diseñada para estudiar cómo funciona realmente un sitio web público, reproducir las partes relevantes y verificar el resultado en un navegador real. Esta habilidad es útil para desarrolladores y equipos que necesitan recuperar sitios de producción sin fuente mantenible, realizar clonaciones fieles o reconstrucciones creativas basadas en evidencia observacional en lugar de suposiciones de IA. Soporta plataformas como Claude Code, Cursor y otros agentes de desarrollo, y se basa en un flujo de trabajo estructurado en 10 pasos que incluyen: selección del objetivo basada en evidencia, inventario del sitio con Node.js y Playwright, extracción de shaders WebGL, selección de ruta de implementación, construcción de un proyecto local ejecutable, verificación visual en navegador real con capturas y comparación de imágenes, y entrega de documentación como informes de clonación, diseño de ADN y guías de reemplazo. La habilidad enfatiza la honestidad técnica, etiquetando afirmaciones inciertas como `SOURCE`, `PARTIAL` o `GUESS`, y respeta los límites legales y de licencias.

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add idonafraid-create/GCW

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

¿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:

  1. Encuentra evidencia antes de implementar.
  2. Hazlo funcionar antes de refactorizar.
  3. 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, PARTIAL o GUESS.
  • 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 sitioRuta predeterminada
Fuente oficial reutilizableEjecuta y adapta la fuente dentro de su licencia
Sitio estático simplePreserva archivos públicos y rutas URL, luego elimina el rastreo y reemplaza el contenido
Sitio React/Vue/Next con mucho contenidoReconstruye plantillas de página y usa datos públicos o fixtures locales
Sitio de marketing con varias páginasMapa de rutas y familias de páginas antes de construir plantillas compartidas
Sitio con mucha interacciónCaptura estados primero, luego reproduce las transiciones de estado
Sitio WebGL/CanvasRecupera el modelo de render/entrada/salida antes de proyectizarlo
Solo inspiración visualExtrae el ADN de diseño y construye una implementación original
Sitio de producción sin fuenteLee 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 transferibles
  • DESIGN_DNA.json: sistema de diseño, lenguaje visual y efectos para una reconstrucción creativa
  • REPLACE_GUIDE.md: dónde reemplazar texto, medios, colores, fuentes, modelos y datos
  • CLONE_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.

Skills relacionados