Scrollcraft: Interaktive, scrollbasierte Websites mit Claude Code erstellen

I think I built the ultimate Claude 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 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 going through a journey because this is like a travel agency that’s trying to get clients to book in with them. Here is my original website that I had built with Claude. It’s, it’s okay, right? It’s 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 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 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 ScrollCraft because the whole 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 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 you’ll notice about this 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 interview section of this skill is so important because it asks you what type of website do you want? What do you want the feel to be? It really thinks about the user journey when they would 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 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 something else going on. Love this little animation right here. And hopping back over to the PerkForm example, I had it generate two versions for me. So this is the first one. They both keep the consistency and 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 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 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 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 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 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 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 to be using the Claude code desktop. I’m also going to assume that you have a little bit of Claude code knowledge. So if you’re just starting out at the complete beginning, go ahead and watch 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 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 Claude, whatever you want to do. But now you can see if I come in here and I type "scroll", we have the ScrollCraft skill, which says to build a premium, scroll-driven interactive interface landing page for any business. So whatever type of product you have or service, you can 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 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 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 like branded and trusted, but 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 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 world that we’d be flying through. I’m looking for this one to be more premium. And basically I’m just going to start off like that because the first part of this skill is going through sort of like an interview process to 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 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 product. So I think the vibe that I’d be looking at for this AI Automation Society one is maybe something a little bit more like this that has like subtle animations and subtle scroll. So you 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 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 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 openrouter, but for like image and video models. You can choose between all these 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, we have the cup, we have all 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 environment variables of the Claude 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 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 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 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 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 assets do you have? This decides how much gets generated versus graded from what you own. Photos of you events, community screenshots, workflow/build screenshots, what do we have and what does it need to go 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 looks kind of like 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 be cool if you generated a few images of like, like if you generated images that weren’t necessarily photo realistic, but they were sort of like looking at educational environments. So maybe like 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, low-poly human figures. You know, if there were maybe scenes that go along with the certification or the events or AI’s plus, like people having wins, people teaching each other, people working together, 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 scrolls. Finally, it says, "One thing this site should do that no site you’ve seen does, this becomes the signature move. Every claim has a receipt. Nothing on the page is asserted without a source. 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. 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 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 departure cards and the destinations and we see this sinking 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. 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 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, "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 in with you guys when anything 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 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 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, 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 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 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 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 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 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 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 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 pulled up literally fresh numbers. We’ve got preparing as many people as possible for a new way of working, AI is reshaping how work gets done, the people who learn it now are the ones who will be asked to lead it. Oh interesting, look at this. I just 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 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 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 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, Kasper and Amy, very very cool, and all three of those people are actually on this call too, Glenn, Kasper and Amy. I love that. As we keep going down, we’ve got four quarters on a public 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 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 right here, um, exhibit F which was the AIS 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 developer when he started. Nate Herk graduated from the University of Iowa with degrees in business analytics and marketing, worked as a business intelligence analyst at Goldman Sachs and left in 2024 to build this full time. That’s the part of the story that matters to most of the people who join, and it is why the teaching here begins where it does rather than three steps in. The founder, he was not a developer when he started. Graduated from University of Iowa, cool, it’s got this picture. Nice, um, we will have to fix this caption though because that was not AIS live, that was Africa AI. So there’s a few things that we’ll want to fix and touch up. But, um, here is a video that we’ve got that’s sort of the geometric low poly. This is for the certification. So it’s like their teaching, very 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 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 we have AIS plus which takes us to AIS plus. 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 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, 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, 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 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, 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 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 this scroll animation with the globe filling up. I feel like that feels very on brand. It shows the members growing. Although, it scrolls too fast. 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 to slow this down, but that’s very nice. I like that graphic. We have exhibit A, the room on an ordinary Tuesday. I like the room about the community, I like the testimonials here. I think that’s good for now. I think maybe if you could just add some, I don’t know, it just feels a little bit bland. I like how we get into exhibits B through F, I 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 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 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 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 that link and make sure that’s on the actual site here that you’re building for us. And yeah, I don’t love the register. Let’s just get rid of that section. I like the idea you had 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 is fine and let’s just kind of clean up some of the stuff. Okay, so I’m going to shoot this off. We’ll give you this feedback and I will check in with you guys when we get the stuff back. Okay, 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, 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 if I go give this a 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 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 it sort of able to watch the map 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 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 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, and this one scrolls in nice. So that’s kind of what 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 course work is not a credential. Oh nice so it actually changed all this copy as well, and 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 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 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 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 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 super slick and I love that. You can see it has a bit of a bug when you have to reload like that, but otherwise, it comes in pretty clean. I like that a lot. So anyways guys just remember if you want 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 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, so if you guys enjoyed, you learned something new please give it a like, helps me out a ton. And as always I appreciate you guys making it to the end of the video. I’ll see you all in the next one. Thanks everyone.