Couldn’t you just feed Claude all the raw, inspect element HTML from the website and have it “decrypt” that?
The entire website is fairly small so this seems feasible.
Usually there’s a big difference between a website’s final code and its source code because of post processing but that seems like a totally solvable Claude problem.
Sure LLMs aren’t great with images, but it’s not like the person who originally wrote the Space Jam website was meticulously messing around with positioning from a reference image to create a circular orbit — they just used the tools they had to create an acceptable result. Claude can do the same.
Perhaps the best method is to re-create, rather than replicate the design.
I'm using source code like it's used when referring to source code vs executables. React doesn't simply spit out HTML, nor the JSX used to write said React code, it outputs a mixture of things that's the optimized HTML/CSS/JS version of the React you wrote. This is akin to source code and the optimized binaries we actually use.
Perhaps the wrong usage of "source code". I probably should've been more precise. Forgive my lack of vocabulary to describe the difference I was referring to.
There were no binaries or packages. You wrote the HTML in notepad or maybe you used some "high speed IDE" with syntax highlighting and some buttons like Dreamweaver and then uploaded it via FTP to whatever server you were hosting it on. No muss, no fuss. It was a glorious time and I miss that internet a lot.
I think you're assuming a pattern existed in 1996 that didn't actually exist until the 2010s.
In 1996 JavaScript was extremely limited; even server side processing was often limited to CGI scripts. There was nothing like React that was in common use at the time. The Space Jam website was almost certainly not dynamically compiled as HTML - it existed and was served as a static set of files.
Even a decade later, React and the frontend-framework sort of thinking wasn't really a big thing. People had started to make lots of things with "DHTML" in the early 2000s where JavaScript was used to make things spicier (pretty animations, some server side loading with AJAX) and still often worked without JS enabled in a pattern called graceful degradation.
What you'd get from "View Source", or "Inspect Element", and what was literally saved on disk of spacejam.com, was almost certainly the same content.
I'm not trying to dispute this though. Although I appreciate the clarity, I am aware of the web's past.
The only point I was trying to make was that this project could be better achieved by an LLM if spacejam.com's HTML is supplied.
For why you'd want to do this rather than simply use the original code is up to the developer, but I'd expect a common reason to be the ease of modern frameworks. Some justifications for making Claude create the same code again in a different framework include:
- Using <script> tags is bad practice in a lot of modern frameworks, and it's better to just translate to React and run your logic directly within components.
- Perhaps you're using TailwindCSS, in which case it's a good idea to port over all the original CSS so you can have unified codebase.
- Hosting on modern frameworks is often conveinent.
- Sometimes (although maybe not for a website this small) the source code with a framework is less verbose.
You probably misunderstood me because I paraphrased "raw" HTML several times throughout my comments in this thread before I actually read the page source and realized it was the original source code.
I think that the reason why everyone is acting surprised about your suggestion is that the target wasn’t to obtain the page in some higher level framework or anything. The HTML of the page was what the author wanted Claude to output. Would he used source HTML as an input, there would be nothing for Claude to do. Different exercise.
The entire website is fairly small so this seems feasible.
Usually there’s a big difference between a website’s final code and its source code because of post processing but that seems like a totally solvable Claude problem.
Sure LLMs aren’t great with images, but it’s not like the person who originally wrote the Space Jam website was meticulously messing around with positioning from a reference image to create a circular orbit — they just used the tools they had to create an acceptable result. Claude can do the same.
Perhaps the best method is to re-create, rather than replicate the design.