Slightly reducing the sloppiness of AI generated front end (opens in new tab)

You really have to a) use Opus and b) use the frontend-design skill for decent results.

https://github.com/anthropics/claude-code/blob/main/plugins/...

I think this says more about "modern" UI than it does about AI slop. The awfulness of all this comes mostly from the fact that widgets no longer have consistent shape, theme or interaction behaviour ever since desktop paridigms and original Xerox/Parc research were abandoned in favour of web slop. So yeah, this is much more Web Slop than AI Slop. AI is just amplifying it.

I'll share my results / my approach. Here are three designs from the prompt->design thing I'm working on:

https://image.non.io/10037610-e35e-44b0-b5c6-69d8fb772109.we...

https://image.non.io/dcf067bc-e296-4744-9b36-2b882f3d791d.we... (same as above, but with your simplified map)

https://image.non.io/94fdfb04-c57d-4b81-8d53-7b0f707e4d63.we...

I've found that starting using diffusion to render your creation, then using a LLM to build from the image creates much less of a slop feel than just starting out with a LLM. You wouldn't tell a construction crew to just build you a house without an architectural plan, so why tell a LLM what visual result you want without a visual guide?

my thing is diffui.ai if you want to check it out. It's basically a harness for diffusion models to generate UI, as well as agent integration for handoff.

Obviously this is a personal preference, but the multiple layers of beveled grey on the Qt UI is not something I like, as it forces a lot of grouping on the eye where it doesn't serve any purpose.

I would go with the original, Apple or the Win11 one. Material would be good, what's with the lavender shades?

I always try to reduce the palette: say two background shades max, no drop shadows, only as many foreground colors as needed and if it seems to bland, add more bells and whistles.

My experience with this is 180 degrees opposite. It's been really easy to create really nice UIs for all kinds of one-off apps I've made for myself with AI. In fact, it has been one of the most fun parts of this whole AI thing. ¯\_(ツ)_/¯

Does anyone have good examples of well designed web applications - not landing pages or peoples tech blogs, which are often listed here on HN. But like actual applications that do a complex task with the user using it as a tool.

To me the "AI slop" mostly just looks like the last decade of SaaS products.

Do the landing pages of auth0.com, devcycle.com, micro.com, or datadog.com not look like slop to other people?

This begs for a modern version of https://csszengarden.com/, where the CSS is generated by different LLMs and prompts.

I donno. They all look ugly.

When making small tools for myself, I just tell it to use Svelte and then wrap it up using Tauri - no graphical cues whatsoever. And they usually comes out pretty good by my taste.

Can you quantify what it is you don’t like? Like, to my eyes ‘original’ is fine - and it’s very similar to ‘QT’ expect with rounded corners and brighter colours.

as someone with little to no design background they all look the same to me except the bloated sass which is clearly inferior

is there a way to quantifiably measure how much better one design would be from another?

>> Slop is not a distinct style, it can be overlaid on top of many others. Even when I got it to make a page to look like X, it looked like X with slop.

Today, I can visit a website and instantly tell it was generated using LLMs and agents from A to Z:

1. Everything is in blue or mauve gradient, with a white background, and a single JavaScript-heavy page that lags as soon as you scroll a little.

2. There are always a ton of 404 pages.

3. Third, the HTML comments often expose credentials and to-do lists—sometimes even right above the login page (true story...).

This kind of website is a hard pass for me, and I add the company (and its founders) to my personal blacklist of people and companies I’ll never use anything from.

All of these look quite terrible to my eyes. None of them really resemble the classic AI slop landing page, either (of which this [1] is a decent illustration). I'm no huge fan of that style, but it's at least readable and functional, and thus better than the results you got by a mile.

It seems like you were starting with an existing HTML file you asked it to redesign. Generating from scratch with strict guidelines could be more representative.

[1]: https://vorpus.github.io/performativeUI/

