Modern Creator
Nate Herk | AI Automation · YouTube

Scrollcraft: the Claude Code skill that turns a landing page into a scroll-driven site

A free Claude Code skill interviews you about your brand and journey, generates or reuses your assets, then builds a scroll-synced site and checks its own work before handing it back.

Posted
2 days ago
Duration
Format
Demo
educational
Views
35.1K
1.3K likes
Big Idea

The argument in one line.

A structured, emotion-aware interview about a site's journey and signature move, not a template, is what makes an AI-built landing page feel premium and distinct instead of generic.

Who This Is For

Read if. Skip if.

READ IF YOU ARE…
  • You already use Claude Code (or a similar AI coding tool) to build client or personal websites and want richer, non-template scroll interactions.
  • You run a coaching, community, or personal-brand business and want your site's data (member counts, testimonials, results) to feel current and sourced instead of static.
  • You're comfortable giving an AI tool a structured creative brief and then iterating on its output with specific, itemized feedback.
SKIP IF…
  • You want a finished website without touching a coding tool at all; this walkthrough assumes baseline Claude Code fluency.
  • You need e-commerce, multi-page navigation, or backend functionality; this is about a single scroll-driven landing/marketing page.
TL;DR

The full version, fast.

Scrollcraft is a free Claude Code skill that replaces a website template with a structured interview: what's the scroll journey, what must the visitor believe by the end, what real assets exist, and what's the one signature move no other site has. Missing photos or video get generated through Kie.ai, an image/video model marketplace. Once built, the agent screenshots and inspects its own site to catch layout defects before presenting it. Nate uses it live to rebuild his own AI Automation Society homepage, pulling in real membership stats from his community, then gives one round of specific feedback (slow this animation, cut this section, fix this link) that the agent applies in a second pass.

Free for members

Chat with this breakdown — free.

Sign in and you get 23 free chat messages on us — ask for the hook, quote a framework, find the exact transcript moment, generate a markdown action plan. Bring your own key when you want unlimited.

Create a free account →
Chapters

Where the time goes.

00:0002:26

01 · Introducing Scrollcraft

Nate shows several finished Scrollcraft builds, a protein-coffee brand, a garden design studio, a Paris fashion house, to demonstrate the scroll-driven, non-templated feel before explaining what the skill actually does.

02:2603:25

02 · Get the Free Skill

The skill is free in his Skool community's classroom under All YouTube Resources; he assumes viewers already have baseline Claude Code fluency and points beginners to his separate six-hour course.

03:2504:39

03 · Live Website Redesign

Nate runs the /scrollcraft command in Claude Code desktop to rebuild his own AI Automation Society homepage, giving the agent three vibe adjectives (premium, trusted, editorial) and naming an effect he wants to avoid.

04:3905:27

04 · Generating Website Assets

Missing photos and video get filled in through Kie.ai, an OpenRouter-style marketplace for image and video models; Nate requests a specific low-poly geometric illustration style rather than leaving it to the default.

05:2708:15

05 · Defining the Scroll Journey

The skill's structured interview asks what the scroll journey should be, what the visitor must believe by the end, what real assets exist, and what signature move no other site has; Nate picks 'every claim has a receipt.'

08:1509:11

06 · Building & Verification

Claude builds the site, then runs its own verification pass, screenshotting key frames and catching an empty section and overflowing copy before presenting the roughly thirty-minute build.

09:1112:16

07 · Reviewing the First Draft

Nate scrolls the finished draft on his own site: live member stats pulled from the real Skool community, a source counter that unlocks as you scroll, testimonials, a leaderboard graphic, and a founder bio section.

12:1614:11

08 · Giving Claude Feedback

One consolidated feedback pass: the hero feels bland, the globe animation is too fast, a whole 'register' section should be cut, and a certification link needs to point at the real waitlist.

14:1116:22

09 · Reviewing the Final Version

The second pass rebuilds the hero as a full magazine-cover treatment, slows the globe animation so the fill is watchable, removes the register section, and later adds a typewriter reveal to a previously static section.

16:2216:44

10 · Download Scrollcraft

Nate closes by repeating where to grab the skill for free and asking for a like if the video was useful.

Atomic Insights

