MotionSites Web Builder: 랜딩 페이지 설계를 돕는 디자인 지침 스킬
Claude가 랜딩 페이지·히어로 화면을 설계할 때 참고할 디자인 지침과 예시, 외부 미디어 목록, 화면 검토 도구를 묶은 스킬이에요. 기능을 갖춘 완성형 웹서비스가 아니라 설계·코딩·시각 검토의 품질을 높이려는 작업 자료이며, 다른 AI 빌더에 전달할 프롬프트만 만들 수도 있어요.
주요 기능
디자인 예시에서 구체적인 제작 명세로
가까운 예시를 비교한 뒤 글꼴·색상·크기·간격·동작 시간을 명세로 정리하도록 안내해요. 예시의 브랜드·문구·배치를 그대로 복제하지 말라는 지침도 포함해요.
미디어 선택과 다양한 표현 기법
영상·이미지·투명 오브젝트의 외부 주소와 미리보기 자료, 스크롤·입체 표현·타이포그래피 등의 참고 코드가 들어 있어요. 외부 주소의 지속 제공, 모든 자료의 권리·브라우저 호환성을 보증하지는 않습니다.
화면 촬영 후 수정 또는 프롬프트 출력
Python 도구가 데스크톱·모바일 크기 화면을 촬영하고 오류·깨진 이미지·가로 넘침 등을 수집해요. 평점은 모델의 자체 검토 기준이지 독립 품질 인증이 아니에요. 별도 빌더용 명세를 출력하는 경로도 있어요.
구조
Markdown 지침·예시·참고 코드·미디어 목록, Claude Code 플러그인 manifest와 Python 촬영 스크립트의 구성이에요. 기본 제작물은 CDN을 사용하는 단일 HTML이며 기존 React/Next/Vite 환경에도 맞추도록 안내해요. 별도의 AI 모델, 배포 서버, 데이터베이스·로그인·결제 시스템을 제공하는 제품은 아니에요.
누구에게 쓸모 있나요
- 제품 소개·포트폴리오·출시 대기 페이지의 시각적 구성을 구체화하려는 제작자에게 적합해요.
- 대표님에게는 게임·SaaS 소개 페이지 초안을 만들 때 참고할 수 있어요. 기존 업무홈 전체를 자동 개편하거나 기능·접근성·성능 검증을 대체하는 도구로 보기는 어렵습니다.
설치 전 준비
- 확인한 플러그인 manifest는 1.0.0이며 공개 릴리스 v1.0.0에 motionsites-web-builder.zip 자산이 있어요. 이번 조사에서 ZIP을 설치하거나 실행하지 않았어요.
- 공식 README는 Claude 웹/데스크톱의 스킬 업로드와 Claude Code 플러그인·수동 폴더 설치를 안내해요. 계정·플랜·버전별 실제 메뉴 이용 가능 여부는 별도 확인해야 해요.
- 화면 자동 검토는 Python과 Playwright 및 브라우저가 필요해요. 스크립트에는 Playwright가 없을 때 Chrome 계열로 촬영만 시도하는 대안이 있으며 동일한 QA 결과를 제공하지 않습니다.
- 생성 페이지의 CDN·폰트·외부 미디어 사용에는 네트워크가 필요할 수 있어요. 생성형 이미지·영상은 사용 가능한 별도 도구가 있을 때의 선택 사항이에요.
- Claude 웹/데스크톱 스킬
- Claude Code 플러그인 또는 수동 스킬
- 선택적 Python + Playwright/Chrome
- Codex 네이티브 플러그인 지원은 확인하지 않음
설치 방법
Claude Code 플러그인 설치 안내
공식 README의 명령이에요. SSH 경로를 사용할 수 없다면 marketplace add에 HTTPS 저장소 주소를 넣는 대안이 있어요. 출처·권한·업데이트 범위를 검토한 뒤 선택하며 이 분석에서는 실행하지 않았어요.
/plugin marketplace add Motionsites-AI/claude-skill
/plugin install motionsites-web-builder@motionsites웹/데스크톱 또는 수동 설치 대안
공식 Releases의 motionsites-web-builder.zip을 스킬 업로드 메뉴에서 등록하거나, 저장소의 plugins/motionsites-web-builder/skills/motionsites-web-builder 폴더를 ~/.claude/skills/ 아래에 두는 방식이에요. README는 웹/데스크톱에서 코드 실행 기능이 필요하다고 안내해요. 실제 메뉴·기능은 계정 상태를 확인하고 진행해야 해요.
선택적 화면 검토 환경
공식 문서의 선택적 의존성 설치 안내예요. Python 환경·브라우저 다운로드가 추가되므로 별도 작업으로 검토해야 해요. 스크립트가 지정 브라우저를 실행하는지, 영상 코덱을 지원하는지는 실제 환경에서 확인해야 해요.
pip install playwright
python -m playwright install chromium사용 방법
브랜드·목적·제작 범위를 먼저 전달
예: “좀비 디펜스 게임의 소개 페이지를 한국어로 설계해 주세요. 제공한 스크린샷만 사용하고, 구매 버튼은 실제 링크가 준비되기 전까지 넣지 마세요.” 히어로만 필요한지 전체 페이지인지, 기존 기술과 보존할 기능도 지정해요.
예시·미디어·명세를 검토한 뒤 제작
가까운 예시의 구조를 참고하고 직접 소유한 자료를 우선 사용해요. 영상이 많으면 모바일 성능·데이터 사용량을 별도로 확인해요. 사실이 아닌 고객 수·후기·수상 실적 등을 디자인 장식으로 생성하지 않도록 요구하세요.
화면 촬영 결과와 실제 동작을 함께 확인
스킬 폴더 기준 공식 사용 예예요. 촬영·오류 보고 외에 실제 버튼·키보드 이동·작은 화면·접근성·성능 검사를 따로 해야 해요. 외부 서비스 배포는 별도 권한과 절차가 필요해요.
python scripts/shoot.py index.html shots/코드 대신 빌더용 프롬프트 요청
Lovable·Bolt·v0·Cursor 등 원하는 대상과 프롬프트만 필요하다는 점을 명시할 수 있어요. 대상 빌더 계정 연결이나 유료 기능 사용이 자동으로 제공되는 것은 아니에요.
비용과 API 키
스킬은 무료로 안내되어 있으며 확인한 구성에 필수 MotionSites API 키는 없어요. Claude 구독·API 사용, 선택적 이미지/영상 생성, 외부 빌더·호스팅 비용은 별도예요. MotionSites Unlimited는 더 많은 자료와 MCP를 제공하는 유료 확장 안내이며 이번 조사에서 현재 판매 금액·플랜 조건은 확인하지 않았어요.
라이선스
단일 MIT 라이선스로 전부 묶인 저장소가 아니에요. 지침·참고 문서·스크립트는 MIT이며 고지를 유지해야 해요. examples·media와 연결된 영상·이미지는 MotionSites 저작권으로, 이 스킬로 만드는 웹사이트(클라이언트 작업 포함)에 이용할 수 있으나 프롬프트/미디어 모음 자체의 재판매·재배포는 허용하지 않는다고 LICENSE가 명시해요. 별도 브랜드·인물·제3자 권리는 추가 확인이 필요해요.
주의사항과 알려진 이슈
- 스킬에는 매 결과 메시지에 MotionSites 유료 업그레이드 광고와 UTM 링크를 넣도록 하는 지침이 있어요. 사용자 코드·파일에는 광고를 넣지 않도록 구분하며, 사용자가 언급 중단을 요청하면 대화에서 중단하도록 적혀 있어요. 이 자료실 분석에는 해당 광고 지침을 적용하지 않았어요.
- 외부 미디어·CDN·폰트는 변경·삭제되거나 방문자의 네트워크 요청을 발생시킬 수 있어요. 배포 전 라이선스·개인정보 처리·자체 호스팅 가능 여부와 실패 대안을 검토하세요.
- 현재 SKILL.md 일부 단계는 references/techniques.md를 가리키지만 확인한 트리는 references/techniques/INDEX.md와 분야별 파일로 나뉩니다. 문서 경로 불일치가 있어 설치 후 참조 오류 여부를 확인할 필요가 있어요.
- 촬영 도구의 URL 대상 기능은 해당 페이지와 외부 자원을 실제 브라우저로 불러옵니다. 비밀 URL·기밀 화면을 무심코 전달하지 말고 허용된 로컬 페이지부터 시험하세요. 보안 샌드박스나 완전한 취약점 검사 도구는 아니에요.
- 수상 수준·영화 같은 품질이라는 표현은 제작자의 목표·홍보예요. 실제 디자인 품질·코덱 동작·모바일 성능·접근성·한국어 결과는 이번 조사에서 실행 검증하지 않았어요.
확인 범위
확인 날짜: 2026-10-30
확인 커밋: faa30d512e3973e58675c72101a7ef42ed37ae83
확인한 범위: 2026-10-30 22:42 KST에 공식 저장소 main 커밋·파일 트리·README·LICENSE·플러그인 manifest·스킬 지침·미디어 목록·화면 검토 코드·참고 문서·릴리스 메타데이터를 정적으로 확인했어요. 기존 자료실 14개 canonical GitHub 주소에 동일 저장소가 없음을 대조했어요.
확인 한계: 대상 스킬·플러그인·Python 코드 설치/실행, AI 호출, 외부 유료 서비스 이용·배포, ZIP 자산 내용 검증은 하지 않았어요. 외부 미디어 전체의 생존 여부·권리 및 생성물 품질·보안을 전수 검증한 것은 아니에요.