I Built The Ultimate Claude Website Design Skill (steal this)

0:00 I think I built the ultimate claw design skill for websites and I'm going to give it to you guys for completely free. This thing helps you figure out what type of website you're looking for, generates

0:07 you all the assets or takes the assets you already have and then creates an interactive scrolling style of website. So, it's not just your generic AI slop. You can see in this one we're literally

0:17 going through a journey because this is like a travel agency that's trying to get clients to book in with them. Here's my original website that I had built with Claude. It's it's okay, right? It's

0:25 nothing crazy. And what I did is I said, "Hey, Claude, look at my website. use this skill and transform it. And this is what it created. It kept all the same copy. It kept all the same branding and

0:34 the same feel, but it turned it into something that's way more interactive and it almost like hooks you in to make you want to keep scrolling through the rest of the website to actually see

0:42 what's to come. It has a way more premium feel than the way that you typically get your websites if you're building with Claude. So, I call this skill scroll craft because the whole

0:51 idea is that you're actually having this hook in the viewer by making the scroll correlate to something that's going on on the actual page. So, on top of the idea that Claude should always be

1:00 looking for opportunities to make the scroll feel interactive, there's also design elements in the skill as well. Things like spacing, typography, feel, taste, all that kind of stuff. And what

1:09 you'll notice about the skill is it's not just one specific template, right? Every single one of these websites that I've shown you guys so far comes out a little bit different. And that's why the

1:17 interview section of this skill is so important because it asks you, what type of website do you want? What do you want the field to be? It really thinks about the user journey when they would

1:25 actually open up the site and scroll through. It's almost like short form content. If you don't get hooked right away, you're not as interested. You can see some of these are super professional

1:32 and super editorial, like this one. This is a very like trusted feel, but it still has a bunch of scroll animations and it feels more premium. It just gives it so much more depth when there's

1:40 something else going on. Love this little animation right here. And hopping back over to the perk form example. I had it generate two versions for me. So, this is the first one. They both keep

1:48 the consistency in like the color scheme and the vibe and the actual copy that's trying to be communicated through. The entire site doesn't have to be super flashy and animated. This one was mainly

1:56 just kind of like that first hero section. But here's another version of it that's a little more simple at the front because we're just zooming in a little bit. And then we get into this

2:03 thing where it's like we're only focusing on one thing at a time and the user is scrolling through and the user is in control of what they're actually going to be looking at. And now we can

2:11 see the three different product shots, the three different flavors and the call to action at the end. Anyways, there's so many different examples that I've generated and you can see that they all

2:18 just have different vibes and different styles, but they all are still unique, right? like they're going to make the client remember your business. So anyways, let me quit yapping and let's

2:27 just talk about how the skill works, how you get it, and let's do a live example together. So real quick, if you want to get the skill, it's completely free. Go to my free school community link in the

2:34 description, go to the classroom, click on all YouTube resources, and everything that I give away for free ever is always in here. So just hop in and grab the skill. And so in this video, I'm going

2:42 to be using the Cloud Code desktop. I'm also going to assume that you have a little bit of Cloud Code knowledge. So if you're just starting out at the complete beginning, go ahead and watch

2:49 the 6-hour course I have or I guess it'll be up here for non-coders. watch a little bit of that course, get familiar with Claude Code and then come back in here and build some crazy websites. So

2:57 that skill will be a plugin that you can install or you can actually just take the actual folders and files and put it into your cloud, whatever you want to do. But now you can see if I come in

3:04 here and I type scroll, we have the scrollcraft skill which says to build a premium scroll driven interface landing page for any business. So whatever type of product you have or service, you can

3:14 do it in here. We saw a ton of different examples. We saw physical products as you could see. We saw a personal branding website which was for myself, another agency that was like travel. So

3:23 you can do a lot of different things with this skill. So let's actually make a real website for myself for AI Automation Society. So right now this is AI Automation Society's website. We've

3:31 got this nice little globe animation up top, but then there's nothing really too special. There's a few pictures. We tried to make it look, you know, at least sort of branded and trusted, but

3:39 there's nothing too engaging at all. I mean, some of the cards move a little bit, but let's try to like redo this website. So, I'm looking to use this skill to redo my AI Automation Society

3:48 website. I'm looking for this one to be premium trusted. I'm looking for this one to be more editorial rather than a bunch of different AI generated assets and not like a a world that we'd be

3:58 flying through. I'm looking for this one to be more premium. I'm basically just going to start off like that because the first part of the skill is going through sort of like an interview process to

