carmahhawwari/ui-design-brain

UI Design Brain

이 스킬은 component.gallery에서 수집하고 모범 사례, 레이아웃 지침, 사용 규칙으로 보강된 60개 이상의 UI 컴포넌트 패턴으로 구성된 큐레이팅된 지식 베이스를 제공합니다. 인터페이스를 생성할 때 일반적인 추측 대신 실제 디자인 시스템 지식을 사용합니다.

UI 코드를 작성하기 전에 이 스킬을 참고하여 올바른 컴포넌트를 선택하고 모범 사례를 따르세요. 전체 참조는 components.md를 읽으세요.

이 스킬을 사용해야 하는 경우

사용자가 다음을 구축, 디자인 또는 생성하도록 요청할 때 적용하세요:

• 웹 페이지, 랜딩 페이지, 마케팅 사이트
• SaaS 대시보드, 관리자 패널, 설정 페이지
• 폼, 데이터 테이블, 내비게이션 구조
• 모달, 드로어, 팝오버 또는 오버레이 패턴
• 모든 React, HTML/CSS 또는 Tailwind UI 컴포넌트

디자인 철학

모든 생성된 인터페이스는 템플릿이 아닌 현대적이고 미니멀하며 프로덕션에 바로 사용 가능한 느낌이어야 합니다.

핵심 원칙

1. 장식보다 절제. 더 적은 요소, 더 정교함. 여백은 기능입니다.
2. 타이포그래피가 계층을 전달합니다. 독특한 디스플레이 폰트와 깔끔한 본문 폰트를 쌍으로 사용하세요. 제목과 레이블 간의 무게 대비를 극대화하세요.
3. 하나의 강한 색상 포인트. 먼저 중립 팔레트(따뜻한 오프화이트, 거의 검정, 음소거된 중간톤). 하나의 자신 있는 악센트를 도입하세요. 포스터나 책 표지에 나올 수 있는 색상이라면 아마 시대를 초월할 것입니다.
4. 간격이 구조입니다. 8px 그리드를 사용하세요. 관련 요소는 더 좁은 간격으로 그룹화하고, 히어로 콘텐츠는 넉넉한 간격으로 숨을 쉬게 하세요.
5. 접근성은 협상 대상이 아닙니다. WCAG AA 대비 최소 기준. 포커스 표시기. 시맨틱 HTML. 키보드 내비게이션.
6. 일반적인 AI 미학은 금지. 피해야 할 것: 보라색-흰색 그라데이션, Inter/Roboto 기본값, 균일한 간격의 카드 그리드, 판에 박힌 레이아웃. 모든 인터페이스는 특정 맥락에 맞게 디자인되어야 합니다.

품질 기준

출력은 최고 SaaS 회사의 시니어 프로덕트 디자이너가 기대하는 수준과 일치해야 합니다:

• 의도적인 비대칭성이 있는 깔끔한 시각적 리듬
• 명확한 상호작용 어포던스(호버, 포커스, 활성 상태)
• 우아한 에지 케이스(빈 상태, 로딩, 오류)
• 중단점 아티팩트 없이 반응형

워크플로

1단계 — 컴포넌트 식별

사용자의 요청을 읽고 필요한 UI 컴포넌트를 결정하세요. components.md를 참조하여 이름이나 별칭으로 각 컴포넌트를 찾으세요.

일반적인 매핑:

• "내비게이션" → 헤더, 내비게이션, 브레드크럼, 탭
• "폼" → 폼, 텍스트 입력, 선택, 체크박스, 라디오 버튼, 버튼
• "데이터 표시" → 테이블, 카드, 목록, 배지, 아바타
• "피드백" → 알림, 토스트, 모달, 스피너, 진행 표시줄, 빈 상태
• "입력" → 텍스트 입력, 텍스트 영역, 선택, 콤보박스, 날짜 선택기, 파일 업로드, 슬라이더
• "오버레이" → 모달, 드로어, 팝오버, 툴팁, 드롭다운 메뉴

2단계 — 모범 사례 적용

인터페이스의 각 컴포넌트에 대해 참조의 모범 사례를 따르세요. 광범위하게 적용되는 핵심 규칙:

레이아웃

• 단일 열 폼 — 스캔 속도가 더 빠름
• 반복되는 행(목록, 테이블)의 일관된 수직 레인
• 비어 있어도 아이콘 및 작업을 위한 고정 너비 슬롯
• 카드: 미디어 → 제목 → 메타 → 액션 계층 구조

상호작용

• 버튼: 동사 우선 레이블("변경사항 저장", "제출" 아님), 섹션당 하나의 기본 버튼
• 모달: 항상 X, 취소 및 Escape 제공; 포커스 트랩; 닫을 때 포커스 반환
• 토스트: 4–6초 자동 해제, 수동 해제 허용, 최신 항목을 위로 쌓기
• 토글: 즉시 적용만 — 저장이 필요한 폼에서는 체크박스 사용

타이포그래피 및 간격

• 엄격한 제목 계층 구조(h1 → h2 → h3), 페이지당 하나의 h1
• 모바일에서 최소 44px 터치 대상
• 입력 위에 레이블(세로 폼) 또는 옆에(가로)
• 형식 힌트로 플레이스홀더 텍스트 사용, 레이블 대체로 사용하지 않음

상태

