El intento fallido de reproducir el sitio web de Space Jam de 1996 con Claude

• En 1996, se llevó a cabo un intento de recrear con el modelo de IA Claude el sitio web oficial de Space Jam de Warner Bros.
• Se le proporcionó a Claude una captura de pantalla y los recursos de imagen originales, pero el HTML generado no coincidía con el original en cuanto al diseño.
• Se añadieron herramientas auxiliares como estimación de coordenadas, superposición de cuadrícula y herramientas de comparación de píxeles, pero Claude todavía no pudo calcular posiciones exactas.
• Claude consideró su resultado como “perfecto”, pero en la práctica mostró errores acumulativos y exceso de confianza en sus propias salidas.
• Este experimento revela una limitación de precisión visual de la IA y un error de autoevaluación, y muestra que la aparente simplicidad del diseño web inicial encierra una complejidad de la que puede ser difícil de reproducir.

---

Resumen del sitio web de Space Jam de 1996

• El sitio web creado por Warner Bros. en 1996 para promocionar la película Space Jam se compone de una única página HTML con fondo en GIF.
  • Colores simples, estructura basada en tablas y un peso inferior a 200 KB.
  • A la fecha, sigue activo en spacejam.com/1996.
• El experimentador quiso comprobar si Claude podía reproducir este sitio usando solo capturas de pantalla.

Preparación del experimento

• Material entregado a Claude
  • Captura de pantalla completa del sitio web
  • Directorio con los activos de imagen originales
• Para rastrear el comportamiento interno de Claude se construyó un sistema de registro de tráfico de API mediante un proxy.
  • Se registraron todos los prompts, respuestas y llamadas a herramientas (Read, Write, Bash, entre otros).
  • Se generó un archivo traffic.log en cada intento.

Parte 1: Claude the Realist

• En el primer intento, Claude reprodujo aproximadamente la disposición de los planetas y la ubicación de los botones, pero el orbital era distinto al original.
  • El original usa una disposición elíptica, pero Claude lo colocó con una forma diamante simétrica.
• Claude evaluó el resultado como “perfecto” y afirmó que su análisis y disposición eran exactos.
• Luego se le pidió que escribiera explícitamente los pasos de razonamiento, pero:
  • No trasladó a la generación HTML los valores numéricos mencionados en la fase de análisis.
• Ante preguntas a nivel de píxel, Claude respondió que:
  • “No puedo medir coordenadas exactas” y “solo puedo hacer estimaciones visuales”.
  • Su confianza en precisión dentro de 5 píxeles fue de 15/100.
• Claude admitió que no tiene capacidad de medición precisa por píxel, y el experimentador probó entonces a ampliar las herramientas.

Parte 2: Claude the Unreliable Narrator

• Para compensar las limitaciones de medición de Claude se añadieron superposición de cuadrícula, etiquetas de coordenadas, herramienta de comparación de color y visor de comparación de capturas de pantalla.
• Claude usó la cuadrícula “como adorno”, y siguió interpretando mal las coordenadas.
  • Por ejemplo, proporcionó valores como centro (961,489), Planet B-Ball (850,165), pero no coincidían con las posiciones reales.
• En múltiples iteraciones, Claude afirmó mejoras graduales, pero en realidad los errores seguían acumulándose.
  • 1.ª iteración (rejilla de 50 px): desplazamiento leve.
  • 2.ª iteración (rejilla de 25 px): todo el orbital se movió 20 px hacia adentro.
  • 3.ª iteración (rejilla de 5 px): ajustes finos repetitivos.
  • 4.ª iteración: anunció “calibración precisa completada”.
• En la práctica, el radio orbital era 150–200 px más pequeño, manteniéndose una distribución comprimida.
• Claude evaluó repetidamente el resultado como “casi perfecto”, pero basó el juicio en sus propios resultados generados.
• El experimentador citó el paper de Anthropic “Language Models (Mostly) Know What They Know”:
  • Describe el fenómeno de sobreconfianza cuando el modelo confunde su propio texto generado como entrada externa.
  • Coincide con la forma en que Claude trató su propio HTML como “respuesta correcta”, distorsionando correcciones posteriores.

