gpt-taste작성자 Leonxlnx

GPT Taste 스킬.

UI 디자인을 위한 Claude Code 및 Codex 스킬: 에디토리얼 레이아웃, 레이아웃 다양성, GSAP 모션을 하나의 프론트엔드 스킬로 제공합니다.

Web & UI
UI 코드

Leonxlnx/taste-skill · skills/gpt-tasteskill/SKILL.mdSKILL.md

--- name: gpt-taste description: 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 ScrollTriggers (pinning, stacking, scrubbing), inline micro-images, and massive section spacing. --- ## 1. PYTHON-DRIVEN TRUE RANDOMIZATION (BREAKING THE LOOP) ## 2. AIDA STRUCTURE & SPACING ## 3. HERO ARCHITECTURE & THE 2-LINE IRON RULE ## 4. THE GAPLESS BENTO GRID ## 5. ADVANCED GSAP MOTION & HOVER PHYSICS ## 6. COMPONENT ARSENAL & CREATIVITY

2026-09-14에 업스트림 파일에서 읽은 머리말 및 섹션 제목 · 전체 7,857자

01 기능

Claude Code와 Codex에서 gpt-taste 스킬이 수행하는 작업

요약, 워크플로, 산출물을 모두 해당 스킬의 SKILL.md에서 그대로 읽어 정리한 내용입니다.

SKILL.md에서2026-09-14 읽음 · 실행 기록 아님

스킬 자체의 표현으로

이 스킬은 표준 LLM 레이아웃 편향을 깨는 수상 경력급 프런트엔드 디자인 엔지니어링을 강제합니다.

이 Skill은 Python 기반 무작위화를 사용해 반복적인 레이아웃을 방지하고, 대규모 섹션 간격을 둔 AIDA 페이지 구조를 강제하며, 초와이드 컨테이너를 사용해 히어로 헤딩을 2~3줄로 제한하고, grid-flow-dense로 수학적으로 완벽한 여백 없는 벤토 그리드를 구축하며, 핀 고정·스태킹·스크러빙 애니메이션을 위한 고급 GSAP ScrollTrigger를 구현하고, 타이포그래피에 인라인 마이크로 이미지를 직접 삽입하며, 'SECTION 01' 같은 메타 라벨과 6줄 텍스트 줄바꿈을 유발하는 좁은 컨테이너를 금지합니다. 모든 페이지는 UI 코드를 출력하기 전에 design_plan 검증 블록을 요구합니다.

산출물

GSAP ScrollTrigger 애니메이션과 수학적으로 완벽한 그리드를 갖춘 React/UI 코드

예시 프롬프트 보기 ↗

작동 방식

01
프롬프트 시드로부터 Python 무작위화 시뮬레이션
UI 코드를 작성하기 전에, 사용자 프롬프트의 문자 수를 사용해 Python 스크립트를 시뮬레이션하여 하나의 히어로 아키텍처, 하나의 타이포그래피 스택, 세 개의 컴포넌트 아키텍처, 두 개의 GSAP 패러다임을 결정론적으로 선택합니다.
02
AIDA 프레임워크로 페이지 구조화
주의(영화적인 히어로), 관심(고밀도 벤토 그리드), 욕구(GSAP 스크롤 효과), 행동(대형 CTA와 푸터) 순서로 페이지를 구축합니다.
03
수학적 정밀도로 여백 없는 벤토 그리드 구축
모든 벤토 그리드에 Tailwind의 grid-flow-dense를 사용하고, col-span과 row-span 값이 빈 공간이나 빠진 모서리 없이 완벽하게 맞물리는지 수학적으로 검증합니다.
04
고급 GSAP ScrollTrigger 애니메이션 구현
분할 레이아웃을 이용한 스크롤 핀 고정, 이미지 확대·페이드 효과, 순차적 불투명도 변화가 있는 스크러빙 텍스트 리빌, 동적 카드 스태킹을 위해 ScrollTrigger가 적용된 실제 GSAP를 작성합니다.
05
필수 Design_plan 검증 출력
React나 UI 코드를 작성하기 전에, Python RNG 실행, AIDA 점검, 2~3줄 보장을 위한 히어로 수학적 검증, 벤토 밀도 증명, 라벨 검사 확인을 포함하는 design_plan 블록을 출력합니다.

02 적합성 확인

gpt-taste 스킬 사용 시점

이러한 종류의 UI 디자인 작업에는 Claude Code 또는 Codex에서 gpt-taste 스킬을 사용하십시오. 적합성과 제한 사항은 스킬 자체 파일에서 가져왔습니다.

적합한 경우

