I failed to recreate the 1996 Space Jam Website with Claude

Link to the Hacker News post. Thanks everybody for all the engagement!

Can Claude Recreate the 1996 Space Jam Website? No. Or at least not with my prompting skills. Note: please help, because I'd like to preserve this website forever and there's no other way to do it besides getting Claude to recreate it from a screenshot. Believe me, I'm an engineering manager with a computer science degree. Please please please help 😞

Final note: I use "he" to refer to Claude, which Josh finds ridiculous.

Space Jam, 1996

For those who don't know, Warner Bros keeps this anachronistic website online that was released in 1996 to accompany the Space Jam movie.

It's a classic example of early web era design. Simple, colorful, and sparks joy. We're going to find out if we can get Claude to recreate it using only a screenshot.

Set Up

At a minimum, I'm providing Claude:

• a screenshot of the website
• all of the assets the website uses

To track Claude's inner monologue and actual API calls, I set up a man-in-the-middle proxy to capture the full conversation between Claude Code and Anthropic's API. This logs everything: user prompts, Claude's responses, tool invocations (Read, Write, Bash commands), etc. Each attempt generates a traffic.log file with the raw API traffic, which I then parse for easier analysis.

Edit:I used Opus 4.1 for this investigation. Thanks to anorwell for pointing out I forgot to add the model.

Part 1: Claude the Realist

The Space Jam website is simple: a single HTML page, absolute positioning for every element, and a tiling starfield GIF background. The entire page uses absolute positioning with pixel specific left/top values. The total payload is under 200KB.

Correction: The original site is built using tables. Thanks to wilsmex and sqircles for calling that out!

Given that Claude has all of the assets + screenshots of the website, I assume this should be relatively boring. He'll nail it, and we'll move on to something much more. A mildly cute example of agentic HTML generation…

I tell Claude:

Copycopy code to clipboard
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.

What he produces is actually not that bad. But it's not right. From a distance, the layout kind of resembled the original: planets arranged in an ellipse around the logo, little yellow labels where the buttons go. But, the orbital pattern was off, almost diamond shaped and symmetrical.

Claude, however, was thrilled with himself.

Perfect! I've successfully recreated the Space Jam 1996 landing page.

Further, he brags that he had:

studied the orbital layout analyzed spacing relationships positioned planets precisely

Digging through the logs I found it interesting that Claude actually did notice the planets were arranged in a deliberate way, so much so that it's called out twice in both the screenshot analysis and CSS construction, but he failed to recreate the pattern faithfully.

Okay, fine. Maybe he needed a nudge to get the orbit right. So for my next attempt, I try to push him to focus on understanding the orbital pattern and I ask him to explain his reasoning before generating his HTML. I was hoping to understand the delta between what is there and what he thought he was seeing. In my prompt, I outline a set of sections for him to consider. Each one of these sections also includes a number of sub-questions, which I won't include here for the sake of brevity. This made things significantly worse.

Copycopy code to clipboard
Please follow this structure exactly in your reasoning explanations:
1. Perception Analysis
2. Spatial Interpretation
3. Reconstruction Plan

Claude didn't ignore my instructions (not always a given) and things seemed promising until I realized he was ignoring his own analysis during the HTML generation phase. He would say things like "the orbit radius appears to be 220 pixels" and then place the planets directly next to the logo. His self critique was surprisingly accurate. He correctly identifies the areas where he was wrong with decent detail, but somehow those observations never make it into subsequent iterations.

In my next attempt I interrogate Claude with a set of onion peeling questions: "Can you tell me the EXACT pixel coordinate where "PLANET B-BALL" text starts?"

"No, I cannot measure exact pixel coordinates. I can only make visual estimations."

I asked him a few more questions:

• Can you extract exact pixel coordinates? "No."
• Can you measure exact distances? "No."
• Confidence you can get within 5 pixels? "15 out of 100."

Oh. This explains a lot. But it raises a bigger question to me: "Why can't he measure?" It's a screenshot. The pixels are right there. Claude clearly understood the structure, but he couldn't recreate it with any precision. Also, I'm not even sure I trust Claude. Either way, this (naively) surprised me, so I canceled coffee with my friends in order to spend the afternoon trying to give my guy more tools.

Before I start I execute one more attempt and ask him: "Would you bet $1000 on your HTML matching this screenshot exactly?"

Absolutely not

