Insane Claude Design Skills You Need for $10,000 Websites

0:00 Claude is the world's number one design agent for building beautiful websites. But just because your site looks pretty doesn't mean that it will sell or get customers. For that, you need to use the

0:12 correct skills. And in this video, I'll show you the most important ones across seven levels so you can build beautiful websites that are mobile optimized, sound like they've been written by a

0:22 human, and have the correct structure without the need to be a design expert. So, if you haven't already, grab that beautiful coffee and let's dive straight in. So, level one is finding the

0:33 standard. Now, building a beautiful website isn't actually the hard part. It's the other stuff around it. And I'm going to cover those seven skills here. And by the end of the video, you will

0:42 know everything you need to know to build websites that do actually sell or just significantly level up your website, including all the psychological things that I've learned from doing this

0:53 myself that you're not going to want to miss out. So, how do we find out what the standard is? Well, we need a great reference point. And one of the best resources I found for this is going to

1:02 be referral.design. And I'm going to timestamp everything down below. So, you can go to any section you like to, but I encourage you to watch every bit because it's going to have stuff that you

1:10 probably haven't seen before. So, what I would encourage you to do at level one is effectively find a website in your niche that is gold standard, that has won awards, that is converting

1:19 customers. Now, if I come on to this section here, the one that I'm going to be using this one is going to be Mintlify, which I think is a beautiful and gorgeous website. As you can see,

1:27 it's got a nice background here. It scrolls down, it shows you. Now, what this has done is given us the design DNA, the design blueprint such that we can actually understand what makes this

1:38 design fantastic. And when we give that to Claude, we can build a version for ourselves. So, now we found a great design, and it would be awesome for us to have that. We're going to do

1:46 something that most people never do and that's think about something beyond the homepage because to have a great website what we need is a full structure. So there's a couple of ways to do this. You

1:56 can build the site and claude. One of the cool tools that I've been using a lot recently is something called Reloom. Now Reloom is kind of like this really decent. It's built by designers. It's

2:05 got loads of individual kind of like design knowledge baked into it. But it's very cool. Now with Reloom we can actually get full site maps like this. And this is what I want really. I want

2:14 to get a bird's eye view of my website because if we're handing this over to a client or building it ourselves, people aren't just going to stay on the homepage. They're going to click into

2:22 different things, right? We're going to need a wireframe that explains what everything looks like. We're going to want some idea about what does design look like, and we need to give it a

2:29 brief. And I found really to be the fastest way to get this up and running. You can do this in Claude if you want to, but if you want to do it quicker, you might find this very helpful. So,

2:36 there's two ways we can do this. Number one with this skill at level two is you can do export. So if you click on export for example, what you can do is come over, click on a new project and then

2:45 effectively you can describe it. So I might say hey that I want you to build for me a roofing company that is bestin-class using the below design principles. Then once you've done that

2:55 come down and literally just paste in that URL that you grab from this website right here and you can if you want to also just copy and paste all of this and just drop it in. Then once you've done

3:03 that you'll actually get a site map that's generated from Room. And I think this is really cool. Now, one of the reasons why this is really handy is we can actually move these sections up and

3:12 down. So, remember an ounce in print is worth a pound in post. So, we're still going to make this look amazing, but what's great is that we can actually think through what does our site map

3:21 look like? Will about us page, a services page, projects, blog, contact us, everything. We can look at the wireframes, which is fantastic. And then on the wireframe section, you can

3:31 actually just see what all of those different things look like. We can move them around. We can edit them in the left hand side. It's really great to spend a few minutes going through and

3:38 building out everything you want to. And of course, we've got the style guide based on everything that we gave. We've got the colors, we've got things that we can change. If we don't like seller, we

3:46 want to change something else. We can do anything we want. So, it gives us this allin-one platform effectively to kind of build any website that we like. Then, once you've got to a point where you're

