vibe-motion/skills

해결하는 문제

이 프로젝트는 Claude Code와 같은 AI 에이전트가 고품질의 프로그래밍 방식 시각 효과, 모션 그래픽 및 홍보 영상을 생성할 수 있도록 하는 "기술"(모듈형 애니메이션 및 렌더링 도구) 컬렉션을 제공합니다. 에이전트에게 특정 렌더링 엔진과 애니메이션 규칙을 제공함으로써 텍스트 기반 AI 프롬프트와 전문가급 시각적 출력 사이의 간극을 메웁니다.

작동 방식

사용자는 대화형 스크립트(npx skills add vibe-motion/skills)를 통해 기술을 설치합니다. 그런 다음 AI 에이전트는 이러한 도구를 사용하여 특정 렌더링 작업을 실행합니다. 라이브러리에는 다양한 전문 렌더러가 포함되어 있습니다:

• 벡터 및 로고 모션: pixel2motion과 같은 도구는 래스터 이미지를 SVG로 변환하고 애니메이션화하며, svg-assembly-animator는 에너지 넘치는 조립 효과를 생성합니다.
• 비디오 제작: brand-launch-video-star는 웹사이트 URL 또는 제품 이미지에서 빠른 템포의 홍보 영상을 생성하고, remotion-vinyl-player는 음악 플레이어 애니메이션을 생성합니다。
• 3D 및 물리 시뮬레이션: 3D 지구 비행 경로(threejs-earth-render), 3D Chladni 입자 시스템(3d-chladni-render), 그리고 인터랙티브한 p5.js 커튼 시뮬레이션(printed-curtain-render)을 위한 도구.
• UI/UX 애니메이션: WeChat 스타일의 채팅 애니메이션(wechat-2d-render) 및 금융 K-line 차트(remotion-candlestick)를 렌더링하기 위한 도구.
• 디자인 원칙: disney-animation-rule-skill은 코드 기반 애니메이션의 유동성과 느낌을 개선하기 위해 디즈니 애니메이션의 12원칙을 적용할 수 있는 프레임워크를 에이전트에게 제공합니다.

대상 사용자

모든 프레임을 수동으로 코딩할 필요 없이 브랜드 자산, 소셜 미디어 콘텐츠 및 UI 애니메이션 생성을 자동화하기 위해 AI 에이전트를 사용하는 개발자 및 크리에이터.

주요 특징

• 에이전트 최적화: AI 에이전트 워크플로우(예: Claude Code)에 통합되도록 특별히 설계되었습니다.
• 다양한 시각적 스타일: 2D SVG 애니메이션부터 복잡한 3D 입자 시스템 및 Remotion 기반 비디오 렌더링까지 모두 다룹니다.
• 자동화된 브랜드 자산: URL에서 직접 전문적인 제품 출시 영상을 생성할 수 있는 기능.
• 물리 기반 모션: 천/커튼 및 유체와 같은 입자 움직임에 대한 시뮬레이션이 포함되어 있습니다.