As the title suggests, I’d like to ask you guys how you go about building beautiful UI/UX pages through AI (app and web pages count), I’ve noticed that the pages made by AI don’t seem to be as good as they could be!
Can you post two pictures of what you guys did? Only through AI, not using a design tool like Figma, it seems like the best option for UI/UX at the moment is still to use a design tool…
This depends on use cases
I think using the right AI tool is pretty key here. I just started a new project last week and tried out 4 different tools: v0, bolt.new, Cursor’s agent, and good ol’ chatgpt (free plan, which I think is currently using 4o-mini). I gave them all the same prompt for a fairly simple web app, and v0 and bolt produced the best sites by far. I think it’s because those tools are tailored specifically for rapid prototyping of web and full stack apps, so their training specializes in frontend code more than the other two I tried.
Overall v0 created a more complete and functional site and did a better job of responding to my prompts, so that was the one I went with. I took the code it produced and loaded it up in Cursor, and Cursor has done a great job adding to it since then. But without that codebase to start from, Cursor didn’t really know how to make a nice polished site.
Any particular v0 tut that you can point me at? I have yet to try it - but I am doing a ‘one_shot_weekend’ to attempt as many complete one_shots as I can - and need a great one_shottable_UI/UX - and frankly frontend is my weakest of all my weak links
Interesting you say that. I wrote a (clickbaity) Substack article outlining exactly that.
I use either Lovable or Bolt to generate a codebase as well (generally Lovable despite the TERRIBLY frustrating price), initiate the required dependencies for my project and if they have better integration than Context7, toss in an implementation, IE a Supabase Secret API Key + proper API handling or design for beautifying JSON output.
I hadn’t heard of anyone else using that methodology until now and I am quite literally making an MCP that attempts to replicate Lovable’s stack and workflow for initiating scaffolds.
@suttonb, if you want to save on some money, try bolt.diy! Self hosted bring your own API key Bolt instance. AFAIK they’re adding the new design update to it slowly but surely.
v0 worked well taking 21st.dev assets and repolishing them for me back when they had an integration. Worth another look to see if they still do.
Your guess is as good as mine for tutorials, unfortunately. I didn’t look up any tutorials, I just gave it this prompt:
A web application to search and query a database of university research projects. Projects have the following information associated with them:
- Name
- Sponsoring Agency
- Funding Mechanism
- Award Number
- Recipient Organization
- Department
- Project director
- email address
- department
- Start and End dates
- <more data fields…>
Each project will have information for each year of funding regarding the amount of funds received each year from a variety of funding sources
And let it run with it. I intentionally didn’t give it any guidance in terms of frameworks/libraries, design elements, etc because I wanted to see what it came up with. And what it gave me was honestly waaay better than anything I would have come up with on my own.
Good to know, thank you! I may have to try that one out. So far I’ve just been taking advantages of free tiers on everything but I know that won’t last forever.
can you share a screenshot?
Yes Currently I’m using bolt for ui cursor to write the code behind and they ui is really well optimized
I’ve been pretty happy with tailwind + cursor + simple iterations.
But you can also post screenshots from dribble or other inspo and ask to emulate look and feel. A browser agent with screenshotting makes this even faster.
Tbh much happier with ai driven design than when I’ve worked with human designers or created mocks in Figma myself. It’s been easier to prototype unusual interactions in code or play around with animations; faster shipping and no hurt feelings.
Yes, that’s a good way to go. Currently AI goes to build static pages still. The better dynamic ones, such as devin.ai this kind of UI/UX,AI does a poor job of it!
I’m sure that you’ll almost never have pushbacks from AI whatever idea you have. So in this case, your experience may be better. But as a person who is also a designer, I would say you need somebody who will refuse your ideas and help you to make decisions based on research and understanding of ergonomics and cognitive psychology. Because it’s also not just about how it looks, but also about years of experience in building interfaces. Lots of user testing to see what’s easy for people and what’s harder, what’s obvious and what’s not. I am 100% sure that if you have a good taste, for hobby projects, AI can deliver pretty good results. But if you’re building something for thousands of users, I would still say it’s better to have a designer in your team.
I absolutely agree with you Yurkomik. Designing with Figma is so beautiful tbh. With Figma AI up next, designing will become much more powerful inside Figma.
Vue 3 + Tailwind CSS/PostCSS using Cursor, it’s component based UI design so every element is separate which means that you never make sweeping changes, it also means each element is independent and dynamic allowing you to do things with them without worrying about affecting other aspects of your UI/UX.
Vue 3 also has the Vuetify framework you can use as well based on Google’s Material Design it has professional components already made that can be adapted to your projects too.
I code primarily in Typescript, CSS, HTML and Rust though as I’m focusing more on future development and safety using typed languages so your mileage may vary depending on your project needs.
I pay for polymet:
Not sure if that makes me a sucker or not. It seems… pretty good for basic mocking and to get a simple layout. The styling/components always looks the same though.
I find this workflow pretty efficient as well for rapid prototyping and initial setup, lovable → github → clone repository in Cursor and iterate.
For sure, user testing is essential! Would never advocate for bigger companies like Google skipping designers, ofc
Early stage startups can be the wild west though. Sometimes you just need to ship something quickly and see users trying it in the wild. But you also don’t want it to look absolutely terrible. AI fills in this gap well
I have a dedicated keybind for quick screenshots. A quick copy/paste into Composer, never fails. Only takes a couple-o-seconds.
Mostly it’s a Figma layout, or existing layout, or https://mobbin.com or https://21st.dev or dribble.
It helps to have a ‘brainstorm’ session with Composer. Sometimes I’ll ask it to describe what it sees - it is very accurate, even with small text.
Also, the MCP tool for Context7, that helps direct Cursor to use updated context for whatever framework I am using (currently NuxtUI).
And a dedicated Cursor Rule (detailed), telling which components I am currently using in my project. Along with preferred syntax, colors, etc.
