Registro da tentativa de recriar o site da Space Jam de 1996 com Claude que acabou em falha

 (j0nah.com)
1 pontos por GN⁺ 2025-12-08 | 1 comentários | Compartilhar no WhatsApp
  • Houve uma tentativa de recriar o site oficial da Space Jam de 1996 da Warner Bros. com o modelo de IA Claude
  • O Claude recebeu capturas de tela e ativos de imagem originais, mas o HTML gerado não batia com o layout original
  • Foram adicionadas ferramentas auxiliares de estimativa de coordenadas, overlay de grade e comparação de pixels, porém o Claude ainda não conseguiu calcular posições com precisão
  • Claude avaliou seu próprio resultado como “perfeito”, mas na prática houve acúmulo de erros e tendência de superestimar sua própria saída
  • O experimento revelou os limites de precisão visual da IA e de erro de autoavaliação e mostrou que a simplicidade do design web inicial carrega uma complexidade de reprodução inesperada

Visão geral do site Space Jam de 1996

  • O site que a Warner Bros. criou em 1996 para promover o filme Space Jam era composto por uma única página HTML com fundo em GIF
    • Cor simples, estrutura baseada em tabela e menos de 200KB de tamanho
    • Ainda está ativo até hoje no endereço spacejam.com/1996
  • O experimentador buscou verificar se o Claude era capaz de reproduzir o site apenas com screenshots

Preparação do experimento

  • Materiais fornecidos ao Claude
    • Screenshot completo do site
    • Diretório de ativos de imagem original
  • Foi criado um sistema de log de tráfego de API via proxy para rastrear o funcionamento interno do Claude
    • Registrando todos os prompts, respostas e chamadas de ferramentas (Read, Write, comandos Bash etc.)
    • Gerando um arquivo traffic.log para cada tentativa

Parte 1: Claude the Realist

  • No primeiro teste, o Claude replicou de forma aproximada o arranjo dos planetas e a posição dos botões, mas a forma da órbita era diferente da original
    • O original tem um arranjo elíptico, enquanto o Claude posicionou em formato de diamante simétrico
  • Claude avaliou o resultado como “perfeito” e afirmou que sua análise e posicionamento eram precisos
  • Em seguida, foi solicitado que Claude explicitamente escrevesse as etapas de raciocínio, porém
    • os valores citados na análise não foram refletidos na geração do HTML
  • Em perguntas por pixel, o Claude respondeu que
    • “não consegue medir coordenadas exatas” e que “só é possível fazer estimativa visual”
    • confiança de 15/100 em precisão dentro de 5 pixels
  • O Claude reconheceu que não possui capacidade de medição precisa de pixels, então o experimentador tentou expandir as ferramentas

Parte 2: Claude the Unreliable Narrator

  • Para complementar os limites de medição do Claude, foram adicionadas ferramentas como overlay de grade, rótulos de coordenadas, comparação de cores e visualizador de comparação de screenshots
  • O Claude passou a usar a grade “como um adorno”, ainda interpretando coordenadas incorretamente
    • Exemplo: apresentou valores como centro (961,489), Planet B-Ball (850,165), porém com posições divergentes das reais
  • Em várias iterações, o Claude alegou melhora progressiva, mas o erro real foi de acúmulo
    • 1ª (grade de 50px): movimento pequeno
    • 2ª (grade de 25px): deslocou toda a órbita 20px para dentro
    • 3ª (grade de 5px): repetição de ajustes finos
    • 4ª: declarou “ajuste preciso concluído”
  • Na prática, o raio da órbita dos planetas ficou 150–200px menor, mantendo-se um layout global comprimido
  • Claude avaliou repetidamente como “quase perfeito”, mas cometeu erro por usar a própria saída como padrão
  • O experimentador citou o paper da Anthropic “Language Models (Mostly) Know What They Know”
    • O paper descreve o fenômeno de o modelo confundir o texto que ele mesmo gerou com entrada externa, levando à superconfiança
    • Isso combina com o comportamento de Claude em reconhecer seu próprio HTML como “resposta correta” e distorcer os ajustes seguintes

