GPT4 Can Create Responsive Layouts from Ascii

Key Takeaways

what if I told you that we could go and take a design like this something very simple kind of like a wireframe then use a tool called asciflo.com that will allow us to quickly draw out the same kind of wireframe structure import that into chat GPT and it will then output HTML CSS for us well you probably think I'm a liar but we're going to do that right now alright so here is the design you can kind of look at this as like a wireframe or just a starting point essentially we do have some colors here this is in figma and it's just for our references to grab some color scheme so that we can communicate with chat GPT some basic styling so here's a desktop with three cards and then here's mobile we're gonna make this responsive as well so what we need to do is take this General structure and recreate it in something called asciflo.com all right so it's a free tool and it allows you just to create an output ASCII or essentially so what we can do is choose boxes left click here just to create kind of like the website Website Layout here on desktop we can choose text and we'll go ahead right here and specify um this is my snazzy I headline all right like that that's good we'll do a sub headline right here this is also my sub headline right here awesome and then we'll go ahead and take the boxes we're gonna have three boxes so one will be like right here one will be like right here again I'm just kind of eyeballing this it may not be even I don't think it's entirely too important and then we're gonna go ahead and take the text tool we'll say card one card two and card three finally we'll have some more text down here this is a footer text section that's it now we click on this download button and we choose copy to clipboard next up we go over to our gpt4 okay so this part's real important this is the prompt engineering or the prompt construction section because uh if we were just to Output this and say go ahead and make the website here is an ASCII representation of it it's not going to give us something very you know close to what we have but just to show you let's go ahead and do that I'm going to say uh let me zoom up here this is an ASCII representation of a Website Layout please make it in HTML and CSS so let's go ahead and then paste it and hit enter now it's still producing the CSS below but take a look at this HTML it's actually really solid uh it knew to wrap everything in a container which is probably representative of the outline that I chose um it knows H1 it uses it used it H2 this time when I first did this it used a paragraph tag that's not a big deal diff class card container right here uh that's exactly what I would call it myself so that's awesome div class card I would call it that as well I may use an unordered list instead of a development but still a footer down here I probably would wrap that in paragraph text but still pretty accurate For What It produced now sometimes what happens if you ask it to generate a bunch of information one prompt it will just kind of error or not error but it'll just stop producing the content so what you can do is ask a follow-up question please finish the CSS starting with the card container rule set there we go all right so here is the CSS and so what I'm going to do is open up visual studio code and paste both of these in so here is the HTML that it gave me and then here is the CSS here is the result all right so it didn't use the colors obviously because it didn't know about the colors yet we have to communicate it with some follow-up prompts but you can see that it's actually a pretty good job it didn't make it responsive because we didn't ask it to make it responsive but nonetheless this is actually pretty solid here so we can ask it to fix some of these things in a follow-up prompt please make the following adjustments to the CSS make it mobile first make the design responsive with a minimum width media query at 600 pixels the website background should be the purple color in the website text should be white the card should have a white background with a slightly rounded corners and the card text should be black and give the cards a minimum height of 300 pixels remove the border and finally the font family for the website should be nuneto left the line to footer text and get to the Border above it and give the H2 element a normal font way and make it slightly smaller and hit enter [Music] alright let's copy the new CSS let's go back I have not checked this out yet paste it now I know one thing that it did include is the new Neato font family I have it already installed on my computer though otherwise you get to ask it to Output the import code for you and let's go ahead and check it out all right that's a lot better already we could do another follow-up asking it to Center horizontally and vertically the card uh one two and three type let's go ahead and see if it is responsive I'll look at that automatically stacks it made the sub headline regular font weight I it left aligned the footer section it gave the colors exactly what we wanted it gave the oopsie wrong thing it gave this here rounded corners it pretty much nailed everything that we wanted it to do so what makes this really exciting is obviously this isn't a great use case I having to use asciflow.com however it kind of goes to show once they open up the multimodal functionality such as the image recognition then it could potentially almost nail everything exactly as we wanted out of the box if it's able to do just this based on ASCII and having a few follow-up prompts so the future is very exciting hopefully you follow along make sure to subscribe here if you haven't yet and I'll see you very soon goodbye if you enjoyed this video check out designcores.com where you can learn UI ux CSS and more with my custom interactive platform that makes learning fun and easy