Communitygithub.com

shobcoder/shob

웹 및 모바일 애플리케이션을 위한 UI/UX 디자인 인텔리전스 전문가. 인터페이스 설계, 색상 팔레트 선택, 타이포그래피, 비주얼 스타일, 랜딩 페이지/대시보드 구축, UX 문제 코드 리뷰 시 사용하세요. 50개 이상의 디자인 스타일, 97가지 색상 팔레트, 57가지 글꼴 조합, 99개의 UX 가이드라인, 25가지 차트 유형을 9가지 기술 스택(React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui)에서 다룹니다.

shob란 무엇인가요?

이 스킬은 AI 에이전트가 웹 및 모바일 애플리케이션을 위한 종합적인 UI/UX 디자인 결정을 내릴 수 있도록 설계된 설계 인텔리전스 전문가입니다. 이 스킬은 제품 유형, 산업 및 사용자 요구 사항에 따라 지능적인 디자인 권장 사항을 제공하는 구조화된 워크플로우를 제공합니다. React, Next.js, Vue, Svelte, Flutter, SwiftUI 등 주요 프론트엔드 기술 스택을 지원하며, 접근성(WCAG), 터치 상호작용, 성능, 반응형 레이아웃을 최우선으로 하는 우선순위 규칙을 포함합니다. 또한, 이 스킬은 제품 유형별 빠른 스타일 선택기, 산업별 색상 팔레트, 전문/기업, 우아함/럭셔리, 모던/테크, 친근함/장난기 등 다양한 분위기에 맞는 타이포그래피 페어링, 미니멀리즘, 글래스모피즘, 사이버펑크 등 비주얼 스타일 레퍼런스, 랜딩 페이지 패턴, 차트 유형 선택 가이드 등 방대한 참조 데이터를 포함합니다. 이러한 포괄적인 기능 덕분에 이 스킬은 디자인 일관성을 유지하고, 일반적인 UX 안티 패턴을 피하며, 선호하는 기술 스택에 특화된 모범 사례를 적용하여 고품질의 사용자 인터페이스를 구현해야 하는 AI 에이전트에게 이상적입니다.

지원 대상~Claude Code~Codex CLI✓Cursor
Part ofDesign & UI
npx skills add https://github.com/shobcoder/shob/tree/HEAD/skills/ui-ux-pro-max
원본 보기→모든 스킬 둘러보기

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

문서

UI/UX Pro Max - 디자인 인텔리전스 전문가

웹 및 모바일 애플리케이션을 위한 종합적인 UI/UX 디자인 가이드입니다. 제품 유형, 산업 및 사용자 요구 사항에 따라 지능적인 디자인 권장 사항을 제공합니다. 새 UI 설계, 색상 및 타이포그래피 선택, UX 문제 코드 리뷰 또는 기능 구현 시 이 지침을 참조하세요.

워크플로우

1단계: 사용자 요구 사항 분석

사용자 요청에서 추출:

  • 제품 유형: SaaS, 전자상거래, 포트폴리오, 대시보드, 랜딩 페이지 등
  • 스타일 키워드: 미니멀, 장난기, 전문적, 우아함, 다크 모드 등
  • 산업: 의료, 핀테크, 게임, 교육, 뷰티 등
  • 기술 스택: React, Vue, Next.js, Svelte, Flutter 또는 html-tailwind (기본값)

2단계: 디자인 시스템 생성

아래 참조 데이터(및 data/ 디렉토리의 CSV 파일)를 참고:

  • 권장 패턴 및 섹션 레이아웃
  • 효과가 포함된 기본 비주얼 스타일
  • 색상 팔레트 (기본, 보조, CTA, 배경, 텍스트)
  • 타이포그래피 조합 (Google Fonts URL이 포함된 제목 + 본문 글꼴)
  • 주요 효과 및 피해야 할 안티 패턴

3단계: 구현 지침 적용

참조 데이터에서 스택별 모범 사례 적용:

  • HTML/Tailwind 유틸리티, 반응형 중단점
  • React 훅, 상태 관리, 성능 패턴
  • Vue Composition API, Pinia 상태
  • Flutter 위젯, 테마, 탐색
  • 접근성 요구 사항(WCAG 준수)

4단계: 전달 전 검증

UI 코드를 전달하기 전에 모든 체크리스트(시각적 품질, 상호작용, 라이트/다크 모드, 레이아웃, 접근성)를 실행하세요.

우선순위 규칙