4:06 really understand the type of vibe you're looking for because like like this one, right? This is a bunch of AI generated assets that creates us like this flying world effect where we have

4:15 like we're bouncing around. This one also has AI generated assets, but it's a bit more um like hypy. It's a bit more energetic with, you know, a product that we're trying to sell, a physical

4:24 product. So, I think the vibe that I'd be looking at for this a Automation Society one is maybe something a little bit more like this that has like subtle animations and subtle scroll. So, you

4:32 can see we're not starting from zero. It has our site, it has our brand assets, and it has other builds that we've done. And now it's going to interview us. So right now, let's say you have no

4:40 business at all. You don't know what you're going to build a site for. Just go ahead and do everything with AI generated assets just to play around with the skill to see how it works. And

4:47 the way that this skill specifically does it is it uses key.ai. So if you've never used key.AI, it's kind of like open router but for like image and video models. You can choose between all these

4:56 different ones. So if I actually go to my logs real quick, you can see some of my most recent generations were um results that we just used. So this can thing, we also have like the the phase,

5:05 we have the cup, we have all of these assets that we've been generating for these websites, videos or images. And all you have to do is go into here, grab an API key, and then put that in your

5:14 environment variables of the Cloud Code project, and then it'll be able to just hit this for all of the assets that it needs, and it will fill in the gaps. It'll automatically create images, and

5:22 then turn those images into videos, and it will stitch the videos together. It'll do whatever it needs to do because the skill tells it how. But here we are. We have some questions coming. So what's

5:30 the scroll journey? What does the visitor hit first and in what order after that? So, do we want to open with the proof receipts first like these big stats? Do we want to start with Nate's

5:39 story? Do we want to start with inside look? I think we want to just start up top with the receipts. That's what it recommended. Then it asks, "What must the visitor believe by the end? One

5:46 sentence, not a feature list." And so, what I'm actually going to do is kind of like put in a mission statement here. So, I'm just going to paste in what we say. Go ahead and hit next. What real

5:55 assets do you have? This decides how much gets generated versus graded from what you own. photos of us and events, community screenshots, workflows, what do we have and what does it need to go

6:06 generate? Just use the pictures that are already in there. So like there's one image of um me speaking. There is also an image of like all of us at one of our events. It's like it looks kind of like

6:16 a Zoom call, but those are the only two images I gave you besides the one at the bottom that says meet our founder and the merch image. So those are the images you should work with. But actually, it'd

6:25 be cool if you generated a few images of like like if you generated images that weren't necessarily photorealistic, but they were sort of like looking at educational environments. So maybe like

6:36 a nice style of I'm blanking on what the style would be called. I guess maybe I'm thinking this like low poly geometric. I guess we'll try that. Like a minimalistic geometric lowpoly human

6:47 figures. you know, if there were maybe scenes that go along with the certification or the events or AIS plus like people having wins, people teaching each other, people working together,

6:57 just keep it minimal and make it match the color scheme and the brand guidelines of AIS. But just something else to give it a little bit of flavor here that we can sync up with some

7:04 scrolls. Finally, it says one thing this site should do that no sites you've seen does. This becomes a signature move. Every claim has a receipt. Nothing on the page is asserted without a source.

7:13 Yeah, I guess we'll go with that one for now and hit submit. So, that's where you can get really, really specific. And the better idea you have of like what you want, feel free to put that in there.

7:22 But if you don't have an idea, that's the beauty of this skill is it knows a bunch of taste as far as like what makes good scroll animations. As you saw all those examples I showed you, there were

7:32 so many different things. Like here's one I didn't love, but this one has at the end like some really cool things where it looks like um like flight cards, right? It looks like these

7:41 departure cards and the destinations and we see this syncing to the scroll. So really what's important to me is that everything on the site basically the user is in control with their mouse

7:51 because they're basically controlling what's happening and they can go backwards, they can go forwards and whether that be controlling like scrolling images like that or actually

7:58 just having like numbers fade in or appear like that or this image kind of like fades out as well. It's really just about that idea of the scroll sinking to something. Few more questions here.

8:08 Where should this page feel calm and where should it feel intense? I'm just going to go through some of these other design questions and then um I'll check them into you guys when anything

8:14 interesting is happening. Lately, I've been finding that you can really instruct AI models a little bit more emotionally than you used to in the past. Like I'm telling this thing what I

