I wrote a comment saying that this should be possible with a proper playwright harness and screenshot taking. My comment ended up in the negatives (though curiously no one stopped to explain why), as if I was saying something so absurdly inaccurate that it wasn’t even worth rebutting. Thank you for actually running the experiment and proving it - I was almost annoyed enough to do it myself.
I couldn’t understand why it had happened - it felt about as logical to my mind as writing a comment that Rust was faster than Node. I feel there is a strong anti-AI sentiment here, to the point that people will ignore evidence presented directly to them.
Personal vendetta aside, I enjoyed this post! You had some clever tricks I wouldn’t have considered. In fact, the idea of producing a pixel diff as output was particularly imaginative. And the bit about autoformalization definitely hits on something I’ve been feeling when working with AI recently.
EDIT: I notice my comment yesterday is in the positives. Please don’t vote it up. That was not my intention here.
"One-shot" means you type one prompt into Claude, press enter, and then judge the results when the AI completes the task. The article says that Claude was able to take a single prompt and produce a pixel-perfect replica.
Is there another definition of "one-shot" I'm not aware of?
Yea, the one that includes all the previous "one-shot" failures.
If you throw 4 basketballs at a hoop and only the 4th one makes it in, that's not "one-shot". It's 4.
Your definition appears to be, after many failed attempts, a single prompt that gets the AI to complete the task was found. You called that "one-shot" but what really happened is there were several "shots" that failed.
If three of my friends that have never played basketball take a shot and they all miss, that doesn't say anything about my ability to make a shot. Obviously, my friends are inexperienced with basketball. There is nothing wrong with that, but it's not a fair or just argument to tell people who do have experience that "your success not a true one-shot because other, inexperienced people, failed".
You appear to be extending the definition of "one-shot" to "an LLM should be able to accomplish anything no matter how poorly it was prompted", which is, I hope you can agree, not very reasonable. It's certainly not something I would be arguing in favor of.
Voting is meant to allow a community to police itself to some extent, although the downside to that is it incentivizes controlling the discussion over contributing to it. It’s a lot easier to vote in accordance with your own beliefs than articulate counter-arguments. The prisoner dilemma takes hold, people stop visiting as they get frustrated by the downvoting, and a bubble forms. It’ll be interesting to see how AI changes the online discussion landscape.
Note that I didn't even it tell it to use a pixel diff. Claude w/ Nori did that on its own by following the Nori TDD skill. I did very little, I'm actually very lazy :D
Laziness is one of the three virtues (of a good programmer), but I think Larry didn’t anticipate the current situation when he wrote it:
”The quality that makes you go to great effort to reduce overall energy expenditure. It makes you write labor-saving programs that other people will find useful and document what you wrote so you don't have to answer so many questions about it.”
I didn't get downvoted yesterday but I got pretty far strongly hinting Claude should use very basic image processing approaches and it went for opencv very successfully. It was very fast on the image layout but failed pretty hard on the footer. This morning I decided to walk it through basic image processing for text detection and word building and that went pretty well but I didn't tell it what we were doing and it was too much me telling it what to do. It did sort of realize what we were doing at one point. I was thinking about trying again with just a nudge to think about using basic OCR image processing techniques to detect words and lines and see what Claude comes up with. Was also wondering what it would do if I just told it to use tesseract or paddleocr.
> So it kind of cheated, though it clearly felt angst about it. After trying a few ways to get the stars to line up perfectly, it just gave up and copied the screenshot in as the background image, then overlaid the rest of the HTML elements on top.
index_tiled.html is what justifies the title IMO - it's not using a screenshot as the background like index.html, and is as close as you can get using the original assets given the screenshot's scaling and compression artifacts (minus the red text being off).
But I feel it'd make more sense to just retake the screenshot properly and see if it can create a pixel-perfect replica.
I hate to tell you this but all digital representations of pi are numeric approximations. Your joke works, but perhaps not in the direction you were angling for.
First, you're being unnecessarily acerbic. It doesn't help your case, and it's just kinda weird!
Second, the original post was obviously about the placement of the buttons on the space jam website.
Third, I spend at least half the blog post responding to the exact complaint you have. If you do not have more to add beyond pointing out that the 'hack' exists, you aren't adding to the conversation.
Fourth, the blog post and the repo has a version that does not include the screenshot and actually tiles the gif.
I'm still convinced you haven't actually read the blog post because you have shown zero indication that you are engaging with the material. In which case, why even bother commenting?
The original Space Jam website is fluid (it's 90s lingo for responsive).
It is also a still relevant website because it is a living fossil of that era's way of doing webdesign.
Asking to recreate it, should include those aspects (epoch-relevant technical achievements such as fluid layouts) and faithfulness to the original implementation.
I'm not saying that Claude should know that out of the box (it would have been impressive if it did), but the prompt should have included those ideas.
A modern reconstruction in CSS3, in contrast to a faithful reproduction, should have mirrored what the techniques accomplished with modern tools. It would be useful in a sense of showcasing how CSS3 evolved, it would have a purpose.
Do you understand why this is not passable? It has no value as a recreation.
You should go read it and see if you can tell me a way I could improve it. I felt I gave actionable advice, but I’m always happy to know if I could have said things better.
Looking at the comment, I would argue that it's fairly vague. Maybe it's clear if you have done it but not clear to others type thing.
Then you undercut the advice by adding "I've always wondered if <confident suggestion> would work", making it unclear how much of the advice is a shot in the dark and how much you've actually seen results from that advice.
Claims like "you might even one shot it" also make it seem like simple hype and not the war story of someone who's actually taken the advice.
But you know, people are down voting me for engaging with your question as well so I don't know. Maybe it's all bots these days :p
It is a task that could be _easily_ done manually in much shorter time without AI, probably by developers who even love to develop. The reaction on this shouldn't be misjudged as anti-AI. A lot of people, including me, just do not get it! For scientific purposes? Ok, fair enough. But what is the further meaning of this exercise?
The point is that if we agree that this task is truly a one shot, as long as you agree it’s faster to prompt than code, then while you “easily” do this task in around an hour (or however long you say it will take you), I’ll prompt Claude in around 5 minutes, and get a few more things done while I let it run in the background. What am I missing from your argument?
author here -- it took like 5 minutes of actual attention from me? I'm not sure why you are counting reading the blog post or setting up playwright. I guess I did read the blog post, but im not sure that should count. And claude set up playwright, not me.
“Setting up playwright” is about two sentences of a prompt to Claude. I know this because I’ve done it many times. The authors prompt in the post is only a few hundred words. (Most of the post is just LLM output.) I’m certain I could type that out in 5 minutes.
Do we really need another post where I time how long it takes to prompt Claude to create the Space Jam website?
> But which takes longer: learning all of web dev to code the site, or learning to tell Claude to doff pixels?
As a developer, I naturally prefer the former over the latter, as this becomes general programming knowledge that I can benefit from in later projects.
BTW one of the creators of the Space Jam Website left a comment on the blog post:
"
Sebastien Derenoncourt
20m
I must say as a person who worked on that original website, I am confused why you needed claude to do so much basic HTML/css we didn't even use tons of complex CSS until much later in time...
"
If we both agree that prompting is net positive on time, I think we’re in agreement. You are trying to move the discussion to some sort of philosophical point about knowledge gain and subjective experience, but that is definitely not what I was going for.
I do not try to move anything, if you read my initial post.
And after I have seen the final result coming from Claude, which is linked now in the blog post, I must say, recreation not completed! A lot of things are missing, proper zoom behavior, window resize, correct center aligned positioning. So what's the point here anyway?
When I did it, vanilla Claude (Max5, default Opus 4.5, no special skills loaded, etc) had playwright up and running for screenshots in minutes (after intervening to tell it to use python 3.13 after noticing python 3.14 seems to be missing a lot of wheels and uv was rebuilding numpy for some reason) without me telling how to screenshot at all.
(One fun wrinkle I enjoyed watching was I created the target screenshot in Firefox, and Claude was using playwright with Chrome. Ultimately, I have no idea whether either Firefox or Chrome has the correct actual fonts and I'm not a webdev and don't remember how to figure that all out)
For me it's more that I'm not a web developer and it would definitely take me way longer to research all the parts of doing this. I have booksmarts (at best) about basic CSS and have given up trying to keep up with javascript anything.
The index_tiled.html version correctly positions the original assets, and to me looks as close as you can get to the screenshot while using the original assets (except for the red text).
The version with the screenshot as a background is where it was asked to create an exact match for screenshot that had been scaled/compressed, which isn't really possible any other way. The article acknowledges this one as cheating.
Well, if you take the screenshot+absolutely positioned invisible anchors approach that Claude eventually settled on (in half an hour), you could probably do it much quicker. Of course having knowledge of the solution like that is kind of cheating.
It would be a funny thing with some surprises, that is for sure. :-D
But, I still remember how to do good table designs, so I think I could manage it fairly quick. (Last words of a web developer..) :-)
>> 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.
This makes zero sense from a preservation perspective, and basic logic follows that if you wait it will be easier to recreate it when and if you actually need it for some reason.
I have, and I couldn't believe what it was saying and had to go see the code to verify. I'm really struggling to believe that anyone would consider this a "coding success".
> I'm really struggling to believe that anyone would consider this a "coding success".
The index_tiled.html version later in the article is what justifies the success claim IMO, and is the version I think it would've made more sense to host.
The currently hosted index.html just feels like a consequence of the author taking a scaled/compressed screenshot and asking Claude to produce an exact match.
Yeah, same. I thought it was saying it reproduced only the background due to not being able to figure out an offset due to a sloppy initial screenshot or something. Then I was wondering why all the link images looked fuzzy and tried to inspect them and also wondered why the links didn't line up with the buttons either with dev tools open.
On the plus side, it does somewhat explain the weird patterns in his diff image which I had been puzzling over.
There were a few prompts that went into a single commit so that doesn't quite make sense in this case. I posted the transcript, both in the original jsonl format and in markdown
I wrote a comment saying that this should be possible with a proper playwright harness and screenshot taking. My comment ended up in the negatives (though curiously no one stopped to explain why), as if I was saying something so absurdly inaccurate that it wasn’t even worth rebutting. Thank you for actually running the experiment and proving it - I was almost annoyed enough to do it myself.
I couldn’t understand why it had happened - it felt about as logical to my mind as writing a comment that Rust was faster than Node. I feel there is a strong anti-AI sentiment here, to the point that people will ignore evidence presented directly to them.
Personal vendetta aside, I enjoyed this post! You had some clever tricks I wouldn’t have considered. In fact, the idea of producing a pixel diff as output was particularly imaginative. And the bit about autoformalization definitely hits on something I’ve been feeling when working with AI recently.
EDIT: I notice my comment yesterday is in the positives. Please don’t vote it up. That was not my intention here.
There's a lot of LLM haters, simple as that.
I use AI everyday. But some AI adopters are getting a bit culty as well.
But there is nothing culty about saying “an LLM could one-shot this” when it has clearly been demonstrated that an LLM can, in fact, one shot this!
You must have a different definition of "one-shot"
"One-shot" means you type one prompt into Claude, press enter, and then judge the results when the AI completes the task. The article says that Claude was able to take a single prompt and produce a pixel-perfect replica.
Is there another definition of "one-shot" I'm not aware of?
Yea, the one that includes all the previous "one-shot" failures.
If you throw 4 basketballs at a hoop and only the 4th one makes it in, that's not "one-shot". It's 4.
Your definition appears to be, after many failed attempts, a single prompt that gets the AI to complete the task was found. You called that "one-shot" but what really happened is there were several "shots" that failed.
If three of my friends that have never played basketball take a shot and they all miss, that doesn't say anything about my ability to make a shot. Obviously, my friends are inexperienced with basketball. There is nothing wrong with that, but it's not a fair or just argument to tell people who do have experience that "your success not a true one-shot because other, inexperienced people, failed".
You appear to be extending the definition of "one-shot" to "an LLM should be able to accomplish anything no matter how poorly it was prompted", which is, I hope you can agree, not very reasonable. It's certainly not something I would be arguing in favor of.
This isn't in a vacuum though, it's after someone else failed and they took the learnings from that and put it into the prompt.
Voting is meant to allow a community to police itself to some extent, although the downside to that is it incentivizes controlling the discussion over contributing to it. It’s a lot easier to vote in accordance with your own beliefs than articulate counter-arguments. The prisoner dilemma takes hold, people stop visiting as they get frustrated by the downvoting, and a bubble forms. It’ll be interesting to see how AI changes the online discussion landscape.
Note that I didn't even it tell it to use a pixel diff. Claude w/ Nori did that on its own by following the Nori TDD skill. I did very little, I'm actually very lazy :D
There is a quote about lazy developers, but I too lazy to search for it.
Laziness is one of the three virtues (of a good programmer), but I think Larry didn’t anticipate the current situation when he wrote it:
”The quality that makes you go to great effort to reduce overall energy expenditure. It makes you write labor-saving programs that other people will find useful and document what you wrote so you don't have to answer so many questions about it.”
I didn't get downvoted yesterday but I got pretty far strongly hinting Claude should use very basic image processing approaches and it went for opencv very successfully. It was very fast on the image layout but failed pretty hard on the footer. This morning I decided to walk it through basic image processing for text detection and word building and that went pretty well but I didn't tell it what we were doing and it was too much me telling it what to do. It did sort of realize what we were doing at one point. I was thinking about trying again with just a nudge to think about using basic OCR image processing techniques to detect words and lines and see what Claude comes up with. Was also wondering what it would do if I just told it to use tesseract or paddleocr.
Dude, the recreation is a joke (hopefully an intentional one). It uses the screenshot instead of the assets.
Go ahead, turn on the Web Inspector, and remove the body background:
https://tilework-tech.github.io/space-jam/screenshot.png
The article mentions this:
> So it kind of cheated, though it clearly felt angst about it. After trying a few ways to get the stars to line up perfectly, it just gave up and copied the screenshot in as the background image, then overlaid the rest of the HTML elements on top.
That does not make the title any less clickbaity. Moreover, it does not seem like a vindication of johnfn's original comment.
index_tiled.html is what justifies the title IMO - it's not using a screenshot as the background like index.html, and is as close as you can get using the original assets given the screenshot's scaling and compression artifacts (minus the red text being off).
But I feel it'd make more sense to just retake the screenshot properly and see if it can create a pixel-perfect replica.
The outcome does not justify @johnfn's redemption celebration. That's why I decided to give him a heads up.
Aside from that, I think it's a joke. Like the value of pi example I gave in the other comment. If it's not, it is really just sad.
Please read the blog post!
It's a joke, right? A joke similar to this one:
---
> Make me a python script that calculates the value of PI
```python
print("3.1415")
```
"I think it's passable!" <--- The joke
---
If it's not a joke, then it's just sad.
I hate to tell you this but all digital representations of pi are numeric approximations. Your joke works, but perhaps not in the direction you were angling for.
Only the digital ones? oof, why so specific?
I would have accepted `22/7`.
First, you're being unnecessarily acerbic. It doesn't help your case, and it's just kinda weird!
Second, the original post was obviously about the placement of the buttons on the space jam website.
Third, I spend at least half the blog post responding to the exact complaint you have. If you do not have more to add beyond pointing out that the 'hack' exists, you aren't adding to the conversation.
Fourth, the blog post and the repo has a version that does not include the screenshot and actually tiles the gif.
I'm still convinced you haven't actually read the blog post because you have shown zero indication that you are engaging with the material. In which case, why even bother commenting?
Can I offer some valid criticism?
The original Space Jam website is fluid (it's 90s lingo for responsive).
It is also a still relevant website because it is a living fossil of that era's way of doing webdesign.
Asking to recreate it, should include those aspects (epoch-relevant technical achievements such as fluid layouts) and faithfulness to the original implementation.
I'm not saying that Claude should know that out of the box (it would have been impressive if it did), but the prompt should have included those ideas.
A modern reconstruction in CSS3, in contrast to a faithful reproduction, should have mirrored what the techniques accomplished with modern tools. It would be useful in a sense of showcasing how CSS3 evolved, it would have a purpose.
Do you understand why this is not passable? It has no value as a recreation.
I haven't seen your original comment but "It could work if they did it better" is in general a low value comment.
You should go read it and see if you can tell me a way I could improve it. I felt I gave actionable advice, but I’m always happy to know if I could have said things better.
Looking at the comment, I would argue that it's fairly vague. Maybe it's clear if you have done it but not clear to others type thing.
Then you undercut the advice by adding "I've always wondered if <confident suggestion> would work", making it unclear how much of the advice is a shot in the dark and how much you've actually seen results from that advice.
Claims like "you might even one shot it" also make it seem like simple hype and not the war story of someone who's actually taken the advice.
But you know, people are down voting me for engaging with your question as well so I don't know. Maybe it's all bots these days :p
Haha. For what it’s worth, and despite the downvotes, I do appreciate the feedback.
You could improve it by simply doing the thing you describe and linking to it.
It is a task that could be _easily_ done manually in much shorter time without AI, probably by developers who even love to develop. The reaction on this shouldn't be misjudged as anti-AI. A lot of people, including me, just do not get it! For scientific purposes? Ok, fair enough. But what is the further meaning of this exercise?
The point is that if we agree that this task is truly a one shot, as long as you agree it’s faster to prompt than code, then while you “easily” do this task in around an hour (or however long you say it will take you), I’ll prompt Claude in around 5 minutes, and get a few more things done while I let it run in the background. What am I missing from your argument?
Reading the blog post, prompting Claude setting up Playwright etc. takes at least one hour maybe more? Not seeing where your 5 minutes coming from.
author here -- it took like 5 minutes of actual attention from me? I'm not sure why you are counting reading the blog post or setting up playwright. I guess I did read the blog post, but im not sure that should count. And claude set up playwright, not me.
“Setting up playwright” is about two sentences of a prompt to Claude. I know this because I’ve done it many times. The authors prompt in the post is only a few hundred words. (Most of the post is just LLM output.) I’m certain I could type that out in 5 minutes.
Do we really need another post where I time how long it takes to prompt Claude to create the Space Jam website?
> But which takes longer: learning all of web dev to code the site, or learning to tell Claude to doff pixels?
As a developer, I naturally prefer the former over the latter, as this becomes general programming knowledge that I can benefit from in later projects.
BTW one of the creators of the Space Jam Website left a comment on the blog post: " Sebastien Derenoncourt 20m
I must say as a person who worked on that original website, I am confused why you needed claude to do so much basic HTML/css we didn't even use tons of complex CSS until much later in time... "
If we both agree that prompting is net positive on time, I think we’re in agreement. You are trying to move the discussion to some sort of philosophical point about knowledge gain and subjective experience, but that is definitely not what I was going for.
I do not try to move anything, if you read my initial post.
And after I have seen the final result coming from Claude, which is linked now in the blog post, I must say, recreation not completed! A lot of things are missing, proper zoom behavior, window resize, correct center aligned positioning. So what's the point here anyway?
its less than a few hundred words. The full total of what I typed into claude to get the first version is:
Initial prompt:
> I am giving you:
> 1. A full screenshot of the Space Jam 1996 landing page (screenshot.png)
> 2. A directory of raw image assets extracted from the original site (files/)
> Your job is to recreate the landing page as faithfully as possible, matching the screenshot exactly.
> Use the webapp-testing skill. Take screenshots and compare against the original. <required>You must be pixel perfect.</required>
plan response:
> they should all go to tilework.tech
> exact screenshot dimensions
which is 75 words
When I did it, vanilla Claude (Max5, default Opus 4.5, no special skills loaded, etc) had playwright up and running for screenshots in minutes (after intervening to tell it to use python 3.13 after noticing python 3.14 seems to be missing a lot of wheels and uv was rebuilding numpy for some reason) without me telling how to screenshot at all.
https://news.ycombinator.com/threads?id=fluidcruft#46185996
(One fun wrinkle I enjoyed watching was I created the target screenshot in Firefox, and Claude was using playwright with Chrome. Ultimately, I have no idea whether either Firefox or Chrome has the correct actual fonts and I'm not a webdev and don't remember how to figure that all out)
For me it's more that I'm not a web developer and it would definitely take me way longer to research all the parts of doing this. I have booksmarts (at best) about basic CSS and have given up trying to keep up with javascript anything.
It's seemingly an experiment to see how an LLM performs when the task is just outside of its milieu. The answer is not very well.
Related yesterday: I failed to recreate the 1996 Space Jam website with Claude (500 points, 409 comments) https://news.ycombinator.com/item?id=46183294
Which is what prompted him to try creating it.
It’s prompting all the way down.
So he had to prompt AI to prompt a human to prompt AI (assuming OP is human)
Hey! You did it! I'm going to update my original blog post linking this one.
This version just pastes the screenshot as background.
Yes, anyone who reads the post will find that out because it says it in the post.
Oh you're right. I read it a bit too quickly this morning and thought it had just done that initially to compare planet placement. Too bad.
The index_tiled.html version correctly positions the original assets, and to me looks as close as you can get to the screenshot while using the original assets (except for the red text).
The version with the screenshot as a background is where it was asked to create an exact match for screenshot that had been scaled/compressed, which isn't really possible any other way. The article acknowledges this one as cheating.
Wasn’t the OG Space Jam website an image map? Not so different
Wow, that is complex stuff! In the meantime I could have recreated this twice manually. :-D
Do it, and write a blog post about it:
I successfully recreated the 1996 Space Jam website twice, without using any LLMs
:p
:-D Haha, that's a good one.
It tables so it works in Netscape 4? Hell it was probably Netscape 2 or something. Have Claude spin that up and run it.
Oh yeah, and no cheating and using CSS.
Please record a video of doing such - I suspect it may take more active effort than you suspect :-)
Well, if you take the screenshot+absolutely positioned invisible anchors approach that Claude eventually settled on (in half an hour), you could probably do it much quicker. Of course having knowledge of the solution like that is kind of cheating.
It would be a funny thing with some surprises, that is for sure. :-D But, I still remember how to do good table designs, so I think I could manage it fairly quick. (Last words of a web developer..) :-)
>> 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.
This makes zero sense from a preservation perspective, and basic logic follows that if you wait it will be easier to recreate it when and if you actually need it for some reason.
This was sarcasm
https://tilework-tech.github.io/space-jam/
The site claude made is live on github pages now too, enjoy
Does not render correctly here. It does not zoom properly and a window resize also have weird effects. Recreation not finished I guess.
From the article, Claude asked:
> The screenshot shows viewport-specific positioning - should we match at a specific viewport size or make it responsive?
And the author responded:
> exact screenshot dimensions
So it's only intended to replicate the screenshot, but I do agree that making it center/zoom properly would've been more interesting.
for me its not center aligned
Yeah, it renders quite differently depending on screen/window geometry.
Might Google Antigravity be able to do this right out of the box? I believe it has a browser that can take screenshots.
body { background: url('screenshot.png') no-repeat; background-size: 1791px 1000px; background-color: #000; position: relative; }
is this a joke?
Please read the blog post!
I have, and I couldn't believe what it was saying and had to go see the code to verify. I'm really struggling to believe that anyone would consider this a "coding success".
> I'm really struggling to believe that anyone would consider this a "coding success".
The index_tiled.html version later in the article is what justifies the success claim IMO, and is the version I think it would've made more sense to host.
The currently hosted index.html just feels like a consequence of the author taking a scaled/compressed screenshot and asking Claude to produce an exact match.
Yeah, same. I thought it was saying it reproduced only the background due to not being able to figure out an offset due to a sloppy initial screenshot or something. Then I was wondering why all the link images looked fuzzy and tried to inspect them and also wondered why the links didn't line up with the buttons either with dev tools open.
On the plus side, it does somewhat explain the weird patterns in his diff image which I had been puzzling over.
I see this as a logical rebuttal
reads more like advertising for OPs nori tool, a small wrapper around markdown files
When do we start putting the prompt we used in the commit message?
There were a few prompts that went into a single commit so that doesn't quite make sense in this case. I posted the transcript, both in the original jsonl format and in markdown
There are some interesting takes around committing plans that are all executed by the same prompt as an artifact