Motion Design Skill

설치하기

Claude Code 같은 에이전트 도구의 터미널에 붙여넣으면 설치할 수 있어요.

npx skills add LottieFiles/motion-design-skill

특징
- 기획 선행 구조 : 코드 생성 전 애니메이션 연출 방향(타이밍·이징)을 먼저 정의
- 기술 무관 (Agnostic) : CSS, Framer Motion, GSAP, Lottie 등 모든 환경 호환
- UI 맞춤 모션 체계 : 디즈니 12가지 원칙, 페르소나, 실전 패턴 레시피 수록
- 원클릭 AI 연동 : npx 명령어로 Claude, Cursor 등 40+ 에이전트에 즉시 설치
장점
- AI 환각 & 수정 축소 : 기획 단계로 코드 재작업 횟수를 대폭 감소
- 일관된 브랜드 경험 : 서비스 전체에統一된 감정·시각적 인터랙션 유지
- 개발 속도 향상 : 검증된 상태 피드백 레시피로 빠르게 고품질 UI 완성

AI 웹사이트 템플릿·프롬프트 라이브러리

AI 양산형 미학을 거부하는 에이전트용 디자인 스킬