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

https://news.ycombinator.com/item?id=42439456

by dsrtslnd23 • 2 years ago

36 24 2 years ago

news.ycombinator.com

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!

dtagames3• 2 years 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• 2 years 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.

dtagames3• 2 years 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-leafy4• 2 years 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

dtagames3• 2 years 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.

meiraleal3• 2 years 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).

sky2224• 2 years ago

How would claude handle generating a site that's as complex and detailed as a promotional page for an apple product (transitions and all)?

purple-leafy4• 2 years 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• 2 years 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

cootsnuck2• 2 years ago

I mean it has just over 200 users so idk lol

purple-leafy4• 2 years 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.

asar• 2 years 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.

ramesh31• 2 years 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.

cootsnuck2• 2 years 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• 2 years ago

I’m so tired of the schadcn radix aesthetic, every website looks like the same with black buttons and controls.

bloomingkales• 2 years 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.

meiraleal3• 2 years ago

That's the answer and even then, after committing to it, it will take time to master. Then speed comes.

clayhacks• 2 years ago

V0.dev from vercel is pretty powerful for creating from scratch. Haven’t used it for improving an existing design

meiraleal3• 2 years 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.

ltravis495• 2 years ago

Yes using tailwind helps. In my experience you can use tools like vercel v0 to prototype design styles quickly and see which one you like. This step can be done manually if you have design experience and know what you want. Then you should write it down in a design document with specs like color scheme, font, overall style (minimalistic, futuristic, etc). This ensures that the LLM will keep this design style as context when creating components. It doesn't always work but it's better than relying on its internal context window.

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

Related Stories