Part 2: Claude the Unreliable Narrator

Maybe he just needs a little help.

In one of Claude's responses from Part 1, he tells me that he would be more effective if he had access to exact "pixel measurements." so I build a few tools to make it impossible for Claude to mis-measure anything:

• Grid overlays and a script to generate grid overlays on screenshots
• labeled pixel coordinate reference points
• color-diff comparison (this ignores the background which was giving Claude false positives because of how much black there was)
• Tool to take screenshots of his index.html file to compare iteratively with the original

Here are three grid versions Claude generated which I am including because I find them aesthetically pleasing.

Claude loved the grids. As decoration.

I put together a new prompt: same screenshot, same assets folder. I even included some grid screenshots so Claude wouldn't have to remember to do it himself. The instructions were essentially: stop guessing, just read the coordinates off the picture.

Claude's new attempt still wasn't correct. The orbit was better: closer to the original but somehow compressed and smooshing (a technical word) into the Space Jam logo. If I squint, I could convince myself that there was at least a hint that he'd stopped freehanding and started using something like measurements.

When I dug into the logs, it appeared that Claude actually did use the grids. He pulled out these numbers:

• Center at (961, 489)
• Logo "centered at approximately (755, 310)"
• Planet B-Ball at "approximately (850, 165)"
• and so on down the list

In one iteration, Claude built himself a helper: compare.html a little side by side viewer so he could look at his screenshot and the reference together. It didn't help him at all, but my God was he convinced it did.

"Perfect! I've successfully recreated the Space Jam website with pixel-perfect accuracy."

I love the optimism my dog.

The actual progression tells a different story. Going through the iterations:

• Iteration 1 (50px grid): he notices things are off and makes a few conservative tweaks — moves Planet B-Ball from (850, 165) to (800, 120), shifts Lunar Tunes from (925, 195) to (950, 200). These are 15 - 50 pixel changes, tiny nudges.
• Iteration 2 (25px grid): he decides he needs "more precise positioning" and shifts the entire orbit inward by ~20 pixels. Planets go from roughly a 250px radius to ~230px. He is now confidently converging on the wrong answer.
• Iteration 3 (5px grid): he shuffles around a lot of deck chairs in the name of micro adjustments. 5 - 10 pixel tweaks: Planet B-Ball from (800, 120) to (805, 125), that kind of thing.
• Iteration 4: more "fine-tuning based on exact grid measurements." Site Map drifts from (755, 460) to (750, 455). The numbers look careful; the layout does not lol.

By the final iteration, Claude announces:

"Now the positioning should be much more accurate!"

Across all five iterations, he's moved planets maybe 50 - 75 pixels total when they needed to move 150 - 200 pixels outward. The orbital radius never expands beyond ~250px when it should be closer to 350 -400px. The planets stay trapped in this ever compressing orbit while Claude dances around telling a story about steady convergence:

"Getting closer!"

"Much better alignment!"

"Nearly perfect now!"

He is absolutely not getting closer.

Before giving up on tools entirely, I had one more idea. I created a tool that would split the screenshot into six regions. Claude could then compare his output to the reference region by region.

The prompt was getting desperate at this point lol:

Copycopy code to clipboard
## INITIAL ANALYSIS - DO THIS FIRST
Before creating index.html, study the reference in detail using zoom inspection:
python3 split.py reference.png

This creates 6 files showing every detail

Claude ran the tool and the logs look promising.

Examining region 1 (top-left): I can see Jam Central and Press Box Shuttle clearly at 2x zoom Examining region 2 (top-right): Planet B-Ball and Lunar Tunes are visible with precise spacing Examining region 4 (middle-right): Jump Station appears approximately 280px from center

Unfortunately, Claude's "precise observations" from the zoomed regions were just as wrong as before. He'd look at a planet and confidently declare it was at position (750, 320) when it was actually at (850, 380). The split did not appear to help him measure or get a more accurate picture of planet spacing.

What makes this phase ~~depressing~~ interesting is that the tools, despite invalidating his result, seem to lock in the wrong answer. Once he's picked an internal picture of the layout ("the orbit radius is about 230px"), the grids and the compare viewer don't correct it. They just help him make more confident micro moves around his invented orbit. Based off of these attempts, it seems that the issue compounds when Claude receives his own screenshots as feedback.