Parte 3: Claude the Blind

• Para analizar los límites visuales de Claude se asumió una restricción estructural del codificador visual.
  • Como las imágenes se tokenizan en bloques de 16×16 píxeles, se produce una pérdida de información geométrica fina.
  • Claude puede reconocer conceptos semánticos como “planeta” o “relaciones espaciales”, pero no puede obtener coordenadas precisas.
• Con base en el paper “An Image is Worth 16x16 Words”, se estimó que Claude percibe la información de píxeles detallados de forma comprimida por parches.
• Para validarlo, se proporcionó una captura de pantalla ampliada al doble, pero:
  • Claude no tomó en cuenta el factor de escala y no conservó las proporciones correctamente.
• Como resultado, Claude mostró comprensión conceptual correcta pero baja capacidad de recreación geométrica.
  • La descripción “este planeta está sobre aquel” era correcta, pero la disposición HTML seguía desalineada.

Conclusión y tareas pendientes

• Claude reconoce la estructura visual del sitio web de Space Jam, pero falla en su reproducción precisa.
• Como causas del fallo se identifican:
  • incapacidad de medir coordenadas a nivel de píxel.
  • sobreconfianza en resultados auto-generados.
  • límite de resolución del encoding visual.
• Intentos sugeridos a futuro:
  1. Reproducir y fusionar por cuartos de pantalla, reconstruyendo cada sección por separado.
  2. Experimentar con ingeniería de prompts centrada en el razonamiento espacial.
  3. Mejorar el uso de herramientas de zoom y capturas de pantalla.
• El experimento muestra simultáneamente la limitación de precisión visual de la IA y la complejidad del diseño web temprano.
• Una página web simple de 1996 sigue siendo un benchmark difícil de reproducir para la IA moderna.

[GN⁺]

Opinión de Hacker News

• Como alguien que hacía sitios web parecidos a finales de los 90, probé meter el sitio web de Space Jam en Opus 4.5
  El autor original dijo que era una “sola página HTML construida con posicionamiento absoluto”, pero en realidad era un layout basado en tablas. En la época sin CSS, no había de otra
  El resultado de mi intento de recrearlo con tablas está en esta captura de pantalla

  • Gracias. Corregí la parte errónea con tachado y cité la fuente
    Como en los comentarios siguió la broma, la dejé así por contexto
  • Recuerdo esa época en la que cortábamos el diseño en pedazos y lo exportábamos como tablas
  • Yo también empecé a hacer desarrollo web con GoLive, y todavía me acuerdo de esa forma de armar páginas con tablas

• Los LLM como Claude todavía son flojos para la implementación detallada del layout
  Pero curiosamente, usé Claude para crear en unos minutos un programa en C que agregara soporte para perfiles de color gamma al compositor de Linux (Hyprland)
  El código que generó Claude compiló a la primera e incluso implementó la lectura de archivos .icc, la extracción de VCGT y su envío al driver amdgpu
  Eso sí, tuve que corregir yo mismo un problema de endianness al parsear ICC

  • Es muy probable que Claude no haya escrito el código por sí mismo, sino que haya tomado código de algún lado y lo haya modificado. Si lo hubiera hecho un humano, le llamarían plagio
  • La razón por la que los LLM son malos con los detalles visuales es que los datos a nivel de píxel no están incluidos en el entrenamiento. La mayoría de los datasets de UI no tienen capturas de pantalla o no las recolectan
  • Aun así, me pregunto por qué una función así la tendría que manejar un compositor de Wayland. Apple ya había resuelto eso en los 90 con ColorSync

• Fue un caso en el que Claude estuvo casi perfecto, pero le faltó un poco
  Tengo el hobby de buscar abandonware para Mac OS de hace 20 años y arreglarlo para que corra en Apple Silicon
  Por ejemplo, hice que jpegview funcionara con Claude tras tres rondas de correcciones de código, y después le agregué reproducción de video y nuevas funciones de layout
  Estos mini proyectos son ideales para hacerlos con una ventana del navegador abierta junto con una instancia de código de Claude

  • Dices que “casi estuvo bien” como si no fuera algo común, pero en realidad pasa bastante seguido
  • Por cierto, hace poco empecé a usar Mac y Phoenix Slides me pareció bastante bueno

