Ask HN: Best practices for building front ends with AI assistance?

3 points by sukit 1 month ago | 8 comments
Hi HN,

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?

  • muzani 1 month ago
    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.

    • sukit 4 weeks ago
      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!
    • anthony_franco 4 weeks ago
      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.
      • sukit 4 weeks ago
        That’s a great idea. I haven’t tried connecting to a browser with something like Playwright before.
      • 9d 1 month ago
        Why not just learn CSS and write it manually?
        • sukit 4 weeks ago
          Yeah, you’re right — at some point I just have to learn CSS more deeply.
        • 4 weeks ago
          • moomoo11 4 weeks ago
            Try figma make
            • sukit 4 weeks ago
              Appreciate it, I’ll check it out.