claude-skill

MotionSites Web Builder: 무료 Claude 스킬
평범한 AI 레이아웃 대신, Claude가 수상작 수준의 시네마틱 랜딩 페이지를 만들도록 하세요.

AI가 만든 웹사이트는 세 가지 이유로 비슷비슷해 보입니다: 모호한 계획, 실제 미디어 부재, 그리고 결과물을 들여다보는 사람이 없다는 점. 이 스킬은 세 가지 모두를 해결합니다. Claude는 MotionSites에서 가장 많은 좋아요를 받은 디자인을 연구하고, 실제 시네마틱 미디어를 고르고, 정밀한 빌드 스펙을 작성하고, 페이지를 만든 뒤, 스스로 스크린샷을 찍어 갤러리 수준의 기준을 통과할 때까지 고칩니다.

스킬 안에 있는 40개 예시 디자인 중 8개로, 각각 기반이 된 영상 옆에 표시되어 있습니다. 50개 이상의 영상은 모두 스킬의 미디어 선반에 있습니다.

구성

40개 예시 프롬프트: MotionSites에서 가장 많은 좋아요를 받은 무료 프롬프트, 즉 사람들이 실제로 사랑하는 디자인입니다. Claude는 모든 브리프마다 가장 가까운 2~3개를 읽어 그 디테일과 취향 수준에 맞춥니다.
미디어 선반: 50개 이상의 시네마틱 히어로 영상, 30개의 투명 3D 컷아웃, 29개의 이미지가 공개 호스팅되어 번호가 매겨진 콘택트 시트로 표시되므로 Claude가 눈으로 보고 미디어를 고릅니다.
동작하는 코드가 포함된 55개 이상의 테크닉 레시피, 예를 들면:

끊김 없는 영상 루프;
리퀴드 글래스;
단어별 블러 헤드라인;
마우스로 스크럽하는 영상;
스포트라이트 리빌;
뎁스 캐러셀;
스크롤 스토리;
실제 3D 모델 (Three.js).

실제 수치가 담긴 디자인 취향 규칙: 타입 스케일, 트래킹, 간격, 색상, 모션 타이밍, 카피.
스펙 템플릿: Claude가 코딩 전에 작성하는 정밀한 브리프. 품질이 여기서 결정됩니다.
보고 고치는 루프: 스크린샷 + QA 스크립트 (깨진 에셋, 모바일 오버플로, 폰트, 영상 재생) 및 점수 평가 루브릭.
프롬프트 모드: 코드 대신 프롬프트를 요청하면 Lovable, Bolt, v0, Cursor, Manus, Google AI Studio 또는 Kimi에 맞춰 조정된 프롬프트를 받습니다.

설치
Claude.ai 및 Claude 데스크톱

최신 릴리스에서 motionsites-web-builder.zip을 다운로드하세요.
Claude에서 Customize → Skills → + → Create skill → Upload a skill을 열고, zip을 선택한 뒤 스킬을 켜세요. (Settings → Capabilities에서 코드 실행이 활성화되어 있어야 합니다.)

Claude Code (플러그인)
/plugin marketplace add Motionsites-AI/claude-skill
/plugin install motionsites-web-builder@motionsites

GitHub SSH 키가 없나요? 대신 /plugin marketplace add https://github.com/Motionsites-AI/claude-skill.git를 사용하세요.

Claude Code (수동)
plugins/motionsites-web-builder/skills/motionsites-web-builder를 ~/.claude/skills/에 복사하세요.

선택 사항: Claude가 자기 작업을 보게 하기
보고 고치는 루프는 Playwright와 함께 쓸 때 가장 잘 작동합니다:

pip install playwright && python -m playwright install chromium

사용해 보기
Claude에게 사이트를 만들어 달라고 하기만 하면 됩니다. 스킬이 자동으로 작동합니다:

"럭셔리 수면 추적 링의 랜딩 페이지 히어로를 만들어 줘."
"리스본의 건축 사진작가를 위한 포트폴리오 홈페이지를 만들어 줘. 에디토리얼하고 조용한 느낌으로."
"내 AI 여행 앱의 웨이트리스트 페이지용 Lovable 프롬프트를 작성해 줘."
"여기 내 현재 사이트야: 수상작처럼 보이게 만들어 줘."

전체 라이브러리를 원하시나요?
이 스킬의 예시와 미디어는 무료 샘플입니다. MotionSites Unlimited는 다음을 제공합니다:

500개 이상의 프리미엄 웹사이트 프롬프트, Lovable, Bolt, v0, Cursor, Claude에 바로 사용 가능
애니메이션 히어로 배경 및 섹션 프롬프트 (기능, 가격, 푸터…)
40개 이상의 Lovable 템플릿
MotionSites MCP, Claude가 프리미엄 프롬프트를 검색해 빌드에 바로 가져올 수 있음
개인 및 클라이언트 작업에 사용 가능

👉 Go Unlimited

라이선스
LICENSE를 참조하세요. 스킬의 지침과 코드는 MIT입니다. 예시 프롬프트와 미디어는 © MotionSites에 있으며, 이 스킬로 만드는 사이트에서 사용할 수 있습니다.