3:55 really happy with the wireframes, what we can do is come over to top right and click on export. And you can export this directly to Claude design, but for the purpose of this, I'm going to export it

4:03 via HTML. And then you want to come back over to Claude, upload that zip file and say, "Hey, I want you to go ahead and build for me a beautiful website using this link based on the zip file and all

4:12 the design systems that we got from Breloom. And what we can do is also grab this reference link." So Claude's got access to the original. And then you want to go ahead and grab this design

4:20 loop skill. It will be the second link in the description. Once you click on that link, you will land on this page here, which is where I keep all my free resources. Again, it's 100% free. You

4:28 come in basically, and then you'll see the video here. You can literally grab it for free. So people get a little bit confused. I just wanted to explain where that that is so you can come and grab it

4:36 there. Now what this design lip does, it helps us basically basically inspire and get the style that we want to using some really cool techniques. All you're going to do is copy it all before if you

4:45 haven't come back over to Claude, drop it in, and then let Claude work its magic. And side note, by the way, you can actually do all this in Room if you wanted to. If you click on publish at

4:53 the top left, it kind of functions as a full CRM system. So if you look at the one that I built earlier, for example, the roofing code website, you can see you can build everything. So, one of the

5:01 big things that people struggle with is a CMS. So, it's the exact same thing. You've got the brief it builds out for you, which is really awesome. You get the full site map here. You get the

5:10 wireframes as well, which you can edit in a million different ways. It's super intuitive. And then you've got the designs that you can play around with. Then in the top right, when you're done

5:17 with it, you can actually publish it like so in a click. And then you've got this continue and you can view it in a new window and have a great time doing it. What is really cool just very

5:25 quickly if you're doing it here if you click on for example library you can see the images you've got styling over here but if you click on this little settings here you can edit the pages like so you

5:33 can see the meta title meta description it's just it's an easy in the box way if you wanted to go ahead and do that but we're going to do now is come back over to Claude and see what it built for us

5:42 but Claude is not going to be able to get us a beautiful website that looks anything like this unless we give it the ability to generate beautiful images with the latest models. How do we do

5:54 that? Well, the one that we're going to be using here is Higsfield. I use this all the time. All the images you see in my websites, presentations. I use this. The really cool thing about this is we

6:02 can actually connect this to Claude so easily. All you're going to do, and I'll put a link down below. So, you can click it and just grab you can screenshot this if you want to or just grab the URL.

6:11 I'll just give it the URL I post down below. Now, what we can do with this is build images in the best models, best videos. But effectively what's really cool about it once you screenshot this

6:20 will copy the link. You just let Claude know hey I want you to connect to the Higsfield CLI so we can create beautiful images and videos. Here's the link just like that and it'll open you up in a new

6:29 browser. You sign in and then you're ready and able to make the magic happen. And when I tell you that using Hakesfield on websites isn't just about 3D animations. You can literally build

6:40 things that look spectacular stuff that you wouldn't even really think. And I'll show you exactly what I mean in a minute. So then we have this beautiful website which again we built the

6:50 structure. This is the step that everyone misses guys building out the site map and the structure because one pages are cool but no one just buys a page right they need buttons to click on

6:59 if you're selling this for a roofing company if you're selling this to any business at all. They need to have this sort of stuff locked down which is great. We got that structure. We got the

7:07 best design system. We got the images and videos and then this is what we've got from that. It's built as a logo, which is awesome. And again, one of the great reasons why we bring in Hicksville

7:15 because we can just build these logos as we go if the client doesn't have it. And you'll notice it also copies the exact style here with the green and the black, which is what we wanted to be inspired

7:26 by. And we've got that, which is awesome. So then we can come down and have a look. This is a nice thing. We've got this beautiful animation. We've got the companies that we're working with.

7:33 Nice bit of animation here, which is awesome. And in fact, what's really cool, you can see as you refresh it, these animations pop up. Build the same thing. That's really crisp. And then

