[0:00]Claude Design is literally everywhere on the internet right now, you almost can't even escape it. And people are posting beautiful websites that they have created. And in today's video, we're going to be talking about how in a matter of 10 minutes, you can build a gorgeous, beautiful website using Claude Code that not only contains one page, but also has three, four, five, six, however many pages you want. And we're going to be adding gorgeous animations to us. So when you scroll down the page, it really feels like it's coming to life. And of course, we're going to deploy this live. Now, this is great news for anyone who wants to design websites very quickly with of course the exception of Figma and Adobe who are having probably horrific days with AI taking their business. In order to get started, we're going to head over to Claude.ai and we're going to click design on the sidebar here. The first thing that we need to do is we need to create something called a design system. And what a design system allows us to do is have a coherent, unified brand across every single page. Now, Claude already does this out of the box really well, but I want to show you a trick that works for me. I found this site called getdesign.md and these guys have created a brand kit for 68 of the biggest brands in the world. So if you've ever thought, hey, I want to clone Airbnb, Air Table, Apple, Binance, BMW, you can do it all for free very quickly. We're going to be using Claude in this example and they have given us the entire brand kit for Claude, all of the headlines, all of the colors, all of the font families. And on top of that, you can actually toggle into dark mode, so you can rotate between the two, whichever you prefer. You can even tie your website to a user's time zone, so that it's light during the day, dark during the night. And in order to get started with the design kit, we'll head over to the design.md toggle. And all of this text we're going to want to copy. And once it's copied, we'll head back into Claude design in the design systems tab, and we're going to create our own design system by pasting in everything we copied into the additional notes. And that's really it. That's going to build out this entire reusable design system that we can use across all of our websites, presentations, animated videos. You can also add as much information as you want about your business or your project. For me, I'm just going to add in the name here and generate it. And this will take approximately 5 minutes. We are back and we have the entire branding suite built out from top to bottom. Look at this. We can even go in, drill down into like icons here, and they've picked out all of the favorite icons that we can use. They have things like buttons that are already built out that we're going to reuse across the entire website. They have things like type families, or they have things like marketing UI kit. I have no idea what that is, but essentially, that's kind of what it looks like. Cool. So, all of this stuff has been built out, which means that we can now use this design kit to build our website. So, back inside of Claude Design, in the home section, we're going to choose prototype. We're going to name this whatever it is we want. I don't know, I'm going to call this Automatable. And we have to choose the right design system that we created. And also, um, between the two, wire frame and high fidelity, I would choose high fidelity because this is what's going to make us beautiful websites. Wire framing is like literally just putting the structure of the page together so that you can understand which where which elements go where, like this video goes there, or this text goes there, or whatever the case may be. And then we can click create down here. Okay. So, now what we want to do is we want to make sure that the design system is selected, which in this case, it actually is. We can see the output right down here. And we can go ahead and use that design system for the design portion of the website. But I want to take it a step further, and I want to grab a page, a sample page off drible.com for the structure. So we have one thing for the design, one thing for the structure, combined together to make the optimal page. So I'm going to choose um marketing agency website here. Keep in mind, Dribbble is just like a design library, where you can find beautiful assets like website pages, or whatever it is that you want to build out. Okay. And this will instruct Claude Design on building something out properly. So I like this one, I'm happy with it. I'm going to come down to this picture over here, and I'm going to save this as an image. And the difference is, is that the website that we're building, it's not going to look like this at the final revision, or final draft. What's going to happen is the structure will be the same, so we'll have this headline and some graphic in the middle here, and then so on and so forth. But what is going to change is the design, it's going to look more like Claude's style, theme, colors, all that kind of stuff. Okay, cool. So back inside of our project, now we can attach a screenshot right over here. And the cool thing is, is we can literally just talk to Claude to generate this prompt. Now we can literally just talk to Claude to build out this prompt. Can you please build out a beautiful agency website for my company Automatable that has five pages on it? First of all, I want the homepage, services page, contact page, about page, and use uh case studies page. Okay. And I want you to use the Claude design system to build out all the branding, but I also want you to use the screenshot attached for the structure of the page. Cool. I'll send that off. So the website design has been created. We can see all the pages here, and in order to view it, we can just click into the actual image there. Awesome. So, we got the contact page, this looks good. We got the about page. This also looks good, and the style between the two is very coherent, which I really like. But there is a lot of placeholders here that we're going to have to change, because nothing screams stock footage, or stock websites, more than having a blank placeholder for Jonas Mercer. Uh, so that's something we'll definitely have to change. But in order to do that, I'll just walk through really quickly how you how you'd go about changing it, very quickly. You can hit comment here, and the beautiful thing is, is when you hit any of these buttons, it's going to allow you to select an element on the page. And whatever element on the page that you select, now Claude Code knows exactly what it is you're looking to change. So I can just type in here, please upload this photo for this placeholder, or whatever. And we can see that it has the selected area down here, knowing that we're selecting we're choosing this particular image. We could add in, I don't know, just like a standard photo, and then it'll just swap it out in a matter of a couple seconds for us. And so that's how you can really easily edit anything inside of Claude Design. You can also click edit here, if you want to change exact things, like for example, the color, the font size, the font family, all that kind of stuff. And if you want to get super granular with it, you can hit this draw button over here, circle something on the page, and now you can just say what it is you want changed. Can you please update the um stopped text to red? Cool. So I'm not going to change anything there, but I think you get the point, you can easily circle very specific things and change it there as well. Let's head over to the case studies page, looks good. Okay. Um, you'll notice that it's very static, there's no real animations. We're going to be adding that in later on. This services page also looks great, and the um homepage also looks great as well. So I'm happy with that. Now what we need to do is export this so that we can actually turn this into a real website and deploy it, so that anyone in the world can access it. Just one more thing before we go ahead and do that. At the beginning of the video I was talking about a lot of these we're we're seeing a lot of these like motion graphics and animated videos, and we can easily do that inside of Claude Design as well. So I'm not going to walk through the whole thing here, but I just typed in a prompt like, can you make me an animated motion graphic for a background? Okay, and it will literally go to work for you and build out whatever it is you want. And the more descriptive you are for this motion graphic, the better it's going to be. Usually for these kind of things, I like to go to Claude first, tell it what I want, have it turn it into a mega prompt. So you might give a sentence, you might get 10 sentences back, and then you can dump that into uh this this chatbot right down here or this chat, and it will build something absolutely beautiful for you. You can go back and forth until it's perfect. Okay, next thing is, is we have to export this and build the website. So we're going to choose export here. Okay. And we want to select handoff to Claude Code. Now we can just copy the code here. And for the rest of this video, we're going to be building out this website using Claude Code instead of Claude Design. Now, if this is your first time using Claude Code, no problem, let me give you a really quick crash course on how this works. Essentially, you want to download one of two pieces of software, both are going to be free. One is either Google's Antigravity, the other is VS Code. These are both code workspaces. This is essentially what it looks like when you open it up. It's kind of a misnomer, because you hear code in the word, you're like, oh my gosh, this has to be super technical. But it doesn't have to be technical at all. You don't need to have any technical experience. All you have to do is be able to download the application, head over to the uh section right over here called extensions. And then search for Claude Code for VS Code. It's the same name in both apps. Download it or install it, and you're good to go. You now have access to Claude Code on the sidebar. You can create a new session. You will have to log in to an account here in order to actually start using it. Okay, cool. So that's the very quick crash course. Now what we need to do is actually build the site. In order to build out a site, we always need to start with a folder. So anytime you're creating a website or a project or anything inside Claude Code, we need to choose open a folder. Okay. And I am going to create a brand new folder. This is going to be called Design. And it will be empty. That is it. Now, circling back to Claude Design, we can copy this command, and we can literally just paste it into Claude Code right over here. Okay, sweet. So we're going to paste this in, but there's one additional prompt, there's we're going to have to add to this in order to literally one shot this into a beautiful website. Can you please build this Claude design website using next.js, and can you use the library Gsap to be able to add animations to the page, wherever appropriate? I want to add as many beautiful, stunning animations as possible without it looking cheesy. And I want you to read the Claude.md file to do it in one go. Cool. And so this is our prompt right over here.
[11:03]It's going to literally one shot this entire website. There's just one additional step that we need to do in advance, and that is adding one file here. It's called the Claude.md file. This is actually what I referenced in this particular prompt. Okay. And what this is, is you can kind of think about it like an instruction manual. When you hire an employee to work at a job, you need to tell them what it is they're doing and how they need to behave. And this is the exact same thing for Claude Code. And in order to get this file, it's going to be down below in the description for free. There will be a free link to my school community. Okay. And in there, there's going to be a file like Claude.md web app. All you have to do is open that up, copy the code, and then paste it in here. This is the blueprint or the the system instructions to actually build this out properly. Once that's good to go, we can fire off this, and it should be able to clone this entire design in one shot and add animations to it so that we have a fully functioning website. All right, so the website is up, and in order to view it, we can click this local host link right over here. Sweet. So right away, looks pixel for pixel perfect. If we were just to compare it over here to what we've already designed, looks pretty much identical. But the difference here is that we've also added a ton of animation. So if I refresh the page, we can see the text flying in here, all the buttons floating up. One of my favorite things is actually this right over here, this slider, and all all this kind of stuff happening. Even when we like scroll up and down the page, you'll see that the brand partners are also moving as well. And it continues all the way down the page, like these numbers scrolling up as well. So there's a lot of cool stuff you can do. And the best part about this is that we didn't have to do anything ourselves. We got an external library to to do this, and Claude Code literally built the whole thing. What that is is GSAP, and we included it in that prompt, and it just layered it into the website. But there's a lot of cool stuff that you can do here. So I just went to demos.gsap.com/explore. You can go to their website and find this pretty fast. But essentially like all of this kind of stuff you could really easily add to your website. And this is all using the same library that we already reusing. And you just ask Claude what you want it to build, and it will go ahead and do it for you. Cool. So that's just a couple demos of the things that you can do with the library like this automatically, using GSAP and Claude Code. So now that the website's been done, everything looks great. We need to actually get this online so that other people can view it, because right now, it's a localhost environment. And what that means is that all we're doing is we're rendering static files. So all these files here, we're rendering in the in the browser, but nobody else can actually view the site, it's just us that have access to it. So how we do this is a two-step process, and both pieces of tech are free. First, we're using GitHub. This is like Google Drive, um, but for code, you just upload code online, and then it sits in the cloud. And then we can access that code in GitHub in Vercel, and Vercel just pushes it live so that we actually have a website where anyone can view it anytime, anywhere. Okay, so that's essentially it. In order to do this, what we're going to do is we are going to uh head over to GitHub. So I'm going to type into the browser GitHub. Create a new account if you haven't done so already, that is free, and we'll create a new repository. So this is going to be called Design. And you'll probably want this to be private so nobody else has access to your code. And then we'll create that repository. And literally, all we have to do, in order to get this live, and up, is just copy this code here. So we're going to hit that copy button. Okay. And then back inside Claude Code, I'm just going to send a message. Can you please upload all the code in this project to GitHub? Make sure to deploy it all in one go. Cool. So it's been completed. If we refresh the page, now we can see all of the code from our project here, inside of GitHub. So this step is done. The next step is to head over to Vercel. And by the way, this is also for free, you just need to create a free account. You can add a new project up at the top right, and we need to connect in to, um, we need to connect in Vercel and GitHub so that we can grab that code from GitHub and then deploy it live. So I've already done that. All I'm going to do here is click import, okay, from that project. And the only thing that we have to do here, the only thing is just change this application preset to Next JS. This is very important. And then once that is done, we can hit deploy, and our site's going to be live in a matter of a couple seconds. Cool. So the website's live, and to view it, you just got to click this link over here. Which is called Claude-design-chi.vercel.app. That is one of the least flattering names you can have. And immediately, that's going to make it like five times harder to sell any service to a client if you refer them over here. So what you can do, instead of using this awful, horrific, horrible name, is you can add your own domain. How you do that is on the left-hand side, head over to domains, you can import it from GoDaddy, or you can import it from Namecheap, or wherever your domain is, or you can buy one straight through Vercel as well. So that's it for this video, you guys. Thank you so much for watching. If you found value in this video, make sure to hit that like button and subscribe button. All the blueprints are going to be for free in my free school community. I also have a paid school community, where there's two transformations. If you're looking to build your own AI automation agency, I'll help you find, close and fulfill your first deal in 30 days or less. And if you don't want to have to deal with anything, and you have a business, you can reach out to my agency, and we'll help you there. Thanks, guys. Bye bye.
