all right so how cool will it be if you can just capture a screenshot of a website or take a mockup of a website or app and upload it to an AI and have it code the entire thing not just the UI but also make it fully functional well that's exactly what we going to see in this video so I'll be trying to create a few websites and dashboards and stuff like that using screenshots so plain simple screenshots I'll go ahead and find some screenshots from the Internet or maybe Mups and I'll upload it to an AI tool and have it code the entire thing and make it functional as well so if that sounds interesting let's Jump Right In so these are the apps and websites that I'm trying to recreate using AI by simply giving it a screenshot and for this one we'll be using two AI tools and the first one is CLA Ai and the second one is VZ by versal and a lot of you might be already aware of CLA AI it's a chatboard similar to chat GPT and it is really great when it comes to coding sort of things and on the other hand we'll be also using a new tool called vzer by versal which is like a chat Bo similar to cloud and you know chat GPT but specifically custom tailored for coding and development side of things so without was any further Ado let's Jump Right In so this right here is VZ by veral which is like a chat bot and also an II tool that will help you generate UI with chat CN UI from Simple Text prompts and images but we are specifically going to use this new feature called this uh chat option that is V chat so I'll go ahead and click on this option that says get started and this is the interface that we'll be working with and before we begin we want a screenshot right so I searched for a to-do website UI design on Google and found this one uh this particular image and this one looks really cool and it also has like a sticky notes interface right here so I'll go ahead and download this image to my computer just like so and now I have downloaded the screenshot and I'll open versal and I'll just drag and drop this one just like so and I'll ask it to create it right so I'll give it a simple prompt something like all right so this is going to be the uh prompt that I'll give and let's try to send it and see what it comes up with okay I'll hit on that send button and let's wait for a while all right so it is kind of trying to create the same using react and it started generating the code for the same and we'll see how accurate or close it will get all right so this is the code that uh VZ has managed to code and it looks pretty good right so if I try to click on this option that says this plus button you can get a new note but you can't really add any content here that we will fix it real quick and towards the side we have a sidebar we have an upcoming section but that part is not implemented yet we have a Today part we have a calendar view sticky world that is the primary uh screenshot that we gave and that is what they have coted right now then we have a list section where you can organize your sticky notes and stuff uh on different list so let me see if I can add a new list oh yeah and it works so as soon as you hit enter the list gets added on here let's try to add a new tag as well hitting enter and yes that works too now the next thing that I want to do is to make this sticky wall thing functional right now right now when I click on this plus button it just creates a new note and I'm not able to add any content right so I'll just go ahead and you know sort of try to uh make it editable right so let's try to do that so we will give it a simple prompt something like upon clicking the plus button on the sticky notes section I should be given the option to um add a title and content as of now it does not allow me to input anything all right and we'll go ahead and click sent and let's see okay it have started coding the same again and let's see if it becomes truly functional this time all right it's started creating the UI and we can also see a calendar interface here that's interesting let's hope the other part of the website will work too okay list section is there tags are there we have settings and sign out button over to Here and Now comes the main part and this is what we asked for it so yep so here we have that plus button and let's try to click it and see if we can add a new sticky note so I'll go ahead and click on plus button and yes I'll just give it something like new note note content will be example content and the color will set it as blue and click on add note and yes there you have it all right so that works so that part is working and right now I also see that this uh tax part is not actually working so in the input section we do not have an option to select the tag right but if you can go ahead and you know sort of ask it again it will code and give the functionality to add that tag as well now that's how simple it is to turn a plain screenshot into a code so if you want to view the code you can go ahead and click on this option and it will give you the actual code for that particular screenshot or whatever stuff that you generated now you can go ahead and copy this code and use it in your real project so you can go to replate or you know paste the same into your right local IDE and install the required packages so if you have not installed uh I mean the VIS Dev the actual content the code that it generates uses chat CN UI under the hood so you'll have to install a lot of different components for example in this code you can see they have used input button and text area which are all part of this Shad CN UI similar is the case for this dialogue and select so first you will have to in install this Shad CN thing the npm package and after that if you copy and paste this code everything should work as it is and that's how simple it is to use v. d to kind of create a code or a website fully functional code by simply uploading a screenshot that's how simple it is now the next thing that we are going to do is to try to recreate this CET website homepage using AI so I'll quickly go ahead and grab a screenshot of the same uh just like so so I have taken the screenshot so I'll go ahead and drag and drop the screenshot and give it a Syle prompt something like this convert the attached cord into a website make it look as uh close as possible like the screenshot and uh create it in react and use Tailwind for styling I'll just hit send and let's see all right so it has started writing the code so far looks good so for reference um this is the screenshot or the image that we uploaded to uh v. d and something went wrong all right never mind so there we have it uh let's wait all right this is freaking cool dude look at it so this is the screenshot that we uploaded and asked it to Cote something similar to this now it's not exactly the same but it's almost closed and you can also see the layout and stuff is actually the same and we have this uh category section the roundness the text inside of this the icon then we have like a newsletter section the colors and everything looks pretty pretty cool to me and if you want to add any more functionality or want to change something and go ahead and give it more commands or prompts and it will do just the same and that's how simple it is to use v.
d to convert in screenshot into a code now if you want to view the code for the same you can click on this option and view the entire code and in most cases uh v. d might not actually you know sort of uh split it into multiple files so it will be like a big one file so you'll have to refactor the code to make it more manageable but that's easily doable and now if you click on this option that says installed and you can go ahead and copy this URL right so you can go ahead and copy this URL and paste it onto your terminal in your real project and it will install and add all the files and dependencies automatically so you can incrementally create any components or Pages using this visdev and once created you can go ahead and click on this option copy the link and paste it in your terminal and install the same to your project so within just one click you will have the entire files generated by v. d and you can go ahead and further edit it cursor.
a or vs code or whatever IDE that you're using next up we will use cloud AI to convert screenshots to code and this right here is the screenshot and this is what we going to ask clo to uh convert to code so I'll go ahead and download the image to my computer and I have downloaded the same I'll just drag and drop it over to clo and I will ask it to convert this into a website using I mean in react all right and I'll just click on this option that says send and let's see what it comes up with and now this is what cla a has managed to generate and the uh screenshot does not really look that close but let's try to do the same using versal that's v. d by veral and see which one works better convert it into a website I'll hit enter and let's see what it comes up with all right I guess it's far better than what cloud generated for reference this is the code that we are trying to generate and obviously the code generated by v. d is far better than clo so this is what V dev.
manage to generate by uploading this particular screenshot right here next up this right here is a screenshot of a Google Store page for the pixel 9 Pro fold so I'll just go ahead and grab the screenshot and upload the sa to clode and I will ask to convert it into a website send all right it started writing the code let's wait nice all right so this is what cloud has managed to generate and for reference this is the image that we uploaded and this is what cloud has come up with and a lot of elements are actually similar for example this right here actually looks good the buttons the text and all that the colors are a little bit off but that's okay you can go ahead and give subsequent prompts and uh have the I fix it for you or you can also go ahead and view the code and manually add colors and make slight modifications and stuff like that and that's how simple it is all right so this is how simple it is to convert a screenshot into a fully functional code both UI and the functional part using tools like Cloud Ai and v.
