프런트엔드 & UI
Animation Review
시니어급 완성도 기준으로 모션을 찾고, 개선하고, 검토합니다.
무엇인가
Emil Kowalski의 모션 스킬 셋이 하나의 루프로 맞물립니다. 움직여야 할 곳을 찾고, 기존 모션을 개선하고, 애니메이션 코드를 높은 완성도 기준으로 검토합니다.
Bundles 3 commands: find-animation-opportunities / improve-animations / review-animations
Find, improve and review motion in a codebase against a senior craft bar.
디자인에 왜 중요한가
- 움직여야 하는데 멈춰 있는 UI를 드러내고, 움직이지 말아야 할 모션은 걷어냅니다.
- 두루뭉술한 ‘더 좋게 만들어 줘’를 우선순위가 매겨진 모션 감사로 바꿉니다.
- 애니메이션을 개인 취향이 아니라 명시된 완성도 기준에 붙들어 둡니다.
다루는 내용
- Find animation opportunities
- Improve animations
- Review animations
- Craft bar
설치 방법
Animation Review
-
저장소를 클론하세요.
git clone https://github.com/emilkowalski/skills -
Codex에 스킬 파일 경로를 지정하세요.
skills/find-animation-opportunities/SKILL.md -
그다음 원하는 UI를 설명하세요. Codex가 스킬을 따릅니다.
Codex로 실행하는 법
-
find 패스를 돌려 UI에서 모션을 넣을 만한 지점을 찾으세요.
-
improve 패스를 적용해 기존 애니메이션 코드를 손보세요.
-
내보내기 전에 review 패스를 돌려 완성도 낮은 모션을 잡아내세요.
여기 모인 플러그인은 모두 무료 오픈소스이며, 실제 업스트림 출처로 연결됩니다.
codex-design 목록에서 더 보기 ↗다른 Codex 디자인 플러그인
프런트엔드 & UI 무엇을 하나 gpt-taste GSAP 스크롤 모션과 빈틈없는 벤토 그리드로 수상작급 랜딩 페이지를 만듭니다. 
디자인 시스템 무엇을 하나 Stitch Design Taste Google Stitch가 흔해 빠진 화면 대신 개성 있는 화면을 내놓도록 DESIGN.md를 작성합니다. 
프런트엔드 & UI 무엇을 하나 image-to-code 디자인 이미지를 먼저 생성하고 분석한 뒤, 그에 맞는 프런트엔드 코드를 만듭니다. 
프런트엔드 & UI 무엇을 하나 imagegen-frontend-mobile 프리미엄 모바일 앱 화면 플로우를 코드가 아니라 이미지로 생성합니다. 다음 단계
세팅 없이, Open Design으로 디자인하기
이 플러그인을 직접 설치해도 되고, Open Design으로 Codex 주위에 잘 정돈된 디자인 레이어를 통째로 두를 수도 있습니다. 키는 직접 가져오고, 산출물도 직접 소유하세요.