6 ms·

Doing testing with it now, specifically for image->html conversion. Previously Fable was the best at this, followed by Gemini 3.1 pro (a surprising #2, but Goo

by jjcm 3mo ago

Doing testing with it now, specifically for image->html conversion. Previously Fable was the best at this, followed by Gemini 3.1 pro (a surprising #2, but Google has great vision models). Opus' results seem to be more accurate than Fable, following the design source of truth better. Example results: Design source of truth: https://image.non.io/73e239a3-880f-4793-b65f-4810be2d9378.webp https://image.non.io/73e239a3-880f-4793-b65f-4810be2d9378.we... Opus 5 build: https://html.non.io/solaraOpus/ https://html.non.io/solaraOpus/ Fable 5 build: https://html.non.io/solara/ https://html.non.io/solara/ Note the buttons - for fable they're pill buttons, opus got the rounded rectangle nature of them. Opus' images are closer to the source of truth as well (both LLMs were provided with image gen capabilities for the assets). Running more tests now, but preliminary results are saying this is indeed better than Fable in some areas. Crazy.

bottlepalm 3mo ago
I just clicked your links and then read your comment after - my first impression was the Fable version looks way nicer.
- jjcm 3mo ago
  I agree the fable version looks nice - the rounded hero image for instance. Opus though followed the source of truth better imo. The details are more present. Fable filled in the gaps for things it wasn't able to do (ie in the design the hero image goes behind the nav), which resulted in a better looking page that was more divergent.
- kccqzy 3mo ago
  Same. I like the Fable version better. Better colors, better choice of font sizes, better column sizing. Also small things like the “Experience” section header being orange rather than gray, which Fable got right and Opus got wrong. It seemed to me that Fable meaningfully improved on the original design more than just faithfully executing the original design.
- andersonpico 3mo ago
  I liked the Opus version better if only because the responsiveness is less broken.
chriscamargo 3mo ago
This is an awesome test! Thanks for sharing the results. Opus 5 is very impressive. Out of curiosity, what app is that Design source of truth screenshot from?
- jjcm 3mo ago
  That's from my own tool. I left figma to build a diffusion-based UI tool. Here's a show hn post with some more info: https://news.ycombinator.com/item?id=48995754 https://news.ycombinator.com/item?id=48995754 Edit: Generation was down, back up now. Apparently just hit my $1000 cap for the openai api. Upped it to 10k. Growth!
  - IanCal 3mo ago
    Huge fan of the non-seat/monthly based pricing. Do you need it to be higher to not just cover costs but also make a profit?
    - jjcm 3mo ago
      Right now generation is entirely at-cost (0% margin). Once I finish my SOC2 I'm going to release a enterprise/team license, which I'll charge a fixed 50% margin for. Long term the goal is for those enterprise licenses to be the profit center and for individual accounts to drive growth. At the moment I currently have around $600 of revenue on $1200 spend, but that's primarily because I'm subsidizing new accounts (each new account gets $5 to spend for free, which translates to around ~36 designs). I'm in the process of doing an angel round, so I can afford to operate at a bit of a loss during the growth stage.
  - boundlessdreamz 3mo ago
    Your tool looks great!
erikw 3mo ago
Very interesting that Fable took more creative liberties. Have you tried giving Fable the same task, but also specifying that it implement a pixel-perfect design? I think that I prefer the Fable implementation. I find the UI elements in the Fable implementation to have more contrast, which feels more usable to me. I also like how the right padding on the "Book Your Escape" CTA in the upper right matches the top and bottom padding, which I think is an improvement over the mockup.
- jjcm 3mo ago
  All of these are using a build skill which specifies rules for building it, requirements to create a pixel perfect implementation, and tooling to help in that process. Here's the build skill / instructions I pasted in to both of them: > Create a web page implementation from the following instructions: > https://diffui.ai/build/Spa_Booking_Experience_build.md?authToken=UZew5iSbC4ql https://diffui.ai/build/Spa_Booking_Experience_build.md?auth...
  - hbcondo714 3mo ago
    > You are an elite frontend engineer and design-to-code specialist. The design image is the primary source of truth; your code is the translation layer. Do not reinterpret or "improve" the design into something generic — reproduce it faithfully. Thank you for sharing this. I was just using OpenAI's Product Design plugin[1] to create designs but it just didn't reproduce it in code faithfully so will need to try this. [1] https://openai.com/business/plugins/product-design/ https://openai.com/business/plugins/product-design/
    - jjcm 3mo ago
      http://impeccable.style/ http://impeccable.style/ also just released their latest version which has some image->html conversion. They just released a couple days ago and haven't had a chance to try, but I suspect theirs is a bit more robust than mine for pure LLM instructions. Worth trying and comparing it with mine.
jjcm 3mo ago
Here's another test of a cyberpunk ramen shop website. One thing I've found LLMs have a lot of difficulty with is angular cuts / elements that aren't easily representable with CSS. Cyberpunk aesthetics are generally a great test of that, since they have a lot of microglyphs / window decoration. Design source of truth: https://image.non.io/9d5fed20-b476-49d3-841b-37eb553fb88e.webp https://image.non.io/9d5fed20-b476-49d3-841b-37eb553fb88e.we... Opus 5 build: https://html.non.io/neonRamen/ https://html.non.io/neonRamen/ Thoughts: It does a really, REALLY good job at these angular cuts / microglyphs. The responsiveness is off, but I'm very impressed at how well it did here. One way I think of it is "how close to a finished product did this get me?". Opus gets you like 90% there.
- echelon 3mo ago
  God damn, we are living in the future. I love this so much. Designs like this would never have seen the light of day in the cellphone incrementalism / corporate memphis era of tech. Now people can be weird and awesome again. This is 1980's cyberpunk / late-90's Matrix / early-00's sci-fi UI. Great ideas that died to frutiger aero (which isn't a bad design aesthetic) and flat design (which is). This is fun and it's got great colors and I love it. It's so refreshing to see this. AI rules. This is the best timeline.
  - ai_fry_ur_brain 3mo ago
    Because they're incredibly ugly
    - echelon 3mo ago
      It's gorgeous and the world doesn't have enough of it.
      - wilkystyle 3mo ago
        I was gonna say, you can dislike it because of the design, but understand that that's a subjective opinion that has nothing to do with whether AI is awesome. I actually like these designs, personally.
ai_fry_ur_brain 3mo ago
[dead]
Xenograph 3mo ago
Is this with browser tooling attached to the agent for review/iteration?
- jjcm 3mo ago
  yea this was just straight into claude desktop / its standard tool usage, on "high" thinking. The ramen website is on "extra" thinking.
afro88 3mo ago
IMO a much better test would be designs that aren't AI to begin with. Much more useful to see how well a model can html an image design without slopping it up
abidlabs 3mo ago
I was curious to see how open weight models would do on this task so I passed in a screenshot of your source of truth and here's what 2 of the best code-generation models that allow image inputs do: Inkling (not too great): https://cdn-uploads.huggingface.co/production/uploads/608b8bb39d7c9519b4adae19/cxuhXRLCts_ACn4rDZ20v.png https://cdn-uploads.huggingface.co/production/uploads/608b8b... Kimi 2.7 (really well, esp. note that this is the predecessor model, not the latest Kimi3): https://cdn-uploads.huggingface.co/production/uploads/608b8bb39d7c9519b4adae19/kzAhr9gSXyLwfPNfE7mPR.png https://cdn-uploads.huggingface.co/production/uploads/608b8b... Here's how I tested them: https://huggingface.co/spaces/abidlabs/vlm-screenshot-to-webpage https://huggingface.co/spaces/abidlabs/vlm-screenshot-to-web... https://huggingface.co/spaces/abidlabs/vlm-screenshot-to-webpage https://huggingface.co/spaces/abidlabs/vlm-screenshot-to-web...
- deleted 3mo ago
  [deleted]
- jjcm 3mo ago
  Not bad at all, and this is pretty consistent of what I've found from the current open source models. I haven't tried it with kimi 3 yet, that's on my todo.
abdussamit 3mo ago
Please share your prompt to convert image to html!
- jjcm 3mo ago
  Shared here: https://news.ycombinator.com/item?id=49040344 https://news.ycombinator.com/item?id=49040344
thatxliner 3mo ago
> Doing testing with it now, specifically for image->html conversion. I wonder if there exists a benchmark for that.

by jjcm 3mo ago

bottlepalm 3mo ago

I just clicked your links and then read your comment after - my first impression was the Fable version looks way nicer.

jjcm 3mo ago
I agree the fable version looks nice - the rounded hero image for instance. Opus though followed the source of truth better imo. The details are more present. Fable filled in the gaps for things it wasn't able to do (ie in the design the hero image goes behind the nav), which resulted in a better looking page that was more divergent.
kccqzy 3mo ago
Same. I like the Fable version better. Better colors, better choice of font sizes, better column sizing. Also small things like the “Experience” section header being orange rather than gray, which Fable got right and Opus got wrong. It seemed to me that Fable meaningfully improved on the original design more than just faithfully executing the original design.
andersonpico 3mo ago
I liked the Opus version better if only because the responsiveness is less broken.

chriscamargo 3mo ago

This is an awesome test! Thanks for sharing the results. Opus 5 is very impressive. Out of curiosity, what app is that Design source of truth screenshot from?

jjcm 3mo ago
That's from my own tool. I left figma to build a diffusion-based UI tool. Here's a show hn post with some more info: https://news.ycombinator.com/item?id=48995754 https://news.ycombinator.com/item?id=48995754 Edit: Generation was down, back up now. Apparently just hit my $1000 cap for the openai api. Upped it to 10k. Growth!
- IanCal 3mo ago
  Huge fan of the non-seat/monthly based pricing. Do you need it to be higher to not just cover costs but also make a profit?
  - jjcm 3mo ago
    Right now generation is entirely at-cost (0% margin). Once I finish my SOC2 I'm going to release a enterprise/team license, which I'll charge a fixed 50% margin for. Long term the goal is for those enterprise licenses to be the profit center and for individual accounts to drive growth. At the moment I currently have around $600 of revenue on $1200 spend, but that's primarily because I'm subsidizing new accounts (each new account gets $5 to spend for free, which translates to around ~36 designs). I'm in the process of doing an angel round, so I can afford to operate at a bit of a loss during the growth stage.
- boundlessdreamz 3mo ago
  Your tool looks great!

erikw 3mo ago

Very interesting that Fable took more creative liberties. Have you tried giving Fable the same task, but also specifying that it implement a pixel-perfect design? I think that I prefer the Fable implementation. I find the UI elements in the Fable implementation to have more contrast, which feels more usable to me. I also like how the right padding on the "Book Your Escape" CTA in the upper right matches the top and bottom padding, which I think is an improvement over the mockup.

jjcm 3mo ago
All of these are using a build skill which specifies rules for building it, requirements to create a pixel perfect implementation, and tooling to help in that process. Here's the build skill / instructions I pasted in to both of them: > Create a web page implementation from the following instructions: > https://diffui.ai/build/Spa_Booking_Experience_build.md?authToken=UZew5iSbC4ql https://diffui.ai/build/Spa_Booking_Experience_build.md?auth...
- hbcondo714 3mo ago
  > You are an elite frontend engineer and design-to-code specialist. The design image is the primary source of truth; your code is the translation layer. Do not reinterpret or "improve" the design into something generic — reproduce it faithfully. Thank you for sharing this. I was just using OpenAI's Product Design plugin[1] to create designs but it just didn't reproduce it in code faithfully so will need to try this. [1] https://openai.com/business/plugins/product-design/ https://openai.com/business/plugins/product-design/
  - jjcm 3mo ago
    http://impeccable.style/ http://impeccable.style/ also just released their latest version which has some image->html conversion. They just released a couple days ago and haven't had a chance to try, but I suspect theirs is a bit more robust than mine for pure LLM instructions. Worth trying and comparing it with mine.

jjcm 3mo ago

Here's another test of a cyberpunk ramen shop website. One thing I've found LLMs have a lot of difficulty with is angular cuts / elements that aren't easily representable with CSS. Cyberpunk aesthetics are generally a great test of that, since they have a lot of microglyphs / window decoration. Design source of truth: https://image.non.io/9d5fed20-b476-49d3-841b-37eb553fb88e.webp https://image.non.io/9d5fed20-b476-49d3-841b-37eb553fb88e.we... Opus 5 build: https://html.non.io/neonRamen/ https://html.non.io/neonRamen/ Thoughts: It does a really, REALLY good job at these angular cuts / microglyphs. The responsiveness is off, but I'm very impressed at how well it did here. One way I think of it is "how close to a finished product did this get me?". Opus gets you like 90% there.

echelon 3mo ago
God damn, we are living in the future. I love this so much. Designs like this would never have seen the light of day in the cellphone incrementalism / corporate memphis era of tech. Now people can be weird and awesome again. This is 1980's cyberpunk / late-90's Matrix / early-00's sci-fi UI. Great ideas that died to frutiger aero (which isn't a bad design aesthetic) and flat design (which is). This is fun and it's got great colors and I love it. It's so refreshing to see this. AI rules. This is the best timeline.
- ai_fry_ur_brain 3mo ago
  Because they're incredibly ugly
  - echelon 3mo ago
    It's gorgeous and the world doesn't have enough of it.
    - wilkystyle 3mo ago
      I was gonna say, you can dislike it because of the design, but understand that that's a subjective opinion that has nothing to do with whether AI is awesome. I actually like these designs, personally.

