moguzbulbul/blueprint-animation

해결하는 문제

정적인 UX 디자인을 연속적이고 단계적인 블루프린트 애니메이션으로 변환합니다. 이로써 디자이너는 UX 결정의 근거를 설명하거나, "이전" 상태에서 "이후" 상태로의 리디자인을 보여주거나, 한 화면의 모듈을 분해하여 특정 방식으로 구현한 이유를 설명할 수 있습니다.

작동 방식

이 프로젝트는 Figma 파일에서 값, 폰트, 아이콘을 직접 읽어 디자인을 1:1로 재현하는 Claude Design용 스킬입니다. 주로 두 가지 모드로 작동합니다:

• 리디자인 모드: "이전" UI에서 "이후" UI로의 전환을 애니메이션화합니다. 인터페이스는 시안 블루프린트로 변환되고, 변경된 부분은 재구성되며 새로운 UI가 노출됩니다.
• 설명 모드: 디자인은 정지 상태로 유지되며, 개별 모듈을 차례로 블루프린트로 전환하여 가이드라인, 치수, 레이블 등을 보여주어 디자인의 근거를 설명합니다.

두 모드 모두 구조화된 5단계 애니메이션 프로세스를 따릅니다: 모듈에 초점을 맞추기, 블루프린트 스캔 라인 적용하기, 요소 구축 또는 주석 달기, 최종 UI 노출하기, 설명 텍스트 유지하기.

대상 사용자

UX 디자이너 및 제품 디자이너로, UX 케이스 스터디, 리디자인 워크스루, 디자인 근거 발표, 소셜 미디어 게시물을 제작해야 하는 사람들을 대상으로 합니다.

주요 특징

• Figma 통합: 실제 폰트와 내보낸 아이콘을 사용해 디자인을 1:1로 재현.
• 두 가지 애니메이션 모드: 리디자인 전환과 세부 모듈 설명 모두 지원.
• 지속적이고 자르지 않는 애니메이션 시퀀스.
• 내장된 품질 규칙: 단계적 애니메이션을 보장하며, 이동 중인 부분에 텍스트 오버레이가 없도록 함.
• Claude Design 스킬: Claude.ai 환경에서 사용 가능한 ZIP 파일로 쉽게 설치 가능.