[jjcm]

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.we...

Opus 5 build: https://html.non.io/solaraOpus/

Fable 5 build: 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.

[jjcm]

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.we...

Opus 5 build: 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.

[winwang]

Several other commenters have disparaging the design seemingly mostly due to its AI-generated nature, or maybe they actually do dislike cyberpunk.

Personally, I think being able to have these design languages be easily prototypable is fucking awesome. Great tests! (But a tad low-performance/janky, somehow). Though, I also like the cyberpunk aesthetic. Very on-brand(?) that AI generates it, hah.

[sjs382]

Just leaving this for anyone that says a design like this doesn't work: https://riceboxed.com/

[thmoonbus]

This is a good version of that design style though

[larodi]

Wish more web looked like this really. Has distinct character.

[echelon]

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.

[andersonpico]

What do you mean designs like this? This is 2016-cyberpunk-neon-era inspired by video game interfaces, these are not uncommon at all. Google something like "discord cyberpunk theme" or "cyberpunk rice site:reddit.com/r/unixporn" and you'll find endless examples. This isn't suprising at all obviously.

[brailsafe]

I'd say the only thing it's a newish aesthetic for is web UI that isn't implemented in Flash, but even then there's been periodic resurgences. Command and Conquer, Starcraft 2, I'm sure there are tons of examples I'm unaware of.

The only recent novel addition—I'd speculate—is the specific influence of Cyberpunk the game with its shiny surfaces and pink highlights, but even then it's hardly new.

[ricardobeat]

Uncommon in commercial products - they all use the same flat, bland design language.

[GPerson]

I feel that AI has deeply diminished my ability to be weird and awesome, because my weird and awesome takes time and the results I can share with others are outshined by the machine.

[jjcm]

IMO what makes things awesome is human hours invested.

The ramen shop website above is pretty, but it's a veneer. It's not weird and awesome, it's just a representation of a site. I spent about... 7 minutes of my life making it. It's a tech demo, nothing more.

If someone actually poured their heart and soul into a vision for a cyberpunk themed ramen cart, and happened to use this because they didn't have the capabilities or funds to do a proper design, suddenly it becomes less of a veneer, and more just a component in the wider vision of that individual. Their human hours poured into the wider thing that's the business becomes what matters.

Ideally what AI does is it amplifies the hours we do pour into things that are weird and awesome, it doesn't replace them.

[ultimafan]

Strongly agree, I feel like my passion for development as a whole has waned away as AI has gotten more prevalent.

We do things to achieve some end result but it's the journey there that is the most cathartic to me. The "skilled crafts" element of development where careful deliberation and hours of tinkering to get any kind of appreciable output you can admire has been replaced with a one stop dopamine button that skips the whole process that I could find myself getting lost in.

I've taken up carpentry/metal working as a result. Maybe someday we'll have live in robots that do the same for those hobbies that AI did for programmers but I can't see it happening any time soon.

[hangrybear666]

Yeah I feel the same. That's why I've canceled my claude subscription and code everything by hand again, because building skill and mastery in a craft is fun and rewarding. Having a machine do it for me is neither. Fortunately coding is my hobby so there is zero pressure to optimize it.

At my workplace management is pushing AI, so I am using it in order to establish sensible and thoughtful applications of it and in order to know when to call out colleagues for pushing mindless automation out of complacency or blind obedience.

[kami23]

You should have seen some of the Flash sites people made in the mid 90s early aughts. They all seemed to be straight up screenshots of the desired website and then buttons stapled on random portions.

They were an accessibility nightmare, but you use what you got. I tried so hard as a kid to understand flash, but had to settle on MS Frontpage to publish my first RPG page.

What's old is new again.

[jjcm]

Designs are here if you want to play with em: https://diffui.ai/app/canvas/68c5bb3d-467e-4841-b49d-c008e72...

This was just from a prompt "A cyberpunk themed ramen food cart website. Should feature menu, locations, and an ability to put in an order for pickup. Simple and clean website with angular cyberpunk microglyphs, pink/teal colors."

[wilkystyle]

This comment resonated with me so much, and it seems to be a minority view (at least on this website).

I have found myself empowered by AI to tackle all sorts of things that would have too high of a barrier to entry for me to want to spend my limited time on as a busy father who is also working at a small startup.