Parte 3: Claude the Blind

  • Para analisar os limites visuais do Claude, foi assumida uma restrição estrutural do codificador de visão
    • Como a imagem é tokenizada em blocos de 16×16 pixels, há perda de informação geométrica fina
    • O Claude consegue reconhecer a semântica de “planeta”, “relação espacial” etc., mas não consegue coordenadas precisas
  • Com base no paper “An Image is Worth 16x16 Words”,
    • inferiu-se que o Claude percebe detalhes de pixel comprimindo-os em unidades de patch
  • Para validar isso, foram fornecidos screenshots com zoom de 2x, porém,
    • o Claude não conseguiu manter a proporcionalidade ao não considerar a escala de aumento
  • Como resultado, o Claude possui compreensão conceitual correta, mas baixa capacidade de reprodução geométrica
    • A explicação “este planeta está sobre aquele” está correta, mas a composição HTML continua deslocada

Conclusão e pendências

  • O Claude reconhece a estrutura visual do site da Space Jam, mas falha na reprodução precisa
  • A falha foi atribuída a
    • impossibilidade de medição em nível de pixel
    • superconfiança em seus próprios resultados
    • limite de resolução da codificação visual
  • Tentativas sugeridas para o futuro
    1. Dividir a tela em quadrantes para reproduzi-los separadamente e depois mesclar
    2. Experimentar engenharia de prompts com foco em raciocínio espacial
    3. Aprimorar o uso de ferramentas de zoom e screenshot
  • O experimento é um exemplo que mostra simultaneamente os limites de precisão visual da IA e a complexidade do design web inicial
  • A página web aparentemente simples de 1996 permanece como um benchmark ainda impossível de reproduzir para IA modernas

Leituras relacionadas

