How To Build a User Interface For Your Idea Without Design Skills

Stuck with an idea for an app or feature but dread the design maze? You're not alone!

Transforming your vision into a user-friendly interface often feels like hitting a brick wall, especially if you're more at home with ideas than Figma.

But what if there's a shortcut from brainstorm to browser, no design skills required? Let's dive into turning that 'what if' into 'watch this'!

You don’t need design skills, but if you’ve used any app on your phone or computer before, you’ll have a good intuition of what’s pretty and not annoying.

And you can do this for any idea in two steps!

Most big SaaS companies invest heavily in design teams, and I’ll show you how you can benefit from them too.

Firstly, go to Mobbin, browse around, and look for inspiration. Think about big competitor apps and browse through some of the screens.

If you’re looking for a specific flow, like “onboarding users,” type it in the search box and look at the results.

Take screenshots of one or two results you like; don’t overthink it. Or just keep them in mind.

Secondly, go to v0 by Vercel. Look at the examples on the page and play around with the search.

Some patterns I’ve observed with prompts:

“Feature” like “Product Name”

I entered “music player like Spotify” and got this result:

And then, when you click the “Code” button:

A “Feature” with “XYZ specifics”

Here is the result for “a music album profile screen with song names and artist details”:

This one in particular is barebones, and the placeholder images should tell you that you need to replace them with your own inside your application.

But hey, just like that, we have the code for two screens for a fictional Spotify clone app!

The important thing here is to be specific. It’s not that the AI is bad; it just does better if you know what you want.

Now if this gets you inspired to build out your first app, then head over here to set up a Next.js app with Tailwind CSS and shadcn/ui.

If you have an existing Next.js app, then just make sure you have Tailwind and shadcn installed. If you are using another UI kit, this generated code won’t work.

You’ll also have to know where to paste the component code. Or you can just click the Share button and send the generated links to your developer to integrate them.

Reply with your generated UIs and share what prompts worked best for you!