1/ Use a standard CSS library - Tailwind 2/ Use a common React component library such as Radix UI (don't reinvent the wheel) 3/ Avoid inventing new UI patterns. 4/ Use Storybook so you can isolate all custom UI elements and test/polish them in all states 5/ Develop enough taste over the years of what is good UI to ask CC/Codex to iterate on details that you don't like.
Ask HN: How do you employ LLMs for UI development?
51–60 of 67 posts
Re: Ask HN: How do you employ LLMs for UI development?
#52Re: Ask HN: How do you employ LLMs for UI development?
#53Re: Ask HN: How do you employ LLMs for UI development?
#54Re: Ask HN: How do you employ LLMs for UI development?
#55Earlier quoted context omitted.
Same thing entirely: ask for something like "a modern UI for gathering customer details" you're guaranteed to get a pile of shit. Spec it out providing your needs, objectives, guidelines etc and you'll get better output... exactly like with an LLM.
[dead]
The junior half at least. Keep a core of seniors to coach and direct the AIs, you'll more than make it back over time.
Re: Ask HN: How do you employ LLMs for UI development?
#56Earlier quoted context omitted.
> I have baseline screenshots of how I want it to look, and instruct the agent to match against the screenshots What if instead of feeding the actual and expected screenshots into the model we fed in a visual diff between the images along with a scalar quantity that indicates magnitude of difference? Then, an agent harness could quantify how close a certain run is and maybe step toward success autonomously. That said…
> What if instead of feeding the actual and expected screenshots into the model we fed in a visual diff between the images along with a scalar quantity that indicates magnitude of difference? It does this by itself when needed, using imagemagick (in my case), also seen it create bounding boxes and measuring colors with impromptu opencv python scripts, so doesn't seem like it's needed to explicitly prompt for this, se…
I've not tried to do any "pixel perfect" designs with CC outside of that. Generally I'm fine with the default UI it generates which tends to be some vague "modernish" sort of look.
Re: Ask HN: How do you employ LLMs for UI development?
#57The key insight I've found: LLMs are great at generating the 80% scaffolding but terrible at the 20% that makes UI actually feel good — animation timing, scroll behavior, focus management, accessibility edge cases.
So I've stopped asking them for "production-ready" components and instead ask for "the boring structural parts" so I can focus on the interaction details that users actually notice.
Re: Ask HN: How do you employ LLMs for UI development?
#58If you want better than the default outcome you have to take what it gives you and feed it back in alongside examples.
In backend dev they say, make it work - then make it fast - then make it cheap. It’s another way to say, no one will get it right first time because just getting anything the first time is hard enough.
I guess frontend would be something like, make it work; make it functional; make it beautiful.
Re: Ask HN: How do you employ LLMs for UI development?
#59The 'LLM + Shadcn/UI' workflow is the most productive I’ve found. I usually have Claude handle the complex state logic and business rules, then I pipe the requirements into v0 to generate the actual React components. It bridges that 'UX gap' by providing a visual starting point that isn't just a wall of code.
For a community-focused site like a forum, getting the 'vibe' and layout right is harder for LLMs than the logic, so I find that iterative prompting in a visual tool works better than pure code generation.
Re: Ask HN: How do you employ LLMs for UI development?
#60GPT 4o was the first good one, capable of handling animations and such. Gemini 3 Pro is actually at a junior designer level. Arguably Gemini 3 Flash might do better than Claude 4.6 Opus.