• 빈 상태: 일러스트레이션 + 도움이 되는 제목 + 기본 CTA
• 로딩: 스피너보다 스켈레톤 화면 (300ms 지연 후 표시)
• 유효성 검사: blur 시 인라인, 모든 키 입력마다 아님
• 비활성화된 요소: 시각적으로 구별되지만 여전히 읽을 수 있어야 함

3단계 — 디자인 방향 선택

사용자의 의도에 가장 잘 맞는 스타일 프리셋을 선택하거나, 명확하지 않은 경우 질문하세요:

Modern SaaS (기본값)

• 중립 팔레트, 하나의 강한 악센트
• 8px 그리드, 넉넉한 여백
• 깔끔하고, 전문적이며, 여유로움

Apple 수준 미니멀

• 거의 모노크롬, 따뜻한 회색
• 큰 타이포그래피 계층, 디스플레이 텍스트의 좁은 트래킹
• 풍부한 여백, 마이크로 인터랙션 (150–250ms 이즈-아웃)

엔터프라이즈 / 기업

• 정보 밀도가 높고, 잘 정의된 영역
• 컴팩트한 간격 스케일 (4/8/12/16/24px)
• 강력한 폼 처리, 완전 키보드 내비게이션 가능

크리에이티브 / 포트폴리오

• 대담하고, 표현력이 풍부하며, 강한 시각적 개성
• 비대칭 레이아웃, 극적인 스케일 대비
• 에디토리얼 타이포그래피, 생생한 악센트 색상

데이터 대시보드

• 데이터 밀도가 높고, 스캔 가능성에 최적화
• 행 전체에 걸친 일관된 수직 정렬
• 명확한 메트릭 계층 구조: KPI → 추세 → 세부 정보

4단계 — 코드 생성

다음 규칙을 따라 프로덕션 준비 코드를 작성하세요:

스택:       React + Tailwind CSS (사용자가 달리 명시하지 않는 한)
간격:       Tailwind 간격 스케일 (p-2, gap-4 등) 8px 그리드 기준
색상:       팔레트 일관성을 위한 CSS 변수 또는 Tailwind config
타이포그래피: Tailwind 텍스트 유틸리티; Google Fonts를 통한 표현적인 폰트 페어링
상태:       모든 상호작용 요소에 대해 호버, 포커스, 활성, 비활성화 구현
반응형:     모바일 우선; 375, 768, 1440 px에서 테스트
접근성:     시맨틱 HTML, 필요한 경우 ARIA, 포커스 관리

컴포넌트 빠른 참조

아래는 가장 일반적으로 필요한 15개 컴포넌트입니다. 모범 사례, 별칭 및 레이아웃 예제가 포함된 전체 60개 이상의 컴포넌트 참조는 components.md를 참조하세요.

컴포넌트	사용 시기	핵심 규칙
Button	액션 트리거	동사 우선 레이블; 섹션당 하나의 기본 버튼
Card	엔티티 표현	미디어 → 제목 → 메타 → 액션; 그림자 또는 테두리 중 하나만
Modal	집중된 주의	포커스 트랩; X + 취소 + Escape로 닫기
Navigation	페이지/섹션 링크	5–7개 항목 최대; 명확한 활성 상태
Table	구조화된 데이터	고정 헤더; 숫자 오른쪽 정렬; 정렬 가능한 열
Tabs	패널 전환	2–7개 탭; 활성 표시기; 모바일에서는 아코디언
Form	입력 수집	단일 열; 위에 레이블; blur 시 인라인 유효성 검사
Toast	간단한 확인	4–6초 자동 해제; 파괴적인 작업에 대한 실행 취소 액션
Alert	중요한 상태	의미론적 색상 + 아이콘; 최대 2문장
Drawer	보조 패널	세부 정보는 오른쪽, 내비게이션은 왼쪽; 데스크톱 320–480 px
Search input	콘텐츠 찾기	Cmd/Ctrl+K 단축키; 200–300 ms 디바운스
Empty state	데이터 없음	일러스트레이션 + 제목 + CTA; 긍정적 프레이밍
Skeleton	로딩 플레이스홀더	실제 레이아웃 모양과 일치; shimmer 애니메이션
Badge	상태/메타데이터 레이블	1–2 단어; 상태는 알약 모양; 제한된 색상 팔레트
Dropdown menu	액션/내비게이션 옵션	7±2 항목; 파괴적인 액션은 빨간색으로 마지막에

피해야 할 안티 패턴

절대 생성하지 마세요 — 이것들은 일반적이고 품질이 낮은 UI를 나타냅니다:

• 무지개 배지 — 모든 상태가 의미 없는 각기 다른 밝은 색상
• 모달 안의 모달 — 복잡한 흐름에는 페이지나 드로어 사용
• 설명 없는 비활성화된 제출 버튼 — 항상 무엇이 누락되었는지 표시
• 예측 가능한 레이아웃에 스피너 사용 — 대신 스켈레톤 화면 사용
• "여기를 클릭" 링크 — 링크 텍스트는 대상을 설명해야 함
• 데스크톱에서 햄버거 메뉴 — 공간이 허락할 때는 가시적인 내비게이션 사용
• 자동 진행 캐러셀 — 사용자가 내비게이션을 제어하도록 함
• 플레이스홀더만 있는 폼 필드 — 항상 가시적인 레이블 사용
• 동일한 가중치의 버튼 — 기본/보조/3차 계층 구조 설정
• 작은 텍스트 (< 12 px) — 본문 텍스트 최소 14 px, 16 px 권장