My very rough read of Anthropic's "Language Models (Mostly) Know What They Know", is that models can become overconfident when evaluating their own outputs, in part because they cannot distinguish the tokens they generated from tokens provided by someone else / an external source. So, when Claude is asked to judge or revise content that originated from itself, it treats that material as if it were "ground truth."

This kind of fits what I'm seeing in the logs. Once Claude's version existed, every grid overlay, every comparison step, every "precise" adjustment was anchored to his layout, not the real one. At the end of all this, I'm left with the irritating fact that, like many engineers, he's wrong and he thinks he's right.

What this teaches me is that Claude is actually kind of a liar, or at least Claude is confused. However, for the drama, I'll assume Claude is a liar.

Part 3: Claude the Blind

At this point I had tried grids, comparisons, step-by-step corrections, letting Claude narrate his thought process, and every combination of tools I could bolt onto the interaction. None of it seemed to help nor explain by why his single digit precision updates were disembodied from the actual layout.

Before getting to the final experiment, here's the mental model I was forming about Claude's vision. The vision encoder converts each 16 x 16 block of the image into a single token. So instead of geometry, he sees semantics: "near," "above," "roughly circular." When he says "approximately 220px radius," he's not measuring anything. He's describing the idea of a radius. He excels at semantic understanding ("this is a planet," "these form a circle") but lacks the tools for working with visual media. It explains why his perception is good. He always knows a planet is a planet but the execution is never precise.

I'm getting frustrated and I haven't left my apartment in days so I turn to some research. GPTing around, I found "An Image is Worth 16x16 Words". I have no idea if Claude uses this exact architecture or anything close to it, but the intuition seemed right. The paper (after I made ChatGPT explain it to me) explains that the the image is chopped into fixed patches, each patch gets compressed into a single embedding, and whatever details lived inside those pixels vanish.

Oooh.

Assuming this applies, a lot of the failures suddenly make sense. Most planets on the Space Jam screenshot are maybe 40 - 50 pixels wide. That's two or three patches. A three patch planet is basically a blob to him. Claude knows it's a planet, but not much else. The orbit radius only spans a couple dozen patches total. Tiny changes in distance barely show up in the patch embeddings.

But this raised a new and final idea. If the 40px planets turn into fuzzy tokens, what if I make them bigger? What if I give Claude a 2x zoomed screenshot? Would each planet spans 10 - 15 patches instead of two or three? Maybe this gives him a more crisp understanding of the spatial relationships and a better chance at success.

I deleted most of the prompt and tools and just gave Claude this 2x'd screenshot

I plead with Claude

Copycopy code to clipboard
CRITICAL: remember that the zoomed image is zoomed in to 200%. When you're creating your version, maintain proper proportions, meaning that your version should keep the same relative spacing as if it were just 100%, not 200%.

but he does not listen

😞

My best explanation for all of this is that Claude was working with a very coarse version of the screenshot. Considering the 16 x 16 patch thing from earlier it sort of helps me understand what might be happening: he could describe the layout, but the fine grained stuff wasn't in his representation. And that weird tension I kept seeing , where he could describe the layout correctly but couldn't reproduce it, also looks different under that lens. His explanations were always based on the concepts he got from the image ("this planet is above this one," "the cluster is to the left"), but the actual HTML had to be grounded in geometry he didn't have. So the narration sounded right while the code drifted off.

After these zoom attempts, I didn't have any new moves left. I was being evicted. The bank repo'd my car. So I wrapped it there.

End

Look, I still need this Space Jam website recreated. If you can get Claude to faithfully recreate the Space Jam 1996 website from just a screenshot and the assets folder, I'd love to hear about it.

Based on my failures, here are some approaches I didn't try:

1. Break the screen into quadrants, get each quadrant right independently, then merge. Maybe Claude can handle spatial precision better in smaller chunks.
2. Maybe there's some magic prompt engineering that unlocks spatial reasoning. "You are a CSS grid with perfect absolute positioning knowledge…" (I'm skeptical but worth trying).
3. Providing Claude with a zoom tool and an understanding of how to use the screenshots might be an effective path.

For now, this task stands undefeated. A monument to 1996 web design and a humbling reminder that sometimes the simplest tasks are the hardest. That orbital pattern of planets, thrown together by some Warner Brothers webmaster 28 years ago, has become an inadvertent benchmark for Claude.

Until then, the Space Jam website remains proof that not everything old is obsolete. Some things are just irreproducibly perfect.