Ask HN: Using LLMs for Better Design in Front End Development?

Hey HN,

I've been leveraging LLMs to quickly build out React apps, which is great, but I'm really struggling with the design aspect. My apps function well, but they lack that polished look, and I end up in an unproductive loop of CSS adjustments.

Has anyone explored using LLMs specifically for design improvements? How can they be harnessed to create more visually appealing outcomes without the endless tweaking?

Thanks!

31 points | by dsrtslnd23 4 days ago

11 comments

asar 4 days ago
It depends on what your setup looks like. If your using tailwind and a headless component library like radix or shadcn. LLMs can provide you with pretty decent looking layouts from very simple prompts. If your using plain CSS outputs can vary widely in quality, at least from my own experience.
purple-leafy 4 days ago
Yes, this does exactly that
https://chromewebstore.google.com/detail/design-copilot/hgal...
Screenshot component -> design feedback, repeat loop , all without leaving your locally server page
[-]
- slurpyb 4 days ago
  Ahhh so this is how all those new component library websites are springing up so fast. Hundreds of cards, buttons, and forms that are perfectly cromulent but all the variables are spelled weird.. thanks
  [-]
  - purple-leafy 3 days ago
    No they are a bit different. I made this tool because I suck at design. I also used the tool to design the tools UI while I built it.
  - cootsnuck 3 days ago
    I mean it has just over 200 users so idk lol
ramesh31 4 days ago
Use Tailwind. It's a massive difference from just asking the LLM to write raw CSS. Tailwind provides a semantic layer that allows them to actually understand it.
[-]
dtagames 4 days ago
They can't. LLMs are the wrong tool for the job, since they can only predict code that might do what you want, not follow actual style or design guidelines. We don't have a technology for that. It's still human work.
[-]
- codingdave 4 days ago
  I'm not so sure - they can predict based on what other people have done before. They just cannot innovate or be creative. But if you are looking for a generic polish, and not trying to do anything new, their predictive output might work for you.
  People who do not yet have style guidelines or a cohesive UX could get that first step towards such things from an LLM, so long as they understand that it will not help them get any farther than that.
  [-]
  - dtagames 3 days ago
    You can be sure. LLMs can predict code and it's based on matching text in existing code. That code is just word tokens. It has no design info and no knowledge of what the code would produce visually, like CSS.
    Other GPTs that work on image models can produce a UI based on your design spec, but it's only a picture of the UI (created by predicting pixels). Those systems can't produce the code that would render such a UI.
- purple-leafy 3 days ago
  Very dismissive, and wrong objectively. You might want to try Claude, ask it to design a site/redesign part of a site or a component. Its really good. I designed this entire UI with Claude
  https://github.com/con-dog/context-aware-pattern-blocker
  [-]
  - dtagames 3 days ago
    It's great that it was able to assemble boilerplate components for an app like that, but that won't work for more complicated apps or ones that have to fit into an existing system.
    [-]
    - purple-leafy 3 days ago
      I have a feeling with tailwind and a component library like shadcn or an equivalent, it’s very do-able for an LLM
      [-]
      - thejazzman 3 days ago
        Because it's copy and pasting Chad?
        That's not the same as seeing a novel design and implementing it.
        So much of this AI buzz is people just taking what they get and pretending it's exactly what they intended/envisoned, which they're just labeling whatever comes out
        Try asking for an SVG of a cow jumping over a moon. Then tell me, honestly, it's anything like what you imagined in your head
    - bdangubic 2 days ago
      used claude to fully re-design legacy system, 890 pages in total… you should spend more time working with various tools before dismissing like this.
      it is not just boilerplate components, it can do ridiculously complex UI logic (e.g. 27 tab page (don’t ask) with crazy validation dependencies) and ridiculously complex UI/UX
  - meiraleal 17 hours ago
    Your generated design is far from good from an UI/UX perspective, which, as GP said, LLMs lack and can only achieve good results if you, the user of the LLM, know what you are doing (in this case, as a designer/UI/UX engineer).
clayhacks 2 days ago
V0.dev from vercel is pretty powerful for creating from scratch. Haven’t used it for improving an existing design
bloomingkales 2 days ago
Commit to a design system and build all your features to the tee to the system. That’s literally what it’s for as it takes design decisions out of the hands of the developer.
Material UI is kind of old looking now, but widely used.
[-]
- meiraleal 17 hours ago
  That's the answer and even then, after committing to it, it will take time to master. Then speed comes.
meiraleal 17 hours ago
This last step you gonna have to take yourself. The aesthetics eyes, you need to develop by yourself, no LLM going to help you.
cootsnuck 3 days ago
As others have said use Tailwind. But using an LLM pretty much guarantees that "endless tweaking".
They're great for getting something up as a starting point. But at least right now, you really are going to want to do the hand tweaking and polishing yourself.
The people who are going to get the most benefits from this are those that adapt to this workflow -- not trying to force the LLMs to do things they can't but rather working in conjunction with their limitations and augmenting them with your own skills and letting them augment you with their capabilities. It's a give and take. You still need to be in the loop to have the best outcomes.
replwoacause 3 days ago
I’m so tired of the schadcn radix aesthetic, every website looks like the same with black buttons and controls.
jane7ai 4 days ago
[dead]