Vibe coding has modified how I construct issues. I can describe an app, web site, or program in plain textual content and watch an AI assemble the undertaking little by little handy me a working prototype very quickly. There are specific initiatives I will not vibe code, however for nearly every little thing else, this can be a nice approach to velocity up improvement.
Nonetheless, rushing up improvement and delivering a completed product are two various things. Positive, most AI assistants will have the ability to spin up code for no matter app or program you need, however not all of them could make it look good. Not each AI mannequin deserves to the touch your UI, and after burning sufficient hours fixing ugly, soulless interfaces, I solely belief a number of with UI design.
Associated
Google’s new AI Studio is a game-changer for vibe coding
In three months, I’ve vibe-coded a number of platforms, however all the time bumped into issues with one key function. Google’s new AI Studio simply solved it.
The issue with vibe-coded UI
Fundamental screens, damaged UX, and inconsistent logic
Most vibe-coded apps appear to be they have been constructed by an underpaid developer working nicely past their workplace hours. Identical fonts, icons, a blue to purple gradient background, centered playing cards with manner an excessive amount of padding—these are all tell-tale indicators of a vibe-coded UI and are constant throughout initiatives. The AI hasn’t achieved something incorrect per se, and the UI normally seems to be completely practical. It simply defaulted to each in style sample baked into its coaching information.
Vibe coding instruments additionally focus extra on whether or not one thing works than on whether or not it seems to be proper. A button might be practical whereas additionally feeling prefer it floats barely above the remainder of the web page. Spacing might be technically legitimate whereas nonetheless wanting haywire to the human eye. None of it’s technically incorrect, and it will not fail any assessments, however your customers will really feel it the second they work together together with your undertaking.
You see, designing an excellent UI is not simply code technology. It is a mixture of aesthetic selections about hierarchy, rhythm, distinction, and really feel. While you ask an AI to construct a dashboard, you are probably not asking it to jot down divs and flex containers. You are asking it to have an innate design sense, and most AI fashions aren’t there but.
Some fashions offers you one thing that appears effective in screenshots, however will break the second it is opened on one other display measurement. Higher fashions will make selections like selecting applicable layering for darkish mode, sustaining constant nook radius throughout elements, and choosing colour relationships that make sense to the human mind. This distinction will not present up on a benchmark take a look at, but it surely turns into apparent whenever you take a look at the completed product.
Only some fashions truly get UI proper
Those that perceive format, spacing, and value
For a easy demonstration of how totally different fashions deal with UIs, I gave Claude Sonnet 4.6, Gemini, and ChatGPT an equivalent immediate as follows:
Construct a SaaS analytics dashboard in React with a darkish mode UI. Embrace a sidebar nav, a KPI card row, a line chart, and a latest exercise feed. Use a contemporary design system with constant spacing, typography, and colour relationships.
Not solely was Claude’s code freed from any bugs and the UI design essentially the most detailed, but it surely additionally included animations and small UX enhancements most designers would not take into account till they reached the ultimate stage of improvement. Gemini and ChatGPT each supplied slightly generic-looking dashboards, however Gemini did bear in mind so as to add some UX polish to make it really feel like a completed product.
Claude is the place I’ve landed for many of my UI work. In comparison with Gemini and ChatGPT, it takes a extra formidable method to layouts, makes higher type selections throughout the board, and is extra considerate about layering and distinction. The result’s an interface that truly feels designed slightly than an amalgamation of random designs put collectively.
Claude fashions, each Sonnet 4.6 and Opus 4.7, ask fewer clarifying questions and do not resort to secure defaults as a lot. They do not simply dump a generic format on you both. These fashions truly use the context you present, choose up naming conventions and architectural patterns in your code, and attempt to match the design language you have already established. It is also nice at sticking to a design system or type information in the event you present one.
Developer
Anthropic PBC
Worth mannequin
Free, subscription obtainable
Google’s new agentic AI may have the ability to do your chores for you, but it surely’s not nearly as good at making UIs until you present it ready. It likes to give you three-column layouts and chat-style elements that look nice, and it is genuinely exhausting to beat whenever you’ve acquired sufficient context for the sort of UI you need. When you’ve acquired a number of screenshots, reference photographs, or current designs you wish to enhance, Gemini can do an incredible job.
Nonetheless, in the event you’re trying to construct whole UIs from scratch with out robust visible reference materials, Gemini might be fairly inconsistent. It typically will get tripped up by edge instances, and there is a large hole in how assured it sounds and the way nicely the output will maintain up in common use.
OS
Android
Developer
Worth mannequin
Subscription
Final however not least, ChatGPT will get the job achieved, however do not count on ground-breaking designs from it. When you’re working in a instrument like Cursor and want quick, instantly runnable element output, ChatGPT will keep disciplined inside the spec you give it. The tradeoff is that it finally ends up producing interfaces which can be clear and practical, however not often impressed. And in case your design or undertaking will get a bit too advanced, it tends to lose observe of context halfway.
OS
Android, iOS, Net
Developer
OpenAI
Worth mannequin
Free with elective subscription
That is the workflow that lastly clicked
The place AI helps—and the place I take over
Credit score: Yadullah Abidi / MakeUseOf
The fashions matter, however how you utilize them also can make a distinction. When you’re merely telling an AI mannequin to design a dashboard, you are giving it an instruction to observe because it sees match, not a design temporary. You could know your typography, colour palette, and the final feeling you need in your UI earlier than you even begin prompting.
It is best to first give you a basic concept of what you need your UI to appear to be and create a tough design temporary as a JSON or Markdown file. Then, whenever you’re working in your undertaking, you possibly can hand these information off to the mannequin you are working with and ask it to work inside the outlined bounds. It seems like further overhead, however it may be the distinction between beginning recent and having the AI truly bear in mind what your interface is meant to appear to be.
So which mannequin do you have to belief?
Selecting the correct instrument for UI that truly works
If I needed to choose one on the idea of pure UI design high quality, it is Claude. You are good to go along with both Sonnet 4.6 or Opus 4.7. Each fashions produce nice outcomes with slight variations, so it is best in the event you experiment with each and choose what works finest for you. Claude additionally has one of the best mixture of aesthetic judgment, instruction-following, and contextual reminiscence of the three fashions I exploit. Other than that, Gemini works finest in the event you’ve acquired loads of reference materials readily available, and ChatGPT is superb for quick iteration workflows.
Associated
ChatGPT refused to assist me vibe code my undertaking and it led me someplace higher
I wished shortcuts however acquired a actuality examine as a substitute.
What you could perceive is that vibe coding is just nearly as good because the design selections you deliver to the desk earlier than the AI begins producing code. You’ll be able to’t vibe your approach to an incredible UI by letting the mannequin guess what you need. You could have a transparent visible path, and you could talk it clearly to the mannequin you are working with. AI can do lots for you, however it may well’t assume in your house.
