Ask HN: Best practices for building front ends with AI assistance?
9 comments
Claude is surprisingly bad with UI. Nearly every other is better at it. GPT-4o is proper multimodal, while Claude is a mix. I'm not sure about GPT 4.1, but it seems to gave better results than 4o.
You should be able to get good enough results with just a screenshot.
It stumbles on newer things like Next.js though. I'm always amused by the people who think it's taking jobs. It's always going to be mid; it has to be trained on someone's code.
It makes some good guesses, and often gets the color or font weights close. One trick is to have it go over your design system and summarize everything into ui.md and such.
You should be able to get good enough results with just a screenshot.
It stumbles on newer things like Next.js though. I'm always amused by the people who think it's taking jobs. It's always going to be mid; it has to be trained on someone's code.
It makes some good guesses, and often gets the color or font weights close. One trick is to have it go over your design system and summarize everything into ui.md and such.
That makes sense — I’ve mostly been using Claude (Sonnet), so I’ll give the GPT-4 series a try and see how it compares. Thanks for the suggestion!
Connect your coding tool to a browser (like with the playwright MCP) and just let it iterate on its own until it matches the design you want.
That’s a great idea. I haven’t tried connecting to a browser with something like Playwright before.
[deleted]
I'm a backend developer who recently started building full-stack apps, mostly using Next.js + shadcn-ui. Given how capable AI coding tools have become lately, I've been relying on them to help me bridge the gap in my frontend skills.
For the most part, this has been working great — especially when I can just compose existing shadcn-ui components. I describe the layout and functionality I want, and AI helps me glue things together.
However, I'm running into trouble when:
The components don’t look quite the way I want and need customization;
The component I need doesn’t exist in the library;
I need to fine-tune the CSS/styling;
In those cases, things get a lot harder. I'm not very fluent with CSS or frontend design systems, and sometimes AI-generated code doesn't fully match what I had in mind. Then I end up spending too much time debugging styles or trying to explain better what I want — often unsuccessfully.
So now I’m wondering:
Is this a signal that I need to invest more time into deeply learning frontend development (especially styling and layout)?
Or am I just not collaborating with AI in the right way — e.g., are my prompts poorly written, or am I missing some tools or techniques that make this process smoother?