How to Design Your App UI in 6 Minutes (With AI)

Source: https://www.youtube.com/watch?v=19bVwESg7TU Channel: Steven Cravotta (steven.builds)

If you’ve clicked on this video, chances are you want to build and scale your mobile app, but [music] you’re stuck on the design phase. And look, this can be a very timeextintextensive phase, and you might not have the skills to make a fully polished UI design. Or maybe you just don’t want to waste countless hours [music] moving little pixels around on the screen. But what if I told you I can now design full app screens in under 15 minutes [music] using the power of AI? So, in this video, I’m going to show you my exact AI workflow that allows me to design [music] app screens 10 times faster by using a very simple design workflow. First, obviously, we need to understand what [music] screens we want to create. Then, we’re going to set parameters for the design. We pull in reference images. We [music] click generate and then based off what the AI gives us, we can then export those into Figma to make the final [music] tweaks and finalize our designs. Very simple flow. This will speed up your process. Let’s [music] jump into it. Okay, ladies and gentlemen, the tool we are going to be using today is UX Pilot. An amazing tool. The link is going to be in the description if you want to give it a try. Let’s jump into things here. UX Pilot is a tool that will allow you to go from prompt to fully developed UI screen in less than 3 minutes. So, let’s do it. Okay, ladies and gentlemen, we need another onboarding screen in our app. And we have these three screens right here, but we need to create another one. And I don’t want to create it from scratch. So, we are going to use UX Pilot to actually build this screen with AI. It’s going to be super quick. So all we have to do is start a new design file and we’ll call this onboarding screen number four. And then we need to give it page context, right? And I’m a lazy guy, so I’m not going to build this context myself. So what we’re actually going to do is take a screenshot of these existing onboarding screens. And again, you can take one of your competitor screenshots or take some screenshots you already have in your app to keep the theme similar across your app. And then what we are going to do is we are going to go into chatbt. We’re going to copy in these screenshots and then we’re going to say give us context. give us design context on these app screens. We’re going to pull in exactly what UX Pilot says here. So, boom. This is our simple little prompt here. We pulled our screenshot in and now we are going to get some design context. We’re going to go ahead and copy and paste this in. Okay. So, boom. We have given UX Pilot the instructions. And now we need to make sure that screen type is set to mobile app. We’re going to build a hi-fi design. We’re going to give it some context here of what exactly we want. And for our next screen, we are actually going to build a social proof screen. So in our onboarding here, we have, you know, explaining the features of what Postit does for our creators. And now I want to build a social proof screen because we have 40,000 creators on our app. I want the creators first downloading Postit to know that immediately. So we are going to build a social proof screen. So we’re going to say build an onboarding screen that portrays social proof for our app. Over 40,000 creators use our app to make money by creating content. On the bottom the screen have a next button. And what we can do is also upload a reference image. So what we’re going to do is take an individual screenshot of each one of these three screens and we are going to upload those as reference images. Screen one. Okay, we can only get one image in there. No problem. Let’s click generate. Boom. Ladies and gentlemen, we have the onboarding screen in here. Now, there are some slight changes we’re going to make, right? Because this isn’t quite hitting the mark, but it’s gotten us a lot of the way there. That’s actually really cool. So, it actually copied the screen almost exactly. So, what we’re going to do is pull in a different reference image and then we’re going to compare those. So, I’m going to pull in a different reference image from another app that does social proof really well and we’re going to pull that in and try to get it done that way. Okay. So, we’re going to go to one of my favorite websites, screendesign.com. Boom. So, here’s an example of some social proof that we could pull in. This is from an app called N. Here’s another social proof screen right here. 1,00 buddies have checked in today. Beautiful social proof. I actually also have this amazing social proof screen from my last app. So, you know what? We’re going to copy and paste this one in as a reference. And we’re going to see what UX Pilot comes up with here. Wow, this is killer. So, we can pull in multiple different reference screens from all of our different competitors, and we can build these into a UI all at once with these screens. This one’s a little bit messy. Ooh, there we go. This one is nice. Wow. Okay, this one is killer. You can see they missed a couple things here, like the app icon is a little bit off. They have social proof of here, which is kind of weird, but these are all small things that we can actually take into Figma using the UX Pilot Figma plugin. So, that’s exactly what we’re going to do. We’re going to click save for Figma, and then we are going to actually retrieve this in Figma, and we will make the final adjustments here to our screen. Okay. Boom. So, we have it pulled up here. We’re going to click run. We’re going to be able to pull in our favorites. And we can actually use UX Pilot right here in Figma. So, let’s go ahead and pull this guy in here. Boom. And you can see even the text is in line. This is awesome. We have social proof right here. There’s a little quote here from a creator. Amazing. So, look, I’m going to rearrange this a little bit. There’s a couple things on here that we want to get rid of. And look, each of the elements is now dragged into Figma. So, we can get in here and we can start to adjust this screen as we see fit. This is awesome. So, let me pull this in here. Going to get rid of this. And the beautiful thing is it messed up on this next button a little bit, but that’s okay. We just get rid of it. And we can also get rid of these. We’ll throw in this next button over here. Boom. We can even shorten this screen up a little bit. Boom. Look at that. So, we can even copy over this to keep it nice and similar. We can move this to the front, ladies and gentlemen. There we go. I’m not the best designer in the world. Maybe this needs a little bit more time loving commitment. But look, we just took an idea, we brought in references from that idea from other apps in the space. We got three different designs that we could choose from. We started off a little bit slow and then we got to something amazing and now we were able to import it into Figma and this can be used in our app. Now we can take it and put it into a vibe coding tool, work with our developers directly from Figma, and we can implement this screen into the app. This is so much faster than any of your other design workflows, and we use UX Pilot to do it. So, this will speed up your design process like crazy. If you want to check out UX Pilot, the link is going to be in the description. You can check that out and give it a shot. This is really cool. You should be able to do some really cool things with it. So, hope you enjoyed the video. See you in the next one and peace.