Free Claude skill: make Claude build award-level, cinematic landing pages. By MotionSites.

MotionSites Web Builder (claude-skill)

무엇인가

Claude 스킬 — Claude가 웹사이트를 구축하는 방식을 바꾸는 다운로드 가능한 애드온입니다. 일반적인 AI 레이아웃 대신, Claude가 영화적이고 "수상급" 랜딩 페이지를 생성하도록 합니다.

해결하는 문제

README에 따르면 AI가 만든 웹사이트가 모두 똑같이 보이는 이유는 세 가지입니다:

모호한 계획 — 코딩 전에 정확한 디자인 브리프가 없음
실제 미디어 없음 — 작업할 실제 비디오나 이미지가 없음
결과를 보는 사람이 없음 — 검토나 품질 검사가 없음

이 스킬은 세 가지 모두를 해결합니다.

작동 방식

설명된 워크플로우:

Claude는 MotionSites(디자인 갤러리 사이트)에서 가장 좋아요를 많이 받은 디자인을 연구합니다
실제 영화적 미디어(비디오, 3D 컷아웃, 이미지)를 선택합니다
코드를 작성하기 전에 정확한 빌드 사양을 작성합니다
페이지를 구축합니다
자신의 작업을 스크린샷으로 찍고 수정하여 "갤러리 수준 기준"을 통과할 때까지 반복합니다

포함 내용

40개의 예제 프롬프트 — MotionSites에서 가장 좋아요를 많이 받은 무료 프롬프트. Claude는 각 새 브리프에 대해 가장 가까운 2~3개를 읽고 세부 수준과 취향을 맞춥니다.
미디어 선반 — 50개 이상의 영화적 히어로 비디오, 30개의 투명 3D 컷아웃, 29개의 이미지. 공개 호스팅되며 번호가 매겨진 콘택트 시트에 표시되어 Claude가 눈으로 미디어를 선택합니다.
55개 이상의 기술 레시피 — 작동하는 코드 포함: 원활한 비디오 루프, 리퀴드 글래스, 단어별 블러 헤드라인, 마우스 스크럽 비디오, 스포트라이트 리빌, 깊이 캐러셀, 스크롤 스토리, 실제 3D 모델(Three.js) 등.
실제 숫자가 있는 디자인 취향 규칙 — 타입 스케일, 트래킹, 간격, 색상, 모션 타이밍, 카피 가이드라인.
사양 템플릿 — Claude가 코딩 전에 작성하는 정확한 브리프. README는 이를 "품질이 결정되는 곳"이라고 부릅니다.
보고 수정하는 루프 — 손상된 자산, 모바일 오버플로, 글꼴, 비디오 재생을 확인하는 스크린샷 + QA 스크립트와 채점 루브릭.
프롬프트 모드 — 코드 대신 프롬프트를 요청할 수 있으며, Lovable, Bolt, v0, Cursor, Manus, Google AI Studio, Kimi에 맞게 조정되었습니다.

설치

Claude.ai 및 Claude 데스크톱:

최신 릴리스에서 motionsites-web-builder.zip을 다운로드합니다
Claude에서: 사용자 지정 → 스킬 → + → 스킬 만들기 → 스킬 업로드, zip을 선택하고 켭니다
설정 → 기능에서 코드 실행을 활성화해야 합니다

Claude Code(플러그인):

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

(GitHub SSH 키가 없나요? HTTPS URL 변형을 대신 사용하세요.)

Claude Code(수동): plugins/motionsites-web-builder/skills/motionsites-web-builder를 ~/.claude/skills/에 복사합니다.

최상의 결과를 위한 선택 사항: Claude가 자신의 작업을 볼 수 있도록 Playwright를 설치합니다:

pip install playwright && python -m playwright install chromium

사용 방법

Claude에게 사이트를 요청하기만 하면 스킬이 자동으로 시작됩니다. README의 예제 프롬프트:

"럭셔리 수면 추적 링을 위한 랜딩 페이지 히어로를 구축해 주세요."
"리스본의 건축 사진작가를 위한 포트폴리오 홈페이지를 만들어 주세요. 에디토리얼하고 조용하게."
"내 AI 여행 앱을 위한 대기자 명단 페이지용 Lovable 프롬프트를 작성해 주세요."
"이것이 제 현재 사이트입니다: 수상급으로 보이게 해 주세요."

무료 vs 유료

이 스킬은 무료 샘플입니다. MotionSites Unlimited라는 유료 티어가 잠금 해제합니다:

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

라이선스

스킬의 지침과 코드는 MIT입니다.

핵심 요점

핵심 아이디어: Claude는 모호한 요청에서 단순히 페이지를 생성하지 않습니다. 수상 경력이 있는 예제를 연구하고, 실제 미디어를 선택하고, 정확한 사양을 작성하고, 구축한 다음 자신의 스크린샷을 검토하고 반복하여 결과가 높은 품질 기준을 충족할 때까지 계속합니다.

Motionsites-AI/claude-skill