프런트엔드 & UI
high-end-visual-design
뻔한 AI 기본값을 막고 에이전시급 레이아웃과 모션을 강제합니다.
무엇인가
AI가 흔히 쓰는 디자인 기본값을 금지하고, UI 코드를 쓰기 전에 에이전트가 분위기 원형 하나와 레이아웃 원형 하나를 고르게 강제하는 지침 스킬.
Teaches the AI to design like a high-end agency. Defines the exact fonts, spacing, shadows, card structures, and animations that make a website feel expensive. Blocks all the common defaults that make AI designs look che
디자인에 왜 중요한가
- Inter, Roboto, 두꺼운 Lucide 아이콘이 금지되므로 결과물이 틀에 박힌 느낌을 벗습니다.
- 카드는 바깥 껍데기와 안쪽 코어를 겹쳐, 컨테이너에 정교하게 깎은 듯한 깊이를 줍니다.
- 섹션 패딩이 py-24부터 시작하므로 레이아웃이 빽빽하지 않고 숨을 쉽니다.
다루는 내용
- Absolute zero directive
- Creative variance engine
- Haptic micro-aesthetics
- Motion choreography
- Performance guardrails
- Pre-output checklist
설치 방법
high-end-visual-design
-
저장소를 클론하세요.
git clone https://github.com/Leonxlnx/taste-skill -
Codex에 스킬 파일 경로를 지정하세요.
skills/soft-skill/SKILL.md -
그다음 원하는 UI를 설명하세요. Codex가 스킬을 따릅니다.
Codex로 실행하는 법
-
Codex에 페이지를 요청하면, 먼저 변주 엔진을 조용히 돌립니다.
-
배경 질감과 타입 스케일을 먼저 잡고, 이중 베젤 컨테이너를 만듭니다.
-
커스텀 cubic-bezier 모션을 넣은 뒤 출력 전 체크리스트를 돌립니다.
여기 모인 플러그인은 모두 무료 오픈소스이며, 실제 업스트림 출처로 연결됩니다.
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 주위에 잘 정돈된 디자인 레이어를 통째로 두를 수도 있습니다. 키는 직접 가져오고, 산출물도 직접 소유하세요.