클로드 코드 디자인 스킬로 홈페이지 개선하기

Scroll Craft는 방문자가 무엇을 어떤 순서로 보게 할지, 스크롤할 때 화면이 어떻게 바뀔지 설계하는 스킬입니다. 영상에서는 GitHub 링크를 주고 설치를 요청합니다. 이미 설치돼 있으면 확인만 하면 됩니다.

https://github.com/nateherkai/scroll-craft

이 스킬을 Claude Code에서 사용할 수 있게 설치해줘.

BAZE 앱에서 본인 계정의 API Gateway로 들어가 키를 생성하고, 앱이 제공하는 연결 요청문을 Claude Code에 전달합니다. 영상에서는 “이거 세팅해줘. 이걸로 이미지·영상 에셋 만들 예정이야”라고 요청합니다.

• 앱: https://app.baze.co/
• 키는 본인 환경에서만 사용하고 저장소·공유 문서·촬영 화면에 노출하지 마세요.
• 영상의 가입 체험 크레딧은 촬영 당시 안내입니다. 현재 지급 조건과 모델별 사용량은 앱에서 확인하세요.

설치된 Scroll Craft를 선택하고 기존 홈페이지 개선을 요청합니다. 영상의 대상은 VibeRick입니다. 주소만 보는 것과 실제 코드를 수정하는 것은 다르므로, 내 홈페이지 작업 폴더를 연 상태에서 진행하세요.

/scroll-craft
내 홈페이지 [내 홈페이지 URL] 개선해볼 수 있을까?

영상에서는 스킬이 분위기·스크롤 순서·강약·기억에 남길 장면 등을 질문합니다. 직접 답해도 되고, 현재 홈페이지와 실제 자료를 보고 판단하게 맡겨도 됩니다.

너가 알아서 판단해주면 안 될까?

브라우저에서 실제로 스크롤해 봅니다. 마음에 들지 않는 부분은 화면을 캡처해서 전달하고, 작은 글자나 로고처럼 어디가 불편한지 구체적으로 말합니다. 영상에서는 이런 피드백을 여러 번 이어갑니다.

• 스크롤하면서 화면이 의도한 순서로 바뀌는지 확인
• 글자·버튼·로고가 읽히는지 확인
• 모바일 화면에서도 내용과 조작이 유지되는지 확인

Impeccable은 구성·가독성·간격 같은 디자인을 살피고, Web Design Guidelines는 웹에서 쓰기 편한지 점검합니다. React Best Practices는 React·Next.js로 만든 사이트의 코드와 성능을 점검할 때 씁니다. 뒤의 두 스킬은 Next.js를 만드는 회사 Vercel이 공개한 저장소에 있습니다.

https://github.com/pbakaus/impeccable
https://github.com/vercel-labs/agent-skills

Impeccable, web-design-guidelines, vercel-react-best-practices를 Claude Code에서 사용할 수 있게 설치해줘.

영상에서는 세 스킬을 함께 지정하고 홈페이지 진단과 개선을 요청합니다. 결과를 받은 뒤에도 스크롤·글자·로고를 직접 보고 피드백을 이어갑니다. React 점검은 React·Next.js 프로젝트일 때 적용합니다.

/web-design-guidelines /impeccable /vercel-react-best-practices
이 세 개 스킬을 이용해서 내 홈페이지 진단하고 디자인 개선해줘.

기존 화면과 개선한 화면을 나란히 놓고 스크롤 흐름과 가독성을 비교합니다. 디자인이 마음에 들면 실제 홈페이지에 적용할 변경을 확인하세요. 생성된 로컬 시안이 곧 운영 사이트의 배포 완료를 뜻하지는 않습니다.