Watch AI Turn a Single Text Prompt into Stunning UI Designs in SECONDS! 🤯 | Uizard Autodesigner

I cannot believe that I just wrote a text prompt and watched it turn into an entire UI design and flow right before my eyes a website for podcasters to show their latest episodes it really is like magic So Yesterday wizard just released their Alpha AI feature which is their text to AI Auto designer I now have access and I am both exhilarated and terrified I cannot wait to share this with you all okay so here we are inside of the auto designer and it's a really simple interface and you can choose between a mobile tablet or web and then you just type in your prompt the same way you would in chat GPT for example and then you can add some descriptive keywords you can describe the style so you know if you're a designer you can say that you know you want everything to be rounded Corners with soft Shadows lots of white space things like that and then you can add some of these tags here so we can just try an example that they have as well so let's do that and see what it generates so I'm going to hit try example and then it says food delivery app for developers who hate to leave the house that sounds pretty accurate to me and then this the style that it described is cyber and tacky so let's click generate my project and see what happens here are our designs and so if you've never been inside of wizard before it's very similar to other UI design apps that you might be familiar with like figma it's got some controls over here for your design parameters and shapes and basic elements and then all of these different components that were also generated based on this concept and so there are three screens here the home the search and the order status and as you can see they're not that bad for being generated by AI so we zoom in a little bit here you'll see that we've got the images some tags and a shopping cart icons Price Place holders you know the text everything we've got a nice menu you down here and then there's a search area so you can search by tags or price range and there's even the order status flow so you can keep up with when your order will arrive to you it's such a great starting point better than looking at the blank canvas when you're starting so I can definitely see a lot of room for improvement here but really I think that is the value of AI at this current stage of its abilities it really is to help you to inspire you to assist you and I think it's only going to make our jobs a bit easier [Music] so the best part about this is that it's all editable so I can click into here I can change this text I can call this Pizza Castle I can change these images and over here I can come over to this area and unsplash is built right in so you can select another image let's type in pizza and then let's get that one ooh classy [Music] so now we can go ahead and add some existing components to these screens so I'm just going to extend this down I'm going to take my whole menu component here I'm going to move this down and let's say that I just want to look over here at some of these other options maybe I'll add this all of these pre-designed things are really really well done it gets even cooler foreign let's say that you wanted to add an additional screen to this because obviously this isn't like a complete flow and let's say that you wanted to have a checkout flow for example well there are a couple of different ways that you can add these screens right now we're going to jump over to dribble for example maybe mobin which is another great place to find inspiration for these things and I'm going to search for a food delivery app like ubereats I love moben because it gives you real design patterns and real apps and flows that you can look at so it's it's better than dribble in that regard okay so back in Wizard we're going to click on scan screenshot and we're going to upload that and what it did is it just brought that image in here and it turned all of the elements into editable elements this is absolute magic to me I can take this and I can change this to match the dark background so now you're combining inspiration from the web and other apps and other flows and then you're adding it to what the AI generated and you're just expanding now another thing that's cool is that right out of the box box when Auto designer generates these screens it also generates the flows for them and connects them in a prototype so you can click preview right after Auto designer does its thing and you can start clicking around and using it foreign mode I'm going to turn wireframes on and it's going to convert all of these screens to wireframes for me so now I can use a more low Fidelity approach to adjusting these I can move some things around here sketch things out more roughly so let's turn wireframe mode off [Music] now there are a couple of different ways that you can change these themes one is from scratch and one of the most fun ones is from an image everything's kind of this red orange right now well we can come back over to these screens again click on Magic and then we can go to smart themes and I'm just going to upload an image that I like the colors of it could be an app design that you're inspired by again that you've seen on dribble or somewhere else and like absolute magic it has applied the colors and styles from that screenshot to this generated design I honestly can't believe how easy this is and how much flexibility you have it's going to take a great design eye and understanding color theory and hierarchy and typography and all of that really important stuff to get these to look extra professional but it's just incredible that you can start from so much instead of starting from nothing and you can also do this from a URL and then in moments we're paying wild there's more now we can change some of the typography and we can just tweak this from Scruff and make the primary color like this and then I can go ahead and round make the corner sharp and not round I can change it to a serif font I can add a border to things and look at that a totally different style let's try and regenerate something now so down here you'll see a little tool tip that says you can generate another prompt or you can regenerate so let's regenerate this look at that what I've noticed is that it starts to get a little better every time you use it sometimes it generates more screens for you and I think this is the best one we've seen so far and it's just an incredible amount of fun to play with [Music] really helpful is the text assistant so if we click on this right here and then we click on the little button that pops up with a little cycle icon click Text assistant it's going to regenerate new copy and content for us and then we have the option of regenerating it again or replacing it and this came up with trendy Italian eateries so let's replace that so let's see what else it can create foreign I am going to start a new project and then I'm going to click on that generate with auto designer button and let's do something for the web this time how about a website for podcasters to show their latest episodes using the material design system so what is super interesting is that right now you can even reference existing Design Systems and it will create those components in those Styles and from what I heard you're going to be able to connect up your own Design Systems very soon so this is going to be a complete game changer for a professional UI designers okay so here we have a web layout and so you can start listening you can log in create a profile see your dashboard with all of your selections this is the you know UI SAS app for a podcaster that's creating episodes and all of that stuff so you can add a new podcast it shows you your storage left it's really thought through a lot of specifics that really impress me it sort of just reads my mind based on that very simple plain English text prompt and speaking of plain English English is not the only way that you can generate I'm going to create another one create a meditation site in Spanish so here's what they're calling mindful mentee I love how it names it for you as well and it generated the wireframes for this one so let's go over to that magic tab let's go to wireframe mode and let's turn off wireframe mode so we can actually see the designs so we've got a tablet app here yeah it does other languages it's really really incredible so a couple of things to note it's best to be really as descriptive as possible when you're generating your prompts just like with chat GPT you want to feed it more information maybe tell it the color palette the style the font whether you want sans-serif typefaces or serif typefaces all of that kind of stuff the more detail the better also keep in mind that it might not work perfectly the first time and like I mentioned I notice it gets better every time so try regenerating the screens if you don't like them you'll also need a Pro Plan and we are partners with Wizards so if you're a student of our course you get a huge discount to wizards Pro Plan as part of your student perks so I'm going to show you one more really cool thing and this one's been around on Wizard for a little while but if you haven't seen it yet it's very handy foreign you can draw out a hand sketch on a piece of paper and then you can bring it into you Wizard and have magic tools scan it so we're going to scan wireframe to sketch and I'm going to select this one right here click on import and it's going to process that screenshot and just like that it's created an approximation of that wireframe and now you can go in and use these other AI tools foreign

Channel: DesignerUp

Views: 127,175

Keywords: UI/UX design, UI design, UI design tips, UI design tutorial, UX/UI, Product Design, UX Designer, Product Designer, Designerup, ai design, ai design tutorial, uizard, uizard tutorial, uizard review, uizard ai, uizard tutorial for beginners, chatgpt, text prompt to design, ai for designers, ai for ui/ux design, ai for ui, ai for ui design, Autodesigner, UIzard Autodesigner, Autodesigner invite, Autodesigner tutorial

Id: 4iIOvROrMtI

Length: 10min 46sec (646 seconds)

Published: Mon Apr 03 2023