And when I say that, I do NOT mean that I can crank out a bunch of slop and label it as something I produced even though I don't understand the code. I mean that I can do things like go back to college math that I never appreciated at the time and honestly felt too scared of. I mean having an on-demand math tutor that ask clarifying questions to as I struggle through the problem sets.

I have found that it actually accelerates learning how to code in various problem domains because I can tell it to answer my questions at a conceptual level and be a sounding board, but to never actually write code for me. It can review the code I write and gently nudge me without giving away the answers, so that I still struggle through the learning process and actually gain the knowledge.

And finally, for the first time in like 10 years of feeling overwhelmed and daunted by the prospect of learning game development (I have no background in that), I have found Codex to be an incredible boon for learning with the Godot engine. It helps me understand the terminology so that I know what to search for and what documentation to read. It helps me map my computer science knowledge from other domains into the game world, and to understand why things are structured the way they are. And because Godot saves all of the scenes and geometry and lighting and shaders to the file system as text files, Codex can inspect the results of the work I'm doing in the IDE and help me track down things I'm stuck on, and explain what the issue is. For example, why my pre-baked global illumination lightmap is breaking my ambient lighting configuration.

I know it has never been easier to cheat and skip the hard work that results in actually learning something, but for me, personally, I cannot believe the incredible value that $20 a month has provided me. I have never been more excited and eager to dive into tackling hard things I had previously been afraid of or simply too overwhelmed to attempt.

It has never been easier to quickly prototype and get a feel for some idea you have in your head to see if it even has legs. Simply seeing a quick prototype of an idea is often all of the excitement and fuel I need to then take it and make it a real project.

[hangrybear666]

Your approach seems sensible. Especially the part about discussing concepts to gain understanding instead of having output generated for you to avoid having to think. Unfortunately, most people are interested in shortcuts and thinking less and will ultimately deteriorate in their abilities the more they abuse these tools to skip the learning process.

[theappsecguy]

We are going through yet another generational wealth transfer and people are being squeezed to the absolute brim with layoffs and daunting lack of career prospects.

But sure, lets cheer that funky website designs are back on the menu…

[kypro]

I'll add to this...

The "funky" websites of the past were mostly a result of tech immaturity and a lack of profit motive.

Businesses have been able to easily install templates like this for at least a decade. They don't because stuff like this looks cool but isn't very functional.

AI isn't going to make your local restaurant have a funky website, it's just going to make everyone who use to work directly and indirectly for that company unemployable. And even the local restaurant will close down because they can't compete with the multi-national competitor that has automated their kitchen with AI.

[andersonpico]

I agree with most of your comment with one exception: It will never be economically viable to replace kitchen staff with AI.

[kypro]

> It will never be economically viable to replace kitchen staff with AI

Can you expand? Specifically what is it about humans that AI and robotics could not replace?

[signatoremo]

Why don’t you start a movement to fight for equality, and I’ll join you? Why are you still here and not taking actions?

In the mean time, I’ll unashamedly continue to cheer for creativity and innovation. Note: I don’t even like this website design.

[Mtinie]

Assuming no change from the baseline, I’d rather have one positive thing versus nothing positive.

[shimman]

"We're taking away your healthcare, sending your children to die in forever wars, poisoning the environment, all while ruining your job prospects but at least you can make pixel perfect implementations of figma screens."

[Mtinie]

“We're taking away your healthcare, sending your children to die in forever wars, poisoning the environment, all while ruining your job prospects”

The baseline. This does not mean it is acceptable and it is absolutely worth rebuking through action to make things better. Those things are anything positive, however small and incremental, or large and transformative.

[nextaccountic]

The culprit here is capitalism. The system was designed for this. Any technology will be used to squeeze the working class

AI has the merit of showing SWE folks exactly where in the class divide they belong. If you are selling your workforce, and you can't maintain your lifestyle if you stop working, you are in the working class

[aaa_aaa]

No we are not living in future. Design is ugly, and immediate put off because it smells AI.

[FranzFerdiNaN]

Reading your comment I had to think of that tweet about someone taking a part of a Monet painting and claimed it was AI generated, and people immediately started calling it horrible and soulless and smelling like AI.

[bonoboTP]

Obviously. Artistic value is not in the object, but in the relationships to other humans. The point is not Monet but the people you discuss Monet with. Monet is a tribal rallying point you can synchronize around. AI is not as good for this, because it's cheap. It's not scarce enough. And doesn't offer a human story you can bond around.

