Claude Design: Effortless Websites For Rookies

Anthropic strikes again. They just released Claude design and it might be the best design system that I've ever used. What we're looking at is an 11 Labs design system that Claude design scaffolded out for me in under 5 minutes. And the craziest part about Claude design is that it comes baked into your normal Claude subscription. So, you don't need another subscription if you want to try this out for yourself. In just the past couple of months, the way that I've built websites using Claude code has a evolved three times. The old way of doing things was screenshotting inspiration that you liked and sometimes inspecting the page and grabbing more context for Claude this way. Was it effective? Yes, but did it take a lot of time going through and grabbing the code and copying all these examples? Absolutely. The second evolution was using Google Stitch. Very similar to the first process where you'd grab an example and you'd feed it to Stitch. And you would ask Stitch to create a similar look-alike for whatever you wanted to build. And this was great because it didn't cost you any extra tokens with Claude. Stitch is completely free and the interface allowed you to directly edit everything here. And yeah, it's a close runner-up to Claude design. You can take the code, give it to Claude code and further iterate, but there are three main reasons why Claude design takes the cake. The first massive upgrade is Claude design capture. This enables you to take any sample from any website and feed it directly into Claude design. I can grab this box, copy it, then just paste it right here and it has context on that box that we just captured. And that's not the coolest part. We can directly hand off anything we build here right to Claude code. Having everything in one ecosystem makes life so much easier and it follows my main philosophy when using these tools. Find your biggest bottlenecks, use one tool and solve that problem using that one tool so that you can fix your issues and become extremely dangerous with one tool at a time. And that leads into the third reason which I already mentioned. It's already included in your subscription. So, if you continue watching this video, I'm going to give you access to 68 free design templates for Claude design, show you how to install them into Claude design and scaffold out your ideas. We'll navigate the platform a little bit so you can understand it better and then I'm going to show you how to import it into Claude code to further iterate with some quality of life tips in between. Now, what we're looking at is awesome Claude design. This is where you're going to find the 68 templates that I told you about. And this repo wasn't released too long ago. It's got 1.6 K stars already and if we scroll to the bottom, they have the collection of all the examples that you can look through all in different categories. And for example, the 11 Labs one that I showed you, it'll pop open just like this and when we scroll down, we can see the 11 Labs example. So, you see the color palette, you can see the different types of font that are here, the button variations, the card examples. I mean, everything that 11 Labs website has to offer is in this design template. So, your job is to figure out what you want to build and look through the collection and find the template that's going to work best for your project. And there's two ways of going about this within Claude design. Option A, which is the one that we're going to go off of, is starting from a design system or you can start from a prototype. Pretty much leading to the same end result. But find the template that you want, click download for Claude design and the file should show up just like this. To get to Claude design, it's claude.ai/design. And once you're on the platform, all you're going to do is click design systems, click create, scroll down to the bottom and you'll see this portion right here where we're going to drop the asset we just downloaded. So, just drop it in right here and continue to generation. It only took 5 minutes. I stepped away, I had a cup of coffee and I came back. And then when it finished, I had the 11 Labs design system right here. So, I clicked this little button, I came up here, I clicked share, then I handed it off to Claude code. Then it's going to ask you to just copy the command. Then I just pasted the prompt inside of Claude code and then I told it where to place the file. Quick life hack, I run a poly repo type Claude code workspace and I have a website folder and I already ran this before so it created the folder for me right here. And then when it was finished putting the files together, I asked it to boot it in local host. And it's all set up for you. So, if you want access to this repo, it's linked below in the description. And that's probably the simplest way that you could be using Claude design. I also offer over 30 free assets and guides that you can download from my website linked below in the founders toolkit. So, if you want access to some of these other tools, feel free to visit. And if you want to go even deeper with me on all things Claude code and maybe even grab my entire setup for yourself, consider joining my school. There's no pressure to join. I do have the free assets available for you, but if you do want access to beginner-friendly and intermediate to advanced training on how to use these systems, consider joining. Not only do we deliver the training for you, but I show you how to sell what you build. I show you how to build all sorts of different products. I show you how I use Claude code to gain followers on my social media and get millions of views every month and we discuss it all live on Zoom together every week. So, now that we have the basics down, we know how to build a design system, we know how to get it into Claude code as well. But if you want to actually scaffold out a new website using this new design system, you can come back to this page with a new prototype. I would click high fidelity and click create. We already know what this design system looks like and this is the Claude design capture feature that I told you about. So, maybe there's some extra inspiration you want to grab from some other websites that you found and you want to plug them into here so that you can iterate off of the base design system. And keep in mind, the design system isn't the website itself. This is just a template that you can use over and over again to build all sorts of different assets. Not even just websites. You can use this to create slide presentations and every other asset you could possibly imagine. Now, if I were you, here's what I would do. Drag over the design system that we just built out into a new chat and run the seed plugin to IDA and figure out how to build a website from this template. If you want to learn about seed and how it actually works, just look in the description below. I also tagged that video that I did with the creator of this plugin. But just drop the file and then add some context before we run seed. So, drop the file and ask it to use this template to create a prompt for the website idea that you have. And then just add the fact that you're going to feed this prompt into Claude design so it only gives you a prompt. So, we can see it actually gave us a whole prompt here so you can read that and see if it actually fits what you want, but I'm going to take this for an example. I'm going to feed that into this and I'm going to full send it. Now, after about 5 to 10 minutes of just waiting, it came up with a whole new brand for us called Vox Council. It gave us some copy here and keep in mind, when it creates copy, you can always take this, hand it off to Claude in the same way and you can use any sort of copywriting skills that you have. If you have your own brand voice, you can use that and have it update this. So, I wouldn't worry too much about the actual language here. I would worry more about the actual design over everything else. So, up here what we can see is edit. This is where we have the opportunity to actually change the individual portions. So, maybe I want to call it Charlie Council instead. I'm definitely not running with that, but that's the idea. And you have all sorts of different things that we can change here. I wouldn't change the typography, especially if we pulled an example from the repo. I would leave these things alone, but you're more than welcome to mess with it because you do have the capacity to do so. And if you've ever had the desire to just feed an example to Claude and say, "No, you're not updating the thing that I want." You can actually draw here now and give context and talk to Claude about what you're seeing and send it so that you get close near updates when dealing with Claude about what it should do on the design. And you can grab that feature by clicking the draw button right here. And there's also little micro tweaks. This is a really cool feature. You click this and then you can describe what the tweak is and I would say it's more of a small update that you would make on the design than anything else. So, let's say I didn't like this right here and I didn't want to manually edit it. I could just type in, "Hey, let's move this up a little bit." And then I can just send it. And notice over here, it does exactly what we wanted it to do with that exact screenshot. Okay, so it made a micro adjustment. We're not going to be adding any links here. We're not going to be doing any of that work other than just design. And that's pretty much everything in a nutshell as far as navigating Claude design goes. So, what we discussed before was handing things off to Claude, copying the command, coming back to Claude, booting it open. Now, in Claude code, you would just feed the prompt. So, it's going to pull the design from Claude design and I just told it to add it to my website folder and call it Charlie Council. And now inside of my websites folder, I'm just going to create something called design systems and I'm actually going to move this one into here. So, these are the actual websites that I've built out and this is the design system. So, I can bring this into conversations for reference. So, we have a lot of flexibility when using Claude design, getting those design systems, using it to build websites inside of Claude design, but we can play around and grab aspects from the design templates inside of Claude code for further iteration. And there's no right or wrong way of doing things, but as far as the three evolutions of this process in the past couple of months, this is by far the best way to do it. So, we see the folder here and I could just tell Claude to boot it open in local host. So, we see it right here. We can open that and here is Charlie Council. And this is cool. It has a little bit of a like productized demo where they can see how much money they're uh they're recovering in revenue from after-hour dials. So, let's say I really maxed out the design. What I would really do with Claude now is just chat with it and get it to use some of the copywriting skills and my humanizer skill so that I can get the copy exactly the way that I want it and create all the links and get it functional. At this point, I'm just giving you additional game for free. and when you build a website like I have an opt-in here, it goes into my CRM, and I'm able to do email sequences, just automations through GoHighLevel. And if you guys want more information about this, consider joining the school. I talk about all this in depth, but these are workflows inside of my CRM for all sorts of things, appointment reminders, just general email campaigns, and you can talk directly with all of your prospects in here, as well as manage your entire pipeline. For example, this is for my agency. But the first step in actually getting your website live, I'm going to give you a quick little crash course, is going to GitHub and creating a new repository. Name it what you like, give it a small description, make sure you make it private, and create the repository. Up here at the top, we see our link, come to Claude, tell it to push this site to that link that you just grabbed from GitHub, and send it. While that's going down, there are two ways to host your website. I would recommend Railway. I've spoken about Vercel before, but you could use Railway or Vercel. I'll show you how I use it on Railway. I have a paid account because some of the free options are going to run a bit slower, and when you're trying to optimize for conversions, you don't need your site running slow. So, you'd click new, and when you create an account with Railway or Vercel, you want to make sure you log in with the GitHub account that you created, so that it can auto pull the repos that we find like this one here. So, notice it's actually deploying the site for us now, and we can see it was pushed, so Railway is going to be able to pull this and deploy it, and it's going to deploy without a domain name, so it's not going to be like www.charliecouncils.com, or whatever. Then in Railway in particular, you'll see right here, we have a link, so we can come up here, we can paste that, and now our site is deployed, albeit without a domain, but it's available for us now. And now, every time I make an update inside of Claude Code on this project, and I ask it to push an update to the repo itself, it'll make the updates here, and then it's going to redeploy the site on Railway, so every up- date that I make is going to push the update on the main site. So, yeah, fam, we're living in some crazy times, but that's the full scope of how to use this thing. If you guys want some deeper insights, consider joining the school, but this is pretty much everything you need to know about Claude Design. It's going to be your best friend when designing any sort of creative asset that you need. And if I've given you some value, please like the video. It's the best way to support me, and subscribe if you enjoy this type of content, because I do one to two videos like this every single week on all things Agentic Tools, specifically Claude Code. And on that note, I will see you guys on the next video.