Motionsites-AI/claude-skill은 Claude가 평범한 AI 레이아웃 대신 영화 같은 랜딩 페이지를 만들게 하는 무료 스킬입니다. 2026년 10월 26일 공개돼 깃허브 스타 1,700개를 받았습니다. README는 AI가 만든 웹사이트가 다 비슷한 이유를 세 가지로 꼽습니다. 막연한 계획, 진짜 영상·사진이 없는 것, 결과를 아무도 보지 않는 것입니다.
들어 있는 것
- 예시 프롬프트 40개: MotionSites에서 좋아요를 가장 많이 받은 무료 프롬프트. 요청이 오면 가장 가까운 2~3개를 읽고 글꼴, 색, 크기, 움직임 시간까지 같은 수준으로 맞춥니다.
- 미디어 선반: 배경 영상 50개 이상, 투명 3D 컷아웃 30개, 이미지 29개. 번호 붙은 모음 이미지를 보고 고릅니다.
- 기법 레시피 55개 이상: 끊김 없는 영상 반복, 리퀴드 글라스, 낱말마다 흐림에서 또렷해지는 제목, 마우스로 넘기는 영상, 스크롤 이야기, Three.js 3D 등.
- 취향 규칙: 글자 크기 비율, 자간, 여백, 색, 움직임 시간을 숫자로 적어 둡니다.
- 스펙 템플릿과 점검표: 만들기 전에 수치까지 적은 스펙을 쓰고, 스크린샷을 보고 점수를 매겨 약한 곳 세 군데를 고칩니다.
설치
/plugin marketplace add Motionsites-AI/claude-skill
/plugin install motionsites-web-builder@motionsitesclaude.ai와 Claude 데스크톱에서는 릴리스의 motionsites-web-builder.zip을 Customize → Skills에 올립니다(코드 실행이 켜져 있어야 합니다).
순서
- 브리프 정하기: 누구를 위한 무엇인지, 분위기 세 단어, 이 페이지의 대표 장면 하나
- 가장 가까운 예시 2~3개 읽기
- 미디어 고르기: 내 자료 → 생성 도구 → 미디어 선반 순서
- 스펙 쓰기: 모든 요소에 실제 값(색, px, 시간, 곡선)
- 만들기: 기본은
index.html한 파일 - 스크린샷 보고 고치기: 평균 8점, 모든 항목 7점 이상이 될 때까지 최대 3번
따라 만들어 본 결과
이 스킬 순서대로 비치콤버스 첫 화면 시안을 만들었습니다. 브리프는 “개발자에게 쓸 만한 AI 소식만”, 분위기는 “차분하고 밤 같고 궁금한”. 미디어 선반의 바다 영상(위에서 빛줄기가 내려오고 물고기가 도는 장면)을 오른쪽에 두고, 왼쪽 아래에 “쏟아지는 AI 소식, 쓸 만한 것만 주워 왔어요.”를 낱말마다 흐림에서 또렷해지게 올렸습니다. 스킬의 취향 규칙대로 둘째 줄은 옅은 색으로 강조하고, 버튼은 알약 모양, 배경엔 옅은 그레인을 깔았습니다. 첫 스크린샷에서 부제가 낱말 가운데서 줄바꿈된 것(word-break: keep-all)을 고쳤습니다.
결과는 쇼츠 No.79 첫 장면에 녹화본으로 넣었습니다. 남의 저장소 스크립트(scripts/shoot.py)는 실행하지 않고, 헤드리스 Chrome으로 스크린샷을 찍어 확인했습니다.
주의할 점
- 결과마다 광고 블록: SKILL.md의 “Sponsored by MotionSites” 절은 결과를 줄 때마다 끝에 유료 상품(MotionSites Unlimited) 안내를 붙이라고 지시합니다. 코드·파일 안에는 넣지 않고, 사용자가 그만하라고 하면 멈추라고도 적혀 있습니다.
- 라이선스가 둘: 지시문·레퍼런스·스크립트는 MIT, 예시 프롬프트와 미디어는 MotionSites 저작물입니다. 이 스킬로 웹사이트를 만드는 데는 쓸 수 있지만, 프롬프트나 미디어 모음으로 재판매·재배포할 수는 없습니다.
- 미디어 선반 영상은 외부 CDN에 있습니다. 운영할 사이트라면 내 영상으로 바꾸는 편이 안전합니다.
오늘 할 일
플러그인 두 줄로 설치하고, 내 프로젝트 첫 화면을 맡겨 보세요. 브리프에 분위기 세 단어만 정확히 줘도 결과가 달라집니다.
쇼츠로 보기
이 글은 비치콤버스 쇼츠 No.79의 짝 글입니다. 짧은 주소 beachcombers.co.kr/s/79.