Lines worth screenshotting.

  • A scroll-driven landing page can be built from a five-question interview instead of a template, so the same skill produces visually distinct sites for a coffee brand, a garden studio, and a personal brand.
  • Feeding an AI design tool emotional direction, what a page should feel like and where it should feel calm versus intense, works alongside visual references, not instead of them.
  • One API key for Kie.ai, an image/video model marketplace, is enough to let an AI coding agent generate every missing photo, illustration, and video a landing page needs.
  • Self-verification matters: a build that screenshots its own key frames and inspects them catches defects, like overflowing text or a blank section, before a human ever sees the draft.
  • A single brief question, 'what should this page do that no other site does,' turns a generic build into an art-directable one with a real signature move.
  • A generated site can pull live data, real member counts from an existing community platform, into its own copy instead of using placeholder numbers.
  • The single most common feedback note on the first AI-built draft was pacing, not content: a fast scroll animation read as broken rather than premium.
  • Telling an AI coding agent to delete an entire built section is a normal edit request, not a compromise; asking costs nothing.
  • A hero section rebuilt after feedback went from a plain headline to a full magazine-cover treatment, showing an agent will restructure, not just patch, when the note is 'this feels bland.'
  • An AI agent can be asked to find its own supporting evidence; one build sourced leaderboard screenshots that weren't provided anywhere in the original brief or assets.
Takeaway

Make the scroll answer, not just decorate.

DESIGN BY INTERVIEW

A five-question interview about journey, belief, and signature move produces a different site every time, because the variable isn't the code, it's the brief you give it.

01Introducing Scrollcraft
  • The demo reel deliberately shows a coffee brand, a garden studio, and a fashion house instead of one template, proving the same skill produces visually distinct sites.
  • Every example keeps the client's original copy and brand feel intact; the redesign changes how content reveals itself on scroll, not what the content says.
03Live Website Redesign
  • Vibe direction was given in three adjectives before any generation started, premium, trusted, editorial, rather than a mood board or reference site.
  • The skill starts from what already exists: it reads the current site, the brand assets folder, and a history of prior builds before asking a single question.
04Generating Website Assets
  • Missing photos and video aren't a blocker: one API key for Kie.ai lets the agent generate whatever assets the brief needs, in a style requested by name.
  • A logs dashboard shows every generation the agent requested, which makes the asset pipeline auditable instead of a black box.
05Defining the Scroll Journey
  • Each interview question ships with a pre-filled 'Recommended' answer inferred from the existing site and brand assets, so answering fast still produces a grounded brief.
  • The signature-move question, 'one thing this site should do that no site you've seen does,' is what turns a generic brief into an art-directable one.
06Building & Verification
  • After generation, the agent runs its own verification pass, screenshotting key frames of the built site to check that nothing looks broken before showing it to the user.
  • The build surfaced its own defects unprompted, an empty screen before the closing section and copy overflowing its container, and fixed both before presenting the draft.
07Reviewing the First Draft
  • The generated site pulled live membership numbers from the real Skool community at build time instead of using placeholder stats.
  • A 'sources unlock as you scroll' mechanic, counting up from 0 of 9 to 9 of 9, doubles as a progress cue and a credibility device.
08Giving Claude Feedback
  • Feedback was delivered as a single pass covering the whole site: pacing complaints, an unwanted section to delete, a wrong link to fix, and specific animation-speed requests.
  • Cutting a whole section outright was treated as a normal edit, not a compromise: 'I don't love the register, let's just get rid of that section.'
09Reviewing the Final Version
  • The regenerated hero changed structural approach, not just tweaks, becoming a full magazine-cover treatment in direct response to 'the hero section is bland' feedback.
  • Slowing the globe-fill animation was the single most visible fix requested, turning a blur into something the visitor can actually watch build in real time.
Glossary

Terms worth knowing.

Scrollcraft
A free Claude Code skill that interviews a user about their brand and desired feel, then builds a scroll-synced landing page using existing or AI-generated assets.
Kie.ai
An API marketplace for image and video generation models, used here as the source for any website assets an AI coding agent needs but doesn't already have.
Claude Code desktop
Anthropic's desktop application for running Claude Code sessions, used in this video to run the Scrollcraft skill and manage the build.
Harness verification
An automated pass where the AI agent screenshots and inspects its own generated pages to catch layout defects before presenting the work to the user.
Skool
A community platform (skool.com) used here to host the free classroom where the Scrollcraft skill files are distributed, and as the live data source for the demo site's member count.
Resources

Things they pointed at.

Quotables

Lines you could clip.

00:20
It's not just your generic AI slop.
short, contrarian, sets up the whole video's premiseTikTok hook↗ Tweet quote
07:36
Every claim has a receipt. Nothing on the page is asserted without a source.
a concrete, quotable design principle picked live during the demonewsletter pull-quote↗ Tweet quote
01:30
It's almost like short form content. If you don't get hooked right away, you're not as interested.
reframes landing-page design in short-form-video termsIG reel cold open↗ Tweet quote
The Script

Word for word.

Read-along

Don't just watch it. Burn it in.

See every word as it's spoken — crank it to 2× and still catch all of it. The same dual-channel trick behind Amazon's Kindle + Audible.

