SKILL.md
프론트엔드 디자인 스킬
개요
LLM은 기본적으로 "분포 수렴(Distributional Convergence)" 현상으로 인해 Inter 폰트, 보라색 그라데이션, 흰색 배경, 최소한의 애니메이션 등 안전하고 평범한 디자인을 생성합니다. 이 스킬은 이러한 "AI 슬롭(AI Slop)" 미학을 피하고, 창의적이고 독특한 프론트엔드를 만들도록 안내합니다.
핵심 원칙
<frontend_aesthetics> 일반적이고 "분포 중심적인" 출력으로 수렴하는 경향을 피하세요. 프론트엔드 디자인에서 이는 사용자들이 "AI 슬롭"이라고 부르는 미학을 만들어냅니다. 이를 피하고, 사용자를 놀라게 하고 기쁘게 하는 창의적이고 독특한 프론트엔드를 만드세요.
집중해야 할 영역:
타이포그래피
- 아름답고, 독특하고, 흥미로운 폰트를 선택하세요
- 절대 사용 금지: Inter, Roboto, Open Sans, Lato, Arial, 기본 시스템 폰트
- 권장 폰트:
- 코드 미학: JetBrains Mono, Fira Code, Space Grotesk - 에디토리얼: Playfair Display, Crimson Pro - 테크니컬: IBM Plex family, Source Sans 3 - 독특함: Bricolage Grotesque, Newsreader
- 페어링 원칙: 높은 대비 = 흥미로움. Display + monospace, serif + geometric sans
- 극단적인 사용: 400 vs 600이 아닌 100/200 vs 800/900 weight. 1.5배가 아닌 3배 이상의 크기 점프
- Google Fonts에서 로드
색상 & 테마
- 일관된 미학을 확립하세요
- CSS 변수를 사용하여 일관성 유지
- 균등하게 분산된 팔레트보다 강렬한 악센트가 있는 지배적 색상이 더 효과적
- IDE 테마와 문화적 미학에서 영감을 얻으세요
- 보라색 그라데이션 + 흰색 배경 조합은 절대 피할 것
모션 & 애니메이션
- 효과와 마이크로 인터랙션에 애니메이션 사용
- HTML은 CSS-only 솔루션 우선
- React는 Motion(Framer Motion) 라이브러리 활용
- 고임팩트 순간에 집중: 산발적인 마이크로 인터랙션보다 animation-delay를 활용한 잘 조율된 페이지 로드 시퀀스가 더 효과적
배경
- 단색을 기본값으로 사용하지 마세요
- 분위기와 깊이감을 만드세요
- CSS 그라데이션 레이어링, 기하학적 패턴 사용
- 전체 미학과 어울리는 맥락적 효과 추가
</frontend_aesthetics>
피해야 할 것들
일반적인 AI 생성 미학:
- 과도하게 사용되는 폰트 패밀리 (Inter, Roboto, Arial, 시스템 폰트)
- 진부한 색상 조합 (특히 흰색 배경의 보라색 그라데이션)
- 예측 가능한 레이아웃과 컴포넌트 패턴
- 맥락적 특성이 없는 획일적인 디자인
- 중앙 정렬의 과도한 사용
- 균일한 둥근 모서리
테마 영감
특정 미학을 원할 경우, 잘 알려진 테마에서 영감을 얻으세요:
RPG 테마 예시
- 풍부하고 드라마틱한 톤의 판타지 영감 색상 팔레트
- 장식적인 테두리와 프레임 요소
- 양피지 텍스처, 가죽 바인딩 스타일링, 낡은 질감
- 드라마틱한 조명과 함께하는 서사적이고 모험적인 분위기
- 장식된 헤더와 함께하는 중세 영감 세리프 타이포그래피다크 테마 예시
- 깊은 배경색 (순수 검정보다는 #0a0a0a, #1a1a2e 등)
- 네온 또는 파스텔 악센트
- 미묘한 그라데이션과 글로우 효과
- 높은 대비의 텍스트미니멀 럭셔리 예시
- 충분한 여백
- 제한된 색상 팔레트 (2-3색)
- 세련된 세리프 또는 산세리프 타이포그래피
- 미묘한 호버 효과
- 고급스러운 그림자와 깊이감창의적 다양성
중요: 다른 로컬 최대값으로 수렴하는 것도 피하세요!
- Space Grotesk만 계속 사용하지 마세요
- 라이트/다크 테마 사이에서 다양하게 선택
- 다양한 폰트와 미학을 시도
- 맥락에 맞게 진정으로 디자인된 것처럼 느껴지는 예상치 못한 선택을 하세요
핵심: 틀에서 벗어나 생각하세요!
구현 팁
HTML/CSS
/* CSS 변수로 일관성 유지 */
:root {
--color-primary: #your-unique-color;
--color-accent: #your-accent;
--font-display: 'Your Distinctive Font', serif;
--font-body: 'Your Body Font', sans-serif;
}
/* 레이어드 배경 */
background:
linear-gradient(135deg, rgba(0,0,0,0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, var(--color-accent) 0%, transparent 50%),
var(--color-primary);
/* 스태거드 애니메이션 */
.item:nth-child(1) { animation-delay: 0.1s; }
.item:nth-child(2) { animation-delay: 0.2s; }
.item:nth-child(3) { animation-delay: 0.3s; }React + Framer Motion
import { motion } from 'framer-motion';
// 스태거드 컨테이너
const container = {
hidden: { opacity: 0 },
show: {
opacity: 1,
transition: { staggerChildren: 0.1 }
}
};
const item = {
hidden: { opacity: 0, y: 20 },
show: { opacity: 1, y: 0 }
};체크리스트
디자인 생성 전:
- 폰트가 Inter/Roboto/Arial이 아닌가?
- 보라색 그라데이션 + 흰색 배경이 아닌가?
- 배경에 깊이감/분위기가 있는가?
- 색상 팔레트가 일관되고 독특한가?
- 의미 있는 애니메이션이 포함되어 있는가?
- 타이포그래피에 극단적인 대비가 있는가?
- 이 디자인이 "AI가 만든 것 같다"고 느껴지지 않는가?