영화적이고 모션이 풍부한 GSAP 스크롤 효과가 필요한 수상급 프론트엔드 페이지
수학적으로 완벽한 벤토 그리드를 갖춘 고밀도 에디토리얼 레이아웃
반복적인 LLM 출력 패턴을 깨기 위해 레이아웃 다양성이 필요한 프로젝트
고급 GSAP ScrollTrigger 핀 고정, 스태킹, 스크러빙이 필요한 인터페이스

한계 인지하기

모션이 없는 정적 인터페이스는 엄격히 금지됩니다

제공할 사항

필요 사항GSAP — SKILL.md에서 필수로 명시됨.

03 스킬 내부

gpt-taste Skill이 Claude Code와 Codex에 부여하는 규칙

에이전트에게 SKILL.md가 설정하는 6가지 구체적인 지침, 기본값 및 제한 사항입니다 — 결과를 바꾸는 파일의 핵심 부분입니다.

히어로 헤딩은 최대 2~3줄로 제한
H1에 max-w-5xl 또는 max-w-6xl 같은 초와이드 컨테이너를 사용하고, clamp(3rem, 5vw, 5.5rem)으로 글꼴 크기를 줄여 헤딩이 2~3줄을 넘지 않도록 합니다.
메타 라벨 영구 금지
'SECTION 01', 'SECTION 04', 'QUESTION 05', 'ABOUT US' 같은 라벨은 영구히 금지됩니다. 저급하고 비전문적으로 보이므로 완전히 제거합니다.
타이포그래피 스택은 Inter 폰트를 제외
Satoshi, Cabinet Grotesk, Outfit, Geist 중에서 선택합니다. Inter 폰트는 명시적으로 금지되며 절대 사용해서는 안 됩니다.
코드나 출력물에 이모지 사용 금지
코드, 주석, 그 어떤 출력물에도 이모지를 사용하지 않음으로써 엄격하게 전문적인 서식을 유지합니다.
오버플로 래퍼로 가로 스크롤 방지
화면 밖 애니메이션으로 인한 가로 스크롤바를 원천적으로 방지하기 위해 페이지 전체를 overflow-x-hidden w-full max-w-full 클래스를 가진 main 요소로 감쌉니다.
완벽한 버튼 텍스트 대비 필수
버튼은 어두운 배경에는 흰색 텍스트를, 밝은 배경에는 어두운 텍스트를 사용하여 완벽하게 가독성이 있어야 합니다. 보이지 않는 텍스트는 실패로 간주됩니다.

04 활용하기

Claude Code 또는 Codex에 gpt-taste 설치

npx skills add 명령 한 번 실행 후, 에이전트에서 첫 번째 작업을 수행하고 결과 체크리스트를 확인합니다.

Claude Code, Codex 또는 귀하의 에이전트에 gpt-taste 추가

프로젝트에서 실행합니다. 설치 프로그램이 어떤 에이전트에 추가할지 묻습니다.

Terminal

npx skills add https://github.com/Leonxlnx/taste-skill --skill gpt-taste

skills/gpt-tasteskill/SKILL.md에 대한 일반적인 skills CLI 형식입니다. 리포지토리는 자체 경로를 문서화할 수 있습니다.

스킬에 첫 UI 디자인 작업 부여하기

스킬 자체의 용어로 작성되었습니다. 대괄호 부분은 각자의 자료로 교체합니다.

Starter prompt

Build a landing page for [product name] showcasing [three key features]. Use a cinematic hero with inline typography images, a gapless bento grid for the feature cards, GSAP scroll pinning to reveal testimonials as the user scrolls, and horizontal accordion components for the FAQ section. Include a massive CTA section at the bottom.

출처: 스킬 자체의 용어로 SKILL.md에서 작성했습니다.

첫 번째 결과 확인

SKILL.md 자체가 올바른 결과의 모습으로 제시하는 내용:

히어로 헤딩이 max-w-5xl 또는 max-w-6xl 같은 초광폭 컨테이너를 사용하여 2~3줄로 흐르는지 확인
벤토 그리드가 grid-flow-dense를 사용하며 빈 공간 없이 수학적으로 맞물리는지 확인
SECTION 01이나 QUESTION 05 같은 메타 레이블이 모두 제거되었는지 확인
어두운 배경에는 흰색 텍스트, 밝은 배경에는 어두운 텍스트로 버튼 텍스트 대비가 완벽한지 확인
페이지 구조가 내비게이션, 주의(Attention) 히어로, 관심(Interest) 벤토, 욕구(Desire) GSAP, 행동(Action) 푸터로 이어지는 AIDA 프레임워크를 따르는지 확인
히어로 섹션에 스탬프 아이콘이나 스팸 태그가 없는지 확인

OpenDesign에서는 gpt-taste를 SKILL.md 링크로 가져옵니다: Plugins → Add → Skill → Import from link, 그런 다음 상단 바에서 선택합니다.

OpenDesign 다운로드 빠른 시작 가이드 읽기

05 오픈 소스, 추적 가능