8:21 want it to feel like and what I want the motivation to be and it I really have it thinking about if it was the user and clicking through and scrolling through what would it feel and how do we sort of

8:30 like manipulate that emotion as much as we can. But anyways, this thing is building now. I will check back in with you guys when we have something to look at. One thing I want to call out here,

8:38 after it started generating some of these images and stuff with key.AI, it started to build the website. And now that it's building it, it does verification. So it says now the part

8:47 the harness can't judge, zooming into key frames. So it's literally taking screenshots of the site and it's going to investigate and inspect them to make sure that nothing is off and nothing is

8:57 wrong. And so that's how hopefully it's able to give us something on the first shot that's a lot better than if it didn't do this verification pass. So I just wanted to call that out. That

9:04 should be going on in the background. And that's why it's so important to watch Claude as it's working. You get a feel for how the harness actually behaves. Okay, so here we are. This

9:12 thing has finished up. It took about 30 minutes, I believe. And we have right here a screenshot that basically goes through the flow. So it kind of went through the scroll itself to see what

9:22 the vibe is like. So let's click in. I haven't looked at this yet. Okay, so right off the bat, it definitely feels kind of like that professional almost like a report sort of vibe. It's very

9:31 editorial in that way. It's very professional. First glance though, it looks pretty boring. So hopefully as we start to scroll through we get some cool stuff going on. We have live data. So it

9:40 actually went ahead and pulled live numbers right now. This is like as of today. This I believe also if I go to my free school real quick um 441.5. This is literally as of today. So it

9:50 pulled up literally fresh numbers. We've got preparing as many people as possible for a new way of working. AI is reshipping how work is done. Oh, interesting. Look at this. I just

9:58 noticed this. I'm going to refresh. It says right now sourced zero out of nine. So on the left hand side we have sources. As I scroll down, we start to unlock new sources. So, that's kind of

10:06 cool. Um, okay. So, now we have switched into sort of like a dark mode. It says it stopped being a room a long time ago, and we're kind of growing the members and we're growing the global presence,

10:15 which I really like. Although, I think that this animation goes a little too quick. Like on a typical scroll, that's too fast. So, we can have it slow that down, which I'll show you guys. We want

10:22 to slow this down, but that's very nice. I like that graphic. We have exhibit A, the room on an ordinary Tuesday. It's the live call right here. We have some testimonials right here. Glenn, Casper,

10:32 and Amy. Very, very cool. And all three of those people are actually on this call, too. Glenn, Casper, and Amy. I love that. As we keep going down, we've got four quarters on a public

10:40 leaderboard. Wait a minute. Okay, so it literally went I don't know where I kept these, but it went and found these screenshots because this info is not on the original site. We don't have these

10:49 screenshots anywhere. So, it had to go find those somewhere. It found these leaderboard pictures and put them in here for our four out of four school game wins in 2025. And then we have

10:58 right here, um, exhibit F, which was the AS Plus classroom. Okay, so we have a sort of like a horizontal scroll coming along there. We've got six out of nine sources. The founder, he was not a

11:07 developer when he started. Graduated from the University of Iowa. Cool. It's got this picture. Nice. Um, we will have to fix this caption though cuz that was not AIS Live. That was Africa AI. So,

11:15 there's a few things that we'll want to fix and touch up. But here is a video that we've got the sort of the geometric low poly. This is for the certification. So, it's like they're teaching. Very

11:24 cool. Um, I might need to fix some of this copy. Where does this button link? Okay, that links to our free school. We'll have to change some of the stuff up. um everything this page just

11:33 claimed. What is this? Oh, okay. So, this kind of runs through those nine sources. I don't know if I love that, but I don't know. Kind of cool. We have the free community right here, and then

11:42 we have AS+, which takes us to AS+. Okay, very cool. So, I believe that we have our merch there. We have the certification once again. And then that's basically the end. Cool. So, this

11:54 is obviously a very different vibe than the original AIS website. It's a different vibe, but it has similar feel. You can tell it's still the same brand. It's still the same um guidelines,

12:04 right? So, now it's just a matter of we can get pretty nitpicky here. What are the little little things that we don't like and what are the little things that we want to have changed about the site,

12:11 but overall, I think that this is a very unique site. Haven't really seen many websites like this. All right, so I've got a little bit of feedback here about the site. First of all, I want to say I

12:20 think you did a good job. You got creative and you took in my feedback, which was good. I like how you went and pulled live numbers. That was really nice. So, as far as the hero section,

