웹사이트를 제대로 만들려면 보통
- UI/UX 디자인
- 프론트엔드 개발
- 애니메이션
- 반응형 작업
- UI 컴포넌트 제작
같은 작업이 필요합니다.
website-builder-setup은 이 작업에 필요한 도구 3개를 Claude Code에 한 번에 세팅해주는 무료 오픈소스 스킬입니다.
1. 뭐가 설치되나요?
🎨 UI/UX Pro Max
웹사이트의 디자인을 담당합니다.
- 50개 이상의 디자인 스타일
- 161개 컬러 팔레트
- 57개 폰트 조합
AI가 대충 만든 것 같은 디자인이 아니라, 조금 더 체계적인 디자인 시스템을 적용할 수 있게 도와줍니다.
🎬 Framer Motion
웹사이트의 움직임을 담당합니다.
- 페이지 전환
- Hover 효과
- Scroll Reveal
- 인터랙션
- 각종 UI 애니메이션
정적인 웹사이트에 움직임을 추가할 때 사용하는 도구입니다.
🧩 21st.dev Magic
웹사이트를 구성하는 UI 부품을 담당합니다.
100개 이상의 React 컴포넌트를 활용할 수 있습니다.
예를 들면:
- 버튼
- Navbar
- Hero Section
- Card
- Footer
등을 처음부터 직접 만들 필요 없이 가져와서 조립할 수 있습니다.
2. 준비물
먼저 아래 두 가지가 설치되어 있어야 합니다.
① Claude Code
② Node.js LTS
둘 다 준비되어 있다면 바로 시작하면 됩니다.
3. 설치 방법
생각보다 정말 간단합니다.
Claude Code를 실행한 다음 아래처럼 요청하세요.
Install this skill for me:
그러면 Claude가 나머지 설치 과정을 진행합니다.
4. 설치 후 실행
설치가 끝났다면 Claude Code에서:
/website-builder-setup
을 입력하세요.
이후 Claude가 필요한 설정 과정을 안내합니다.
5. 이제 웹사이트를 요청하면 됩니다
세팅이 끝났다면 평소 Claude에게 말하듯 원하는 사이트를 설명하면 됩니다.
예를 들어:
소상공인을 대상으로 하는 컨설팅 회사 랜딩페이지를 만들어줘.
다크 테마에 모던한 디자인으로 만들고 애니메이션도 넣어줘.
이런 식입니다.
이 예시는 실제 제작자가 README에서 보여주는 사용 방식과 거의 같습니다.
이후 Claude가 세팅된 도구들을 활용해서
디자인 → 레이아웃 → 컴포넌트 → 애니메이션 → 반응형
까지 웹사이트 제작을 진행합니다.
6. 직접 설치하고 싶다면
Mac/Linux에서는 터미널에:
git clone https://github.com/tenfoldmarc/website-builder-setup.git ~/.claude/commands/website-builder-setup
을 입력하면 됩니다.
설치 후 Claude Code에서:
/website-builder-setup
을 실행하세요.
다만 대부분은 직접 설치할 필요 없이 Claude에게 GitHub 주소를 주고 설치해달라고 하는 방법이 가장 간단합니다.
🔗 GitHub
무료 오픈소스이니 Claude Code로 웹사이트를 자주 만든다면 저장해두고 한번 테스트해보세요.
특히 랜딩페이지, 포트폴리오, SaaS 사이트, 회사 홈페이지처럼 디자인과 인터랙션이 중요한 사이트를 만들 때 활용하기 좋습니다.
⚠️ 참고로 이 스킬 하나만 설치한다고 모든 결과물이 자동으로 ‘천만원짜리 웹사이트’가 되는 건 아닙니다.
결과물의 퀄리티는 프롬프트, 콘텐츠, 프로젝트 구조, 수정 작업 등에 따라 달라집니다.
다만 기존 Claude Code에 디자인 + 애니메이션 + UI 컴포넌트 제작 도구를 한 번에 붙여준다는 것이 이 스킬의 핵심입니다.
