Now building UIs is something that I'm not very good at.
It's not something that I have to do a lot.
So maybe I'm not an authority to talk on this, but at the same time, I realized that there
are a lot of people like me who do not have the needed UI expertise at their disposal
and may still have to build UIs for their small tools or utilities.
So I wanted to see how GenAI can be helpful in such cases.
So what I tried is to see if I can use GenAI to one, either modify an existing UI and
two, to maybe build a completely new UI from the scratch.
To modify an existing UI, I took the screenshot of this utility that sits on my website and
I kind of took it to this tool called lovable.dev.
I pasted it to lovable.dev and I said, can you make a UI like that provided in the screenshot?
Use only Tailwind CSS classes for styling because that's what I was using.
And once the UI is created, please make sure of the following changes.
Ensure font weight, size, spacing, hierarchy is to be followed in line with the UI design
principles.
Ensure that the green, red and blue color background and the text display is visible
adequately with adequate contrast and keep the design clean.
With these instructions, it went ahead and actually created the UI from the screenshot.
I then asked it for some more changes that it had missed.
But more interestingly, I wanted to see what if I could simply add the icons to whatever
lovable came back with and how that would look like.
So all I said is, can you add icons before each of the Core Web Vitals measurement?
Can you add an icon before Largest Contentful Paint?
So it added different icons for each of the elements.
This would quickly allow me to see how this change looks like, whether I want it or not
want.
So with this, I was at least able to do a quick prototyping or quick check on top of
an existing UI that I had with my own tool.
Another thing that I wanted to try completely different, what if I wanted to build a new
UI from scratch?
So I use v0.dev in this case, I give it an instruction like I want to build a website
analytics dashboard and I asked it like on the top right, I need to show time span and
the date time selector range and underneath it should show chart with various tabs for
bounce rate, visit duration, so on and so forth.
And underneath it needs to like have two sections with like 50% width taken by each
to show top sources and top URLs.
So just with this instruction set that we were looking at, it came back with this sort
of UI, which I think is kind of pretty sleek if you're just trying to build a regular tool.
So that's basically what I kind of tried.
Here's what I deciphered overall.
If you're just trying to build something that is not ugly, that is generic for a small set
like small tool with a limited number of screens, maybe a screen or two, these kind of tools
like v0.dev, bolt.new, lovable.dev, they fit the workflow very well.
If you're trying to do small prototype change tests, these are kind of very helpful.
But what if I wanted to kind of make changes on a super large product with maybe 50 screens?
I don't know how that would happen with this sort of tool.
Or what if I wanted a very original UI layout?
This obviously is great, but it's obviously also very generic.
How do I get very original, unique UI that stands out?
I think in those cases will still need to depend on human expertise.
But in places where we don't have that expertise at our disposal and we want to build something
very small, I think that's where these sort of tools are kind of would fit decently well.