핵심 요약
Nate Herk는 뻔한 AI 웹사이트 느낌을 벗어나 인터랙티브한 스크롤 애니메이션을 구현하는 Claude 전용 웹 디자인 스킬 'Scroll Craft'를 무료로 배포했다. 이 스킬은 기존 웹사이트의 카피와 브랜딩을 유지하면서 스크롤과 연동되는 프리미엄 디자인으로 탈바꿈시켜 준다. 단순 템플릿 복제가 아니라 사전 인터뷰를 통해 사이트 목적과 사용자 여정을 분석해 맞춤형 결과물을 만든다.
주요 포인트
- **인터랙티브 스크롤 스킬 'Scroll Craft'**: Claude로 제작되는 전형적인 AI 사이트(AI slop)를 고품질 스크롤 애니메이션 기반 사이트로 변환하는 무료 스킬이다.
- **브랜드 아이덴티티 및 카피 보존**: 기존 사이트의 문구, 색상, 브랜드 톤은 유지하면서 레이아웃과 반응형 인터랙션을 강화해 더 고급스러운 느낌을 부여한다.
- **몰입도를 높이는 사용자 여정 설계**: 숏폼 콘텐츠처럼 사용자가 페이지를 계속 스크롤하며 몰입할 수 있도록 훅(Hook) 요소와 인터랙션을 배치한다.
- **인터뷰 기반 맞춤형 디자인**: 획일화된 템플릿이 아닌 사전 질문을 통해 사용자의 목적, 톤앤매너, 타이포그래피, 여백 등을 파악한 뒤 다양한 스타일로 제작한다.
- **목적에 맞춘 애니메이션 강약 조절**: 전체 사이트를 과하게 꾸미지 않고 히어로 섹션에만 포인트를 주거나 핵심 정보에 순차적으로 집중시키는 등 유연한 연출이 가능하다.
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 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 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 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 perk form 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. 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 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 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 cloud, 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 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 Au