Dec 14, 2025 18:00:00

Generative AI 'Claude' attempts to recreate the 1996 website 'Space Jam'

'

Space Jam ' is an American animated film about basketball. When it was released in 1996, the internet was just beginning to become popular, and people nostalgically reminisce about the time when it also had a website . An attempt to recreate that classic website using the interactive generative AI ' Claude ' has become a hot topic on the social news site Hacker News.

I failed to recreate the 1996 Space Jam Website with Claude | j0nah.com
https://j0nah.com/i-failed-to-recreate-the-1996-space-jam-website-with-claude

Engineer Jonah Glover provided Claude with screenshots and assets from 'Space Jam' to test whether they could faithfully recreate the landing page.
[code]
I am giving you:

1. A full screenshot of the Space Jam 1996 landing page.
2. A directory of raw image assets** extracted from the original site

Your job is to recreate the landing page as faithfully as possible, matching the screenshot exactly.
[/code]

However, the results were not satisfactory. Claude reported that the reproduction was successful, and indeed it produced something similar to the original, but it was not an exact replica. The most distinctive feature of the 'Space Jam' website is the circle of icons surrounding the logo, but these were arranged in a diamond shape rather than faithfully resembling the original. Despite asking 'specific pixel coordinate questions' and providing a structured approach to guide Claude's output, he was unable to accurately measure the pixel locations and failed to reproduce the original.

After analyzing the logs and Claude's spatial understanding, Glover discovered that Claude was progressing smoothly until halfway through the analysis, but that when it came to generating HTML, it started behaving in a way that ignored its own analysis.

・'What is the exact pixel position where the text in 'PLANET B-BALL' begins?' → ' It is not possible to measure the exact pixel coordinates. '
・'Can you extract the exact pixel coordinates?' → ' No. '
・'Can you measure the exact distance?' → ' No. '
・'How confident are you that you can get within 5 pixels?' → ' 15 out of 100. '

Glover realized that Claude had a good understanding of the website's structure, but was unable to accurately reproduce it. He provided Claude with additional tools to improve the accuracy of the reproduction, including a script to generate a grid overlay on screenshots, labeled pixel coordinate reference points, color difference comparisons, and a tool to iteratively compare screenshots of the reproduced website with the original. Although Claude began using a grid, the positioning of the icons became compressed and inaccurate, and the output still failed to reproduce the original. Claude tried to fine-tune the icon positions based on the grid, but the overall layout could not be reproduced.

Glover ultimately failed to recreate the 'Space Jam' website even using screenshots blown up to twice the size. He concluded that 'Claude's ability to understand images is limited and it's not suited to pixel-accurate reproduction.' This means that the images were processed in 16x16 pixel blocks, which blurred the icon positions, making it impossible to translate them into HTML.

The post generated a variety of comments on the social news site Hacker News.

I failed to recreate the 1996 Space Jam website with Claude | Hacker News

https://news.ycombinator.com/item?id=46183294

Many of these pointed out that large-scale language models (LLMs) are inherently bad at accurately handling layout and visuals.

Another common opinion was that, noting that websites in 1996 were heavily based on table-based layouts such as <table>, <tr>, and <td>, Claude should have been encouraged to generate code using these tags. CSS, which controls the layout and design of web pages, first came into being in CSS1 in December 1996, meaning that CSS was not yet widely used when the 'Space Jam' website was created in 1996. Therefore , because table-based layouts were the norm at the time, having Claude use table tags may have allowed for a more accurate reproduction.

Then someone posted that they had successfully recreated the 'Space Jam' website using Claude.

I successfully recreated the 1996 Space Jam Website with Claude
https://12gramsofcarbon.com/p/i-successfully-recreated-the-1996

Theahura used Claude Code (Opus 4.1) and nori , and planned to generate a static HTML page with CSS alignment, a tiled star background, and a footer using tests from the webapp-testing skill. He created a Playwright test to compare the recreated website pixel-by-pixel with the original screenshot to confirm its fidelity.

At first, I struggled to recreate the background pixel by pixel, but I was able to forcefully solve the problem by using a reference screenshot as the background image. Although the background issue remained until the end, I was able to achieve my initial goal and consider myself to have successfully recreated the 'Space Jam' website.

Through his work, theahura concluded that adopting test-driven development (TDD) to 'automatically formalize' problems is crucial to addressing the ' context rot ' that is a problem when using LLMs. Claude points out that because of Claude's limited ability to retain context, it is important to continually verify the correctness of artifacts through testing. He also points out that properly configuring the tool for your specific use and needs is more important than the prompts LLMs provide.