7:42 we've got these different businesses we work with. Anthropic, Slack. Obviously, these are examples. I don't know if Stripe is paying us to do the roofs. Well, at Ridgeline, guys, they are at

7:50 Ridgeline. We work with the best AI companies ever to give them the best roof. Don't you ever forget our roof abilities. Loved by your favorite companies. This this is really crisp,

7:59 guys. Like, this is just the design on this is fantastic. And look at the adherence, by the way. Look at the adherence to some of the features here. So, if you can come down and see

8:08 actually as it scrolls down, look at the scrollability at the bottom of this. You see this? I just love how it's kind of like done its own thing, but kind of understood why that looks good and why

8:17 that's so crisp. I mean, it's just such a beautiful design. Then you can come back. We've got this here. Find out what is actually wrong with your website. And then we've got all this stuff here. But

8:25 it doesn't just stop there. Now, we've actually got the website. So, we've got different pages and stuff that we can play around with. So, we can click on things like services and about us and

8:34 build these pages out. and it's just got the whole site map that's been developed now by using these tools. Now, believe it or not, this is just the foundation. Level three is where we take it to a new

8:43 level. Now, to reiterate, we've got the site map. We use Room to get basically one brief in. We got site maps, wireframes, which is cool now because if we ever want to build out the website,

8:51 we can do it in one location, which is super handy. These are humanmade components. They're not necessarily AI generated, which is awesome, and it's going to help us have a really

8:59 consistent style with all the beautiful websites that we build on. Level three is the scroll stopper. You know, this is a classic example. I built this again using Hixold video generation. It's

9:10 beautiful. It's a showstopper, but everyone thinks of just the website, but there's so many different ways that you can actually create attention, especially if you want to drive lots of

9:18 conversions, and these do convert. They are beautiful, but there's many ways, as they say, to skin a cat. So, for example, if you come over to a website that I'm in love with recently, which is

9:25 save with two E, many E. You can see these beautiful designs. But what's really cool is you can search for inspiration. So, I could come down and like I've said before, I might say

9:34 dashboard UI. So, let's say that we're building out a dashboard together, right? And we want some inspiration. You you can look at Pinterest, but everybody's on Pinterest. Although

9:43 Pinterest is cool to be fair, you can find beautiful things. Let's say I want to have a sign up form, right? Maybe we want to add something interactive to our roofing website essentially so that they

9:55 give their information, but then what if we could have a beautiful, you know, get them a quote, some kind of lead magnet. Well, we can find beautiful designs that were inspired by one such one that I

10:04 found that looked amazing was this one. But what's the problem with this, Jack? The problem with this is this is not a component. This is not a UI thing that we can just grab. We need to literally

10:14 basically create this, but in the style for our own website. So, all we're going to do is we're going to copy this image like so and head over to Claude. And just like before, you're going to do

10:22 forward slash. You type in design loop. And essentially, you're going to come down and say, "Hey there, I want you to make a roofing version of this." And what I would like you to do is enable

10:33 them to upload an image of the roof, answer a few questions, and then I want a beautiful Siri like animation to play and then actually show what the price is for them, and we can capture that

10:43 information. Okay, give it that prompt, drop it in the image, and then let's go find a Siri type animation. And just like that, guys, I've got one here. And that looks freaking gorgeous. I like

10:54 that. I want to what? I don't know what that is selling, but I want to buy that right now. So, I'm going to come down. I'm just going to download this as a kind of video overview suggestion for

11:02 Claude to use. And just like this, guys, we now have a free quote for your roof, which is cool. So, we can upload an image if you want to. Got a postcode. We'll just check out what it looks like.

11:11 Click on get my price. And then here we go. We got our animation. It's checking pitch and tiles, price of materials. Almost there. having a look around. I mean, you can just see how fun this is,

11:20 right? Bam. £7,150. And then it's got some different things here for like reviews and you can book the free survey. So freaking cool. I mean, when you have the right skills,

