프런트엔드 & UI
animation-vocabulary
두루뭉술한 모션 설명을 정확한 기술 용어로 바꿔 줍니다.
무엇인가
역방향 조회 용어집. 모션 효과를 대충 설명하면 정확한 용어를 원문 그대로 돌려주고, 여럿이 맞을 법하면 비슷한 대안도 함께 제시합니다.
Reverse-lookup glossary that turns a vague description of a web animation or motion effect into its exact term ("the bouncy thing when a popover opens" → Pop in; "the iOS rubber-band scroll" → Rubber-banding). Use when t
디자인에 왜 중요한가
- 디자이너가 에이전트에게 프롬프트할 때 쓸 정확한 단어를 쥐여 줍니다.
- clip-path와 mask, pop in과 bounce처럼 헷갈리는 쌍을 갈라 줍니다.
- 용어를 지어내지 않으므로 이름을 믿을 수 있습니다.
다루는 내용
- Entrances and exits
- Sequencing and timing
- Transitions between states
- Scroll
- Spring animations
- Polish and effects
설치 방법
animation-vocabulary
-
저장소를 클론하세요.
git clone https://github.com/emilkowalski/skills -
Codex에 스킬 파일 경로를 지정하세요.
skills/animation-vocabulary/SKILL.md -
그다음 원하는 UI를 설명하세요. Codex가 스킬을 따릅니다.
Codex로 실행하는 법
-
본 것을 설명하세요. 예를 들어 ‘iOS 고무줄 스크롤’처럼요.
-
굵게 표시한 용어와 한 줄짜리 용어 정의를 돌려줍니다.
-
두 용어가 모두 그럴듯하면 대안을 요청하세요.
여기 모인 플러그인은 모두 무료 오픈소스이며, 실제 업스트림 출처로 연결됩니다.
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 주위에 잘 정돈된 디자인 레이어를 통째로 두를 수도 있습니다. 키는 직접 가져오고, 산출물도 직접 소유하세요.