I thought that AI would at least be good at 2 things: writing (text) and doing UI. It's not good at either. Text it generated reads like slop and UI it creates looks like slop. The way I approach it now is this: for text, I have to write it myself and only use AI to check grammar and catch weirdly phrased passages. For UI, it's like with the rest of the code. You have to stay on the top of it and keep demanding changes to match your vision/architecture/taste until it gets it close to what you want. In both cases, not knowing what "good" looks like is a real problem, because AI definitely has no idea.

I kinda liked the Original, HIG and Windows 11 versions the most. When I think "AI slop" (in terms of web design), I think dark theme, rich purples and vibrant hues, huge headings, etc. The SaaS one kind of has that with the purples and vibrant hues; it easily looks the "sloppiest" to my eye.

Personal preferences I suppose.

I had to read the post about five times and still didn't see the link to the actual examples - I actually had to view source to see the URL.

I like the idea - all of the designs are pretty meh though. If I had to pick one, I'd pick the HIG one (apart from that cursed glass effect on scroll) and then probably the Win11 one.

TLDR: Once a design gets old enough that LLMs can reproduce them, they are now "slop".

Qt is heavily represented in training data. Qt has existed for decades and the model has likely seen Qt tutorials, screenshots, source code, discussions, etc. As a result, "Qt application" is a highly coherent concept in the latent space. "Qt app" is almost like a named distribution.

If you're just having fun with it, there are a whole bunch of other things that produce interesting options, like asking it to theme according to a movie (think Clockwork Orange, Backrooms, anything with a strong aesthetic), or throw screenshots and photos at it and use it as a "design system" (magazine/print layouts can work well with this on stronger models).

Just have your agent use an existing design system. They provide coherence and many styles to choose from (and customization if you really need that for your personal use). I wouldn't expect agents to invent a coherent component library from scratch for every project. It's a solved problem. I'd personally just use something very popular like MUI and be done.

This is mostly the fault of the model, a lot of them have been trained to generate HTML in a specific style. Claude's is pretty distinct for example, I think the new DeepSeek copies it. Some of them can generate more humanlike HTML like Kimi K2 IIRC, which I feel is the model with the least amount of post-training in general.

It's necessary if you don't want it to generate HTML with images and other assets you don't have of course, that's why they use emojis or meticulously handcrafted SVGs, or WebAudio synthesized sound which pretty much no humans did before.

I'd be curious to see a version prompted to recapitulate the style of a Windows 9x app.

