AI 에이전트에게 실제 UI 컴포넌트 지식 — 60개 이상의 인터페이스 컴포넌트에 대한 베스트 프랙티스 (Best practices), 레이아웃 패턴 (Layout patterns), 디자인 시스템 컨벤션 (Design-system conventions) — 를 제공하여, 일반적인 결과물 대신 프로덕션급 UI를 생성할 수 있게 해주는 Cursor 스킬입니다.

Cursor에게 UI를 구축하도록 요청하면, 일반적으로 컴포넌트 패턴을 추측하여 작성합니다. 이 스킬은 추측 대신 component.gallery에서 가져온 큐레이션된 지식 베이스를 사용하여 이를 대체하며, 다음과 같은 정보로 강화되었습니다:

모든 컴포넌트에 대한 베스트 프랙티스 (Best practices) (접근성 (Accessibility), 크기 조절 (Sizing), 동작 (Behavior))
공통 레이아웃 (Common layouts) — 각 패턴에 대해 검증된 배치
별칭 (Aliases) — 에이전트가 어떤 이름으로든 컴포넌트를 인식할 수 있도록 함
디자인 철학 (Design philosophy) — 현대적이고 미니멀하며 SaaS 품질의 표준
안티 패턴 (Anti-patterns) — 피해야 할 특정 사항들

결과: 템플릿에서 조립한 것이 아니라, 시니어 프로덕트 디자이너 (Senior product designer)가 디자인한 듯한 인터페이스를 제공합니다.

# Cursor 스킬 디렉토리로 클론 (Clone)
git clone https://github.com/carmahhawwari/ui-design-brain.git \~/.cursor/skills/ui-design-brain

# 프로젝트의 .cursor/skills 디렉토리로 클론 (Clone)
git clone https://github.com/carmahhawwari/ui-design-brain.git \.cursor/skills/ui-design-brain

SKILL.md 파일과 components.md 파일을 다음 중 하나로 복사하세요:

~/.cursor/skills/ui-design-brain/ (개인용)
.cursor/skills/ui-design-brain/ (프로젝트용)

설치가 완료되면, Cursor에게 UI 구축을 요청할 때 이 스킬이 자동으로 활성화됩니다. 명시적으로 참조할 필요는 없습니다.

그저 자연스럽게 요청하세요:

사이드바 네비게이션, 토글 설정, 프로필 섹션이 포함된 설정 페이지를 만들어줘.

검색, 필터, 정렬 가능한 컬럼, 페이지네이션이 포함된 데이터 테이블을 만들어줘.

KPI 카드, 차트 영역, 활동 피드 사이드바가 있는 SaaS 대시보드를 디자인해줘.

에이전트는 자동으로 다음을 수행합니다:

• 요청에 필요한 컴포넌트 식별
• 각 컴포넌트에 대한 베스트 프랙티스 조회
• 적절한 디자인 방향 적용 (SaaS, 미니멀, 기업형, 크리에이티브 또는 대시보드)
• 패턴을 따르는 프로덕션 준비 완료된 코드 생성

이 기술에는 5가지 내장 스타일 프리셋 (style presets)이 포함되어 있습니다. 다음과 같이 명시적으로 요청할 수 있습니다:

프리셋 (Preset)	사용 시점
Modern SaaS	기본값 — 깔끔하고, 여백이 있으며, 전문적인 스타일
Apple-level Minimal	풍부한 화이트스페이스 (whitespace)를 활용한 초깔끔 스타일
Enterprise / Corporate	정보 밀도가 높고, 키보드 탐색 (keyboard-navigable)이 가능한 스타일
Creative / Portfolio	대담하고, 표현력이 풍부하며, 에디토리얼 타이포그래피 (editorial typography) 스타일
Data Dashboard	데이터 가독성 (scannability)에 최적화된 스타일

Apple-minimal 미학을 적용한 가격 페이지를 만들어줘.

ui-design-brain/
├── SKILL.md # 주요 지침 — 디자인 철학, 워크플로우 (workflow), 빠른 참조 |
├── components.md # 전체 참조 — 베스트 프랙티스 (best practices) 및 레이아웃이 포함된 60개 컴포넌트 |
...

다음 컴포넌트를 포함한 60개 컴포넌트: 아코디언 (Accordion), 알림 (Alert), 아바타 (Avatar), 배지 (Badge), 브레드크럼 (Breadcrumbs), 버튼 (Button), 버튼 그룹 (Button group), 카드 (Card), 캐러셀 (Carousel), 체크박스 (Checkbox), 컬러 피커 (Color picker), 콤보박스 (Combobox), 날짜 입력 (Date input), 데이트피커 (Datepicker), 드로어 (Drawer), 드롭다운 메뉴 (Dropdown menu), 빈 상태 (Empty state), 필드셋 (Fieldset), 파일 (File), 파일 업로드 (File upload), 푸터 (Footer), 폼 (Form), 헤더 (Header), 헤딩 (Heading), 히어로 (Hero), 아이콘 (Icon), 이미지 (Image), 레이블 (Label), 링크 (Link), 리스트 (List), 모달 (Modal), 네비게이션 (Navigation), 페이지네이션 (Pagination), 팝오버 (Popover), 프로그레스 바 (Progress bar), 프로그레스 인디케이터 (Progress indicator), 인용구 (Quote), 라디오 버튼 (Radio button), 평점 (Rating), 리치 텍스트 에디터 (Rich text editor), 검색 입력 (Search input), 세그먼트 컨트롤 (Segmented control), 셀렉트 (Select), 구분선 (Separator), 스켈레톤 (Skeleton), 스킵 링크 (Skip link), 슬라이더 (Slider), 스피너 (Spinner), 스택 (Stack), 스텝퍼 (Stepper), 테이블 (Table), 탭 (Tabs), 텍스트 입력 (Text input), 텍스트 영역 (Textarea), 토스트 (Toast), 토글 (Toggle), 툴팁 (Tooltip), 트리 뷰 (Tree view), 비디오 (Video), 시각적으로 숨겨진 요소 (Visually hidden).

일반적인 프론트엔드 기술	UI Design Brain
컴포넌트 지식 (Component knowledge)	없음 — 모델 학습에 의존함
레이아웃 가이드 (Layout guidance)	일반적인 조언
안티 패턴 (Anti-patterns)	다루지 않음
접근성 (Accessibility)	느슨하게 언급됨
디자인 시스템 근거 (Design system grounding)	모델의 일반적인 지식

PR (Pull Request)을 환영합니다. 컴포넌트를 추가하거나 업데이트하려면:

• components.md 수정

— 기존 형식(name, aliases, description, best practices, common layouts)을 따르세요 - 만약 해당 컴포넌트가 자주 필요하다면, SKILL.md의 빠른 참조 테이블(quick reference table)에 추가하세요.

• SKILL.md를 500행 미만으로 유지하세요.

MIT — LICENSE.txt를 참조하세요.

컴포넌트 데이터는 component.gallery에서 가져왔습니다.