11:30 you can pay the bills, as they say. No one said I'm not saying I'm a rapid just cuz I'm wearing this like funky jumper, but you get the idea. Now, this didn't exist until we built it. One of the

11:39 reasons why this is so cool, by the way, is like at the bottom of the image, you can see I hold it here. It's got white. Now, ideally, these drops would have finished so it looks like a true blend

11:47 in, but it's kind of phased out a little bit. So, it just gives it that nice kind of beautiful blend. And that's awesome. I get my quote. It's done some cool AI analysis, which we can bake in the

11:56 website. I'm using various different like skills which are quite easy. And then we can just add this to the website. And by the way, if this sounds like I'm speaking in design Spanish, I'm

12:04 going to put a link down below for my full core code master class that will take you through foundations. It will take you through building websites from zero to deploying them, power features,

12:13 memory systems, Hermes agent, apps, building anything, monetizing this stuff, and I'll also show you the full and beautiful Claude code operating system that has all the bells and

12:22 whistles, the memory systems, the cost saving, the design OS, a million other different things that you definitely want to have a look at if you want to level up and get light years ahead of

12:31 everybody else. It's not fair on your competitors. I will say that much. It's not going to be fair on your competitors, so just bear that in mind. Now, we've got these scroll stoppers,

12:37 which is awesome. But it doesn't just stop that. We can take this much further. What does that look like at level four, Jack? Well, level four itself, and I'm going to show you all

12:46 these things integrated into the website in a second once we've added a few of the other bells and whistles, and you'll see what I mean when I say that. Level four realistically, is understanding

12:55 that 60% of traffic at least actually is on our phones. I should had my phone out earlier before I said that. A lot of people are on their phones. They're not necessarily always sat down at a

13:05 desktop, but yet most content always focuses on the screen. And I'm guilty of that to be fair to some extent as well because it's just easy to show. But what we need to do is mobile optimize our

13:14 website. Now, how do you mobile optimize a website? Well, to be honest with you, there are loads of skills and I'll I'll put a link down below in the post. But honestly, you can head over to Claude

13:22 and say, "Hey, I want you to mobile optimize this website. go out and find for me the most proficient, well-reed repos that have been battle tested that will make sure that it follows all of

13:32 the best mobile design principles. And I'll put a link down below for my favorite. And essentially, once you've done that, call to go ahead and it'll mobile optimize it. Well, how do we know

13:42 that? Well, we can just do this. Look at it. This is really cool. You can see how at every frame rate it makes a difference. Now, believe it or not, it did it did not look like this initially.

13:50 I had to do this, but look at this, guys. You can come down and see that. We need to just uh fix that a little bit. As you can see, it's not perfect, but look at this. It's a website you can

13:59 actually use and understand on mobile. And again, I can still scroll through these and it's added these different elements in. I think this is great that it's just Look at this, guys. That's

14:07 crazy because remember, most of your traffic is going to be on mobile. And a lot of times you go to mobile, they've never optimized it for it. You can't even read the actual website itself.

14:16 It's even got this nice hamburger thing in. You must mobile optimize your website. In fact, most people and when I did my last tech startup, which by the way, if you are new, I built and sold my

14:25 last tech startup with like a gazillion customers and now I'm building my own AI startup here and I was really big on SEO and building out websites. And honestly, we'd start off with the mobile first and

14:35 then work backwards to get to the actual full desktop version. And there is no substitute, but to actually going through the mobile yourself. Claude can do loads of checks using the Reaper that

14:44 I'll share down below uh in the skills section, but ultimately speaking, you want to go through the website yourself and check it out. and we got this beautiful email address and we're having

14:51 a great time. But then that takes us on to the biggest problem of this video so far and that is what I call the fight against the AI slop monster. I invite you to join me. I am I'm good against AI

15:02 slot but I am one man and I I I would like a team. Now what do we call the dlopification? What do I mean by that? I mean that AI itself, if you ever look at it, has like a really standard way of

