with the new capabilities of ChatGPT and the amazing updates for UX Pilot we just made a big leap in AI for UIUX creating a design system was one of the most tedious parts of the whole UI/UX process i never liked doing it and I'm happy to announce that now with the new AI capabilities I will never have to manually create a design system again, yup, and not only that you can now train your own AI model to generate UI screens based on your design system components that's right, you will have your own AI model that uses your Figma components. what a time to be alive! this is my most updated UI/UX process with AI. i'll show you everything you need to know let's dive in [Music] hi my name is Jad on this channel I bring you the best ways to leverage AI for building products this is all I do every day i experiment with AI tools to see what can help me improve my process and make it more efficient while maintaining high quality design and I got to say UX Pilot remains my favorite AI tool for UIUX and it keeps getting better so first we're going to start with an idea to flesh out the features we're going to use chat GPT to come up with UI requirements and we'll get into the design system and generating UI after that and then finally we'll create a functional prototype with an AI coding tool to round off our design package okay let's start step by step first let's quickly create a project brief statement to kick off the project i'll include all the prompt templates in the description of the video copy this prompt and fill out your project info if you have specific features throw them in there or if you're not sure about the features you can ideate with chat GPT like here I entered my project info and I added some features but I'm not sure if I'm missing any core functionality so I said other travel essentials and then I asked to convert it into a concise project brief statement chat GPT came back with a well structured statement and of course you can chat back and forth to make any adjustments and flesh out all the features so it gave me more ideas then I narrowed it down to only the ones that I want now I have a statement that reflects my vision now let's ask ChatGPT to create a sitemap for the product that covers all of our requirements copy this prompt that will tell Chart GPT to create a site map based on your idea i said based on the project brief create a site map in plain text showing all the primary pages their hierarchy and how they are interconnected you will get a detailed structure for your product and of course ask for any changes you want now to come up with the best possible solution for our product I usually generate multiple layout options for the homepage, i covered that in my recent video where I shared very helpful claude prompts for UI/UX but for this video we're going to use ChatGPT's new power to create the layout structure so let's ask ChatGPT to create a static image of our homepage layout that covers all the requirements make sure you are using the 4o model it will give you a very accurate UI concept for your homepage this is a great way to visualize your UI early on, ask for any changes that you want but one thing you should keep in mind while these images are aesthetically pleasing generated from Chat GPT they are not real designs so they do not provide real good usability from real world products and that's why for inspirations I recommend using Mobbin the sponsor of this video Mobbin can help you find real world design inspiration so that you don't have to go through a bunch of fake conceptual UI/UX designs that you find on other websites Mobbin is the world's most extensive app design library with over 500,000 screens for iOS Android and web platforms you'll find complete flows for specific features you can also see app history which is really useful to see how an app is improving the UI over time if you're a product designer product manager or a UX researcher you can find highly relevant references for your design problems you don't need to reinvent the wheel with each design you can find industry standards and best practices for your ideas while staying up to date with the latest trends Mobbin allows you to create a mood board for your solution and share it with your team which is the best way to kick off a project it's a really great resource to have check it out using the link in my description thank you Mobbin for sponsoring this video so you can grab your inspiration from Mobin and tell ChatGpt to modify it to match your requirements once you settle on a layout we need to convert it into requirement everything we've done so far is still in the ideation phase but now we need to get serious and move to UX Pilot for some professional work this prompt tells Chad GPT to give me a description of the homepage in plain text so that I can generate it with a UI generator making sure it covers all of my requirements it will also tell it to not worry about UI styling for now because we only need the building blocks for now now we have a detailed description that we can use to build the dashboard page do the same for the rest of the pages that are in your site map [Music] now we have all the ingredients for the content of our product but one thing is missing in order to have a structured design a design system let's ask UX Pilot to generate a design system based on our preferences then I'll show you the best part which is how to train a UI model on your design system component so go to UX Pilot in the web browser create a new design file give it a name this will be your design system project now I came up with a few options to create a design system with UX Pilot cuz it doesn't always work so make sure you follow my steps so you can either enter your visual requirements in plain text or generate a style with Chat GPT so let's go back to ChatGPT and simply tell it to create an image with UI components in a style that you want so here I got a nice UI image from Chad GPT and now I can ask it for a description so that I can prompt UX pilot with it so Chat GPT will give me a description of this style that I like and then I can paste that in UX pilot so I said give me a description of this style in plain text in order to replicate the styling for your design system now that you have your styling prompt enter it in the context box in UX Pilot and also make sure that you save this prompt in your project documentation cuz we're going to need it at a later stage. so with the context we have in UX Pilot now make sure you start with design system so that it knows you're creating a design system and not actual UI but UX Pilot will not always interpret it that way so click autoflow and UX Pilot should give you all the pages you need for your design system you should be getting pages for your design system but if it gives you pages for a UI design that means it's not working in that case you have to go back to chat GPT and create a description of all the pages that you need for your design system so ask ChatGpt to give you the needed pages and their content for your design system then copy each page description into the flow of UX pilot [Music] now we have our design system structure just click generate. ux pilot generated a complete design system for me and it looks amazing this alone would have taken me a month to put together it's crazy that we can do this now go through it and make any changes that you want by editing pages or specific elements you can click edit on any element or page and then type your prompt in the quick edit box like here I want to add the button sizes to the buttons page so I set that in the quick edit box so there we go it added the button sizes and it performed my request very accurately once you're happy with your design system save it to Figma click on the options button at the top and click save and then open a new Figma design file then open your UX pilot plugin and you'll find your design system in the saved tab just click on it to add it to your canvas and now you have a complete design system in Figma with proper layout and structure as if you designed it yourself. now let's train a UX pilot model on our design system go back to Figma and make sure you rename all the components so that you can import them properly select each component in the layers panel and name it accordingly now that we have the correct naming we can start training the AI model in the UX pilot plug-in click import components then create new collection and give it a name and this will be your model name that you will use later to generate UI and then click import here you need to import single components and not sets with variables so you can select multiple components and import them at once but they need to be separate elements and not sets this is still a new feature i'm sure it will improve in the future like here I'm selecting four button types and then I can import them and you will see that it imported properly then we have input fields cards [Music] colors now you have a model trained on your design system here I trained it on 17 components and you can go up to 100 now that we have our AI model ready let's generate the screens go back to UXpilot in the web create a new design file for your UI project select high fidelity and then select the model that you trained before under the model dropdown you should see the name that you saved your design system as and now all you need to do is enter your project brief in the context field then add your styling prompt that you saved earlier this is the styling prompt that generated our styling for the design system so we want to enter it here to make sure everything is consistent then create a flow by adding the screens and here you will use the requirements that you generated with chat GPT in the layout phase copy the homepage description and paste it in the first screen make sure you include the page name at the beginning and then do the same for the rest of the [Music] pages here I added my three main pages now UX pilot will adhere very well to your requirements and it makes sure that your design is consistent and follows your design system there we go now we have consistent UI screens that cover all of our requirements go through it and make sure all your requirements are generated properly cuz sometimes it might miss some elements from the requirements and now go through the whole flow of the screens to make sure that all the scenarios make sense from a user's perspective try to complete the user goals and if anything is missing modify it in this phase with UX Pilot [Music] [Music] now that we have a complete UI design let's create a functional prototype go to your preferred AI coding tool i'm using Lovable here because I find it the best at following instructions so to start enter your project brief then give it your homepage code from your expilot directly just click on the source code button at the top and then you will see the code in the right side panel just hit copy code at the top now go back to lovable and say create the homepage using the following code and paste the code then submit do the same for the rest of the pages and keep testing your prototype and make adjustments to make sure that the navigation is working and all of the user flows are covered and now we have a functional prototype that is based on the requirements and the design system that we have that means whenever you need to add new features or change the UI you can use your design system model in UX pilot to generate new screens or new elements or features and if you're working with a developer you can create a design package that has a functional prototype and a design system to use for building the product you can also include documentation and user journeys you can generate them with ChatGPT since it now has all the context of your project and make sure you include all of the prompts that you used in your documentation as well and here's the last tip for you you can now generate PDF documents with ChatGPT just ask it to create a PDF document to hand off all of your material and it will give you a downloadable link that has a PDF in it this is very handy for working with a team or for documenting your project let me know if you have any questions i'll answer everything down in the comments and if you want longer videos AI courses or any assistance with your projects check out my community and how it can benefit you i post longer videos in there where I dive deeper into AI topics and workflows i also have three courses and a prompt library to get you going on the right path with AI link in the description and for the giveaway from my previous videos I was supposed to pick two comments to win one full year of free access to the community but I couldn't pick two comments i picked three i hope my team understands that but if you're one of the winners you should see a reply from me on your comment and I will also tag you in the description of this video congratulations i can't wait to meet you in there this is an exciting year for AI in our field and there's a lot to learn together thank you for watching now get back to work [Music]