[shimman]

Okay but in this case the design aesthetic is already extremely similar to cyberpunk 2077 video game UIs. Maybe that was the OP's test, but to claim it's unique when it is not feels misleading. Derivative works are fine, but you need to ADD something as well. Taking this then adding another 12-20 hours of some animejs + css polish would make it stand out but as it is now it's just a copy.

[aaa_aaa]

Well this is no Monet for sure.

[newsy-combi]

Humans are capable of producing slop too. Maybe the cutout does look like AI. Given Monet's blurry style and repetitive content (he made 250 water lily paintings), this is not surprising. When you strip the cutout of its context, it can look more like AI too because the lighting and composition will look arbitraty compared to the whole picture.

Btw, if websites would only include the frontend dev's own hand painted images, we would also revolt at the sight of human slop. It's not just AI.

The whole point is that good artists are capable of producing non-slop, and to this day they're the only group of which this is reliably true.

[tackta]

It is because it is an image on a screen.

Water Lilies are enormous paintings. They are breathtaking in person because of their scale. Monet wouldn't be Monet if he had only produced images on a screen.

Art is good or it is shit, based on personal taste. Just like food, no one can tell me what food tastes good or tastes bad.

AI Art seems to produce strong emotions in people who don't go to art galleries. I love modern art, I am a huge art snob but if you want to see slop, go to any modern art gallery. Personally, I would say for my taste, at least 70% of all art at any gallery is basically shit.

Like food also, the presentation matters. To believe there is no possible way to print out a 6 foot tall by 10 foot long AI generated image that would look awesome hanging in a gallery is stupid.

[djeastm]

We could say the same for the first factory-made clothes. Not as nice as the hand-tailored ones, looking a bit "off" when people wear them compared to custom-made, but orders of magnitude cheaper and more convenient.

[waffleiron]

Almost all clothing is handmade

https://www.litanynyc.com/post/all-clothing-is-hand-made

[sccvcxv]

these analogies on the surface always look clever and cute

but its plain wrong bro.

[HaZeust]

Then tell it that, and it'll give you the output you desire.

[razster]

I feel you. I dig this and enjoyed those types of aesthetics. Back in the day this was my bread and butter, designing UI design for games and apps. I just realized AI (Specifically Pi+Ornith) can help with my ideas... So excited.

I'm hella interested in finding out what website builder/diagram app was used. I dig the dark theme/grid.

[LargoLasskhyfv]

It reminds me of the limitations of early CGA and EGA, which isn't a positive.

It's just remimagined LARPing of ppl who were born late into Postcyberpunk.

The same shit like (pseudoretro?) 'Synthwave', äckshuälly.

[sccvcxv]

Youre delusional fella.

The reality is the web is going to turn into a walled garden.

[ai_fry_ur_brain]

Because they're incredibly ugly

[echelon]

It's gorgeous and the world doesn't have enough of it.

[wilkystyle]

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.

[mainmailman]

Unrelated question, what’s your favorite flavor of Kool Aid?

[m3kw9]

The last 10% is gonna take 90% of the time though.

[razster]

I really like that design. May I ask the name of the website builder/diagram? Is it Relume?

[jjcm]

This is my own tool, diffui. Thanks, though I will say I spent like... 7 minutes on this. Feel free to completely lift the design or the implementation.

[abidlabs]

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/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/608b8b...

Here's how I tested them: https://huggingface.co/spaces/abidlabs/vlm-screenshot-to-web...

https://huggingface.co/spaces/abidlabs/vlm-screenshot-to-web...

[jjcm]

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.

[chriscamargo]

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]

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

Edit: Generation was down, back up now. Apparently just hit my $1000 cap for the openai api. Upped it to 10k. Growth!

[IanCal]

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]

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]

Your tool looks great!

[bottlepalm]

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

[jjcm]

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]

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]

I liked the Opus version better if only because the responsiveness is less broken.

[afro88]

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

[erikw]

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]

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?auth...

[hbcondo714]

> 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/

[jjcm]

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.

[thatxliner]

> Doing testing with it now, specifically for image->html conversion.

I wonder if there exists a benchmark for that.

[Xenograph]

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

[jjcm]

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

[abdussamit]

Please share your prompt to convert image to html!

[jjcm]

Shared here: https://news.ycombinator.com/item?id=49040344