• Sobre la idea de que “hay que restaurarlo solo con Claude”, también hay otros métodos
  Por ejemplo, basta con descargar este archivo del archivo y guardarlo en la nube

• El posicionamiento absoluto no fue posible hasta CSS2 (1998)
  El sitio web de Space Jam usaba un layout con tablas aprovechando align, valign, colspan y rowspan

  • Gracias. Corregí la parte errónea y cité la fuente. Como la broma seguía en los comentarios, la dejé así por contexto
  • Estas tablas se renderizaban distinto según la configuración del navegador, el tamaño de pantalla y la fuente
    Esa era justamente la naturaleza original de la web: hipertexto interpretado

• Me pregunto si alguien hizo una prueba así
  Calcular el radio orbital de los planetas y verificar con un script de pruebas unitarias que cada planeta esté exactamente sobre su órbita

  • Cuando usas LLM para tareas complejas, a veces sale de una, pero la mayoría de las veces hace falta dar instrucciones explícitas y probar de forma iterativa
    Al final, muchas veces es más rápido hacerlo uno mismo que estar cuidando al LLM todo el tiempo
  • No probé ese tipo de test, pero suena interesante. Aunque Claude o las librerías no distinguen bien a nivel de píxel, así que habría sido difícil
  • Al final terminamos creando un ‘lenguaje de programación en inglés plano’. Y usando para eso el 10% de la electricidad mundial y el 40% de los semiconductores
  • Si el agente puede verificar por sí mismo el resultado, entonces puede iterar rápido. Si no, algo está mal. Aun así, este proyecto está muy bueno

• Pienso que tal vez bastaría con darle a Claude el HTML original del sitio web y pedirle que lo “descifre”
  El sitio es pequeño, así que parece totalmente posible.
  El código original y el resultado renderizado no son lo mismo, pero da la impresión de que Claude podría manejar esa diferencia
  Al final, quizá recrear sea mejor enfoque que copiar

  • El “HTML original” es justamente el código fuente. Parece que el desarrollo web moderno ya confundió a las generaciones jóvenes
  • Si tienes el HTML original, realmente no hace falta pasar por todo este proceso
  • Este HTML original tiene unas 7,000 letras, alrededor de 2,000 tokens de Claude, así que se puede procesar sin problema
  • El sitio web de Space Jam estaba hecho sin CSS, con tablas e imágenes segmentadas

• Me parece interesante que hayan usado el sitio de Space Jam como benchmark para LLM
  Claude casi lo logró, pero se equivocó en el orden, y eso es algo que un humano puede corregir directamente
  En lo personal prefiero GitHub Copilot porque es más barato y se integra mejor con GitHub

  • Pero si un desarrollador principiante no se da cuenta del resultado incorrecto, eso se vuelve un problema. Este tipo de fallo puede repetirse en otros lados
  • El punto de este artículo es que Claude sobreestima su capacidad de reproducir cosas a nivel de píxel
  • Yo tampoco lo intenté muchas veces. De hecho, restaurar HTML solo a partir de una captura de pantalla era una restricción poco realista
  • Si una herramienta necesita que el usuario valide y corrija el resultado, entonces no es una buena herramienta

• Claude es débil para aprovechar capturas de pantalla
  Aunque es un modelo multimodal, su fuerte sigue siendo procesar texto

  • Convierte las imágenes en un espacio vectorial semántico, no en una cuadrícula de píxeles, así que la información de píxeles se pierde
    El enfoque correcto sería hacer que Claude cree sus propias herramientas de procesamiento de imágenes y luego usarlas para calcular coordenadas y ejecutar pruebas
    Así se logra mucha más estabilidad y eficiencia al iterar
  • Incluso en texto, captar estructuras en 2D es difícil. Por ejemplo, si le pides que dibuje un círculo en ASCII art con un radio exacto, no le sale bien

• Yo también intenté hacer pruebas visuales de componentes de Storybook con Claude, pero el resultado no fue bueno
  En cambio, probé combinar el modo vision de Playwright con Codex, pero el bucle de validación visual terminó fallando
  Lo resumí en un post del blog