Copia una web mirándola

Frío o caliente

Copiar algo mirándolo es mucho más fácil cuando se puede comprobar el resultado. Con un modelo de IA pasa lo mismo: si el bucle le dice en qué se aparta su copia del original, puede ir afinándola sin que nadie le explique cómo estaba hecho.

Dos trabajos de investigación de 2026 han llevado esa idea a programas enteros y a miles de páginas web. Y el mismo esquema cabe en un ordenador personal, con una tarjeta de producto como la de la imagen.

Programas enteros sin ver el código

MirrorCode es una prueba de programación de largo recorrido publicada el 29 de junio de 2026 en arXiv, el repositorio abierto de artículos científicos. La firman investigadores de Epoch AI, organización de investigación sin ánimo de lucro sobre el futuro de la inteligencia artificial que se financia con donaciones y hace estudios por encargo para empresas y gobiernos; de METR, organización sin ánimo de lucro que evalúa modelos de IA, y de otras tres organizaciones.

Un agente de IA tiene que rehacer un programa entero sin ver su código fuente. Solo puede ejecutarlo con los argumentos que quiera y mirar qué devuelve, lo que los autores llaman «a black-box oracle», un oráculo de caja negra. Su versión debe dar exactamente la misma salida en pruebas de principio a fin, incluidas otras que no ha visto.

Son 25 programas de campos muy distintos, de utilidades de Unix a criptografía y compresión. De los tres modelos principales evaluados, Claude Opus 4.7, GPT-5.5 y Gemini 3.1 Pro Preview, el mejor fue Claude Opus 4.7, que según los autores rehízo casi por completo gotree, una herramienta de bioinformática escrita en Go.

Los autores matizan que funciona sobre todo cuando los requisitos están definidos con precisión, y que la mayoría de los fallos vinieron de casos límite.

Webs a partir de una foto

WebUI-95 aplica la idea a la web. Es un resumen extendido aceptado en CHI 2026, un congreso internacional de interacción persona-ordenador celebrado en Barcelona, y lo publica en su página Tommaso Calò, investigador posdoctoral de la Universidad IT de Copenhague (IT University of Copenhagen) especializado en interacción persona-ordenador e inteligencia artificial.

A un modelo de IA especializado en pasar de captura a código se le dio la imagen de cada página de WebUI, un conjunto de datos de páginas web, y su código se pintó con Playwright, una biblioteca de código abierto para controlar navegadores. El parecido lo mide UIClip, un modelo ajustado para comparar capturas de interfaces, con la similitud coseno: otra medida, distinta de la del ejemplo de más abajo.

Según los autores, el código rehecho ocupa en torno a un 95 % menos que el original porque las webs reales arrastran frameworks, restos de compilación y capas que no se ven, y el modelo solo reescribe lo visible.

El bucle, ronda a ronda

En un ejemplo con una tarjeta de producto ficticia, una «Lámpara Girasol» hecha a mano en HTML y CSS, se capturó la página a 800 × 600 píxeles con Playwright y se le pasó a Claude Haiku 5.5, el modelo más ligero de la familia Claude de Anthropic, con `claude -p --model claude-haiku-5-5` desde Claude Code.

La primera orden: escribir un único HTML autocontenido, con el CSS en `<style>`, sin imágenes externas ni JavaScript y con la fuente DejaVu Sans, que reprodujera la captura a 800 × 600. En las rondas siguientes recibía el original, su último intento, el mapa de diferencias, su HTML y la nota SSIM, con la orden de corregir posiciones, tamaños, colores, tipografía y márgenes.

La nota se calculó sobre la página entera y sobre un recorte de la tarjeta, porque el fondo liso, que cualquier intento acierta, infla la primera.

El primer intento ya acertó la composición. Fallaba lo fino, que su mapa de diferencias, el de la imagen, marca en rojo: el tamaño, el interlineado y la posición del texto, el botón y el círculo. El mapa está normalizado al máximo de cada imagen: el de la última ronda se vería igual de rojo aunque sus diferencias son mucho menores.

Y no mejoró siempre. El mejor intento fue el tercero; el cuarto empeoró un poco, y las dos últimas rondas solo tocaron píxeles sueltos, como una letra de 13 a 12,8 píxeles. Guarda el mejor intento, no el último, y detente cuando la nota deje de subir.

El HTML rehecho es más largo que el original, que ya era limpio: el ahorro de WebUI-95 viene de webs reales cargadas de código que no se ve. Y cinco rondas de un único ejemplo no miden la calidad de un modelo; solo enseñan cómo funciona el bucle.

Hazlo tú

Hace falta Python 3, `pip install playwright scikit-image pillow`, `playwright install chromium` para descargar el navegador y un modelo que lea imágenes: vale cualquier asistente que acepte una imagen y devuelva código, o un modelo local con visión, aunque puede rendir peor.

Paso 1: captura una página propia y sencilla a un tamaño fijo, por ejemplo 800 × 600, con `page.screenshot(path="original.png")`. Paso 2: pide al modelo un HTML autocontenido que la reproduzca, con la orden de la primera ronda del ejemplo.

Paso 3: pinta el HTML al mismo tamaño y calcula el SSIM con `structural_similarity(a, b, channel_axis=2, data_range=255)` de scikit-image, en la página entera y en la zona del contenido. Con `full=True` devuelve además el mapa píxel a píxel, de donde sale la imagen de diferencias.

Paso 4: pasa al modelo el original, su intento, el mapa, el HTML y la nota, y pídele que corrija; repite cuatro o cinco rondas. Paso 5: apunta cada una en la tabla y quédate con la mejor.

La imagen muestra la última ronda: a simple vista apenas se distingue del original, aunque su nota quedó un poco por debajo de la del tercer intento.

Ojo: el SSIM castiga mucho que el texto se mueva unos píxeles, una nota alta no garantiza un código bueno ni accesible y la fuente debe ser la misma en las dos capturas.

Lo que puedes copiar y lo que no

La Ley de Propiedad Intelectual separa la idea de su expresión. Su artículo 96.4 dice: «No estarán protegidos mediante los derechos de autor con arreglo a la presente Ley las ideas y principios en los que se basan cualquiera de los elementos de un programa de ordenador incluidos los que sirven de fundamento a sus interfaces».

El artículo 100.3 permite al usuario legítimo de un programa «observar, estudiar o verificar su funcionamiento, sin autorización previa del titular, con el fin de determinar las ideas y principios implícitos en cualquier elemento del programa» mientras lo usa con derecho a hacerlo.

Pero el código, los textos, las fotos, las ilustraciones, los logotipos y las marcas de una web sí pueden estar protegidos, y las condiciones de uso de un sitio pueden prohibir copiarlo. Practica con webs propias o con permiso y no publiques la copia de una ajena. Esto no es asesoramiento legal.