Launching today
Screenshot to responsive HTML (and more)
Fable takes 2hr+. We got it down to 60s.
9 followers
Fable takes 2hr+. We got it down to 60s.
9 followers
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).
Chargedesk
A Figma plugin export would be a natural next step so the generated HTML and layers can drop straight into an existing design file without manual recreation. Really cool that you're releasing it for free, would love to see it.
Chargedesk
@erdal253842 Yeah thanks - will add that in. The sketch output can be added to Figma and there's a bunch of image -> Figma plugins available. But our test suite indicates we hit a higher fidelity. I'll add direct support for Figma.
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.