analogy
I think I built the ultimate cloud design skill for websites, I'm gonna 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's 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 wanna 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 scroll craft 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 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 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 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 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 just kind of like that first hero section. 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 gonna make the client remember your business. So anyways, let me quit Yap, and then 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 wanna 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 gonna 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 the six 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 Cloud 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 Cloud, whatever you wanna do.
But now you can see if I come in here and I type scroll, we have the scroll craft 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 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 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 websites. 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 flying through. I'm looking for this one to be more premium. I'm basically just gonna start off like that because the first part of the 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, like, hype y.
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 gonna interview us. So right now, let's say you have no business at all. You don't know what you're gonna 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. If So 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 results that we just used. So this can thing, we also have, like, the the phase.
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 do is go into here, grab an API key, and then put that in your 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 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 wanna open with the proof, receipts first, like these big stats? Do we wanna start with Nate's story? Do we wanna start with inside look?
I think we wanna 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. So And so what I'm actually gonna 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 us and events, community screenshots, workflows, 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 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 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 photorealistic, but they were sort of, like, looking at educational environment.
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 AIS 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 sites you've seen does. This becomes a 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 like flight cards.
Right? It looks like these 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 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 syncing to something. Few more questions here.
Where should this page feel calm and where should it feel intense? I'm just gonna go through some of these other design questions, and then I'll check-in with you guys when anything interesting's 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 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, 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 wanna 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 thirty 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, forty four one point five. 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 and is reshaping how work is done. Oh, interesting.
Look at this. I just noticed this. I'm gonna refresh.
It says right now sourced zero out of nine. So on the left hand side, have sources. As I scroll down, we start to unlock new sources.
So that's kinda cool. 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 wanna 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, 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 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 exhibit f, which is 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, graduated from University of Iowa. Cool. He's got this picture.
Nice. 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 wanna 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 cool.
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 this stuff up. 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. Kinda cool. We have the free community right here, and then we have a s plus, which takes us to a s plus.
Okay. Very cool. So I believe that we have our merch there.
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 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. Alright.
So I've got a little bit of feedback here about the site. First of all, I wanna 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 brand 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 wanna hook in the audience. Now I really like this first part about the reach. I really like the 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 the users can actually scroll and realize what's going on, that would be great. As we continue to go down here, I like exhibit a. 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 more I don't know.
Like, 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.
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. 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 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 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. Let's just kinda clean up some of this stuff.
Okay. So I'm gonna shoot this off. We'll give you this feedback, and I will check-in with you guys when we get this 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 kinda came in. If I go give it a sort of refresh, can you see how that scrolls in.
I like that. We have a little picture of me over here, and we have same copy, same feel.
Nice little blue 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 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.
This one scrolls in nice. So that's kinda what I wanna do to maybe up here.
I wanna 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 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 that we asked for have been completed.
So what I wanted to highlight here is that I haven't yet created an example that looks like this. And that's what I think is so cool about the skill that I built is that it utilizes design principles, but it's not gonna give you a template. It's still gonna 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 regenerated 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.
It 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 wanna build some sites like this.
But that is gonna do it for today. So if you guys enjoyed it, you learned something new, please give it a like. It helps me out a ton.
And as always, I appreciate you guys making it to the of the video. I'll see you on the next one. Thanks, everyone.
The Hook

The bait, then the rug-pull.

A free Claude Code skill turns a plain AI-built landing page into a scroll-driven one, keeping the same copy and branding but restructuring how the page reveals itself as a visitor scrolls. Nate calls it Scrollcraft, and in this video he gives it away and rebuilds his own company's homepage with it live.

Frameworks

Named ideas worth stealing.

05:27list

The Scrollcraft Interview

  1. Scroll journey (what the visitor hits first, and in what order)
  2. End belief (what the visitor must believe by the end, in one sentence)
  3. Real assets (what you already have vs. what needs to be generated)
  4. Calm vs. intense (where the page should feel which)
  5. Signature move (one thing this site does that no site you've seen does)

A five-question structured brief the skill runs before generating anything, each question pre-filled with a 'Recommended' answer inferred from the existing site and brand assets.

Steal forany client onboarding form or creative brief before an AI tool generates something meant to feel bespoke
CTA Breakdown

How they asked for the click.

VERBAL ASK
16:22link
go to my free school community link in the description... go check out the skill if you wanna build some sites like this

repeated twice (once at the 2:26 mark, again in the outro), and points to a specific findable location, Classroom > All YouTube Resources, rather than a vague 'link below'

FROM THE DESCRIPTION
PRIMARY CTAWhere the creator wants you to go next.
OTHER LINKSAlso linked in the description.
Storyboard

Visual structure at a glance.

open
hookopen00:00
live redesign begins
promiselive redesign begins03:25
self-verification pass
valueself-verification pass08:15
download CTA
ctadownload CTA16:22
Frame Gallery

Visual moments.

Watch next

More from this channel + related breakdowns.