Getting image to HTML working means you can use image generators to create UI. I’ve spent nearly a year on this, through an insane number of experiments, rewrites, LoRAs and a small country’s worth of inference. I finally got it working: production-quality editable layers in around 60 seconds, 2× DPI assets, 95% average pixel accuracy and responsive HTML. Releasing it for free. I may add a cheap paid plan to cover inference at some point (at ~$0.2 per standard conversion).
Hey Product Hunt 👋
I’ve been trying to solve screenshot-to-HTML for nearly a year.
Image models are now good at design. If you can turn their output into accurate HTML, they become real design tools. But current systems still take hours, struggle with complex designs, or produce something inspired by the screenshot instead of actually matching it.
After an insane number of experiments, rewrites, LoRAs and a small country’s worth of AI inference, I think I finally, finally got it working.
12ui converts most designs into production-quality editable layers in around 60 seconds, with 2× DPI assets and about 95% average pixel accuracy. Desktop HTML is immediate. Responsive HTML takes another minute, and it also exports to other editable formats.
There's a SKILL you can install by clicking the button in the top right of the window.
It is still a work in progress, but useful right now, so I’m launching it free. I may add a cheap paid plan to cover inference at some point (at ~$0.2 per standard conversion).
Hope someone finds it useful!
Report
Have you thought about adding a way to tweak the responsive breakpoints before exporting? Right now it spits out HTML but adjusting where things collapse still feels manual. A simple preview slider for tablet and mobile widths right inside the tool would save a lot of trial and error, especially since the output already targets high DPI so well.
@saliha43403 Good idea! The standard one just does native and mobile. The Pro one tries to do a more ideal range of 2-3 checkpoints. But allowing people to control is interesting. I'll look into it. We've made some big improvements into this system lately.
Report
the editable layers part is the real win here, way more useful than i expected for a free tool. ran a quick conversion and the responsive html came out clean, no weird inline styles or broken breakpoints.
@zeliha229593239 Thanks! Yeah the editing is an interesting side effect of having really strong layer extraction. Just added in the agent based editing last night - it's pretty amazing 2-4s for most edits and as it's using structured layers, it's super accurate. Unlike using image models which change the entire picture, it can change only the individual layers. It still allows for full control if you need to make manual changes.
Report
@zemaj This is fantastic! Congrats on the launch. The speed improvement is incredible. Love the work. Good luck on the launch. I tried on a PNG that I had and it was able to create the layers as expected.
Chargedesk
Have you thought about adding a way to tweak the responsive breakpoints before exporting? Right now it spits out HTML but adjusting where things collapse still feels manual. A simple preview slider for tablet and mobile widths right inside the tool would save a lot of trial and error, especially since the output already targets high DPI so well.
Chargedesk
@saliha43403 Good idea! The standard one just does native and mobile. The Pro one tries to do a more ideal range of 2-3 checkpoints. But allowing people to control is interesting. I'll look into it. We've made some big improvements into this system lately.
the editable layers part is the real win here, way more useful than i expected for a free tool. ran a quick conversion and the responsive html came out clean, no weird inline styles or broken breakpoints.
Chargedesk
@zeliha229593239 Thanks! Yeah the editing is an interesting side effect of having really strong layer extraction. Just added in the agent based editing last night - it's pretty amazing 2-4s for most edits and as it's using structured layers, it's super accurate. Unlike using image models which change the entire picture, it can change only the individual layers. It still allows for full control if you need to make manual changes.
@zemaj This is fantastic! Congrats on the launch. The speed improvement is incredible. Love the work. Good luck on the launch. I tried on a PNG that I had and it was able to create the layers as expected.