Build a stunning website with ChatGPT.
One video, 29 lessons. With the ChatGPT you use every day and The Mariscal's free skill, we build a sneaker shop from scratch and put it online. You don't write a line of code.
- Free
- 29 lessons
- 1 h 48 min
- Spoken in Spanish, with English subtitles
Play the course · A stunning website with the ChatGPT you use every day
A stunning website with the ChatGPT you use every day
Welcome to this video. Today we're learning how to build a stunning website with ChatGPT. Yes, the same ChatGPT you use every day. And how are we doing it? With a skill we put together at The Mariscal so you don't have to do anything. Nothing at all. We install the skill right at the start and it guides us step by step. Let's get started. OK, this is the final project we're going to end up building. In this case it's a sneaker site, and it all starts by telling
ChatGPT the idea. But wait, wait, wait, wait. I know, you're one of those people who open ChatGPT and type: "I want a stunning website." Well,
sadly, that's not how it works. So now I'll show you the steps we're going to follow in this video. The first step is to create a project and explain to ChatGPT what we want to build. And from that it's going to put together the plan. The next step is to build the structure of the site. For that we'll look for references. Design has nothing to do with it yet. The next step is building the wireframes. Wireframes are basically our site, but without any design at all. Once we have that, we'll look for design references. And with those, plus the wireframe, ChatGPT will give us
several options to choose from. Once we've picked the design, the next step is creating our brand. For that we'll also look for references, and we'll get several options to choose from. Once we have that, the next step is building the prototype of the home page only, so we can see what the design ChatGPT proposes looks like with the brand. When that looks good, we build the prototype of the whole site. And once we have the prototype of the whole site, we'll build the project we're actually going to publish: a properly built website, with all the
requirements we programmers use. Once we have the site, we're going to publish it. And once it's published, as a bonus track, we'll improve a few design things, add animations, add some magic. And with that we'll have our website. And you'll understand how to edit it, how to edit the text, how to edit the design, all without touching a single line
of code. Now that we know what we're doing, let's get to work! Before we start, this video is sponsored by us, The Mariscal! The Mariscal Project is a software company started by a group of programmers with more than 10 years of experience. What we want is to democratize quality software. We're the Robin Hoods of tech. The idea is that small businesses and entrepreneurs can have world-class software, the same kind big companies use. We can improve your site, audit it, make it more secure, or
just build it from scratch. Or build custom software for your business. And if you're a psychologist, dentist, tattoo artist or barber, we also have software that's basically WhatsApp with a guide tailored to your business, that books appointments for your clients using Google Calendar to save the booking and get in touch with you. So now you know: if you have an idea for a website, an app, anything, count on us. Go to themariscal.com and
tell us your idea. OK, back to the video. Alright, the first thing we'll do is go to GitHub. We'll search for it on Google, but you can also just go to github.com. And we'll create an account. This matters because this is where we'll save all our code, the code the AI writes, and we'll have every step saved along the way.
It'll also let us publish the site once it's built. Once we have the GitHub account, we'll download the app. Here it's for Mac, but it works on Windows too. We'll download it and run it from the desktop. This app lets us control GitHub and, at the same time, give the AI access to GitHub. Once it's downloaded, I open it. I'm going to install it. In my case it's already installed, that's why I'm seeing this. But if not, you just install it,
no problem. And the goal, like I said, is to log in to the account and manage things from there. Once we
have that, we'll go to Obsidian. We'll download this app. It's also available for Windows. This will let us read the documentation we'll be writing. And later on, you'll see, manage the text of the site. Once it's downloaded, I'll install the Obsidian app too. I also have it installed already, that's why I'm seeing this. But you'll just install it, no problem. And with that... We don't need to use it right now, but we do need it installed. Now I'll sign in to my GitHub account in the app. For that I open the app and
authorize it. Look how easy that is. But it's a key step. Once it's open, I can get in. I always leave this as it is. It's just to set up how things get sent. By default it'll use the details you already entered, which is what
we need. Let's open the GitHub app now and go up here: File, New repository. This is where we'll save things, I mean, the project we're going to create. So I'll give it a name, in this case New Website, and I'll create it in this Documents/GitHub folder, the default one. I create the repository and publish it. But see, it always has to say "Keep this code private." Once I publish the repository, it's asking me for permission, because since the GitHub app is new, it doesn't have certain security permissions yet. But we'll add them as we go. Once
I have that, I can open ChatGPT. Always make sure it's the latest version. That's pretty important, I'd say. And here in projects I'll add the project. But first I want to show you it has to be on Work so it lets me open projects. And here I open the folder I just created, New Website. It's empty, and that's how it should be. And I give it a name so ChatGPT knows: New Website. I click "Trust this
folder." And now, finally, we can start. I'll tell it: "Install this skill." Just that. And the model: see, here I have Sol, but I recommend you use Astra. And I'll be using it on High, which gives better results. But you can use Medium too. When it's time to design, though, I do recommend putting it on High, because the results are better. I install it and now it's thinking. And once it checks that, it'll install it. And once it's
installed, we'll be able to run it. In this case we'll run it by typing a slash and "themariscal". That's the name of the skill: themariscal-create-amazing-website. I just run it and the skill already knows everything it has to do. It's going to set up the project. For you it'll take a bit longer. To keep the video from getting too long, I cut out the parts where ChatGPT sits there thinking and thinking. But this is what you'll get: it'll install all these companion skills. In other words, from The Mariscal we only need one skill, but it brings several skills from other
people that it'll run when the time comes. So the first step of the skill is checking whether you have the skills it needs. And if not, everything has to be installed, like in this case. It finishes installing and now we can get to work. Now it asks us to explain what website we want to build. In my case I'm making a site to sell sneakers, just for this example. It's an e-commerce store to sell sneakers.
So, with that info, the skill is going to create the whole plan and the Obsidian folder, so we can work step by step and every step gets saved. That's important. Since we're putting Obsidian in here, it's going to save everything there. So now it's telling me it can't publish to GitHub. So it needs authorization. That'll happen to you at first, but once you give it permission, it won't happen again. That's so
ChatGPT can push the code to GitHub, which lets us keep track of everything we're doing. Here I give it permission for good. The Mac asks me to open Accessibility, and all I have to do is turn it on, by dragging, just like you see here, and entering the computer's admin password.
OK. And here I enter the admin details. And once that's done, I have to do the same with screenshots. That's because ChatGPT is going to take screenshots to check what we're doing. That'll be really important for the mobile designs and that kind of thing. So once I've given it permission, it should be able to push to GitHub. And it says the docs were pushed to GitHub.
But as you can see, I've run out of plan. Anyway, no problem. What I'll do is log out and sign in with another account, and that won't hurt us at all, because we're saving everything in a unified memory built
with Obsidian. What's Obsidian? Obsidian is like a notepad, a place to keep notes. The difference, and the power of Obsidian, is that those notes are linked. I mean, what Obsidian does is connect the notes to each other and build something like a mind map. What's that for?
So ChatGPT documents everything we do and connects it all. And later, when it needs to find something, it'll find it really fast. This gives ChatGPT unlimited memory. That problem where it doesn't remember anything? Obsidian fixes it. But don't worry, you won't have to touch any of that. We just create it and ChatGPT takes care of everything.
We're saving everything in a unified memory built with Obsidian, and even if you don't see it, that folder is there. And to show you, go to the New Website folder and you'll find Obsidian there. Here we have everything ChatGPT has created so far and everything it'll create as we follow the plan we're working on. You can see it here. And it's a map, all connected. Since
this is a new ChatGPT account, I'll import the project again. And that lets us keep working. Look how I import the project and I don't have to tell it anything, no handoff, nothing. Just by saying "Let's continue", the skill knows which step it's on.
This skill is designed to go through a bunch of steps. In total I think there are 18 or 19. Since it pushes each step to GitHub, it also remembers which step it's on. Here it says: "The project was created successfully." That's step 1. So all I'm going to ask is that we continue. Here, I tell ChatGPT "Let's continue" and it already knows what to
do. It picked up right where the skill left off. And now we'll build the structure of the site. First we need to lay out the structure of each page we're going to have and what goes inside it. To do that, we're going to use screenshots of another website. But it also works if you draw it in pencil and take a photo. Or, for example, you can make a collage in Photoshop or some other app, where you grab the header you like from one page, then add a carousel, or whatever. And that collage we'll hand to ChatGPT, because what it does is extract the structure. Design
doesn't matter at all right now. What we're doing is building the skeleton of the page we want, so we can design it later. Here, if you already have a reference or something, you can add it. What I'll do is base it on something that already exists, in this case the Puma website. I'll go here, right-click, Inspect. I go to the console and press Command plus Shift plus P. And that pops up, where I'll tell it to take a screenshot of the whole site. And once I have it, I give the image to
ChatGPT and tell it this is the home page. What it does is create a .md file, Markdown, where it puts all the structure info. So don't think we're copying the design or anything. Just the structure. That lets us build the wireframes, which will be really valuable for the next part, the design. Once it's loaded, I'll add other pages, like, for example, what happens on the product detail page. Here I have this layout Puma uses, which, for what I'm building, seems
pretty useful. So Command Shift P, or Control Shift P if you're on Windows, and you look for the one that says "Capture full size screenshot". It creates an image and saves it to Downloads, and if I open it, it's the whole site, I mean, that whole page. So I don't have to take a bunch of screenshots. Just this one, and I hand it to ChatGPT. And here I tell it this is the product page, product detail. So here you just have to tell it which page it is and it saves it in the Obsidian we created, which I can keep checking if I want. There it tells me
it's going to save the reference. And it's saving it. And it says... the image, well, it describes a bit of what it sees. And it lets you add more. If not, you just say "Done". Here in Obsidian I can see the structure and I can see I've got the home page. This is what it made from the image I gave it. It has no design info, only the structure of the page. And with that I can add more pages, as many as I want, or the ones I already know my site will have. Of course we can add more later, but the better the info we give it now, the better the work we'll be
able to do. So if we already have them, let's add them. You can also do a pencil sketch on paper, take a photo and upload it. That works too. Or if you already have a design, in Photoshop, Figma, whatever, you can upload it so it uses the structure you already have. Or if you already have a site and want to redesign it, just do this with your site's structure. Since we're starting from scratch, we'll do it this way. And here I'll drop in this image, which is the checkout image. So I drag it into ChatGPT and tell it it's the checkout image.
Done. With that it should know what image it is so it can save it in Obsidian. So it tells me it saved it and asks if I want to create more. If I want to... believe? I always want to believe, but anyway. Now... OK, let it create. I want to believe it'll all turn out beautiful. So now, for example, I'm filling in this form with fake info, just so it lets me move on to the next screen, which is the one for choosing the payment method.
So here we'll put... OK. Now... it lets me go to the payment methods page. So here I can take another screenshot. Again, I go to the console, like with Cmd+Shift+P. That opens this menu where I can search for "Capture full size screenshot". Now it's in my
Downloads folder. Here's the full thing. And what I'll do is go to ChatGPT, give it the image and tell it this is the Payment Method page. Here, once I've told it, it starts thinking and it'll save that one in Obsidian too. It's saving everything there.
What this part of the skill does is analyze the info we give it and build the .md document, but without looking at the design. Like I said, all this is needed to create the wireframes. So there we see it's still thinking. It shows, blah, blah. It analyzes it and creates it. Done. And "Want to add more?" So if I want, I look for one more, and if not, I just type "Done". I'll add one more, the categories page, which every e-commerce site has. Looking at this site, at this part I'm mapping out... I'm looking for the
categories page. This one works; here it's kids, and it works for me. Since I see the page has infinite scroll, capturing the full screenshot won't work. So I'll just take a regular screenshot, pressing Command Shift 4 on a Mac, which lets me select part of the screen. So here, snap, I grab that part. And I give that to ChatGPT, the screenshot, just as it saved it. But since it covers so little, I'll try to grab another part
of the screen. But since the bottom part and all that is the same, I'll leave it like this. But you should know you can take several screenshots to piece together a screen. So here I tell it this is the Category screen. Like we've seen, it starts thinking. OK, it's going to save all that. The category shows a filter, blah blah blah. So it's analyzing the image. And here it says it's saved it. Remember it might take you a bit longer than what you see in this video, because this is edited to flow a little better. Now I'm done and I type "Done". So what it does now, once
it's created everything, is build a sitemap. I mean, it creates a file in Obsidian, where it saves it, so it knows all the pages we've added and links them to each other, which lets us
build the prototypes later. So it says: "Step 2 completed successfully." And now what we do is type "Let's continue", so we move on to step 3. It'll think here too. And it says stage 2 is complete. We have, blah blah blah, at the start. Let's move on to part 3. So the map is ready. That was the sitemap I told you about. In stage 3 we're going to build, basically, the finished sitemap, ready for the site's design. Here it asks me to approve it. And we'll do that a lot, I mean, signing off on things. Because if you need
to make a correction or anything, this is the moment. In this case we're happy, so we tell it "Let's continue". And step 3 is done.
On to step 4. Always notice that here it says "Let's pick up the task". That's because it's looking at what's already been done. The skill writes down each step. It has the full plan and writes down each step, so it knows. Now what we're going to do is start building the wireframes. What are wireframes?
Wireframes are used in designing and building websites and apps to show the structure of each page or each screen. I mean, whether it has a header, a carousel, a list of images, how it's laid out, how it'll look on mobile, on a phone. For example, on the desktop I might see three columns, on a tablet two and on a phone one. That kind of thing shows up in the wireframe. This is essential, and it's what makes the difference between something turning out well or badly. That's why at The Mariscal we have a book called "How an App Is Thought Out", and it's only 10 euros, where
we explain all of that: how to go from an idea to building the structure, drawing the wireframes and all that, getting everything ready to work with AI. Basically, a wireframe is a skeleton, with no design, of how the page is structured. Here, to create the images and all that, which are basically HTML files and so on, we'll use a script, a Python script, which is what it's asking me to accept here. I'll just accept it. And here it'll ask if it can use Chrome, and I'll tell it it can always use it, because we'll use it constantly in this video. And I
had set it to approve everything. So down there you can have it ask you, but I set it to only ask me about the important stuff. Here we see it's already creating, basically, an HTML file. That means it's a file for the web, but without any logic. We're only focusing on the design right now. And OK, here we see the pages we've been adding, and from those it'll build the wireframes for each page so I can click through them. This is a key step, because lots of people start designing straight away with AI and then don't
know why their page doesn't look right. Basically it's because of this, because before you apply a design, you need a skeleton. Back when we built websites by hand, with code and everything, before AI came along, wireframes were key so that, before moving on to the design process, you already knew exactly what structures you'd need. So this is a method we've brought back here at The Mariscal to really build quality websites, and so that later, whatever the structure, we can pick from several
designs. What ChatGPT is doing here: it took a picture of the page, because while it's building the wireframes, the skeleton, it's also trying to make it work on phones and tablets, on the iPad and any other tablet. So it keeps taking pictures to check it adapts.
Look, here we already have the structure part. And that's how it's coming along. As you can see, it's black and white, no design, but that's exactly what we need right now. So now the idea is to build wireframes for all the pages we gave it in the previous step, and it'll also link them to each other.
That'll be important for building the prototype. Here we have the payment method one, no, the checkout one, I think it was this one, and the other, the payment method one. And it'll do that with all of them. For that it keeps analyzing and taking more screenshots, until ChatGPT thinks it's right: the cart and the change. It pushed it, blah blah. And it says the wireframes are ready and I can open them in the browser. The first page is like an index of all the pages we have, and here we see what the wireframes look like.
This is what I meant by structure. See, there's a list there that scrolls sideways. And this too, the boxes with a cross, is a way of showing an image goes there. In the category page we have the filters and the images. In the product detail we also have the controls for choosing products and everything we saw the other page had. Basically the checkout and all that. Right now we only care about the structure, not the content. If you want to change the content and all that, sure, you can do it now, but it's better to do it later, once the project
is set up, so you can do it the easy way, by editing the text. Look here, it came out cut off because the screenshot was cut off, the one I gave it for category, remember? So this I can fix now. I type: "Everything in category is cut off; in the screenshot I gave you," I explain, "it was cut off, but now I need you to put the images in properly." And I'll also ask it to add the footer, which we had on the other pages too. So here I type: "Do it like
the others and add the footer." I can tell it "like the others" because using Obsidian lets ChatGPT check that memory and know what we did. I mean, ChatGPT isn't going to guess anything: we're always the ones telling it what we'll do. So: "Yes, I'll fill in the cards," blah blah blah. OK, it does it. We wait a sec while it runs the commands and wait for it to make that change. And here I'm running it in the browser to see it better, and I can see it clearly: it has the footer now and it's not
cut off anymore. So once this is set, we can move on to the next step. By the way, these cuts that pop up kind of abruptly are because sometimes it takes a long time to make some changes. So I cut the video to explain it better and so it's not so tedious to watch. But here it says the wireframe stage is done. So what it's doing: the next wireframe stage, and testing it. That's why it says stage five is done. And the cool part is the wireframes are made for desktop, for phones and for the iPad. So once that's finished,
we can move on to the stage where we add some design. Here I can do one last quick check to see everything's OK. In my case it all looks good, so I type: "Done, let's keep going", which... I tell it: "Done, perfect, let's move on with the rest."
OK, here it says the version has been approved. After an important step like this, like in this case the wireframes, it'll always wait for approval or change whatever we
tell it. In this case I tell it "Let's continue". And the next step is design. If I've already made other designs, say I'd already done this, I'd already used this skill for another site and want to use the designs I'd gathered there, I don't need to start from scratch: I can import them into the folders. But since I'm starting from zero here, I told it to analyze. I'll go to Dribbble. It's a site with some really good designs that'll work as inspiration. It's not that we'll copy them, we're just going to show ChatGPT what we consider
a good design. I'll search, depending on what I'm building. Here I'm searching for shops and this one comes up and I like it. They don't all have to blow me away, I just need to see some potential. That'll be the base for designing ours. I'll grab this one too, and I'll grab at least three or four. This one I'll grab too. What I'm doing is downloading the image to Downloads to give it to ChatGPT later. So here I download it, and this is the first one. So I'll give it the image, I drag it in
and tell it how I want it to save that design. I mean, how I want it to save the design in Obsidian. Here we'll call it "Dark". And this is the opposite of what it did for the wireframes. Now it'll look at the design, but not at the structure. So it doesn't matter what structure these designs have: what it'll look at is the colors they use, the typography, all that, but not the structure. So it doesn't matter whether the structure has anything to do with what you're building. You can use any other page, even one that has nothing to do with it. I liked this design too, so I'll
hand it over and tell it this design will be called "Green". I don't overthink the names because this is one stage of the many we'll go through and, like I said, we'll change the design later anyway. This will help us see several versions of what we're making, of what we want to make. And now it asks me if I want to keep adding or if we're done. Whenever we stop, we say "Done". So I'll add the next design I'd grabbed, this purple one, I'll drag it into ChatGPT the same way we've been
doing things: "Purple". And what it'll do in Obsidian, we'll see later, is create a .md file for each of these designs. And this is what we can hand it if we already have it made, because, for example, we built another site with this skill: it'll use those designs so we don't have to do all this every time and repeat it. So that's what we're doing there. It saved it, and I'll look for one more to really show you how this prototype thing works. I don't want to overcomplicate it either, but I'll try to find something different from what I
had so far. This search part is pretty important because it'll lay the foundation the page's design is built on. So it's worth taking the time to really find things that help us, not throwing in just anything. I mean, don't add just anything, because honestly four designs is enough. Sure, you can add more, but then it'll have to generate more templates, more stuff, and that'll keep dragging out the process, and it'll cost you more too. So four seems like plenty to me. Four you picked thoughtfully,
knowing they're close to what you want to make. OK, I'm having a hard time picking because they're all very similar to what I already have. I want something a bit different. So, OK, I'll spend a little time on it, but without overthinking it. OK, I'll try to quickly pick one that looks different from what I already had.
And I think this one is pretty interesting. Let's... we save it, and I find it in Downloads too, and drop it into ChatGPT, and tell it this one will be called "Pink". And with that I can save it.
It'll think and do everything it did before. And once it has that, I can wrap up this process. I've got four, more than enough for me. And it asks if I want to keep adding, but I'll tell it no, we're good. So I type: "Done, let's continue", or in this case: "Let's move on to the next thing." And so, once we move on, it's going to
close out the references, I mean, it'll record that those are all the references we gave it. And with the four references it'll validate them, checking that... the criteria of the files it's creating. And it asks me for approval there too, and
tells me we're moving on to the brand. Here it asks if I have anything. If you do, hand it over, but if not, like here where we have nothing, we'll do some brand research. That research is basically the same thing we did for the design, but just for the brand. For that I go here to Google and start searching for shoe brands, which is what we want to sell. In your case you'll search for whatever you're making. You can search a bunch of ways, there's no science to it.
Just logos that we think might work, only as inspiration, because we'll change it later anyway. But going from having nothing to starting like this is a good way to do it. Here, OK, we keep looking for a brand we like. Right, I'll change the search and now type "store brand design".
OK, this one I found, I'll open it, and take a screenshot. I won't pass all of them, I mean, we only need to pass one, the one I liked, this one in the middle. So I take a screenshot with Command Shift 4. On Windows, well, you'll take it however you usually do. And I tell it where the brand is from, right? I mean, how I want it to store it. So, it's analyzing the brand, and with that it'll save a .md file so we can make ours. Here it says: "The red brushstroke stands out," blah blah blah. It analyzes it and
saves it. "Want to add more brands?" And we'll add a couple more, also three or four, no more than that. We'll add Levi's too. We tell it it's Levi's and send it. OK: "I'll add Levi's," blah blah blah. It's creating the .md file, and now I'll go to Dribbble too to find a different kind of inspiration.
These are mainly the places I use the most: Google search and this one. You can also use Pinterest if you want. This one I liked too, we'll take a screenshot and pass it along. Don't worry, we're not stealing anything. We're just shaping ChatGPT's judgment so it knows exactly which direction we want to go, which can be very different depending on the case. So that's why we do this reference thing, and they're just that, references. And once I have these three, I'll
tell it, OK, let's keep going, let's move on, honestly three is enough for me: "Done, let's keep going." And OK: "I'll create...", blah blah blah. Same thing we've been doing. And here it asks what my brand is called. I'll use a brand name for this example, which is shoezzz, a mix of shoes and zzz.
That'll be my brand. Obviously you'll put yours here. And with that info it'll know how to put things together. What it does now is take the name I gave it plus the reference I gave it, and ChatGPT generates these sort of mockups so I can pick one.
Here it shows me what it'll look like in use. The third one, the third one is the one I like best in this case. And I'm going to tell it let's go with this Mega Absorb one.
Of course it'll generate one for each reference you gave it. So if you gave it 6, you'll get 6 and you can choose. And now you have to pick one too. Don't worry, we can change it later too. All this does is give us a reference so we have something to work from. I mean, so we don't start from zero. The problem is wanting to start with the design already finished, I mean, nailing it on the first try, and this takes several steps. That's kind of the idea of this skill, but it's also how people really work professionally. And it... tells us
it's approved. So there I have to click "Authorize", and that's when it starts creating the images we need for everything on the site. Look at this one it made: it's pretty good.
Like I said, you can change it later, but to start it's fine. Here, as you can see, it also makes a black and white version, because you need those versions for different parts of the site too. So whenever it makes something in color, it'll try to make something you can also use: the brand as a word and the brand as an image.
As we see here, this will be used for the site's icons. It's always important to have a logo like this, for when people bookmark it and all that. And here it shows me how it looks in dark mode and light mode, how it'll be implemented. It also checks that it looks good on phones. This will be like the brand profile, which will be really handy to keep using. Maybe later you'll build a brand profile, a document just for that, and this document will work as the base. So that's why it checks that it adapts well. And now what it's going to do is
clean up, optimize what we've done, what we've tested. If, for example, I had another note here, like "I want the brushstroke to be blue instead of red", this is the moment to tell it. I mean, before telling it it was perfect, like I did here, you give it those notes so it redoes the brand until you're happy with it. When you're happy, you tell it "Let's continue". So now what it's doing is checking all this carefully. It might seem like a lot of checks and all, but you'll see, when you see the final result you'll get why it
does it. Here it's doing it to always make sure things
look right everywhere. And once we have the brand, we can move on to the most exciting part, the designs. Precisely, to make a good design it needed the brand, that's why it asks for it now. And here I tell it to keep going with all the steps. It tells me the skill it'll use, and the designs I gave it: Dark, Green, Purple and Pink. It's going to use the huashu-design skill and prototype to build the prototypes.
Now what we're going to do is pick between several versions, but let's not get too picky right now, because we'll be able to change it later, once we have the base. Here it asks what I want to do about images. Since we're using ChatGPT, and ChatGPT can generate images, what I'll ask is that we use sample photos. I mean, that it generates photos to use as examples. That way I can see something closer to what the final result will be. That's why I tell it to use sample photos. And once I have that, the
next step is for it to generate the proposal. So here I hadn't... I hadn't gotten around to clicking and it had kept going on its own. But, as you can see, I can click and redo the answer so ChatGPT doesn't make things up and sticks only to what I'm asking for. So here it'll keep thinking: "I'll use the photo that", blah blah blah blah. And the photo...
They're saved and checked. And here it keeps generating. Now with the style files, which it wasn't using before. And here we see how... this will take a while, it just looks fast here. It's going to generate one file per design, but only for the home page, so we can choose. And then we can keep going. It'll also make me a page where you can see and review them all, like
an index. Here we can see the first design. I mean, it was based on this Dark design we did. And here ChatGPT is downloading images, because it keeps checking. See, there's how it would look on a phone held sideways. And it'll test every resolution so we get a version of each one, but a version that's well structured. All because we already did it that way in the wireframe, and that's where you see why wireframes matter. Here we see how the first design would look on a phone. Now
we're looking at the second design. Notice that even though the structure is the same, the colors change, the typography changes. That's the idea. Next, this is the design we called Purple, and we're seeing it at every resolution, because it keeps testing it, it keeps downloading images. And this is part of the last design we added, Pink. The whole typography changes, the button colors change, all of that changes, and that's the info it pulls from the designs we give it. That's the magic of the skill: each
process, each moment of building the site creates documents that we can later change however we like, but those documents hold the specific info for that step. And that's kind of the idea we want to get across with this project: you don't just type a prompt that says "Make me the best website in the world" and that's it. Look how we went looking for references, how we built that up. Look at this pop-up here, the modal, as we programmers call it. It's designing the modal too. And
the step we're on now is creating the different designs so we can see them on the wireframe. I mean, instead of looking at a generic design, we're seeing how that design fits the structure we made with the wireframe. So once we see all that, we can make an informed choice. And once we choose, we're going to build the prototype with all the other pages we noted down in the first part. That's the advantage of doing it this way: getting the pages right
at the start so later we have a prototype that's pretty close to what the final product will really be, and similar to what the final product will look like. Because right now we're doing the visual part, it has nothing to do with animations, with all those things that'll come later, in the final steps, when we actually build the project we're going to put online. Just to give you an idea, if you don't know anything about programming, it doesn't matter, but for designing and laying out a website, we have files called .html, which
are the files you're seeing on screen here. Those files are where you structure the page, for example, what the header will be, in this case the hero, which is this thing at the top, I mean, the first part you see when it loads. In this case it has two columns, which typography it uses, the button, where the button goes, that kind of thing.
Animations and that kind of movement and so on, we couldn't say... that's done differently in this case, with other animation libraries. But anyway, for now we can see we have the four options, the four designs. And here we have it like...
Even the index turned out nice, the way the skill made it, it's well designed. But let's evaluate the design. I love this first one, it feels really solid, how it's put together. We're using skills here, besides ours, that audit the designs and build them as cleanly as possible. But look how the wireframe, which was black and white, turned into this. In this case, for me the design that fits this best is this one, Purple. But let me show you all four. This is how Pink turned out. Typography is also important, though we can change it later. So,
once I have the design I like, I have to tell ChatGPT. So I'll type: "Purple is the one I like." Going with Purple. And now ChatGPT is going to note the decision and start building the next pages of the site, and now actually make a prototype. What's the difference between a prototype and the final result? Basically, the final result we'll build with React, which is a library for building websites, made by Facebook, and it's the standard in programming, in
building websites. It's the most complete standard. Well, not sure about most complete, but definitely the most used. And by complete I mean big software companies use it too. And where we'll deploy the website is Vercel, which is also built to work with React. We see the prototype, which in this case will be in HTML so we can tweak everything before building the final project. We can already see that The Mariscal's skill in ChatGPT is making the design a bit prettier, how it places the photo now, the
typography. We'll keep changing this anyway, because once we have the prototype, that's when a bit more magic comes in. Here it keeps saving the screenshots and ChatGPT keeps auditing the cross-platform design, the responsive design, and it's important to see that in wireframes too. Why?
Because basically, for example, here in the hero we have two columns, right? That's a standard structure in page design. In the hero it's called the F pattern, because, see, the user's reading goes first to the header, then the toolbar where the brand is, then the header, meaning the headline, the description below and the action button, it's called a call to action, a button that triggers the main action. But of course, we see that on mobile those two columns become one and
the right column ends up on top. It ends up on top; it could be the other way around, but it's always best to put the text below. We also see how this modal looks now, with this site's design. That's the good thing about working this way, because the steps are solid. No, it's not things where we have to keep saying "oh, I didn't want it like that", "oh, but you did it like this." Because when it generates the proposal, and we pick one, what we're doing with this skill is creating a design file. What does that mean? That
it has all the design info, so ChatGPT knows what features the site's design has. So every page will be built using that design file. Here they're refining the last part. Either way, we'll be able to fix things, and it's creating all the views we need. And the prototype... The point of building a prototype before the final project is exactly being able to change things we don't
like or aren't quite happy with in the design and structure, because later, when we start adding animations and more dynamic behavior, the idea is that this is already locked in. I mean, so we're not changing things all the time, but making the most of each step to change what that step is about, and that way we can keep going. Still, the idea is to make a design and a site that works from the start, that's the base, and that we can keep changing later. You'll see how here, now that
we've chosen the proposal we wanted, it starts building the prototype, but only of the home page. Here we have to tell it we agree, and from there... or yes, we approve, same thing. And from there it'll keep going. Here it says it'll test version 1, and it says version 1 because at this step, right when we finish choosing the design, every change we make will create a new version. That's so later we can say: "OK, I'll pick that one...",
so we have a way to go back. With this, stage 11 is complete, and
it has to move on to creating the proposal for the other, the other pages. We tell it to keep going: "Yes, go for it," I typed. So it starts recording the description and it'll move on to the full prototype, like we said. And this is where it gets interesting, because now it's actually building the site, and notice we barely had to do anything, just give it the idea and go from there.
OK, I had to close ChatGPT here and switch users, like I'd been doing. You can do that too, or you can wait. To make the video, I did it this way, but the cool thing is, you know how a lot of people feel ChatGPT doesn't remember anything, or the next day it forgot it all?
With Obsidian in place, we don't run that risk. I mean, you can drop the project for a week, come back and say "Let's continue", and it'll remember everything. And here it keeps building the different pages, and it keeps auditing the responsive designs. OK, the...
every resolution, making sure it follows design rules. Here we see how it's doing the categories part, how it placed the filters, it's downloading the images. It does all this automatically, but sometimes it gets a bit stuck there and you have to save it manually. But other times ChatGPT clicks the... on its own.
Here, for example, it renames it, and here we start seeing the product page. We're not doing anything at all here. It already knows which page to build and how. Notice it has the structure of the page we mapped out at the start. If the structure had been different, the design would've been the same, but the structure would've changed. It's so interesting, working on the structure first and then the design, then making the prototype, and only once the prototype is done do we start on the cosmetic stuff, you could say, animations, or even redoing and
redesigning the hero, like we'll also do later on. Here we have the checkout too. Look how it keeps, from the page we mapped out, the zip code and city in two columns, the name too. That's why the structure matters. Like I said, the structure could also have been a pencil drawing on paper, with a photo of it, because the important thing is that page structure before applying the design. And that's where a lot of people make the mistake of thinking it should come out fully
finished on the first try, perfectly designed on the first try... But basically ChatGPT doesn't know what good design means to you. It does know, thanks to the skill we gave it and the steps, what qualities good design should have, but not what you're looking for. So, instead of creating and creating and creating, not liking it, and asking to change everything, look how with this orderly, step-by-step approach every step we take is solid and sets up the next one.
That's the reason for doing it with this mindset: first the idea, then the structure, then the wireframes, then design research, brand research. Notice the color the brand uses is the same one on the button, so by unifying that, the site feels coherent and it feels like a website that's well made. They're not isolated things: there's a style guide, there's a design guide for what typography, or font, the title should use,
how the description and the subheading should look. All that gets saved in that design file, which of course you can change, and you'll see we'll do that, but right now we're looking at the big picture, at first having something we can change later.
This is a way of working I always recommend, or I'll recommend, or that I always recommend to people using AI: put together a plan at the start. You build the plan with the AI itself, but you tell it what steps we're going to follow. Of course, since this skill we built already has the...
The point of this skill is to save you all those steps, but if you're doing other kinds of things, you can use this as an example of how to work. The prototype is ready. This is the home page. Well, the home page came out identical to what we'd already approved. The interesting part is here, we see the categories, we have the filters, how the images will look. Then we have the product page, and then we have the checkout, how the checkout will look. There are things... Anything to do with the content won't...
design changes, now's a good time to tell it, before you approve it. But if it's things like the site being too static, no animations yet, all that, now's not the time for it. Let's respect each stage. We haven't moved to a React project yet, we've moved to the prototype stage, and now, by giving it the OK, we'll start generating the final version of the prototype and start on the project. But look how, from an idea, an intention of "I want to make a sneaker site", we've
gotten to this point where it really looks pretty decent, pretty good, and now we're going to add some magic. Look how ChatGPT tells us here to approve this and that it's the moment to change things. We're pretty happy with this, so let's keep going.
And what it does now is record that the prototype is ready, and it asks us for the URL of a GitHub repository, which is where it'll create the final project. For that we go to the GitHub app, new repository, in the same GitHub folder. I always like to name it after the technology we'll use first, and in this case the technology is called Next.js, dash, and then the site's name. I told you we'd use React, and we put Next.js because it's a framework that works with React, but it lets us build websites that are much more solid
and sophisticated. This is a framework; React is just a library. And since we already have that folder, we give it the folder. The GitHub URL isn't needed; that's only if you want it, maybe you're working with something else. But what you need to do is create the repository and give it the empty folder, and in that empty folder, at this step, it'll start setting up what we need to put it online, with several caveats, several good practices we'll use that our skill recommends. It'll also create
an Obsidian inside, and the amazing thing is that from that same Obsidian we'll be able to change the text and the stuff on the page. That's something only our skill does, and we did it so users don't have to open the code and don't have to know anything about web code and all that, and instead can change everything with just a text editor.
OK, I'd run out of... so what it says is there's free space now, and we keep going. A lot of times... well, I was recording the video while doing all this; that's also why it kept filling up. But anyway, we always need to have a bit of space to do this kind of thing, because ChatGPT's temp files and all that eat up space too. Here we see the project's been created, and it looks exactly like the prototype, but now they're React pages, not HTML anymore, and that's what
gives us the base to start adding animations, changing things, and also making components. For example, in HTML, if we have the same toolbar or bar, the same one, in HTML it has to draw it every time. But with React, since it uses components, what it does is reuse that component across the different pages, and that lets us edit once and have it change everywhere, so the project has a much healthier architecture.
Here it keeps checking that the app compiles fine and looks right on every device and resolution, because that's one of the things that, if you're building a page without this method, or a website, well, maybe if you don't tell ChatGPT, or whatever AI you're using, that it has to be responsive, it won't do it. But there are also rules for that, and in this skill we're using we've built in some
rules and some other skills too that help us with that. So here it's running it in a... basically, it runs the web app as if it were on the web, but it's on our computer. That's basically it. Here we're getting to the end of building the prototype... well, not the prototype: using the prototype to make the project version, the final version. So it also creates the URL routes. It also
creates a 404 page, which is when it can't find anything else, I mean, no other page on the site. An error page, basically. And basically, with our site, a solid base to fix things and add more products, to start working on it directly. That's also why we created another project, because building the prototype is one thing, and it ends when the base pages are done, and it's another thing
when we have the project built in another technology. If it comes from HTML... it's all done in React, but with the Next.js framework, and that's why we keep them separate, so we can work much more cleanly afterwards and also have an Obsidian inside the project, but one that matches the result that was generated for the Next.js project, and doesn't hold all the earlier info. If we ever wanted to look up the earlier info, we can do that too. The ChatGPT chats will be linked across projects. Look, here we're working,
we're still in the project we created at the start, but it's already changing the other folder. That's also because the Obsidian vaults are connected to each other and each one knows the other exists. Once we have the mobile views, once all the views are audited, we'll be able to start adding the animations and a bit of magic so the site doesn't feel so static. That's also pretty important for a professional site: that it feels alive, not super static. And feeling alive also ties into the concept of the
site we're building. Not adding animations and stuff just because, but so they fit what we're building. Here, the products page. We're checking every page. Notice I'm not doing anything at this point. ChatGPT is doing it all on its own, it's the one changing the pages, creating them, auditing them. That's also why it sometimes uses so many tokens, because of all the steps it takes to make sure it comes out right.
But it's necessary, because if you don't audit, if you don't check everything works at every resolution, that can really come back to bite us once we have a result that's pretty close to done. Because in this build, since it's building from scratch now, it's much easier for ChatGPT to catch things and get it right in one go.
But of course, you have to ask for all that and use skills that are designed for it. OK, and once it finishes auditing every page, we'll be able to check the design is right. I tell it "Let's continue" because it looked pretty good, it matched what the prototype had. Basically,
now it's taking the prototype to a Next.js project, and that's why it asks for our approval. And once we've audited everything, now comes adding a bit of magic. At this part of the process, when I say magic I mean animations, that kind of thing. Notice it says it'll use the huashu-design skill, which is for designing; it's kind of a replica of what Claude Design would be.
Impeccable and GPT Taste are for auditing the designs, for giving ChatGPT info on what counts as well made. And then we have the UI UX Pro Max skill and Apple Design, which tell ChatGPT what qualities something well designed should have.
And even though you already have those skills installed, because we did that at the start, notice you didn't have to do anything, neither did I, or tell ChatGPT, because The Mariscal's skill does it on its own. That also saves a lot of headaches, because...
And you see other people recommending: use this one, use this one, use this other one. You end up seeing so many skills and so many things that you can even forget where you're supposed to use them. Basically, what we wanted to save was that time, not having to think about those things.
Basically, by making the plan and being able to make it automatic with skills, we save ourselves, at every step, having to remember what to do. And once it gets a bit closer to the final result... What we're going to do now, when it talked about adding magic and all that, we'll do it only on the home page at first, so we can fix things before doing all this across the site.
Instead, we do it in one place; once we see it works well, we carry it over. And OK, there it tells me the new home page is implemented, it keeps the content, the route, blah, blah, and we're now implementing the hero, which might also change, because the hero is the most important part of the home page, I mean, our welcome page. It's what has to grab attention the most.
Look how it's been redesigned to put the title on top, put the image on the right. It's still there, but on the left there's other info. Now we put the title on top, and notice I didn't ask for anything, but it's already...
changing things. Let's hold on to the idea of what we want to make, and judge things based on that. Look how ChatGPT is the one doing the clicks and browsing here. You can see the cursor there, which looks like a silhouette, with a shadow and a white outline.
And now it's polishing. The key is to start with a skeleton, a structure, then shape it, add design, make the brand, and then keep polishing, polishing, polishing, until you get...
a really professional page, but we can still keep improving it, and that's what we'll do now. We'll also change the pop-up, and so on. There's still plenty to do, and we'll keep polishing, but all inside the same skill we're using. Notice I didn't write a single prompt, I didn't write anything. The place I wrote the most was at the start, and even that wasn't much, telling it I want to make an e-commerce store to sell sneakers, and that was enough for ChatGPT to build the Obsidian and the steps. And then, with the reference, we
gave it the idea of the structure we think we should use on the site, and from there the skill does everything. All we have to do is approve and ask for some changes, if needed. The tweaks are going in, and it compiles.
What's compiling? Compiling is when it can be exported into a version, the one we'll upload. It generates a folder called build. That folder has the exported site. A lot of times there are errors in the code that, when we're running it locally, we can't see, and on top of that the framework doesn't care much either, because we can keep working even with those errors. But they show up. So what ChatGPT does is make sure it compiles without
errors. That's a big thing we did in this skill, because checking step by step that it compiles is what gives us confidence that the step was actually done right and finished.
So it says: it compiles with no errors now, it looks right on mobile, tablet and desktop. And what we'll do now is, if it compiles, OK, let's see if we can deploy it before making the last changes.
And since it compiled, OK, in this part the skill with ChatGPT is going to check all the designs of every part and every page. Among those, the home page, how it looks on mobile.
But enough with the home page. The motion we'll add at first, like I said yesterday, is reduced motion, and later we'll add more motion too, but step by step, right? That's important to know, we take it slowly.
The final result has to look incredible, but you get there gradually. We don't go from zero to a hundred, these are the steps. And so, OK, here ChatGPT will start evaluating the other pages or the same page, in this case the home page, but different parts, to make sure it looks good and everything shows up correctly at every resolution. Here, for example, we're seeing it at more of a tablet resolution. And OK, that...
page. Look how the modal turned out. The modal itself is pretty good. We can add animations to the modal too. Here's how the categories part turned out. And OK, now it tells us the home page is ready to review. "Portada" here means the home page.
And we can review it ourselves in... Here, look, there are already some animations when I hover. But we can still do better, so I tell it it's perfect and let's keep going, because the next step is where we'll start to...
...the magic of
building it step by step. And here it asks if I want to apply the new style to the whole site. Yes, I tell it. And what this does is unify all the new stuff and the redesign we gave the home page. This is approved now, so...
OK, the home page wrap-up is published and the 56 files match the approved version, and now it'll start applying everything. When it talks about files, it also means the components we're building with. That's why it seems like a lot, but really it's put together like Lego pieces that get placed on all the other pages. And now we've got the adaptation applied, the catalog, blah, blah, blah, blah, everything we already know.
And now it'll check one last thing, and then we'll be able to upload it to start testing it where it's going to be hosted. The hosting is completely free too, you could host a ton of projects there. And you can add other things too, like analytics or stuff like that, but we'll get into that later.
Here we've finished creating the other pages, and with that stage 16 is closed. We're really close to the end, so now we just need to check how the site turned out. And for that it asks us to approve. I approve it, keep going.
And here we're seeing how the categories page turned out. So OK, with this we can start publishing the site. We'll add more stuff anyway, but it's also good, when we finish the first part (the skill itself will guide you through it), to try publishing. Because the more stuff we add, the harder it gets later to roll some things back.
So it's good to go: OK, we finished this part, let's test it. We finished this one, let's test it. That's how we programmers check that each step works, right? It's about not waiting until you have the final result to do those tests, but testing every chance we get, basically.
And to deploy it, it happens automatically, that's what we had GitHub for. And this skill also deploys to GitHub for us. But we will have to approve it, we'll see that now.
The good thing about the skill is it also handles deployment for us. That's important too, because not many people know what to do once they've built the page with their favorite AI.
They don't know how to get it running for everyone. And this skill takes care of that too. As you'll see, this skill is pretty powerful, because right from the start it installs the skills we need, asks you for the idea, builds the plan, sets up the vault.
And it goes from the idea all the way to deployment, basically, like the title says. And here, once it's finished the last check before uploading... Later, when you make changes, you don't need to check as much, but it's important to have a solid base.
That's why we're doing so many checks now. And notice here in GitHub, once we sign in with our account, see, at the top it says the branch name and then it said "Compare". That's the last step.
But our skill is handling that too. This is amazing. Because notice that whenever you make a pull request, as it's called on GitHub, which is a request to merge it into the main branch, where our code will live, which will be on the internet, on the live site, you have to add descriptions and all that. But look, it already does it automatically.
I mean, basically you don't need to know GitHub or anything to use this. The skill takes care of everything. And notice that now we do have to go into GitHub. There I'm showing you we go into our GitHub.
And there you go to repositories. Go into the one that says Next.js. Go to pull requests. And you'll see the pull request ChatGPT opened. And here you click "Merge" and "Confirm merge", which is merging it, meaning joining it into the main branch.
And now we'll go to Vercel. I'm typing it into Google here, that's how you'll find it. And on Vercel we'll create an account, if you don't have one. We'll connect this account to our GitHub.
Here I'm trying to log in. I didn't have an account. So I'll create one with Google. Once we have the account, it asks me for the team name and whether I'm working. Say you're working on a personal project so you get the Hobby plan, which is free. I'll put the team name: Mariscal.
And I'll click "Continue". And here I'll pick GitHub under "Import repository". And here it'll connect me to the GitHub we've been working on. And here I have to install this Vercel plugin.
And I'll choose all repositories, because it's a new account. And I have to verify with a code, which I'll enter. Once I enter the code, the projects will show up in Vercel, and the one I'll import is this one: Next.js.
And it detects it's Next.js. It detects everything. And I'll click "Deploy". And with this we'll have the website live for everyone to see.
But we'll still make a few changes so you see what happens, how you'll make changes once it's live. This might take a bit. It won't take that long, though, because the project is new and small.
But when your project starts growing, deployments will take longer and longer. And it's done. And here we click "Continue to the Project".
And here I have the address where it's deployed, this Vercel one, right here. As you can see, I refresh it. And now the page is live for everyone. Look how we started with an idea and here we are with the project online, for anyone to see. Public now.
Look. Remember what the wireframe looked like. And look how it's exactly the same here. See? That's what the wireframe was for. You believed me, right? So the wireframe is always the best way to start. Here I've got the product page.
Look how nice it turned out. Look how the modal shows up. And look how the checkout ended up. The colors and all that. Notice there's balance across the whole site, because it uses the same design file.
What I've been explaining to you. But now you can see it in action. Some things don't work yet, like these filters. But that's because we'd only done the design. Remember? And now we'll start asking it for some changes.
But first I'll tell it I've merged to main and deployed. So with this it'll check the deployment. And it's important to tell it that so it checks everything's OK.
And to keep going, I type. OK, I'll check, blah, blah, blah, blah, until the check is done. Here it'll ask me for the URL Vercel gave us, the final version.
So I go and copy this one here, which is under domains. Later I can add a custom domain. But this is the one it gives us for now so we can review everything before that. And with that info it can verify and analyze properly.
Look how it's also checking GitHub in the background. That's the good part, it handles everything. But carefully, and with a lot of rules we've added to it. The PR is on main now. It knows everything.
Here it opens the app to check how the upload went. Now it's auditing it. And once it finishes the review, we move on to the next step.
So the next step is making changes. Look, see: now I'm going to open Obsidian. And in Obsidian I'll open... Look at all the notes we made. Look how it all came together. Everything is linked.
That's the beauty of Obsidian. What I'll do now is open it. Here, "Open Vault". And I click "Open". And I'll open the Next.js one. Not the first project's, but the second one.
And notice here we have Content and Data. Data holds everything the website needs. And Content is there so we can change things from here. Look. The skill does this for us, it's so beautiful.
Tell me it's not the most beautiful thing you've ever seen. For example, here we have the title: "Find your next pair". To change it, I'll type "Hiya, and a Happy Meal", so we can test it and you can check everything's working.
I save, and here I tell it... This you do have to tell it: run the project locally and run the script for the Obsidian texts.
From Obsidian to the web. And what it does is convert the text from Obsidian into a format the website understands. But that's the point: how easy it is to edit it later from a text note. I mean, you don't need to know anything about how a website works, or where to look for files. Even to add new products: you just create a new product file with the structure we already have. And that's it.
And here... OK, now look how... There you go, see? Didn't trust me? Look how we changed it in Obsidian and it changed there.
And here, like I was saying: we have a sample file that, if we change it or create another one, new products get created. So from here you can edit the content of your website without touching any code.
Here I'm telling it to deploy the changes on a new branch and open a merge request. Basically this is GitHub lingo. A branch is an exact copy of the current code, but with the changes. So what happens?
Instead of sending the changes to the main branch, which is main, we create a branch. We send the new changes, in this case the text. And then we have to approve it on GitHub. We do this by hand to keep a bit of control, if needed.
But basically, since the skill audits everything, we can safely merge. OK, and now comes the way...
I'll show you the way, and now it's time to add some magic. I open this new website project again, the one we've been working on the whole video. And I type, in the Next.js project... And I type: in the Next.js project, install the Framer Motion dependency and, using the GPT Taste skill... OK, and I'll open the tool, fill the home page with animations, and I want the elements to show up only
when the user scrolls. I'm showing you this way because this is how you'll ask for any change you need on your site. Notice the skill isn't running anymore, it finished its job, we're not inside the skill anymore, but all that knowledge is still in the folder. So what I'm asking is for things to appear on scroll, and I want elements to animate too when the user hovers over them. So here, look, it's saying: OK, I'll check everything we've always been checking. And we'll use this to, from
here on, start asking for the changes we want. And once it finishes doing all that, it explains it, shows you how it's applying everything. Notice we didn't have to install GPT Taste or any of that, because it was installed at the start, and Framer Motion was already installed, but I mention it just in case, because better safe than sorry. And look how now, when we refresh, look how things are coming to life, right? I hover and there are new animations, look there. So it keeps getting
more interesting, and you can do this with anything. But now I'll show you how, for example, I take a screenshot here and ask it to change the hero's color. This is so you see how I start making changes now. The skill has finished its job; what I'm doing now is finer work, more about what I need for my particular project. I tell it I don't like it like this, the background is too plain, I want a gradient in a darker color, making the current color a dark one, and to use the skill. To use the skill I press slash, I type
Huashu Design and UI UX Pro Max, and we'll use the Apple skill, which does a pretty good review, so ChatGPT takes it into account later. I'm doing it this way, showing you, so you see how to make changes later, once it's deployed and on Vercel. The skill's job is done; this is a bonus track, where I'm showing you how to add whatever changes you need to any part of the site. I tell it I want it to be much more dynamic, striking, and here I tell it I want the toolbar to be sticky. That
means it stays stuck at the top and is transparent with a blur, that it's too big, but the size is fine while it's at the top, I mean, while the user hasn't scrolled, but when they scroll I want it smaller. OK, it just started getting this instruction, and that's where the magic of editing kicks in too, and how we'll be changing things in the project from now on. Notice we already have a deployed project, everything, anyone can see it. And so, when it finishes the changes, we refresh and boom! Look how great it
turned out, right? And look how the toolbar sticks and blurs, but goes back to the top and looks good. Look at that: those details are what make the difference. And now I've shown you how to ask for it, right? Notice that now, wherever on the site you want to make changes, you take a screenshot and tell it to use these skills we used, and it'll do it right there. But anyway, look at the difference between how the prototype started and how
it ended up. And I say: great, now let's deploy everything so it's on Vercel. And you tell it that and the deployments start, until the website is live on Vercel. Vercel is where we're hosting it. And OK, those deployments also take us to GitHub, because, see, remember that's where we deploy things from. But look, here you can also see previews on Vercel. That's the good part of having it connected, that before you merge... When I merge, it goes public for everyone automatically. Look, now I'm
going into Vercel, and see, now I'll click Deployments here, and it says "Building", and there I have the different ones I made. Look how the little logo we made shows up there next to it, in the favicon. That's because when we made the brand, it also made the files so that when someone bookmarks it, it looks good and all. And here I go, and see, I've got the changes with the animations, with the effects, with everything. So my work
here is done. Now with this you can build any site, any site, any site you want. You start with the structure, you let the skill guide you, you start by giving it the references, then we make the wireframes, then we design the brand, then we choose between several designs, we keep picking one, and so on until we get to this result, where, OK, the home page is the only one I added animations to, but you can do it everywhere. This was basically to show you
how the skill works and give you the tools to polish whatever you see and change it, so it ends up with a striking design like the one we got here. Of course we could improve it a lot more, add other things, but for the purpose of this course, this result is pretty decent and we're pretty happy with it. And OK, with that we wrap up this course. Hope you enjoyed it. See you next time. Bye!