우선순위카테고리영향
1접근성중요 - 색상 대비 4.5:1, 포커스 상태, aria-레이블
2터치 및 상호작용중요 - 44x44px 터치 대상, cursor-pointer
3성능높음 - 이미지 최적화, 지연 로딩
4레이아웃 및 반응형높음 - 모바일 우선, 뷰포트 메타
5타이포그래피 및 색상중간 - 줄 높이 1.5-1.75, 읽기 쉬운 글꼴
6애니메이션중간 - 150-300ms 지속 시간, transform만 사용
7스타일 선택중간 - 제품 유형에 스타일 일치

제품 유형별 빠른 스타일 선택기

제품 유형기본 스타일보조 스타일색상 분위기
SaaS (일반)미니멀리즘플랫 디자인, 글래스모피즘신뢰감 있는 파랑 + 악센트 대비
전자상거래네오-브루탈리즘벤토 그리드, 다크 모드브랜드 기본 + 성공 녹색
전자상거래 럭셔리럭셔리 미니멀다크 모드, 우아함프리미엄 검정 + 금색 악센트
의료소프트 미니멀리즘플랫 디자인, 오가닉차분한 파랑 + 건강 녹색
핀테크/암호화폐사이버펑크다크 모드, 글래스모피즘어두운 기술 + 생생한 악센트
게임네온 글로우사이버펑크, 다크 모드생생함 + 네온 + 몰입감
포트폴리오/크리에이티브에디토리얼브루탈리즘, 비대칭브랜드 기본 + 예술적
대시보드기업 기술플랫 디자인, 데이터 밀집차가운→뜨거운 그라데이션 + 중립
AI/챗봇오로라 그라데이션글래스모피즘, 다크 모드중립 + AI 보라색 (#6366F1)
뷰티/스파/웰니스오가닉 쉐입스소프트 미니멀리즘, 우아함부드러운 파스텔 + 자연스러운 톤

산업별 색상 팔레트

SaaS / 비즈니스

역할HexTailwind
기본#2563EBblue-600
보조#3B82F6blue-500
CTA#F97316orange-500
배경#F8FAFCslate-50
텍스트#1E293Bslate-800
테두리#E2E8F0slate-200

전자상거래 럭셔리

역할HexTailwind
기본#1C1917stone-900
보조#44403Cstone-700
CTA#CA8A04yellow-600
배경#FAFAF9stone-50
텍스트#0C0A09stone-950
테두리#D6D3D1stone-300

의료

역할HexTailwind
기본#0891B2cyan-600
보조#22D3EEcyan-400
CTA#059669emerald-600
배경#ECFEFFcyan-50
텍스트#164E63cyan-900
테두리#A5F3FCcyan-200

핀테크 / 암호화폐

역할HexTailwind
기본#F59E0Bamber-500
보조#FBBF24amber-400
CTA#8B5CF6violet-500
배경#0F172Aslate-900
텍스트#F8FAFCslate-50
테두리#334155slate-700

게임

역할HexTailwind
기본#7C3AEDviolet-600
보조#A78BFAviolet-400
CTA#F43F5Erose-500
배경#0F0F23custom-dark
텍스트#E2E8F0slate-200
테두리#4C1D95violet-900

AI / 챗봇 플랫폼

역할HexTailwind
기본#7C3AEDviolet-600
보조#A78BFAviolet-400
CTA#06B6D4cyan-500
배경#FAF5FFviolet-50
텍스트#1E1B4Bindigo-950
테두리#DDD6FEviolet-200

뷰티 / 스파 / 웰니스

역할HexTailwind
기본#DB2777pink-600
보조#F472B6pink-400
CTA#059669emerald-600
배경#FDF2F8pink-50
텍스트#831843pink-900
테두리#FBCFE8pink-200

타이포그래피 조합

전문적 / 기업

제목: Inter | 본문: Inter

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

SaaS, 대시보드, 비즈니스 앱에 최적

우아함 / 럭셔리

제목: Playfair Display | 본문: Lato

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Lato:wght@400;700&display=swap');

럭셔리 브랜드, 에디토리얼, 고급 전자상거래에 최적

모던 / 기술

제목: Space Grotesk | 본문: DM Sans

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=DM+Sans:wght@400;500;700&display=swap');

기술 스타트업, 핀테크, AI 제품에 최적

친근함 / 장난기

제목: Poppins | 본문: Open Sans

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Open+Sans:wght@400;600&display=swap');

교육, 소비자 앱, 라이프스타일 브랜드에 최적

에디토리얼 / 크리에이티브

제목: Fraunces | 본문: Source Sans 3

@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@500;600;700&family=Source+Sans+3:wght@400;600&display=swap');

블로그, 잡지, 포트폴리오에 최적

의료 / 웰니스

제목: Outfit | 본문: Nunito

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700&family=Nunito:wght@400;600&display=swap');

의료, 웰니스, 의료 앱에 최적

비주얼 스타일 참조

미니멀리즘

  • 색상: 단색 + 악센트 1개, 넉넉한 여백
  • 효과: 미묘한 그림자, 깔끔한 테두리, 마이크로 인터랙션
  • 최적 대상: SaaS, 생산성, 전문 앱
  • 키워드: 깔끔함, 단순함, 여백, 미묘함, 우아함

글래스모피즘

  • 색상: 반투명 레이어, 블러 효과, 그라데이션 배경
  • 효과: backdrop-blur, bg-white/10, 부드러운 그림자
  • 최적 대상: 현대적인 대시보드, 음악 앱, 포트폴리오
  • 키워드: 유리, 블러, 반투명, 성에 낀, 계층적

뉴모피즘

  • 색상: 부드러운 파스텔, 동일 색조 그림자(어두움/밝음)
  • 효과: 내부 그림자, 돌출 요소, 부드러운 깊이
  • 최적 대상: 제어판, 계산기, 음악 플레이어
  • 키워드: 부드러움, 엠보싱, 돌출, 촉각적, 3D-소프트

다크 모드

  • 색상: 어두운 배경(#0F172A), 밝은 텍스트, 악센트 색상
  • 효과: 미묘한 테두리, 포커스 시 글로우, 눈의 피로 감소
  • 최적 대상: 개발자 도구, 미디어 앱, 게임
  • 키워드: 어두움, 야간, 저조도, 대비, 현대적

벤토 그리드

  • 색상: 섹션별로 구분된 배경을 가진 카드 기반
  • 효과: 그리드 레이아웃, 다양한 카드 크기, 명확한 계층 구조
  • 최적 대상: 기능 소개, 포트폴리오, 대시보드
  • 키워드: 그리드, 카드, 모듈식, 체계적, 전시

오로라 / 그라데이션 메시

  • 색상: 다색 그라데이션, 메시 블렌딩, 생생함
  • 효과: 애니메이션 그라데이션, 색상 전환, 깊이
  • 최적 대상: AI 제품, 크리에이티브 도구, 랜딩 페이지
  • 키워드: 오로라, 그라데이션, 메시, 화려함, 흐름

브루탈리즘

  • 색상: 고대비, 원색, 대담한 기본색
  • 효과: 두꺼운 테두리, 거친 타이포그래피, 의도적으로 투박함
  • 최적 대상: 크리에이티브 에이전시, 아트 포트폴리오, 대담한 브랜드
  • 키워드: 투박함, 대담함, 뚜렷함, 세련되지 않음, 인상적

랜딩 페이지 패턴

히어로 중심 (전환 집중)

섹션: 히어로 > 사회적 증거 > 기능 > CTA

  • 주요 CTA는 접힌 부분 위에 배치
  • 신뢰 배지는 CTA 근처에 배치
  • 단일 집중 메시지

기능 우선 (제품 데모)

섹션: 히어로 > 기능 그리드 > 작동 방식 > 가격 > CTA

  • 시각적 제품 데모
  • 기능보다 혜택 강조
  • 가격 비교표

스토리 중심 (브랜드 구축)

섹션: 히어로 > 문제 > 해결책 > 여정 > 팀 > CTA

  • 먼저 감정적 연결 구축
  • 고객 성공 사례
  • 브랜드 내러티브 흐름

사회적 증거 집중 (신뢰 구축)

섹션: 히어로 > 로고 > 사용후기 > 사례 연구 > CTA

  • 고객 로고를 눈에 띄게 배치
  • 동영상 사용후기
  • 통계 및 수치

차트 유형 선택

데이터 유형최적 차트사용 시기
시간 경과에 따른 추세꺾은선형 차트시계열, 성장, 진행 상황
카테고리 비교막대형 차트순위, 비교
부분-전체 관계도넛 차트백분율, 비율(5개 항목 이하)
상관 관계산점도관계, 패턴
지리적코로플레스 맵지역 데이터, 위치
퍼널/흐름퍼널 차트전환, 프로세스 단계
성과게이지/불릿 차트KPI, 목표
계층적트리맵중첩 카테고리, 비율

차트 색상 지침:

  • 기본 데이터: #2563EB (blue-600)
  • 성공/성장: #22C55E (green-500)
  • 경고/알림: #F59E0B (amber-500)
  • 오류/감소: #EF4444 (red-500)
  • 중립: #94A3B8 (slate-400)

자세한 차트 데이터(25가지 차트 유형, 라이브러리 권장 사항, 접근성 참고 사항, 상호작용 수준 포함)는 data/design-data.csv를 참조하세요.

접근성 요구 사항 (중요)

색상 대비

  • 일반 텍스트: 최소 4.5:1 비율
  • 큰 텍스트(18px 이상): 최소 3:1 비율
  • 상호작용 요소: 명확한 포커스 상태

터치 대상

  • 최소 크기: 터치 기기의 경우 44x44px
  • 간격: 대상 사이 최소 8px

포커스 상태

/* 항상 표시되는 포커스 링 */
:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 2px;
}

움직임 줄이기

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

양식 레이블

  • 모든 입력 필드는 반드시 연결된 레이블이 있어야 함
  • <label for="id"> 또는 aria-label 사용
  • 오류 메시지는 문제 필드 근처에 배치

일반적인 UX 안티 패턴 (피해야 할 것)

아이콘

  • 아니오: 이모지를 UI 아이콘으로 사용
  • 예: SVG 아이콘 사용(Heroicons, Lucide, Simple Icons)

호버 상태

  • 아니오: 레이아웃을 변경하는 스케일 변환
  • 예: 색상/불투명도 전환만 사용

커서

  • 아니오: 클릭 가능한 요소에 기본 커서 사용
  • 예: 모든 상호작용 요소에 cursor-pointer 사용

라이트 모드 유리 효과

  • 아니오: bg-white/10 (너무 투명하여 보이지 않음)
  • 예: bg-white/80 이상의 불투명도 사용

Z-인덱스

  • 아니오: 무작위 z-index 값(999, 9999)
  • 예: 정의된 척도 사용: 10(기본), 20(드롭다운), 30(모달), 50(토스트)

애니메이션

  • 아니오: 느린 애니메이션(>500ms) 또는 레이아웃 변경
  • 예: 150-300ms 지속 시간, transform/opacity만 사용

스택별 지침

HTML + Tailwind CSS

  • 유틸리티 클래스 사용, 사용자 정의 CSS 피하기
  • 반응형: sm:, md:, lg:, xl: 중단점
  • 다크 모드: dark: 변형
  • 버튼/링크에 항상 cursor-pointer 포함

React

  • 비용이 많이 드는 컴포넌트에는 memo() 사용
  • 안정적인 참조를 위해 useMemo/useCallback 선호
  • 렌더링에서 인라인 함수 사용 피하기
  • 코드 분할을 위해 Suspense 사용

Next.js

  • 자동 최적화를 위해 next/image 사용
  • 무거운 컴포넌트에는 동적 임포트 구현
  • 최적화된 글꼴 로딩을 위해 next/font 사용
  • 가능한 경우 서버 컴포넌트 활용

Vue 3

  • <script setup>과 함께 Composition API 사용
  • 상태 관리를 위해 Pinia 사용
  • TypeScript와 함께 defineProps 사용
  • 동적 임포트로 지연 로딩 경로

Flutter

  • 정적 위젯에는 const 생성자 사용
  • 긴 목록에는 ListView.builder 사용
  • dispose()에서 컨트롤러 해제
  • 일관된 테마를 위해 Theme.of(context) 사용

SwiftUI

  • 로컬 상태에는 @State, 참조 유형에는 @StateObject 사용
  • 비동기 작업에는 .onAppear보다 .task 선호
  • 긴 목록에는 LazyVStack 사용
  • 접근성을 위해 Dynamic Type 지원

포괄적인 스택별 지침(Flutter, SwiftUI 등에 대한 99개 규칙)은 data/stack-guidelines.csv를 참조하세요.

응답 스타일

인터페이스 설계 시:

  1. 디자인 시스템을 먼저 모든 권장 사항과 함께 제시
  2. 색상 견본을 16진수 값 및 용도와 함께 표시
  3. Google Fonts 임포트 코드를 바로 사용할 수 있도록 포함
  4. 코드 예제를 스택 모범 사례에 따라 제공
  5. 디자인 결정을 근거와 함께 설명

전달 전 체크리스트

시각적 품질

  • 아이콘으로 이모지 사용 금지 (SVG 사용: Heroicons, Lucide, Simple Icons)
  • 모든 아이콘이 일관된 아이콘 세트에서 왔는지 확인
  • 브랜드 로고가 공식 출처에서 확인되었는지 확인
  • 호버 상태가 레이아웃 변경을 일으키지 않는지 확인

상호작용

  • 모든 클릭 가능한 요소에 cursor-pointer가 있는지 확인
  • 호버 상태가 명확한 시각적 피드백을 제공하는지 확인
  • 전환이 부드러운지(150-300ms) 확인
  • 키보드 탐색을 위한 포커스 상태가 표시되는지 확인

라이트/다크 모드

  • 라이트 모드 텍스트에 충분한 대비가 있는지 확인(최소 4.5:1)
  • 유리/투명 요소가 라이트 모드에서 보이는지 확인
  • 테두리가 두 모드 모두에서 보이는지 확인

레이아웃

  • 플로팅 요소가 가장자리로부터 적절한 간격을 가지고 있는지 확인

관련 스킬

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community