12:27 it's a little bland when someone first loads up the page. It's a little bit bland and it doesn't feel I don't know, it doesn't feel very premium. So, maybe you can add a little bit of depth here

12:36 or maybe just some I don't know, do something to this hero section because that's like where we want to hook in the audience. Now, I really like this first part about the reach. I really like the

12:45 scroll animation with the the globe filling up. I feel like that feels very on brand. It shows the members growing, although it scrolls too fast. So, if you could slow this down significantly so

12:53 the users can actually scroll and realize what's going on, that would be great. Um, as we continue to go down here, I like exhibit A. I like the room about the community. I like the

13:03 testimonials here. I think that's good for now. I think maybe if you could just add some more. I don't know, like it just feels a little bit bland. I like how we get into exhibits B through F. I

13:13 like the sideways scroll, but it just once again feels a little bit bland. And I think that you can work in some elements here to make this just feel more premium. Um, there's nothing

13:21 special about the founder section. Maybe we have something like a scroll animation here as well, just to make it less bland. Um, I like this little animation for the certification, but it

13:30 feels like it doesn't quite last long enough. Maybe you could slow it down or make that a little more exaggerated. Also, the link for the certification, if you could grab the actual link that's

13:39 linked in the main site, on the main AIS site, the certification link takes you to like a waiting list, I believe. So, the reserve your place. Yeah, it should take you to a waiting list. So, grab

13:48 that link and make sure that that's on the actual site here that you're building for us. And honestly, I don't love the register. Let's just get rid of that section. I like the idea you had

13:56 with like making this scrolling and adding more animations and making this interactive, but I don't like the register. So, you can get rid of that. And yeah, I think the rest at the moment

14:04 is fine. Let's just kind of clean up some of the stuff. Okay. So, I'm going to shoot this off. We'll give this feedback and I will check in with you guys when we get the stuff back. Okay.

14:12 So, next version came back. We can see that we have it open on our local host. It says the register is gone. The globe got slowed down a little bit. A new hero section. So, now it's a magazine cover.

14:22 So, we'll see what that looks like. And everything else that we wanted has been changed. So, let us go back over here and open up this link. And we see Okay, nice. I like how that kind of came in.

14:32 If I go give it this refresh, you can see how that scrolls in. I like that. Um, we have a little picture of me over here. And we have same copy, same feel, nice little blue um highlight on the

14:44 mouse. That might be a little too much, but anyways, this Okay, cool. This is scrolling a lot slower now. So, we're able to sort of watch the numbers go up. We're see sort of able to watch the map

14:54 kind of get taken over by these blue dots and all these connections. I really like that animation. I think that's really cool. We can see here the room on an ordinary Tuesday. There's no

15:02 animation to this part. Maybe we should have like this image kind of like reveal or we should have the text come through as if it was being typed or something. We could easily add that fix. We go down

15:12 to this part. It added like these little colors behind these. These cards are kind of like dynamic. If we put the mouse over it and we hover um this one scrolls in nice. So that's kind of what

15:20 I want to do to um maybe up here. I want to have it scroll in almost like a typewriter. And then we have the coursework is not a credential. Oh, nice. So it actually changed all this

15:30 copy as well. It made this more specific to the actual cohort. And then this links to the right spot. Okay. Very cool. So as you can see the register is now gone as well. So all the changes

15:40 that we asked for have been completed. So what I wanted to highlight here is that I haven't yet created an example that looked like this. And that's what I think is so cool about this skill that I

15:48 built is that it utilizes design principles, but it's not going to give you a template. It's still going to very much give you something that's unique to the way that you describe, you know, the

15:57 emotions and the journey and the goals of your business or whatever wherever you're making the website for. And by the way, I did have it regenerate real quick with this coming in more like a

16:05 typewriter effect. So I think that's a lot cleaner. You can see it did a really cool animation here where it literally makes each of their faces come in each of the screens one at a time. So that's

16:15 super slick and I love that it you can see it has a bit of a bug when you have to reload like that, but otherwise comes in pretty clean. I like that a lot. So anyways guys, just remember if you want

16:24 to download the skill, go to my free school community. It will be linked in here with a post. It'll also be in the classroom, all YouTube resources, AI skills. You can find it many places in

16:32 here. But go check out the skill if you want to build some sites like this. But that is going to do it for today. Okay, so if you guys enjoyed, you learned something new, please give it a like. It

16:38 helps me out a ton. And as always, I appreciate you guys making it to the end of the video. I'll see you on the next one.