15:13 presenting itself. It's so obvious that something's written by AI. And as I showed on my other videos, I built this copy system which is really cool and I encourage you to look at something like

15:21 this because I built this inside my community because I got this question all the time. Effectively, you can just grab information from the best GitHub repos which are the slopification and it

15:31 basically takes all the classic signs of AI writing like Wikipedia for example and it just like runs it all through that. You can run it through GPT 5.6 as well to make it sound way more human

15:41 because most websites these days are written by Claude, hence why they all sound the same. Um, and you can just identify all these classic things that AI does. And then it's underpinned by

15:50 some core psychology. One of the best psychological principles in building anything is this idea of don't make me think. The idea essentially being that when people don't read websites, they

16:00 browse them. What do I mean by that? I mean, I need to be able to glance at it and understand what the website is about. You know, don't take anybody's time for granted. Don't just assume that

16:10 that, you know, you have to earn their time. And if I have to invest a minute to understand what your website is about, it's too much. It's way too much. So general idea, use the system two

16:20 cognition. Don't make me think. Sorry, the system one cognition. Just make it super easy. You want to name the pain. And again, the other thing you want to do is run this through loads of key

16:29 marketing and psychological and sales things. Um, for example, the classic example I always give here, instead of get started, start free. Instead of the fun way to learn AI, everyone uses AI.

16:38 So at level five, you want to do a delopification of everything. So, and my website system brings up some copy here. So, check this out. Again, it just runs through everything. So, signs of AI

16:47 writing. Look at this. Trusted, reliable, and built to last. Six nails per shingle. Every shingle. How cool is that? I mean, it's like it's it's the same thing, but it's just giving a

16:56 practical example. And these are just, you know, the the rules and principles apply to this website. Not just a roof, but peace of mind. Guys, how many let me down below in the comment section could

17:07 tell that that was written by if you saw that you'd be like, "Dude, which AI person has written that a written scope and a fixed number before anyone climbs the ladder?" Yeah, obviously that just

17:17 sounds so much better. Elevated verbs instead of we leverage industryleading materials to deliver unparalleled protection. We source materials from manufacturers who test for wind, hail,

17:26 and sun. Leverage deliver. It's like it's awesome, guys. Empty superlatives, the area's most trusted roofing experts. No roofing and only roofing since 2020

17:36 2001. M dash pileup. Our team trained, certified and local is ready to help. 38 on the crew factory trained for every material we install.

17:46 Which one, genuinely speaking, are you going to click on and be like, obviously that's better. Loved by 10,000 happy homeowners, project names and photography are placeholders. Swapping

17:54 your own jobs before this goes live. Yeah. Okay. That one's just telling me that like I built placeholders, so that one's like not a good idea, but you get the idea. and you get this full

18:01 breakdown explaining everything, the principles, stuff like that. We have to deiify our entire website such that it actually just reads like a human wrote it because I will tell you this that

18:11 what people aren't telling you is the fact that people can smell AI websites coming from 6 milesi away unless you unpin these issues unless you make it non-mobile optimized, unless you make it

18:22 mobile optimized and you're actually kind of like attacking the slop issue which these skills do. But now we've solved some of the text. We move on to level six. Now level six is an

18:31 interesting one and it's icons and showstoppers. What do I mean by that? Now this is what I call UI sniping. And I love UI sniping. Now UI sniping is the idea that we can find any UI component

18:42 that we like and bring it over. Reloom itself is building out a really cool freaking library of stuff that you can just go ahead and grab, which is decent. So cool advantage being it's built by

18:51 designers. Another good example of this is 21st.dev dev where you can basically find different things like libraries, backgrounds, borders, whatever it is. Find stuff that you like and you can

19:00 basically bring them over. Obviously, if you got really, it's super handsy going do that as well. I know that the guys over there are building out all their stuff, which is really freaking cool. If

19:07 you've got the real MCP, you can just ask it or if you're grabbing it from a different website like 21st.dev, you can come down and literally just copy the code and say you want this, for example,

