How to use AI Art and ChatGPT to Create Insane App Designs

have you seen some of these wildly impressive app UI designs generated and built by AI if you have in this video I'm going to be showing you how you yourself can make these types of designs and apps using no code tools such as flutter flow as well as AI tools such as chat CBT and mid-journey it's super simple anyone can do it and you can have an app built in probably two hours this is definitely gonna happen in the future so why not be early on it and start with it now so in this video I'm going to show you the whole process from start to finish using AI to build an app let's go alright so here we are so first of all what we're gonna do is we're gonna head over to Mid Journey what mid journey is this LA image kind of creation framework that's built on stable diffusion where you can provide an input and then it will give you an output in terms of an image and then you can ask it to stylize it Etc so what you're going to do is you're going to come over to midjourney.com and you're going to press join the beta this is actually a Discord app where you have to be in a Discord space and able to in order to be able to use this app which is pretty neat can be a little bit confusing as see why because you can kind of get lost a little bit um but you're going to log into this this place on Discord if you don't have a Discord account then please create one and you're going to come over to this mid-journey space and then what we're going to do is we're going to go to one of the rooms so as you can see there are plenty of rooms right here but we can go to a newbie room for example and we can type in and begin with imagine and then prompt and prompto mean here's something you can input so you can just ask it something like hey create a UI design for an app like this for example and then you can give it some parameters in addition to that which will be going over in a little bit but for example prompt create a UI design for um for wedding invitation and we'll press enter and then we will begin to process this and as you can see this is what I mean that it can kind of get lost relatively quickly and then once it's done you'll get an output that looks something like this so pretty nice view I decided to begin with without really giving it any prompts this is not for a wedding planning app I'm thinking we're going to do something a little bit more fun so for example say that we wanted to do this but we wanted to change it up a little bit then we can go imagine again I will give it a new prompt for example we'll give it a UI design for a modern wedding invitation app then we can give it some parameters so for example we can do Dash Dash and we can do V4 which is essentially the new and I think the newer version of it then we'll take then there's also a stylized component where you can ask it to be varying degrees of creative so the way to use that is again do Dash Dash and then do stylized 600 for example and then it will give you a creativity level that's 600 I think it's out of a thousand I'm not really sure about that though but you can experiment around with it and then you can also pass it up beta which is also I believe a newer version of it or like a beta version where it's kind of looking a little bit better but for example say we wanted to have some more keywords we can do UI slash ux we can do Sleek we can do modern and we can do foam and say if you want to have some particular colors like maybe we want to have some blue in there maybe we'll have some pink in there maybe some teal to begin with let's have a look okay so here we have a couple of ones for example the one to the top left looks pretty nice I think we're gonna maybe go with that one so if you if you like one of them for example if I press U1 I'll get an upscaled version so a little bit higher definition that I can then use and then we're waiting for it to start again I'll spare you the waiting time perfect and then we have the upscaled version there so we can press open in browser and we'll just hang on to this design over here and as you can see AI isn't super good with text yet so for example the call to action buttons are gibberish we can then do is go to chat GPT chat GPT is a model built by open AI it's basically a language model and where you can ask it to do search and certain queries for example now then we're gonna do minute and a broad outline of ideas and then it will come up with some basic call to actions for example some basic features that you can have in it but pretty stuff that's pretty good for you know getting the general idea of the outline of the app that you want to build so we're going to leave this here to generate as you can see it's pretty quick but we're gonna then head over to Google again and we're gonna search for flutter flow what flutter flow is is essentially a non-code platform where you can create flutter apps if you know flutter that's the main coding language that I know but this is a no coding version or no coding tool for that where you can build flutter apps without having to write any of the code yourself and you can actually do some boiler templates in order to create a pretty nice nice looking app and then we're taking this little loading page so now we can see we have some of this content ideas some basic features and we have the call to action for the app again we can ask chat gbt for more stuff later but what we're going to do now is we're gonna press create new and we're going to call this wedding wedding app simple and easy and as we can see they have a couple of different templates they actually happen to have a wedding one that's pretty nice and we're gonna use this and then we're gonna change it a little bit later on so let's use the sample and we select that sample and then it will begin to create it then in order to have online storage on the app we're going to need to add Firebase to it so we can either watch the Youtube video which is quite simple or we can just read the documentation on how to connect it so let me do that relatively quickly I'm going to take the project ID for this particular wedding app and we're gonna head back over to flutter flow and we're going to press connect so that was quite a simple setup I just followed all the instructions and we're going to go to we're going to press Auto generate configuration files we're going to generate the files this is basically like what you need for authentication like the Google files Etc and I think it's like a bunch of Json files then we're going to head over to Next Step and we're going to deploy the fires through indexes this is basically in case you want to do filtering you need to have firestore indexes for example if you want to be able to filter on a price large to small for example you need to index the things because that's just how the Firebase database works and then after that's done we're going to go over to start start building and here we have this no code tool that's pretty neat where you can see a bunch of different things for this particular app so what we can then do is we can go ahead and edit this for example we can begin by removing all of these things so we're gonna remove all of it and we're gonna start from scratch and again you can you can build a lot of pages I'm just going to show you one because I guess this is One's Gonna Be the the main thing but so here we have the home page and we can then come over to this part where we can actually build stuff so what we're going to do is we're going to start with a container and we're gonna make it as wide as the screen and as large of the screen so this is not really going to be a scrolling part of the app it's just going to be it's just going to be the background so if we didn't come over to the background we can first of all we can change the The Fill color for example we can change it to this pink like that maybe that's a little bit hard so we're gonna make it a little bit lighter perfect still keep in mind that this kind of is our these two kind of our inspiration let's make it even a little bit lighter color okay perfect and then we can use all of these different things that we have here in order to create this app that we have so for example in this container we can then press a column and say that we want the column to go from top to the bottom and we're going to start off with an image at the top maybe and we're going to make it as wide and approximately that large and this is where we're going to have this little little Rose kind of thing we can go back here we can go imagine prompt that we can select at pink teal and red roses picking stylize 900 and then we're gonna generate another one that we can put at the back of this app here of this wedding planner app that I'll do it we just have the sample image but while this is generating in the background we can go back and we can edit some stuff so maybe at the next Point here you want some text see now the text is normal we wanted to be bold and we want to increase the size a little bit so it looks like a title hello world and we'll say welcome then we're gonna go back to this part and we're gonna select one of these for example we're gonna I think I like the top left one again so we're gonna go U1 in order to render that one in more detail seems like our design is done so we're going to come over here and we're going to press and save image s we're gonna download it and we're gonna upload this image as well like so I will go back to the build part and we'll go to the image now and from the path we can actually select the image type and we're going to take asset which we can pick from the ones we've uploaded so we're gonna pick that one and we need to make it a little bit bigger so that it looks a little bit more realistic perfect in retrospect I'll probably be making this video again but with flutter call because using flutter flows although it was quite easy and simple to use I struggled a little bit to explain at the same time so all this is is the speed code of me working on the app a little bit adding some gradients making it look a little bit better Etc according to the kind of theme that we're generating with the UI design previously but again you can probably do this better if you learn flutter flow a little bit then I'm not really doing the tool justice but that's why I sped up this footage of me building the app that probably took me 10 minutes to build this page from scratch and I just use some of the a little bit of the inspiration like we kind of had the inspiration that it's pink up here a little bit of a gradient until we get the blue those same colors again I'll add this relatively quick question look super nice as of now also personally I think that it's easier to use flutter the cold but that will take a little bit longer to set up and this is kind of like how you as a non-colder can use AI in order to build your app and we can then use this so for example we added a couple of functions like we have guest list management for example if you go back to this we can then press guest list for example we can then have these different ones and then you can add functions to the for example once this is edited for example on long press you can edit it and you can then do an API call or you can do so that you update the name of Firebase or list in Firebase for example but let's go back to the page that we built so the home page which this has who's common and this is kind of like the home page you get as an organizer of the wedding we have this nice art generated by AI that I use Candler in order to remove the background and for example if you press this you navigate to guest list which is the one I just showed you can all see post if you press this we navigate to Post details which is this for example a particular post or all the list of all the polls you can pick which I want and then catering we can go to the wedding part the details or chat for example we can go to the messages which is this so for example in Gold counter the footballer has got the got these chats in in this example that's a really quick example of how you can use AI in order to do some pretty cool stuff with first of all mid-journey which is probably the most useful then of course chat GPT and I'll use flutter flow in order to build this quick layout of course you can go into a lot more detail than what I've done here I probably spent a total of one hour doing this which is pretty insane like you can generate all these examples you can record and talk over it and you can also come up with an app that's like almost usable I just need to fix some of the bugs which is really the quick adjust and do with firestore and then I can run the app itself also personally if I were to do this I'll do this in flutter core because I think it's more customizable I think it's easier to use than this tool but if you haven't called it before at all you want to build an app this is a simple way to do it with that said I hope you enjoyed the video If you like this type of content please let me know down below so I can make more of it if you want to follow my other stuff like my starting startup upstairs where I build up from scratch to kind of release it to the market then feel free to subscribe and I'll see you in the next one peace [Music]

Channel: Herman Palmgren

Views: 3,725

Keywords: ai, openai, midjourney, dalle, ai ui, ai user interface, ai uxui, midjourney website, website ai, website design ai, web design ai, chat gpt, chatgpt, ai art, art ai, midjourney art, artificial intelligence, art, ui, ux, tutorial, mid journey, How to use AI Art and ChatGPT to Create a Insane Web Designs, APP design, app ui design, ai app, ai and flutter, ai flutter app, app design midjourney, ai app tutorial, chatgpt for apps, chat gpt coding, chatpt flutter, AI app desin

Id: 1XJIG7yJHgo

Length: 12min 55sec (775 seconds)

Published: Wed Jan 25 2023