클로드에게 웹사이트를 맡기면 다 비슷비슷하게 나오죠. MotionSites Web Builder는 웹 디자인 사이트 모션사이트(motionsites.ai)가 가장 인기 있던 디자인을 모아 만든 무료 클로드 스킬이에요. 이 페이지에 설치 방법(클로드 앱 · 클로드 코드), 실제로 돌려 본 결과, 바로 붙여 넣는 한글 프롬프트 30개를 정리해 뒀어요.

📺 더 많은 클로드 활용법: 유튜브 빌더조쉬 구독 · 조쉬의 뉴스레터 구독

한눈에 보기

항목 내용
저장소 github.com/Motionsites-AI/claude-skill (깃허브 별 1,000개+, 2026-10-29 기준)
가격 무료 (스킬 설명·코드는 MIT, 예시 프롬프트·미디어는 이 스킬로 만드는 사이트에 사용 가능)
들어 있는 것 예시 디자인 프롬프트 40개 · 시네마틱 히어로 영상 50개+ · 투명 3D 컷아웃 30개 · 이미지 29개 · 애니메이션 기법 55가지+
흐름 기획서(spec) 작성 → 영상 고르기 → 페이지 만들기 → 스크린샷으로 확인하고 고치기
참고 무료 스킬은 샘플이에요. 프롬프트 500개 이상은 유료 상품(MotionSites Unlimited)에 들어 있어요

설치 방법

클로드 앱(claude.ai · 데스크톱)

  1. 저장소의 최신 릴리스에서 motionsites-web-builder.zip을 내려받아요.
  2. 클로드에서 설정 → 사용자 지정 → Skills → + → 스킬 만들기 → 스킬 업로드를 누르고 zip 파일을 고른 뒤 켜 주세요.
  3. 코드 실행 기능이 켜져 있어야 해요(설정 → 기능).

클로드 코드(플러그인)

/plugin marketplace add Motionsites-AI/claude-skill
/plugin install motionsites-web-builder@motionsites

SSH 키가 없다면 첫 줄 대신 /plugin marketplace add https://github.com/Motionsites-AI/claude-skill.git을 쓰세요.

클로드 코드(직접 복사)

저장소의 plugins/motionsites-web-builder/skills/motionsites-web-builder 폴더를 ~/.claude/skills/에 복사하면 돼요.

💡 스크린샷으로 확인하고 고치는 단계는 Playwright가 있어야 가장 잘 돼요: pip install playwright && python -m playwright install chromium

실제로 돌려 본 결과

클로드 코드에 이렇게만 요청했어요.

럭셔리 수면 반지 랜딩 페이지 만들어 줘. site 폴더에 index.html 하나로, 한국어 카피로.