19:15 this design, which looks cool. You just copy the code, head over to Claude and say, "Hey, add this to my website." And then when I come back over the website, you can see I added these things in

19:22 here. Look at this. booked in a week. And look at this. I'll hover over. I can see these customers. 4,800 roofs kept dry. And again, it's just nice little credibility cuz it's just like, how can

19:31 you show that you're legitimate? Cuz that's one of the questions people have, right? You can see I hover over and it's got that stuff here fully integrated into the website and you can move it in

19:39 any direction that you like. And of course, you can also use icons. I'm a really big fan of icons. Um, there's different ones like icons 8, flat icon, Icon Scout, loads of different ones.

19:49 Check them all out. I think the one I'm using right now is flat icon. Again, like not sponsored by them or anything like that. I just tell you like I just think they're pretty cool. Basically,

19:55 you can come down and get like different styles. So, if you're doing a kind of new age cool vibe, younger demographic like um I'd say millennial or like Gen Z or below, you may want to use cool

20:05 graphics and you can just like get loads of different styles, they it only costs like $10 to 12 to, you know, be on one of these websites. And effectively, once you're on there, you can just use those

20:14 icons u based on the license you've got. Again, the I don't know these guys. I'm not sponsored by these guys. I'm just telling you like it's something you can do to just make it look a little bit

20:23 kind of fresh and stuff if that if that fits your design and vibe. But if not, you can just UI sty and make it look amazing. But then that does bring us very nicely onto level seven. Now level

20:33 seven is something that a lot of people miss and that is the SEOification of your website. I know we have loads of different skills on GitHub. I like Claude SEO. It's quite nice. You can see

20:42 this one here. Um it's fairly well reviewed. It's got this I think this guy's a content creator as well. So shout out to this guy. But effectively SEO nerds, I call them nerds. Um I hope

20:50 they don't mind if they love SEO. They basically codify it and you can build out systems that do stuff like this to really help you kind of like run through your website. So what we do is we head

20:59 over to Claude and then you say, "Hey, I want you to go ahead and find for me the best SEO design strategies that exist on the internet and I want you to take a look at this SEO repo and I want you to

21:10 build a checklist and a strategy for my website. The the things that I can rank for. Here are some of the keywords that I want to rank for. here's the kind of intent that I want to do and I want you

21:20 to question me on my customer so that we together can find out the longtail intention words, the short intention words and I want you to rank those based on um basically volume and also

21:32 difficulty. And from that we're going to build up an SEO strategy, a content road map, and we're going to find SEO suggestions for our own website. And once you do that, you're going to find a

21:41 page that looks a little bit something like this. This is an exercise I did recently for Glider, my speech to text startups. how I'm able to talk to things. And I mean, just look at the

21:48 detail of this, guys. Like speech to text, how many people search it, the demand index, how hard is it? And it just finds those nice um kind of sweet spots. Again, got 28 keywords that we

21:58 should rank for. Longtail stuff like Whisper Flow alternative. Um every other it's just really, really helpful. And you can use this to build out a content strategy. I mean, this is just literally

22:07 the stuff that I'm doing in my own tech startup right now. And you can use AI to do this in any of your websites or systems. And then to post it, you just need to basically tell Claude to upload

22:17 this to GitHub in a private repo. I've got full tutorials on the channel. I'll put links somewhere to show you the process. And then you can run the entire thing from Versel. Versel hosts

22:26 everything. It even hosts many of the websites that I show you on this channel. Super duper easy to set up. Explain to Claude and it will explain it to you step by step. But this does bring

22:35 us on to a problem and that's the fact that these design skills are handy and they do help us build beautiful websites that sell. But the truth is, if you don't have your own design operating

22:45 system, you're leaving way too many hours and productivity and value on the table. Which is why the next thing that we need to do is learn how to set one of these up, which we're going to do in

22:55 this video right