클로드로 수상작 같은 웹사이트 만드는 무료 스킬 — MotionSites 설치 가이드 + 프롬프트 30개

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

한눈에 보기

설치 방법

클로드 앱(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 하나로, 한국어 카피로.

• 클로드가 먼저 **기획서(spec.md)**를 썼어요. 제품 이름(NOX), 분위기 세 단어(고요하고, 비싸고, 밤의), 글꼴·색·여백 수치, 섹션 6개까지 정했어요.
• 스킬에 들어 있는 영상 중 하나를 골라 히어로에 넣고, 스크롤하면 수면 그래프가 금빛 선으로 그려지는 페이지를 만들었어요.
• 코드 파일은 index.html 하나예요. 더블클릭하면 바로 열려요.

바로 붙여 넣는 프롬프트 30개

스킬을 켜 두고 아래 문장을 그대로 보내면 돼요. 괄호 안만 내 것으로 바꾸세요.

내 사업·서비스 (1~10)

1. [내 서비스 이름]의 랜딩 페이지를 만들어 줘. 한 줄 소개는 [소개]. 히어로만 먼저.
2. [앱 이름] 출시 전 대기자 모집 페이지 만들어 줘. 이메일 입력칸 하나만.
3. 1인 컨설팅 회사 홈페이지 만들어 줘. 분위기는 차분하고 믿음직하게.
4. 온라인 강의 [강의 주제] 판매 페이지 만들어 줘. 커리큘럼 5개 섹션 포함.
5. 카페 [카페 이름] 소개 페이지 만들어 줘. 따뜻하고 감성적으로.
6. B2B SaaS [제품 이름] 랜딩 페이지. 기능 3개, 가격표, 고객 후기 포함.
7. 뉴스레터 구독 페이지 만들어 줘. 주제는 [주제], 구독 버튼이 가장 눈에 띄게.
8. 웨비나 신청 페이지 만들어 줘. 날짜·시간 카운트다운 포함.
9. 리트리트 호텔 소개 페이지 만들어 줘. 고요하고 고급스럽게.
10. 모바일 앱 [앱 이름] 소개 페이지. 휴대폰 화면이 떠 있는 느낌으로.

포트폴리오·브랜드 (11~20)

1. 건축 사진작가 포트폴리오 홈 만들어 줘. 에디토리얼하고 조용하게.
2. 패션 브랜드 [브랜드 이름] 시즌 룩북 페이지 만들어 줘.
3. 향수 브랜드 신제품 런칭 페이지. 스크롤하면 향의 노트가 하나씩 나오게.
4. 디자이너 개인 포트폴리오. 프로젝트 6개 카드를 깊이감 있는 캐러셀로.
5. 음악가 앨범 발매 페이지. 어두운 배경에 큰 제목 한 줄.
6. 자동차 신차 티저 페이지. 3D 모델이 천천히 도는 히어로.
7. 게임 [게임 이름] 사전 예약 페이지. 시네마틱 영상 배경.
8. 고급 부동산 단지 소개 페이지. 리큐드 글래스 카드로 주요 정보.
9. 와인 브랜드 소개 페이지. 스포트라이트 효과로 병이 드러나게.
10. 요가 스튜디오 홈페이지. 시간표 섹션 포함, 부드러운 파스텔톤.

기존 사이트 고치기·다른 도구용 (21~30)

1. 첨부한 내 사이트를 수상작처럼 바꿔 줘. 내용은 그대로 두고 디자인만.
2. 이 페이지 히어로만 다시 만들어 줘. 제목이 단어별로 흐릿하게 나타나는 효과로.
3. 지금 페이지에 스크롤 스토리 섹션을 하나 추가해 줘.
4. 모바일에서 깨지는 데가 없는지 확인하고 고쳐 줘.
5. 이 랜딩 페이지의 카피를 더 짧고 날카롭게 다시 써 줘.
6. 러버블(Lovable)에 넣을 프롬프트로 만들어 줘: [내 서비스] 대기자 페이지.
7. v0에 넣을 프롬프트로 만들어 줘: [내 앱] 가격표 섹션.
8. 볼트(Bolt)용 프롬프트로 만들어 줘: 개인 포트폴리오.
9. 커서(Cursor)에서 그대로 쓸 수 있는 기획서(spec)만 써 줘. 코드는 쓰지 마.
10. 이 페이지를 10점 만점으로 채점하고, 가장 약한 세 군데를 고쳐 줘.

잘 쓰는 팁

• 내 로고·사진·영상이 있으면 같이 주세요. 스킬이 내 자료를 1순위로 써요.
• "히어로만"이라고 하면 첫 화면만 빠르게 만들고, "전체 랜딩 페이지"라고 하면 섹션 여러 개를 만들어요.
• 실제 회사 이름이나 유명 캐릭터·로고가 들어간 미디어는 스킬이 쓰지 않아요.