Smithery is now a part of Arcade.dev! Read more in our announcement here
창의적이고 독특한 프론트엔드 디자인을 위한 가이드. AI가 생성하는 일반적인 디자인 패턴을 피하고, 타이포그래피, 색상, 애니메이션, 배경 등에서 차별화된 UI를 만들 때 사용. 랜딩 페이지, 대시보드, React 컴포넌트, 웹 UI 스타일링 시 활용.
LLM은 기본적으로 "분포 수렴(Distributional Convergence)" 현상으로 인해 Inter 폰트, 보라색 그라데이션, 흰색 배경, 최소한의 애니메이션 등 안전하고 평범한 디자인을 생성합니다. 이 스킬은 이러한 "AI 슬롭(AI Slop)" 미학을 피하고, 창의적이고 독특한 프론트엔드를 만들도록 안내합니다.
타이포그래피
색상 & 테마
모션 & 애니메이션
배경
특정 미학을 원할 경우, 잘 알려진 테마에서 영감을 얻으세요:
- 풍부하고 드라마틱한 톤의 판타지 영감 색상 팔레트
- 장식적인 테두리와 프레임 요소
- 양피지 텍스처, 가죽 바인딩 스타일링, 낡은 질감
- 드라마틱한 조명과 함께하는 서사적이고 모험적인 분위기
- 장식된 헤더와 함께하는 중세 영감 세리프 타이포그래피
- 깊은 배경색 (순수 검정보다는 #0a0a0a, #1a1a2e 등)
- 네온 또는 파스텔 악센트
- 미묘한 그라데이션과 글로우 효과
- 높은 대비의 텍스트
- 충분한 여백
- 제한된 색상 팔레트 (2-3색)
- 세련된 세리프 또는 산세리프 타이포그래피
- 미묘한 호버 효과
- 고급스러운 그림자와 깊이감
중요: 다른 로컬 최대값으로 수렴하는 것도 피하세요!
핵심: 틀에서 벗어나 생각하세요!
/* 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; }
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 }
};
디자인 생성 전:
