ui-ux-pro-max
AI 가이드로 전문적인 UI/UX 디자인 구축
또한 다음에서 사용할 수 있습니다: ZhanlinCui,DCjanus,nextlevelbuilder
디자이너와 개발자는 프로젝트 전반에 걸쳐 일관되고 접근 가능한 디자인 시스템을 유지하는 데 어려움을 겪습니다. 이 스킬은 9개의 주요 기술 스택에 걸쳐 종합적인 디자인 가이드라인, 컬러 팔레트, 타이포그래피 권장사항 및 컴포넌트 패턴을 제공합니다.
스킬 ZIP 다운로드
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
토글을 켜고 사용 시작
테스트해 보기
"ui-ux-pro-max" 사용 중입니다. Recommend a color palette for a healthcare app
예상 결과:
헬스케어 앱 컬러 팔레트: Primary (#0891B2 - Calm Cyan)은 신뢰와 평온함을 조성합니다. Secondary (#22D3EE - Light Cyan)는 시각적 계층 구조를 제공합니다. CTA (#059669 - Success Green)는 주요 액션을 위한 것입니다. Background (#ECFEFF - Soft White)는 눈의 피로를 줄입니다. Text (#164E63 - Deep Teal)은 가독성을 보장합니다. Border (#A5F3FC - Light Border)는 미묘한 구분을 위한 것입니다. 이 팔레트는 사용자가 불안감을 느낄 수 있는 헬스케어 애플리케이션에 필수적인 평온함과 신뢰를 우선시합니다.
"ui-ux-pro-max" 사용 중입니다. What are the touch target requirements for mobile buttons?
예상 결과:
터치 타겟 가이드라인: 최소 44x44 픽셀(iOS HIG 및 WCAG 요구사항). 자주 사용되는 액션의 경우 48x48 픽셀 권장. 패딩은 보이는 버튼뿐만 아니라 측정에 포함되어야 함. 터치 타크arget 간 간격: 실수 taps를 방지하기 위해 최소 8px. 중요 액션(삭제, 구매)의 경우 최소 56x56px 고려.
보안 감사
낮은 위험Static analysis flagged 1176 patterns but nearly all are false positives. 'Weak cryptographic algorithm' detections are hex color codes (#2563EB) in design data files. 'Hardcoded URLs' are documentation links in guidelines. 'System reconnaissance' and 'C2 keywords' are design terminology matches. Python scripts read CSV files to generate design recommendations - no network calls or code execution. One legitimate concern: scripts/design_system.py uses subprocess calls (Ruby/shell execution patterns) for design tooling integration, which is appropriate for this use case but documented as a minor risk.
중간 위험 문제 (1)
낮은 위험 문제 (3)
품질 점수
만들 수 있는 것
MVP 디자인 시스템 구축 중인 스타트업
seorang 창립자는 SaaS 제품에 대한 일관된 UI 패턴을 구축하기 위해 이 스킬을 사용하여 React 기반 애플리케이션에 적합한 컬러 팔레트, 컴포넌트 스타일 및 접근성 가이드라인을 선택합니다.
컴포넌트 표준화 중인 디자인 팀
디자인 팀 리더는 종합 가이드라인을 활용하여 통합 디자인 시스템 문서를を作成し, 모든 팀원이 여러 제품 라인에 걸쳐 일관된 패턴을 따르도록 합니다.
접근성 요구사항 구현 중인 개발자
프론트엔드 개발자는 Vue 애플리케이션이 WCAG 2.1 요구사항을 충족하도록 접근성 가이드라인을 참고하여 적절한 컬러 대비, 포커스 관리 및 키보드 내비게이션 패턴을 구현합니다.
이 프롬프트를 사용해 보세요
I'm building a [product type, e.g., SaaS dashboard]. Recommend a color palette with primary, secondary, CTA, background, text, and border colors. Include hex codes and explain the color psychology.
Show me best practices for implementing [component, e.g., data tables] in [framework, e.g., React]. Include accessibility requirements, common patterns, and code examples.
Review my [page/component type] for accessibility issues. I have [describe your UI]. What WCAG guidelines should I check? Provide a prioritized checklist.
Generate a comprehensive design system for a [product type] targeting [audience]. Include: color palette, typography scale, component styles, spacing system, and UX guidelines specific to my domain.
모범 사례
- 디자인을 최종确定하기 전에 항상 WCAG AA 최소 요구사항(일반 텍스트 4.5:1, 큰 텍스트 3:1)을 충족하는지 컬러 대비 비율을 확인하세요
- 모든 페이지에서 일관성을 유지하세요 - 애플리케이션 전체에서 동일한 스타일, 컬러 팔레트 및 컴포먼트 패턴을 사용하세요
- 모바일 우선 설계: 터치 친화적 레이아웃(44px+ 타겟)으로 시작하여 큰 화면으로 확장하세요
- 테마링 및 다크 모드 지원을 위해 의미론적 컬러 이름(primary, secondary, error)을 하드코딩된 값 대신 사용하세요
- 전정 질환 사용자를 위해 접근성을 보장하기 위해 reduced motion 기본 설정(prefers-reduced-motion)을 테스트하세요
피하기
- 프로덕션 인터페이스에서 이모지 사용 - 플랫폼간 일관되지 않게 렌더링되고 전문적인 모습이 부족함
- 탭/클릭 대안 없이 호버 전용 상호작용 구현 - 터치 장치 사용자 및 접근성 시나리오 배제
- 로딩 상태 및 스켈레톤 화면 건너뛰기 - 비동기 작업 중 인지된 성능 문제 및 사용자 불확실성 생성
- 인라인 컬러 하드코딩 대신 디자인 토큰 또는 CSS 변수 사용 - 테마링 방지 및 유지보수 부담 증가
- prefers-reduced-motion을 존중하지 않고 장식 목적으로 애니메이션 사용 - 일부 사용자에게 불편함 또는 메스꺼움을 유발할 수 있음