프런트엔드 & UI
emil-design-eng
Emil Kowalski의 애니메이션 타이밍, 이징, 컴포넌트 다듬기 규칙.
무엇인가
디자인 엔지니어링 철학을 담습니다. 애니메이션 결정 프레임워크, 스프링 지침, 컴포넌트 원칙, clip-path 기법, 제스처 처리, 성능 규칙, 리뷰 체크리스트까지.
This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.
디자인에 왜 중요한가
- 자주 쓰는 동작은 애니메이션을 아예 뺍니다. 그래서 커맨드 팔레트가 즉각 반응합니다.
- 등장은 scale(0)이 아니라 scale(0.95)에서 시작해, 무엇도 허공에서 튀어나오지 않습니다.
- 팝오버는 가운데가 아니라 트리거에서 커지며 공간적 연결을 유지합니다.
다루는 내용
- The animation decision framework
- Spring animations
- Component building principles
- clip-path for animation
- Performance rules
- Review checklist
설치 방법
emil-design-eng
-
저장소를 클론하세요.
git clone https://github.com/emilkowalski/skills -
Codex에 스킬 파일 경로를 지정하세요.
skills/emil-design-eng/SKILL.md -
그다음 원하는 UI를 설명하세요. Codex가 스킬을 따릅니다.
Codex로 실행하는 법
-
Codex에 UI 코드 리뷰를 맡기면 Before, After, Why 표로 돌려줍니다.
-
새 모션이라면 이걸 움직여야 하나, 왜, 어떤 이징으로, 얼마나 빠르게에 답합니다.
-
체크리스트를 적용해 transition: all과 300ms를 넘는 지속 시간을 짚어냅니다.
여기 모인 플러그인은 모두 무료 오픈소스이며, 실제 업스트림 출처로 연결됩니다.
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 주위에 잘 정돈된 디자인 레이어를 통째로 두를 수도 있습니다. 키는 직접 가져오고, 산출물도 직접 소유하세요.