Live data from Hacker News

Ask HN: How do you employ LLMs for UI development?

news.ycombinator.com

51–60 of 67 posts

Re: Ask HN: How do you employ LLMs for UI development?

#51
post #2

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.

Even with all these steps in place it still goes rogue with inline and one off elements CONSTANTLY

Re: Ask HN: How do you employ LLMs for UI development?

#52
constraints, constraints, and more constraints. design tokens for everything, build components and then blocks and attempt maximal reuse of them. tailwind. codify constraints in agents.md. continually have it update agents.md or whatever when something changes. iterative refinement. yell at it.

Re: Ask HN: How do you employ LLMs for UI development?

#55
post #24

Earlier 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]

How large is your UI team? If a few dozen people or more, fire at least half for sure.

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?

#56
post #19

Earlier 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 really struggled with CC's "direction sense". I had a problem that was analogous to this. I had a picture of a PCB I wanted to figure out. So I instructed CC to create an overlay over each component and we would work through them to identify what they were to build an overall picture of what the device was doing. Any and all attempts to get CC to accurately place bounding boxes around components completely failed. What I ended up having to do was have CC create an interface where I could draw my own boxes around components, and it had no problem categorizing them and following along after that.

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?

#57
My current workflow: I describe the component in plain English with specific constraints ("a data table with sortable columns, sticky header, and virtual scrolling for 10k+ rows"), let the LLM generate the first pass, then manually fix the edge cases it always misses.

The 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?

#58
My suspicion is you can’t expect LLMs to one-shot any sort of non-derivative work.

If 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?

#59
I’ve been using v0.dev (by Vercel) alongside Claude 3.5 Sonnet to build out the UI for my project, Dollarland (dollar-land.vercel.app).

The '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?

#60
Claude hasn't improved much on UI compared to the first generations of Claude. I'm surprised people still use it for this. What's worse is the UI startups built on top of Claude.

GPT 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.

Post reply on HN