Ask HN: Using LLMs for Better Design in Front End Development?
12 comments
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.
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
https://chromewebstore.google.com/detail/design-copilot/hgal...
Screenshot component -> design feedback, repeat loop , all without leaving your locally server page
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
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.
I mean it has just over 200 users so idk lol
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.
[deleted]
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.
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.
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.
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.
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.
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
https://github.com/con-dog/context-aware-pattern-blocker
How would claude handle generating a site that's as complex and detailed as a promotional page for an apple product (transitions and all)?
I tried it out.
Prompt: "generate a site that's as complex and detailed as a promotional page for an apple product (transitions and all)"
result: https://claude.site/artifacts/ea99312f-5d7c-4b43-a4b9-689478...
Prompt: "generate a site that's as complex and detailed as a promotional page for an apple product (transitions and all)"
result: https://claude.site/artifacts/ea99312f-5d7c-4b43-a4b9-689478...
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.
I have a feeling with tailwind and a component library like shadcn or an equivalent, it’s very do-able for an LLM
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
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
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
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
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).
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.
[deleted]
V0.dev from vercel is pretty powerful for creating from scratch. Haven’t used it for improving an existing design
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.
Material UI is kind of old looking now, but widely used.
That's the answer and even then, after committing to it, it will take time to master. Then speed comes.
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.
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.
I’m so tired of the schadcn radix aesthetic, every website looks like the same with black buttons and controls.
This last step you gonna have to take yourself. The aesthetics eyes, you need to develop by yourself, no LLM going to help you.
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!