ai_fry_ur_brain 3mo ago

[dead]

Xenograph 3mo ago

Is this with browser tooling attached to the agent for review/iteration?

jjcm 3mo ago
yea this was just straight into claude desktop / its standard tool usage, on "high" thinking. The ramen website is on "extra" thinking.

afro88 3mo ago

IMO a much better test would be designs that aren't AI to begin with. Much more useful to see how well a model can html an image design without slopping it up

abidlabs 3mo ago

I was curious to see how open weight models would do on this task so I passed in a screenshot of your source of truth and here's what 2 of the best code-generation models that allow image inputs do: Inkling (not too great): https://cdn-uploads.huggingface.co/production/uploads/608b8bb39d7c9519b4adae19/cxuhXRLCts_ACn4rDZ20v.png https://cdn-uploads.huggingface.co/production/uploads/608b8b... Kimi 2.7 (really well, esp. note that this is the predecessor model, not the latest Kimi3): https://cdn-uploads.huggingface.co/production/uploads/608b8bb39d7c9519b4adae19/kzAhr9gSXyLwfPNfE7mPR.png https://cdn-uploads.huggingface.co/production/uploads/608b8b... Here's how I tested them: https://huggingface.co/spaces/abidlabs/vlm-screenshot-to-webpage https://huggingface.co/spaces/abidlabs/vlm-screenshot-to-web... https://huggingface.co/spaces/abidlabs/vlm-screenshot-to-webpage https://huggingface.co/spaces/abidlabs/vlm-screenshot-to-web...

deleted 3mo ago
[deleted]
jjcm 3mo ago
Not bad at all, and this is pretty consistent of what I've found from the current open source models. I haven't tried it with kimi 3 yet, that's on my todo.

abdussamit 3mo ago

Please share your prompt to convert image to html!

jjcm 3mo ago
Shared here: https://news.ycombinator.com/item?id=49040344 https://news.ycombinator.com/item?id=49040344

thatxliner 3mo ago

> Doing testing with it now, specifically for image->html conversion. I wonder if there exists a benchmark for that.