프런트엔드 & UI
gpt-taste
GSAP 스크롤 모션과 빈틈없는 벤토 그리드로 수상작급 랜딩 페이지를 만듭니다.
무엇인가
히어로, 타이포그래피, 컴포넌트, GSAP 패러다임을 시뮬레이션된 무작위 선택으로 골라 레이아웃 변주를 강제하는 프런트엔드 지침. AIDA 페이지 구조와 넉넉한 섹션 간격도 함께 강제합니다.
Elite UX/UI & Advanced GSAP Motion Engineer. Enforces Python-driven true randomization for layout variance, strict AIDA page structure, wide editorial typography (bans 6-line wraps), gapless bento grids, strict GSAP Scro
디자인에 왜 중요한가
- 컨테이너가 줄바꿈으로 벽처럼 막히는 대신 넓어지므로 히어로 헤드라인이 두세 줄에 머뭅니다.
- 벤토 그리드는 grid-flow-dense를 써서 어떤 칸도 비거나 깨진 채로 남지 않습니다.
- 값싼 메타 라벨은 금지되며, 출력 전에 버튼 텍스트 대비를 검증합니다.
다루는 내용
- Python-driven true randomization
- AIDA structure and spacing
- Hero architecture and the 2-line iron rule
- The gapless bento grid
- Advanced GSAP motion and hover physics
- Content, assets and strict bans
설치 방법
gpt-taste
-
저장소를 클론하세요.
git clone https://github.com/Leonxlnx/taste-skill -
Codex에 스킬 파일 경로를 지정하세요.
skills/gpt-tasteskill/SKILL.md -
그다음 원하는 UI를 설명하세요. Codex가 스킬을 따릅니다.
Codex로 실행하는 법
-
페이지를 요청하면, UI 코드보다 먼저 스킬이 design_plan 블록을 내놓습니다.
-
히어로 레이아웃, 폰트 스택, 컴포넌트, GSAP 패러다임 등 무작위 선택 결과를 검토하세요.
-
히어로 폭 계산, 그리드 밀도, 라벨 점검, 대비 등 프리플라이트 항목을 확인하세요.
여기 모인 플러그인은 모두 무료 오픈소스이며, 실제 업스트림 출처로 연결됩니다.
codex-design 목록에서 더 보기 ↗다른 Codex 디자인 플러그인
디자인 시스템 무엇을 하나 Stitch Design Taste Google Stitch가 흔해 빠진 화면 대신 개성 있는 화면을 내놓도록 DESIGN.md를 작성합니다. 
프런트엔드 & UI 무엇을 하나 image-to-code 디자인 이미지를 먼저 생성하고 분석한 뒤, 그에 맞는 프런트엔드 코드를 만듭니다. 
프런트엔드 & UI 무엇을 하나 imagegen-frontend-mobile 프리미엄 모바일 앱 화면 플로우를 코드가 아니라 이미지로 생성합니다. 
프런트엔드 & UI 무엇을 하나 imagegen-frontend-web 랜딩 페이지 섹션마다 가로형 레퍼런스 이미지를 하나씩 생성합니다. 다음 단계
세팅 없이, Open Design으로 디자인하기
이 플러그인을 직접 설치해도 되고, Open Design으로 Codex 주위에 잘 정돈된 디자인 레이어를 통째로 두를 수도 있습니다. 키는 직접 가져오고, 산출물도 직접 소유하세요.