Clonar un sitio web
Recrea las páginas suministradas en la aplicación actual. Coincide con el origen antes de agregar una nueva dirección de diseño. Entrega código editable y funcional: las capturas de pantalla, iframes y paquetes de producción descargados son referencias, no la implementación.
1. Mapear el trabajo
Lee las instrucciones del proyecto, el framework/scripts real y las rutas existentes. Abre las URL de origen con el navegador disponible. Prefiere HTTP directo, herramientas de activos o API para la extracción cuando sea práctico; usa el navegador para establecer la apariencia y el comportamiento.
Registra un mapa de ruta corto de origen a local y los archivos que posee cada página. Sigue las convenciones de la aplicación; en esta plantilla usa src/app/, src/components/sites/<site>/, public/sites/<site>/ y docs/research/<site>/. Asigna nombres distintos a orígenes, páginas y descargas; agrega un puerto o hash de URL cuando los nombres legibles colisionen.
- Un primer clon raíz puede reemplazar la página de inicio de la plantilla intacta.
- Preserva las rutas de origen para múltiples páginas de un mismo origen. Las variaciones de consulta/fragmento generalmente representan estados de la misma ruta; reproduce esos estados.
- Preserva las rutas/activos existentes del autor. Actualízalos cuando se solicite; resuelve las colisiones de rutas no solicitadas antes de reemplazar cualquier cosa.
- Al agregar páginas a un clon existente, extiende su diseño y estilos globales sin reemplazar los estilos utilizados por las páginas existentes.
- Usa aplicaciones separadas para diferentes orígenes a menos que el usuario quiera una aplicación combinada. Los sitios combinados necesitan prefijos de ruta distintos y fuentes, estilos y diseño con alcance.
- Escapa los segmentos de URL literales que entren en conflicto con la sintaxis del framework (
_,@, corchetes, paréntesis) utilizando su mecanismo compatible, luego verifica la URL real solicitada.
Los clones existentes son puntos de partida útiles: compáralos con la fuente actual y registra lo que se reutilizó. Termina cuando cada URL solicitada tenga un destino y la propiedad de los archivos sea clara.
2. Observar antes de construir
Inspecciona toda la página en anchos de escritorio y móvil. Desplázate de arriba a abajo para cargar medios diferidos y revelar escenas fijas o ancladas. Luego, ejercita menús, pestañas, acordeones, carruseles, estados de hover y enlaces principales. Distingue los cambios impulsados por desplazamiento, clic, hover o tiempo; una imitación de clic de una sección impulsada por desplazamiento es un producto diferente.
Trata cada observación como una muestra de una regla. Lee los valores declarados (estilos calculados, variables CSS, opciones activas de una biblioteca) en lugar de inferirlos a partir de una sola representación, y varía el ancho de la ventana gráfica (incluyendo más ancho que el diseño), la altura de la ventana gráfica, la entrada y el estado hasta que sepas qué impulsa cada cambio. Conduce la página con las entradas que usan los visitantes (rueda, táctil, teclado, puntero); el desplazamiento mediante script evita el comportamiento adjunto a ellos, como el desplazamiento suave.
Guarda capturas de pantalla de origen etiquetadas con la ventana gráfica, la posición de desplazamiento y el estado de interacción. Captura el contenido/activos de estados alternativos. Mantén un resumen compacto de la página: orden de secciones, tipografía, medidas de diseño, mapeo de activos e interacciones. Agrega resúmenes de secciones solo cuando ayuden a los constructores independientes.
Lee la referencia de inspección para la extracción y comparación de estados. Para páginas generadas con Framer, escenas fijas, animaciones de revelación o medios animados, lee Framer y movimiento.
Usa el texto real de la fuente y los archivos que realmente carga: fuentes, imágenes, SVG y video. Un sustituto del mismo nombre de otro proveedor o conjunto de iconos tiene diferentes métricas o formas. Mide geometría/estilos calculados importantes. Inspecciona imágenes en capas y elementos multimedia antes de reconstruir un visual como HTML. Rastrea URL de origen → ruta de activo local y verifica el tipo de contenido/dimensiones: una URL .png puede devolver AVIF.
Termina cuando cada sección y estado significativo tenga suficiente evidencia para construir, con los detalles no disponibles identificados. Un volcado grande del DOM no reemplaza mirar la página.
3. Construir una primera pasada completa
Establece primero fuentes, ancho de página, colores, activos, rutas, comportamiento en toda la página y componentes compartidos. Construye cada componente compartido con cada estado observado (hover, foco, puntos de interrupción) para que los constructores lo reutilicen tal cual. Reutiliza componentes apropiados. Prefiere CSS para diseño/movimiento simple y una biblioteca de animación cuando el comportamiento de la fuente lo necesite.
Construye secciones coherentes con contenido real. Delega páginas/secciones independientes después de que los archivos compartidos tengan un propietario. Proporciona a los constructores capturas de pantalla, mediciones/notas de estado relevantes, rutas de activos, archivos de destino y una línea de meta concreta. Un resumen conciso con referencias de archivos precisas es suficiente; no se requiere un número fijo de agentes ni papeleo por componente.
Recrea las interacciones dentro del alcance. Preserva los destinos salientes reales. Reescribe los enlaces a rutas locales cuando esas rutas estén incluidas; deja los destinos fuera del alcance apuntando a la fuente y divúlgalos. Los controles visibles deben realizar el comportamiento que prometen.
Ejecuta la verificación del proyecto apropiada después de una porción integrada. Termina esta pasada cuando cada sección/ruta solicitada se represente con activos reales y los controles importantes funcionen.
4. Comparar, reparar, repetir
Abre las páginas de origen y locales en la misma ventana gráfica, posición de desplazamiento y estado. Deja que las fuentes, los medios y las animaciones de revelación se asienten. Revisa toda la página donde el paso 2 encontró un cambio de regla, más una ventana gráfica más ancha que el diseño; juzga el comportamiento de desplazamiento y puntero con entrada real. Un montaje lado a lado localiza la deriva; las secciones de tamaño completo establecen el detalle.
Corrige primero las diferencias visibles más grandes: geometría, secciones/capas faltantes, tipografía/ajuste, recorte de activos, luego espaciado y movimiento. Vuelve a verificar las vistas afectadas. Compara las regiones animadas en estados inicial, activo y establecido, incluyendo el desplazamiento inverso cuando sea relevante.
Ejercita el flujo de trabajo local real: navegación entre rutas clonadas, menú móvil, estados de pestañas/acordeón, límites de carrusel, acciones principales, controles multimedia y transiciones observadas vinculadas al desplazamiento. Verifica errores de tiempo de ejecución, activos faltantes y desbordamiento horizontal. Al agregar páginas, verifica que las rutas existentes aún funcionen. Usa algunas comprobaciones del navegador en estos límites en lugar de afirmaciones sobre nombres de clases.
Ejecuta la verificación de producción del proyecto. La finalización requiere una compilación exitosa y una comparación representada. Indica las diferencias restantes con precisión en lugar de llamar a un resultado no verificado perfecto en píxeles.
Entrega
Devuelve instrucciones de vista previa/ejecución, el mapa de ruta de origen a local, comparaciones representativas de escritorio/móvil, comprobaciones realmente realizadas y las brechas visuales/funcionales restantes. Mantén los clones de referencia en aplicaciones separadas cuando se mantenga la plantilla reutilizable.