Everyone these days seems to fondly recall win9x as the last era when there was an actual visual "system" that applications actually obeyed (...or rather, that every app was forced into obeying, since Windows just wasn't very extensible to performant custom third-party controls until DirectDraw came along. But I digress.) I wonder whether LLMs can build something that actually obeys those rules (i.e. composes everything out of a hierarchy of [simulacra of] first-party W95-era GDI controls — think "Minesweeper is a grid of buttons with icons on them", that kind of thing), rather than just vaguely looking like W95.

Only a small anecdote, but I'm 2 projects into telling Claude to "make it look like Google podcasts" and getting satisfactory results. Still smells like llm in parts, but overall it is not screaming low effort.

I've been doing this recently - working with Qt on a local app.

I've had good luck providing a png "design board" with all of the template colors and having the first task be to build out a design gallery with all of the ui widget. Then have the design docs specify which component to use. Ensure that the documents specify to only use pre-existing components and have a list of each component and their intended use cases.

Of course, this learning came after seeing how awful V1 of the app was. Initially, it looked really impressive, but once you started clicking around it became obvious how incoherent the design was.

Claude's new frontend-design plugin is solid for web apps in my testing. My wife and I have been using it to build her an app and her discerning design eye is largely impressed with what it's done.

I decided to tell the LLM to not generate any CSS for a web frontend I am working on. It is just not worth the hassle and doing it myself is actually a way to think about usability and design in a valuable way, that flows back into how I want the whole service to be structured.

The design coming out of a LLM may be okay if you have nothing to do with design and can't program CSS, I just see a deeply inconsistent mess.

I am convinced well designed software has to be thought out from the user perspective. And if I am the one to commandeer a LLM, designing myself is part of thinking about what I want.

This makes perfect sense. Qt has very clear and strict design rules. Standard web design has too many options. When the AI has too many options, it just guesses and makes a mess. Forcing a desktop style fixes that

I'm currently building a retro styled home assistant control app running on a raspberry pi with a 3.5" touchscreen with all custom UI, and I'm making it vaguely win3.1 styled, complete with color themes including the famous Hot Dog Stand.

It's very satisfying to see these old UI styles - looks great on a crappy little screen. Not everything needs to be Material Design or whatever - it just takes up so much space!

I think the original looks the best and by a large margin

Tailwind is the answer. Always pure Tailwind, not custom classes + utilities. It makes a massive difference vs. stylesheets. The LLM is able to actually reason about your UI in discrete chunks with a semantic layer over the styling, vs. bouncing back and forth between CSS/HTML and trying to reason about custom classes generated on the fly.

I guess this is subjective, but this is almost the meme of the backend engineer with no design taste.

What about a backend that prompts the LLM at runtime and generates a new frontend for every user? It'd be like A/B (C/D/E/F..) testing with no possible way to validate the results or fix bugs. Somebody make me their CTO, quick.

I believe the ideal solution would be to take a genAI image from gpt-image2 and transform it onto a pseudo-deterministic layout.

Did anyone tried a non-naive approach, aka throwing the image with a simple "rebuild it" prompt ?

Looks like there is a bug in the "Find State" dialog. If you search "AR" for Arkansas and press the "Set R" or "Set D", it toggles the Arizona state count, not Arkansas

Similarly, I've gotten a few reasonable results by asking for Microsoft Office 2007 style or the Windows Vista file explorer, stuff like that.

Most of them don't look amazing, but I like the GTK version the most -- even though it looks slightly outdated.

I am on a mobile browser and the desktopy look of the gtk and qt ones are pretty bad.

On the practical tooling side — I built a service that does on-demand AI code review (aireviewpro.loca.lt). Interesting observation: the model is much better at catching security issues than performance bugs, probably because security patterns are more well-defined in training data.

in my opinion giving a strong idea helps a lot. just bring it clear in your mind and try to transfer with strong and clear scheme. in my experience this reduces the do and re do thing

On the matter of being without taste -- which I assume the author is using as a self-derogatory descriptor for not having skill in UI design -- the styling of links on this page could use some change. The link color is so close to the body color that I initially thought there weren't any links, and scrolled trying to find the examples. You can't both remove the underline and have such a low contrast font color, it's bad UX.

(For the record, even though I don't mind qt, I think this particular example still comes across as slop because of the overuse of gradients on buttons and headings. In general, a lot of these suffer from overuse of gradients, but OP appears to just be averse to border-radius)

Those aren’t “slop”, those are exactly what non webdev used to see in the past decade, now that webdevs are seeing it done without them doing it and everywhere, the reality check hit them hard. Gtk/qt UI feels like duct tape toys even before AI, material is so tasteless but years ago it was the “de facto” in any design or icons set, most front end ui/ux are literally copy paste of the same template and components, even before AI. Imo only some old apple and windows vista where the UI was actually pleasant to see and interact with.

I think its quite easy to get non sloppy looking ui code. I normally start by asking it to follow apple design guidelines, and then customise it from there. The thing that makes it slop, is when you're not specific about what you want. Then it's going to use the "average of all code" designs.

The other things is especially when adding animation, people often prompt "animate the button" which to a developer is very vague and would need alot more work.

> Only one generation stuck out to me. Simply asking it to make it look like a Qt app - to my tasteless eyes - removed almost all feeling of slop. You can check some of the results out [here](https://envs.net/~volpe/projects/ai-design.html).

All of these examples sites are broken on mobile for me.

Tried macOS HIG for the same reason and got similar results, less slop, more structure. I think what's happening is that the model has a very specific grammar to pull from instead of averaging over everything web-related it's ever seen. The SaaS one is interesting as a control, it's essentially asking for the average of all modern web UI, so you get exactly that.

I think what makes something look like slop is rounded corner cards with slight shadow, and sans serif font.

Also full caps / overemphasis on text that doesn't need it. For example "DEMOCRAT" and "REPUBLICAN" in this example.

I think the slop part is just what you get when you inject no opinions and put in no effort to apply taste (which you probably have and/or could develop). No care is put in. It looks generic and sloppy because it is generic and sloppy. You might have preferences over which generic and sloppy style is preferred, but at the end of the day a UI built without effort is going to look like what it is.

But if it functions fine and you don't have taste or want to be opinionated, why do you care?

Did anyone commenting about Qt and how it makes sense actually looked at the result?

I don't think any of Qt default themes in last 10-15 years have looked anything close to that. With all those gradients and gray rectangular boxes it's more like a parody of early 2000s x11 theming and Flash based UI frameworks. My personal expectation when hearing QT style would be more like the builtin Fusion style.

If you ignore the central part with gradients, right side with square 3d boxes look a bit like classic win32 style (which would also be what QT used on windows by default) but you wouldn't normally end up with so many nested raised 3d boxes (or visible nested boxes in general). Buttons (and other clickable subcomponents) are raised, tabs are raised, but UI group elements have more of recessed border and you would use it sparingly. Often you would have just a separator line or empty space for grouping elements in flatter UI hierarchy.

Qt is GUI framwework for C++. How would having a bunch of C++ code containing barely any styling in training material help styling a website? Also the whole point is that it's a style that you don't recreate it hundred times it's what you get automatically by letting the GUI framework and theme engine do it's work. The modern Qt with Qt Quick/QML and it's flavor of CSS is closer to web development but those kind of Apps lack any kind of characteristic QT style since the authors are more likely to build the styling from scratch (resulting in one of those UIs with random image in background and hardly recognizable widgets) or based on builtin Qt versions of Google/Windows/Apple style guides. Wouldn't expect any modern QML based app to look like the obtained "Qt" style. In the traditional desktop apps based on QtWidgets, you can customize the style with css but the hard coded logic within the theming engine (implemented as native dll) is equally important for the look, not everything is is defined by css. You have to do either very little customization (minor styling for individual special elements maybe a color pallet swap) or override everything, otherwise it's easy to end up with ugly, broken result. Typical problems being Qt changing default base theme based on platform, theme engine switching to fallback rendering path once you override certain style properties.

Another important aspect of the classic desktop look which doesn't really translate well to websites is the set of widgets. Frameworks like Qt(widgets) provide reasonably wide range of widgets and you would use them as is. Unless you really needed it rarely would you create a widget from scratch or recreate what's already available. You wouldn't recreate a button, checkbox or a dropdown(combobox) using bunch of divs which can't be said about the modern web design. You might customize the behavior of builtin widget with subclassing or by combining multiple builtin widgets. The API for drawing custom widget from scratch is a pain and using it correctly to properly integrate with theme engine is even bigger one.

You went from slop to outdated (as far as looks are concerned). But hey, what's old is new again, maybe we'll come full circle again.

My eyes are so sharp i can easily tell which one is slop coded whether it is QT or GTK style theming lol.

Makes sense. Slop is basically what you get when there's nothing specific to copy and so the AI it just averages every web style together. Qt works because there's really only one way Qt looks.Modern web has a million versions of everything so you average all that and get slop.

Welcome to a new design process called “Hacker News in the loop”.

on the other hand steve jobs would've called Qt human-slop

guess it's a matter of taste

design.md