크리에이티브 엑설런스 플러그인, 클로드 코드가 상호작용 테제로 애니메이션 품질 향상

개발자가 AI 어시스턴트가 생성하는 애니메이션과 모션 디자인의 품질을 향상시키기 위해 클로드 코드용 Creative Excellence 플러그인을 만들었습니다. 이 플러그인은 구조화된 모션 디자인 접근법을 구현하여 클로드가 일반적인 호버 효과, 무작위 그라데이션, 글래스모피즘, 단순한 애니메이션을 생성하는 일반적인 문제를 해결합니다.

작동 방식

핵심 혁신은 '상호작용 테제' 개념입니다. 코드를 작성하기 전에 클로드는 '150ms 스냅 이즈아웃과 슬라이드+페이드' 또는 '시네마틱 클립 패스 공개와 지그재그 텍스트'와 같은 한 문장으로 설명된 동작 개념을 제안해야 합니다. 사용자는 코딩이 시작되기 전에 이 개념을 승인하거나 거부하여 은행 앱과 같은 심각한 애니메이션에서 바운스 효과와 같은 부적절한 애니메이션을 방지합니다.

승인 후 클로드는 적절한 기술 스택(GSAP, Framer Motion, CSS 네이티브 애니메이션 등)을 자동으로 결정하고 관련 하위 기술만 가져와 애니메이션을 구현하며, 선호 감소 동작 지원, 종료 애니메이션 및 레이아웃 성능을 포함한 기본 검사를 수행합니다.

플러그인 기능

• 두 가지 진입점: 기존 프로젝트 작업용 /creative-excellence와 브레인스토밍부터 구현 및 감사까지 전체 파이프라인용 /design-excellence
• 모션 원칙, GSAP, Framer Motion, CSS 네이티브 애니메이션, Three.js/R3F, 생성 캔버스, 디자인 감사 및 디자인 시스템을 다루는 8가지 하위 기술
• 클로드가 부적절하게 즉흥 연주하는 것을 방지하기 위한 BAD/GOOD 코드 비교 및 구체적인 '하지 마세요' 규칙
• mxyhi/ok-skills, kylezantos/design-motion-principles, freshtechbro/claudedesignskills를 포함한 연구된 저장소 기반

설치

이 플러그인은 github.com/AThevon/creative-excellence에서 무료 오픈소스입니다. 다음을 사용하여 설치하세요:

/plugin marketplace add [email protected]:AThevon/creative-excellence.git
/plugin install creative-excellence

개발자는 개선을 위한 피드백과 풀 리퀘스트를 환영합니다.