screenshot-to-code
Dev tools
code generator
SHOW HN2023
Legend
screenshot-to-code
Convert any screenshot into clean HTML code using GPT Vision (OSS tool)
github.comHow HN took it
8 positive, 21 neutral or asking, 2 mixed, 8 critical, out of 39 comments about the project. Thread score -0.01.
Idea: 3 for, 4 againstExecution: 3 for, 2 againstDesign: 1 for, 1 againstPrivacy: 0 for, 1 against
The thread, comment by comment
Each row is a top-level comment and its replies, in HN's order. Select a cell to open that comment on HN.
positive neutral or mixed critical about another commenter or something else the maker
What HN said
What people liked
Impressive and magical results
From 2 comments
This genuinely seems like magic to me, and it feels like I don't know how to place it in my mental model of how compuation works. A couple of questions/thoughts: 1. I learned…
andyjohnson0 on HNLooks awesome. One of the most impressive examples I've seen.
anthonylatona on HN
Live iframe preview of generation is elegant
From 1 comment
Really liked how you serve the demo of the generated website AS it's being generated using iframe with srcdoc. Simple and elegant.
yanis_t on HN
Objections
Output not clean enough for developers; misses accessibility, responsive CSS and JavaScript
From 1 comment
Ignoring the "AI" implementation details, this generates HTML in the same sense that you can technically convert a rasterized image to an SVG that looks like crap when you zoom…
sublinear on HN
Omits sections and inserts placeholder comments
From 3 comments
Here is the meat https://github.com/abi/screenshot-to-code/blob/main/backend/prompts.py """ You are an expert Tailwind developer You take screenshots of a reference web page from…
tlarkworthy on HNI found that it's hard to get it to even use 2k of the 4k completion length. Most of the time, it's happy to stop after 1k and just insert comments like "<-- rest of the section…
abi on HNCool demo but would be infuriating to use (in it's current state). It just left out the left hand navigation completely and added a new nav element at the top right.
gardenhedge on HN
Could enable phishing sites
From 3 comments
Phishing sites are going to get a whole lot quicker to make!
ActionHank on HNPhishermen rejoice!
ShadowBanThis01 on HNThis is a great tool for all your phishing needs!
seeg on HN
Requests
Responsive/mobile layout support
From 3 comments
Does it use responsive design, so the result works on mobile?
pmarreck on HNHow does it handle mobile / responsive layouts?
awb on HNAbsolutely insane. Very nice and clever. Does it handle responsive layouts?
avgDev on HN
Pure CSS output instead of Tailwind
From 1 comment
I got excited about “clean HTML code” in the title and then realised this outputs tailwind. Any chance of a pure CSS version?
nailer on HN
Example generated code in the repo
From 2 comments
Pretty cool. Would it be possible to share the generated code for demo to get an idea what the result looks like?
Mic92 on HNWow this sounds pretty cool, congrats. Great idea. Is there a way to see what the HTML looks like before installing/running it?
bambax on HN
Questions
How does it handle multi-page sites?
From 1 comment
OP, how do you see this working with series of screenshots - for example, sites with several pages that each use/take some user-provided data? I guess I am asking, can you see…
btbuildem on HN
How many inference passes per screenshot?
From 1 comment
How many times does it run inference per screenshot? Looks cool!
sciolist on HN
Alternatives named
HTTrack for copying existing websites
From 1 comment
I don’t see the point; if you want to copy an existing website, why not use Httrack? The website would always be more similar and you save on GPT’s API. Where this technique…
jlpom on HN
Copying HTML from browser dev tools
From 1 comment
Ignoring the "AI" implementation details, this generates HTML in the same sense that you can technically convert a rasterized image to an SVG that looks like crap when you zoom…
sublinear on HN
Earlier Screenshot-to-code tool using neural networks
From 1 comment
There was a tool like this 5 years ago on [Github](https://github.com/emilwallner/Screenshot-to-code) that did similar thing using neural networks.
aligajani on HN
DrawMyUI
From 1 comment
This remind me of tldraw but instead of a screenshot you draw your UI and it converts it to HTML, check out https://drawmyui.com - here’s a demo from twitter…
Globz on HN