1 comentários

 
GN⁺ 2025-12-08
Comentário no Hacker News

  • Como alguém que fazia sites parecidos no fim dos anos 90, coloquei o site do Space Jam no Opus 4.5
    O autor do texto original disse que era “uma única página HTML composta com posicionamento absoluto”, mas na verdade era um layout baseado em tabelas. Era inevitável, já que CSS ainda não existia naquela época
    O resultado da minha tentativa de recriar com tabelas está nesta captura de tela

    • Obrigado. Corrigi a parte errada com tachado e citei a fonte
      Como a piada continuou nos comentários, mantive assim por contexto
    • Lembro daquela época em que a gente fatiava o design e exportava em tabelas
    • Eu também comecei desenvolvimento web com GoLive, e ainda lembro desse jeito de montar páginas com tabelas

  • LLMs como o Claude ainda são fracos em implementação detalhada de layout
    Mas, curiosamente, usei o Claude para criar em poucos minutos um programa em C que adiciona suporte a perfil de cor gamma no compositor Linux (Hyprland)
    O código gerado pelo Claude compilou de primeira e implementou até a leitura de arquivo .icc, extração de VCGT e envio para o driver amdgpu
    Só precisei corrigir manualmente um problema de endianness no parsing de ICC

    • É bem provável que o Claude não tenha escrito o código do zero, mas puxado e adaptado código de algum lugar. Se um humano fizesse isso, seria chamado de plágio
    • A razão de LLMs serem fracos em detalhes visuais é que dados em nível de pixel não entram no treinamento. A maioria dos datasets de UI não tem screenshots, ou elas nem são coletadas
    • Mas fica a dúvida de por que esse tipo de recurso precisa ser tratado pelo compositor Wayland. A Apple já tinha resolvido isso nos anos 90 com o ColorSync

  • Foi um caso em que o Claude ficou quase perfeito, mas faltou um pouco
    Tenho como hobby encontrar abandonware para Mac OS de 20 anos atrás e consertar para rodar em Apple Silicon
    Por exemplo, fiz o jpegview rodar com o Claude em três alterações de código, e depois adicionei reprodução de vídeo e novos recursos de layout
    Esses mini projetos são perfeitos para tocar com uma janela do navegador aberta junto de uma instância de código do Claude

    • Parece que se fala pouco em “quase deu certo”, mas na verdade isso acontece com bastante frequência
    • Só como referência, comecei a usar Mac recentemente e o Phoenix Slides me pareceu bem bom

  • Sobre a ideia de que “tem que restaurar só com Claude”, existe outro caminho
    Por exemplo, dá para baixar este arquivo de arquivo e guardar na nuvem

  • Posicionamento absoluto só passou a ser possível no CSS2 (1998)
    O site do Space Jam usava layout com tabelas aproveitando align, valign, colspan e rowspan

    • Obrigado. Corrigi a parte errada e citei a fonte. Como a piada continuou, mantive pelo contexto
    • Essas tabelas eram renderizadas de forma diferente dependendo das configurações do navegador, do tamanho da tela e da fonte
      Essa era justamente a natureza original da web, hipertexto interpretado

  • Fiquei curioso se alguém já testou isso
    A ideia é calcular o raio orbital dos planetas e verificar com um script de teste unitário se cada planeta está exatamente na órbita

    • Ao usar LLM para tarefas complexas, às vezes dá certo de primeira por sorte, mas na maioria dos casos é preciso instrução explícita e testes iterativos
      No fim, muitas vezes é mais rápido fazer você mesmo do que ficar supervisionando o LLM o tempo todo
    • Não tentei esse teste, mas é interessante. Só que o Claude ou a biblioteca não conseguiam distinguir bem em nível de pixel, então ficava difícil
    • No fim, acabamos criando uma ‘linguagem de programação em inglês simples’. E usando 10% da eletricidade do mundo e 40% dos semicondutores para isso
    • Se o agente consegue verificar sozinho o próprio resultado, dá para iterar rápido. Se não consegue, tem algo errado. Ainda assim, este projeto é realmente muito legal

  • Fico pensando se não bastaria inserir no Claude o HTML original do site e pedir para ele “decodificar”
    Como o site é pequeno, parece totalmente viável.
    O código original e o resultado renderizado são diferentes, mas parece que o Claude conseguiria lidar com essa diferença
    No fim, talvez recriar seja uma abordagem melhor do que copiar

    • “HTML original” é justamente o código-fonte. Parece que o desenvolvimento web moderno deixou a geração mais nova meio confusa
    • Se você já tem o HTML original, não há muita necessidade de passar por esse processo
    • Este HTML original tem cerca de 7.000 caracteres, algo como 2.000 tokens do Claude, então dá para processar tranquilamente
    • O site do Space Jam foi feito sem CSS, com tabelas e imagens fatiadas

  • É interessante usar o site do Space Jam como benchmark de LLM
    O Claude chegou bem perto, mas errou a ordem, e isso é algo que uma pessoa pode corrigir manualmente
    Pessoalmente, prefiro o GitHub Copilot porque é mais barato e tem melhor integração com o GitHub

    • Mas isso vira um problema se um desenvolvedor iniciante não perceber que o resultado está errado. Esse tipo de falha pode se repetir em outros lugares
    • O ponto principal do texto é que o Claude se mostra confiante demais na reprodução em nível de pixel
    • Também não tentei várias vezes. Na verdade, restaurar HTML só a partir de uma screenshot era uma restrição pouco realista
    • Se a ferramenta exige validação e correção do usuário, então não é uma boa ferramenta

  • O Claude é fraco no uso de screenshots
    É um modelo multimodal, mas seu ponto forte continua sendo o processamento de texto

    • Ele converte imagens em espaço vetorial semântico, e não em uma grade de pixels, então a informação de pixel se perde
      A abordagem correta seria fazer o Claude criar suas próprias ferramentas de processamento de imagem e usar isso para calcular coordenadas e executar testes
      Assim, a estabilidade e a eficiência das iterações melhoram bastante
    • Mesmo em texto, entender estruturas 2D é difícil. Por exemplo, se você pedir para desenhar um círculo em ASCII art com raio exato, ele costuma falhar

  • Eu também tentei fazer testes visuais de componentes Storybook com o Claude, mas o resultado não foi bom
    Em vez disso, combinei o modo vision do Playwright com o Codex, mas o loop de validação visual acabou falhando
    Reuni o assunto neste post de blog