출처, 라이선스 및 검증

이 페이지의 사실이 어디에서 왔으며 언제 마지막으로 확인되었는지 안내합니다.

Author: Leonxlnx
Repository: github.com/Leonxlnx/taste-skill 브랜치 main
스킬 파일: skills/gpt-tasteskill/SKILL.md 검증 시 기록된 콘텐츠 체크섬; 커밋 ccbc156
License: MIT LICENSE에서 확인
리포지토리 스타: 86,946 이 카탈로그에 11개의 스킬을 포함하는 전체 Leonxlnx/taste-skill 리포지토리에 대해 2026-09-14에 촬영한 GitHub 스냅샷. gpt-taste의 평가 또는 사용 횟수가 아닙니다.
OpenDesign에서 검증됨: 2026-09-14 소스 파일, 경로, 라이선스 텍스트 및 스타 수가 확인되었습니다. OpenDesign 메인에 번들로 포함되지 않음(2026-08-28 확인); 이 페이지에 실제 실행 기록이 없습니다.

SKILL.md 내부

핵심 지침: AWWWARDS 수준의 디자인 엔지니어링이 스킬을 레이아웃 생성 시 통계적 LLM 편향을 깨는 최고 수준의 디자인 엔지니어링으로 자리매김합니다
Python 기반 진정한 무작위화(반복 탈피)프롬프트 문자 수를 사용해 레이아웃을 결정론적으로 선택하고 반복을 방지하는 시뮬레이션 Python 스크립트를 요구합니다
AIDA 구조 및 여백주의, 관심, 욕구, 행동 프레임워크를 요구하며 섹션 간에 py-32 md:py-48의 방대한 수직 패딩을 사용합니다
히어로 아키텍처와 2줄 철칙초광폭 컨테이너를 강제하고 헤딩을 최대 2~3줄로 제한하며, 6줄 줄바꿈을 유발하는 좁은 컨테이너를 금지합니다
빈틈없는 벤토 그리드grid-flow-dense와 col-span, row-span 값이 빈 공간을 전혀 남기지 않는지에 대한 수학적 검증을 요구합니다
고급 GSAP 모션과 호버 피직스스크롤 핀 고정, 이미지 스케일 페이드, 스크러빙 텍스트 리빌, 카드 스태킹, 호버 트랜스폼 효과를 정의합니다
컴포넌트 무기고와 창의성무작위 선택을 위한 인라인 타이포그래피 이미지, 수평 아코디언, 무한 마퀴, 후기 캐러셀을 나열합니다
콘텐츠, 에셋, 엄격한 금지 사항메타 레이블을 영구히 금지하고, CSS 필터를 적용한 picsum 이미지 시딩을 명시하며, overflow-x-hidden 래퍼를 요구합니다
필수 사전 점검 <design_plan>모든 UI 코드 작성 전에 Python RNG, AIDA 점검, 히어로 수학, 벤토 밀도 증명을 포함한 검증 블록을 요구합니다

스킬 자체 설명

"엘리트 UX/UI 및 고급 GSAP 모션 엔지니어. 레이아웃 변화를 위한 Python 기반 진정한 무작위화, 엄격한 AIDA 페이지 구조, 넓은 에디토리얼 타이포그래피(6줄 줄바꿈 금지), 간격 없는 벤토 그리드, 엄격한 GSAP ScrollTriggers(고정, 스택, 스크러빙), 인라인 마이크로 이미지 및 대규모 섹션 간격을 시행합니다."

SKILL.md의 프론트 매터 설명. 전체 파일은 약 7,857자입니다. GitHub에서 전체 파일 읽기.

06 설치하기 전에

gpt-taste 스킬에 관한 질문

이 답변은 2026-09-14 기준으로 확인한 SKILL.md 내용을 근거로 하며, 실행 기록을 바탕으로 한 것이 아닙니다.

이 스킬은 왜 UI 코드를 생성하기 전에 Python 무작위화를 사용하나요?

LLM은 본질적으로 게으르며 통계적 편향으로 인해 항상 첫 번째 레이아웃 옵션을 선택합니다. 이 스킬은 프롬프트의 문자 수를 결정론적 시드로 사용하는 Python 스크립트를 시뮬레이션하여 다양한 히어로 아키텍처, 타이포그래피 스택, 컴포넌트, GSAP 애니메이션의 선택을 강제하고 반복적인 출력을 방지합니다.

GPT Taste

실제 UI 디자인 작업에서 gpt-taste 실행하기.

OpenDesign을 다운로드하고, SKILL.md 링크에서 gpt-taste를 가져온 후, 위 프롬프트를 붙여넣고 결과 전에 계획을 확인하십시오.

OpenDesign 다운로드 모든 스킬 보기

터미널

npx skills add https://github.com/Leonxlnx/taste-skill --skill gpt-taste