Welcome to a new design process called “Hacker News in the loop”.
Slightly reducing the sloppiness of AI generated front end
141–147 of 147 posts
Re: Slightly reducing the sloppiness of AI generated front end
#142Earlier quoted context omitted.
HN has huge issues right now with AI generated code or design. I have a friend who is a graphic designer/market strategy guy and he's been using Anthropic to build sites and even did an agent on his own page that helps guide the user through onboarding. I reviewed the code a few times and gave him some tips and it looks pretty good and works flawlessly. He maintain a lot of customer's sites (design wise) and all the…
What year is it? If you're running a barebones server, just use certbot. It'll automatically renew your certs. Very easy to set up and it's been stable for years without touching it.
My friend, who is not at all familiar with the terminal, has customers using a variety of hosted services.
And, he has a working solution.
It's 2026, FWIW.
Re: Slightly reducing the sloppiness of AI generated front end
#143I'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…
This is an interesting yet simple approach. To the OP’s original question, how might you abstract this into a “design system” that can be applied to their other projects?
I have a "brands" system that's exactly for this: https://image.non.io/27e099c5-f0d7-493a-a01f-928d9e42cef5.we...
Once you have a few reference screens, you can generate a brand guidelines image, which is a visual reference of your brand's look and feel: https://image.non.io/1cc2922a-aec6-4e3c-82c9-895974dd599b.we...
From there you just select the brand at generation time. I've found you don't need a design.md or a npm package - simple screenshots are plenty good enough. Here's a prompt for "a landing page for a new satellite connectivity" feature I generated in reddit/netflix/slack's brands: https://image.non.io/b5e23f19-5041-4f87-9b97-0af39986d1b0.we...
Re: Slightly reducing the sloppiness of AI generated front end
#144I'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…
That's really nice. Have you tested if it works well with longer and more detailed prompts? For example adding more whole product specs and so on. It would be nice to generate a design system from generated UI you like instead of recreating that UI directly.
RE longer prompts, yes. Generally speaking I expand most prompts to be around a full page of text as it is already, so adding more detail in just refines that expanded prompt. That's more for a single screen though. It sounds like what you're asking about is something like a design.md for an entire brand / docs for a design system.
For that, I have a different approach, which is to extract your design system from screenshots. After which you can just select the brand you want when generating. There's sample images in the sibling comment in this thread.
Also it might be worth noting my pedigree here - I ran the design systems features over at Figma for around 5 years, but quit to build out diffui. The project is heavily oriented towards being able to replicate brands consistently, since the target audience I'm going after is enterprise design teams who are having trouble with existing tools capturing their brand look/feel.
Re: Slightly reducing the sloppiness of AI generated front end
#145Earlier quoted context omitted.
HN has huge issues right now with AI generated code or design. I have a friend who is a graphic designer/market strategy guy and he's been using Anthropic to build sites and even did an agent on his own page that helps guide the user through onboarding. I reviewed the code a few times and gave him some tips and it looks pretty good and works flawlessly. He maintain a lot of customer's sites (design wise) and all the…
> HN has huge issues right now with AI generated code or design. Yes, because for those of us who enjoy scrolling through /new despite the deluge of spam that has always been a problem, we now have to sift through not just the obvious AI generated stuff that we can discard after a few sentences, but also the stuff where it only becomes obvious after already sinking in 10, 15 minutes of your time that it is undisclose…
Your comment cuts to the heart of it, for sure.
However, banning that type of content is an arms race waiting to happen. It also neglects the fact that powerful software can be built with AI with proper attention and knowledge of the domain.
It's an attention problem: https://deepbluedynamics.com/blog/rise-of-the-systemmer
Re: Slightly reducing the sloppiness of AI generated front end
#146Earlier quoted context omitted.
I've had better results with this, when it comes to functional UIs rather than marketing sites: https://github.com/Dammyjay93/interface-design Found it on reddit after Claude produced the lamest looking generic forms for all the pages on a project I had it build. This did a pass over it and basically fixed it all one shot.
>Apply the squint test to your work: >Blur your eyes or step back >Can you still perceive hierarchy? >Is anything jumping out at you? Telling an eyeless clanker to "blur your eyes" is just so ridiculous. "Is anything jumping out at you?" That's quite a thing for a machine to reason about, and reads like a waste of tokens. I'm not sure who is writing these things, but they seem rather clueless. Does it work? Maybe. I'…
Seems ironic to say about this, but it's not: Don't anthropomorphize LLMs; they are just really really good story telling machines.
Telling it to "blur your eyes" doesn't mean it has eyes to blur. It means that it is telling a story that involves itself (a front end engineer) looking at a website and blurring his eyes. What it will continue to complete this with is the tokens with the highest probability of following such a statement. That is to say, it understands what it means to "blur your eyes".
I'd also add that it can take screenshots with headless browsers, and it can blur them with image manipulation tools, and finally it can examine those with its multimodal capabilities.
>Does it work? Maybe. I'm just really skeptical after reading through that repo that any of this leads to actually better user interfaces.
Anecdotally? Yes.
>I'm pretty sure I'd have better luck just telling the LLM explicitly what I want, because experience in UI/UX is still better than what an LLM would slop out on its own.
If you are competent enough to do professional level UI/UX design spec, then yes, this is not for you. You'd be better off using tailored tooling at that point. This is for people who haven't spent years generating UX spec documentation.
If you don't generate exact specs, these LLMs will, in my experience, generate stuff that looks like generic forms that people made with PHP tutorials in 2005.
Re: Slightly reducing the sloppiness of AI generated front end
#147Obviously 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 colo…
At this point I dunno if Win11 has an “original” UI. Up until Win 8 Microsoft kept introducing new widget sets. I think the official answer for how you are supposed to develop desktop apps is “use Electron” so far as I can tell… or better yet make a web application.
I have the following setup in my project:
- Frontend/UI: TypeScript/React
- Backend: C++/Qt
The frontend is hosted in a QWebEngineView. I prefer React/TypeScript to QML. I was considering using Electron but it's too heavy for my purpose.