전문적인 UI/UX 디자인을 만들려면 접근성, 색상 이론, 타이포그래피, 스택별 패턴에 대한 깊은 지식이 필요합니다. 이 스킬은 세련된 인터페이스를 더 빠르게 구축할 수 있도록 50 개 이상의 디자인 스타일, 색상 팔레트, 폰트 페어링 및 구현 가이드라인을 제공하는 검색 가능한 데이터베이스를 제공합니다.
스킬 ZIP 다운로드
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
토글을 켜고 사용 시작
테스트해 보기
"ui-ux-pro-max" 사용 중입니다. 'beauty spa wellness elegant' 디자인 시스템 검색
예상 결과:
디자인 시스템 생성됨:
- 제품 패턴: 예약 중심 서비스 기반 비즈니스
- UI 스타일: 유기적 형태의 소프트 미니멀리즘
- 색상 팔레트: 세이지 그린 주조색, 크림 배경, 로즈 골드 액센트
- 타이포그래피: Playfair Display(제목) + Lato(본문)
- 효과: 미묘한 그림자, 부드러운 그라디언트, 부드러운 전환
"ui-ux-pro-max" 사용 중입니다. 애니메이션 접근성에 대한 UX 가이드라인 얻기
예상 결과:
UX 가이드라인 찾음:
1. prefers-reduced-motion: 미디어 쿼리 확인 및 정적 폴백 제공
2. 지속 시간 제한: 마이크로 인터랙션에 150-300ms 사용
3. Transform 성능: width/height 대신 transform/opacity 애니메이션 사용
4. 로딩 상태: 비동기 작업에 스켈레톤 화면 또는 스피너 표시
보안 감사
안전Static analysis flagged 1395 patterns across 28 files, but all findings are false positives. The 'weak cryptographic algorithm' detections are triggered by BM25 scoring math (log functions) in a text search engine, not actual cryptography. 'Hardcoded URL' findings are documentation URLs in CSV data files. 'External commands' are bash examples in documentation showing how to run the Python search tool. The skill performs local file operations on its own data files with no network calls, no dynamic code execution, and no user input processing.
품질 점수
만들 수 있는 것
새 대시보드를 구축하는 프론트엔드 개발자
개발자가 SaaS 제품의 관리자 대시보드를 만들어야 합니다. 이 개발자는 스킬을 사용하여 'SaaS dashboard'에 대한 디자인 시스템 권장사항을 얻고, 데이터가 많은 인터페이스에 대한 접근성 색상 팔레트를 검색하며, 성능 최적화를 위한 React 특정 가이드라인을 얻습니다.
랜딩 페이지를 만드는 솔로 파운더
디자이너가 아닌 파운더가 스타트업을 위한 전문적인 랜딩 페이지를 만들어야 합니다. 'beauty spa wellness service'를 검색하여 스타일, 색상, 타이포그래피 및 랜딩 페이지 패턴이 포함된 완전한 디자인 시스템을 얻은 다음 Tailwind CSS 가이드라인을 사용하여 구현합니다.
접근성 준수를 확인하는 디자이너
디자이너가 UI 가 WCAG 가이드라인을 준수하는지 확인하려고 합니다. 'accessibility contrast focus'로 ux 도메인을 쿼리하여 색상 대비 비율, 포커스 상태 및 키보드 탐색에 대한 구체적인 규칙을 코드 예시와 함께 얻습니다.
이 프롬프트를 사용해 보세요
'minimalist dark mode dashboard'와 일치하는 디자인 스타일을 검색하세요. 색상 구성표와 주요 특성이 포함된 상위 3 개 스타일 권장사항을 보여주세요.
'fintech crypto trading dashboard'를 위한 완전한 디자인 시스템을 생성하세요. 제품 패턴, UI 스타일, 색상 팔레트, 타이포그래피 및 효과를 포함하세요. 프로젝트 이름을 'CryptoVault'로 지정하세요.
이 버튼 컴포넌트를 접근성 문제에 대해 검토하세요: [코드 붙여넣기]. 색상 대비, 포커스 상태 및 터치 타겟 크기에 대한 WCAG 가이드라인을 확인하세요. 구체적인 수정사항을 제공하세요.
Tailwind CSS 로 반응형 navbar 를 구축하고 있습니다. html-tailwind 스택에서 'navbar responsive floating' 가이드라인을 검색하고 적절한 aria 속성을 포함한 구현 코드를 제공하세요.
모범 사례
- 구현 전에 추론이 포함된 포괄적인 권장사항을 얻으려면 항상 --design-system 플래그로 시작하세요
- 먼저 접근성 가이드라인을 확인하세요 - 색상 대비 (4.5:1), 포커스 상태 및 터치 타겟 (최소 44x44px)
- 프레임워크 규칙을 따르는 구현 패턴을 얻으려면 스택별 검색을 사용하세요
피하기
- Heroicons 나 Lucide 와 같은 적절한 SVG 아이콘 라이브러리 대신 UI 아이콘으로 이모지 사용
- 레이아웃 이동을 유발하는 scale transform 으로 hover 상태 구현
- 투명한 유리 카드 (bg-white/10) 를 빛 모드에서 사용하여 보이지 않게 됨