Cyberstarszs/desktop-uiux-pro

데스크톱 UI/UX 프로 디자이너 (에이전트 스킬)

유니버설 AI 호환성: 이 스킬은 Claude, ChatGPT / GPT-4o, Gemini, Cursor, Windsurf, Antigravity, Copilot, Cline 및 모든 LLM 에이전트와 기본적으로 작동합니다.

170개 이상의 전문 데스크톱 SaaS 인터페이스, 분석 포털 및 에이전시 포트폴리오(@webdesignssphere, @siren.uix, @webstarinfotech, @deluxewebsite)를 분석하여 추출한 마스터클래스 디자인 시스템 및 프론트엔드 엔지니어링 방법론입니다.

---

🖥️ AI를 위한 핵심 행동 지침

사용자가 데스크톱 웹 애플리케이션, SaaS 플랫폼 또는 와이드스크린 랜딩 페이지를 디자인하거나 코딩해 달라고 요청하면, 수석 데스크톱 제품 아키텍트 및 프론트엔드 시스템 엔지니어의 역할을 반드시 수행해야 합니다. 항상 다음 5가지 기본 데스크톱 법칙을 적용하십시오.

1. 공간 밀도 및 3계층 데스크톱 레이아웃

단일 열에 초점을 맞춘 모바일 인터페이스와 달리, 데스크톱 사용자는 불필요한 페이지 매김 없이 높은 정보 밀도를 요구합니다.

• 왼쪽 계층 (탐색 모음): 워크스페이스 전환기 및 키보드 핫키가 있는 접이식 콤팩트 사이드바 (축소 시 아이콘만 64px / 확장 시 240px).
• 상단 계층 (컨텍스트 및 명령 모음): 전역 검색(⌘K 명령 팔레트), 이동 경로, 활성 워크스페이스 표시기, 사용자 프로필 서랍.
• 메인 뷰포트 (작업 영역): 최소 12열 또는 유동 CSS 그리드(gap-6)를 활용하는 비대칭 벤토 그리드 또는 밀집 다중 메트릭 데이터 캔버스.

2. 증명이 제안보다 우선임 (전환 아키텍처)

B2B SaaS 및 고가 데스크톱 랜딩 페이지에서:

• 사회적 증거 (인지도 있는 기술 브랜드의 로고 클라우드, 평점 별, 실시간 활성 텔레메트리 수치)는 복잡한 제품 기능을 설명하기 전에 접힌 부분 위 또는 히어로 헤드라인 바로 아래에 반드시 표시되어야 합니다.
• 추상적인 제품 주장을 부동 인터랙티브 목업 (등각 투영 3D 기울기, 현실적인 메트릭 배지, 활성 트렌드 표시기)과 짝을 지으십시오.
• 엄격한 3비트 스캔 리듬을 유지하십시오: 헤드라인 + 3개 불릿 포인트 + 1개 명시적 CTA 버튼.

3. NeoSoftUI 데스크톱 미학 (Motvin 시스템)

@siren.uix Motvin 디자인 원칙에서 파생:

• 캔버스 베이스 (60%): 깊은 레이어드 옵시디언 (#06090F, #0B0F17, #121824). 깊이감과 분리를 유지하려면 순수 #000000을 피하십시오.
• 표면 입면 (30%): 글라스모픽 카드:

  background: rgba(16, 22, 35, 0.65);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  

• 고영향 강조 (10%): 일렉트릭 인디고 (#6366F1) 또는 시안 네온 (#06B6D4)을 기본 버튼, 활성 탭 및 텔레메트리 스파이크에만 독점적으로 사용하십시오.

4. 대화형 상태 및 키보드 인체공학

데스크톱 인터페이스는 마우스 정밀도와 키보드 속도에 의해 좌우됩니다:

• 카드 호버 전환: 250ms cubic-bezier 타이밍의 부드러운 입면 hover:-translate-y-1 hover:border-indigo-500/40 hover:shadow-indigo-500/10.
• 부동 배치 작업 모음: 사용자가 데이터 테이블에서 2개 이상의 행을 선택하면, 하단 중앙에 고정된 플로팅 필 바(fixed bottom-8 left-1/2 -translate-x-1/2)를 렌더링하여 CSV 내보내기, 일괄 태그 지정 또는 삭제와 같은 작업을 표시합니다.
• 툴팁: 호버 툴팁에 키보드 단축키를 포함하십시오 (예: ⌘K, /, Shift + D).

5. 데스크톱 타이포그래피 및 정보 계층 구조

계층 레벨	글꼴 크기	두께	자간	용도
히어로 표시	56px – 72px	ExtraBold (800)	-0.025em (Tight)	랜딩 페이지 접힌 부분 위 가치 제안
페이지/섹션 H1	32px – 40px	Bold (700)	-0.02em	대시보드 뷰 제목, 섹션 헤더
위젯/카드 H2	18px – 22px	SemiBold (600)	-0.01em	벤토 카드 제목, 테이블 제목
데이터 메트릭/값	28px – 36px	ExtraBold (800)	Normal	주요 통계, ARR 메트릭, 카운터 수치
본문/설명	14px – 16px	Regular (400)	Normal	단락, 문서 (1.6 라인 높이)
코드/고정폭	12px – 13px	Medium (500)	Normal	쿼리 지연 시간, API 엔드포인트, JSON 키

---

🧩 생산 준비 완료 데스크톱 컴포넌트 청사진

청사진 A: 모던 벤토 그리드 매트릭스 (비대칭 스팬)

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 max-w-7xl mx-auto">
  <!-- 카드 1: 2열 히어로 카드 (데이터 텔레메트리) -->
  <div class="lg:col-span-2 rounded-2xl border border-white/10 bg-[#101623]/80 p-8 backdrop-blur-xl relative overflow-hidden group hover:border-indigo-500/40 transition-all duration-300">
    <!-- 앰비언트 방사형 광선 -->
    <div class="absolute -right-20 -top-20 h-64 w-64 rounded-full bg-indigo-500/10 blur-3xl group-hover:bg-indigo-500/20 transition-all"></div>
    
    <div class="flex items-center justify-between mb-6">
      <div class="flex items-center gap-3">
        <div class="h-10 w-10 rounded-xl bg-indigo-500/10 border border-indigo-500/20 text-indigo-400 flex items-center justify-center font-bold">⚡</div>
        <div>
          <h3 class="text-xl font-bold text-white">서브초 쿼리 파이프라인</h3>
          <p class="text-xs text-neutral-400">ClickHouse 컬럼형 스토리지 엔진</p>
        </div>
      </div>
      <span class="px-2.5 py-1 rounded-md bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 text-xs font-mono">P99: 11.2ms</span>
    </div>

    <p class="text-sm text-neutral-300 max-w-xl leading-relaxed mb-6">
      사전 집계 병목 현상 없이 수십억 개의 텔레메트리 로그를 스캔하십시오. 콜드 스타트 없이 고객 이탈을 분리하십시오.
    </p>

    <!-- 시각적 스파크라인 시뮬레이션 -->
    <div class="h-28 rounded-xl bg-black/40 border border-white/5 p-4 flex items-end gap-3 justify-between">
      <div class="w-full bg-neutral-800 rounded h-[40%]"></div>
      <div class="w-full bg-neutral-800 rounded h-[55%]"></div>
      <div class="w-full bg-neutral-800 rounded h-[45%]"></div>
      <div class="w-full bg-indigo-900/60 rounded h-[70%]"></div>
      <div class="w-full bg-gradient-to-t from-indigo-600 to-cyan-400 rounded h-[95%] relative">
        <span class="absolute -top-7 left-1/2 -translate-x-1/2 text-[10px] font-mono font-bold text-white bg-indigo-900 px-2 py-0.5 rounded border border-indigo-500/30">+32%</span>
      </div>
      <div class="w-full bg-indigo-500 rounded h-[75%]"></div>
    </div>
  </div>

  <!-- 카드 2: 1열 메트릭 카드 -->
  <div class="rounded-2xl border border-white/10 bg-[#101623]/80 p-8 backdrop-blur-xl flex flex-col justify-between group hover:border-cyan-500/40 transition-all duration-300">
    <div>
      <span class="text-xs font-mono font-bold uppercase tracking-wider text-cyan-400">리텐션 실드</span>
      <h3 class="text-lg font-bold text-white mt-2">자율 이탈 경고</h3>
      <p class="text-xs text-neutral-400 mt-1 leading-relaxed">지속적인 ML 모니터링이 갱신 날짜 이전에 이상 징후를 감지합니다.</p>
    </div>
    <div class="my-6">
      <div class="text-5xl font-extrabold tracking-tight text-white">$482<span class="text-2xl text-cyan-400 font-normal">k</span></div>
      <p class="text-xs text-neutral-500 mt-1">사전 예방적 개입을 통해 보존된 ARR</p>
    </div>
    <div class="flex items-center gap-1.5 text-xs font-semibold text-cyan-400 group-hover:translate-x-1 transition-transform">
      <span>웹훅 트리거 구성</span> →
    </div>
  </div>
</div>

---

청사진 B: 부동 배치 바가 포함된 밀집 엔터프라이즈 데이터 테이블

<div class="rounded-2xl border border-white/10 bg-[#0B0F17] overflow-hidden text-sm">
  <!-- 테이블 헤더 작업 -->
  <div class="p-5 border-b border-white/5 flex items-center justify-between bg-[#101623]/60">
    <div class="flex items-center gap-3">
      <h3 class="font-bold text-white">실시간 텔레메트리 이벤트</h3>
      <span class="px-2 py-0.5 rounded bg-white/5 text-neutral-400 text-xs font-mono">총 1,420,892개</span>
    </div>
    <div class="flex items-center gap-2">
      <input type="text" placeholder="이벤트 이름, 사용자 ID, 지역별 필터..." class="px-3 py-1.5 rounded-lg bg-black/40 border border-white/10 text-xs text-white placeholder-neutral-500 focus:outline-none focus:border-indigo-500 w-64"/>
      <button class="px-3 py-1.5 rounded-lg border border-white/10 bg-white/5 hover:bg-white/10 text-xs text-neutral-300 font-medium">CSV 내보내기</button>
    </div>
  </div>

  <!-- 테이블 본문 -->
  <table class="w-full text-left border-collapse">
    <thead>
      <tr class="border-b border-white/5 text-xs font-mono text-neutral-400 bg-white/[0.01]">
        <th class="p-4 w-10"><input type="checkbox" class="rounded bg-black border-white/20"/></th>
        <th class="p-4">타임스탬프</th>
        <th class="p-4">이벤트 유형</th>
        <th class="p-4">고객 계정</th>
        <th class="p-4">수집 지연 시간</th>
        <th class="p-4 text-right">상태</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-white/5 text-neutral-300 text-xs font-mono">
      <tr class="hover:bg-white/[0.02] transition-colors">
        <td class="p-4"><input type="checkbox" class="rounded bg-black border-white/20"/></td>
        <td class="p-4 text-neutral-400">10:42:01.412 UTC</td>
        <td class="p-4 font-semibold text-white">checkout.payment_confirmed</td>
        <td class="p-4 font-sans text-neutral-200">Stripe 결제 클러스터 #4</td>
        <td class="p-4 text-emerald-400">6.2 ms</td>
        <td class="p-4 text-right"><span class="px-2 py-0.5 rounded bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 text-[10px]">처리됨</span></td>
      </tr>
      <tr class="hover:bg-white/[0.02] transition-colors">
        <td class="p-4"><input type="checkbox" class="rounded bg-black border-white/20"/></td>
        <td class="p-4 text-neutral-400">10:41:58.204 UTC</td>
        <td class="p-4 font-semibold text-white">user.invitation_accepted</td>
        <td class="p-4 font-sans text-neutral-200">Acme Corp 엔터프라이즈</td>
        <td class="p-4 text-emerald-400">8.4 ms</td>
        <td class="p-4 text-right"><span class="px-2 py-0.5 rounded bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 text-[10px]">처리됨</span></td>
      </tr>
    </tbody>
  </table>

  <!-- 부동 도킹 배치 작업 모음 (2개 이상 행 선택 시 표시) -->
  <div class="fixed bottom-8 left-1/2 -translate-x-1/2 px-5 py-3 rounded-2xl bg-[#172033] border border-indigo-500/40 shadow-2xl shadow-black/80 flex items-center gap-4 text-xs z-50">
    <span class="font-semibold text-white"><span class="text-indigo-400 font-mono">2</span>개 항목 선택됨</span>
    <div class="h-4 w-px bg-white/10"></div>
    <button class="text-neutral-300 hover:text-white font-medium">파이프라인 재실행</button>
    <button class="text-neutral-300 hover:text-white font-medium">JSON 내보내기</button>
    <button class="text-rose-400 hover:text-rose-300 font-medium">레코드 삭제</button>
  </div>
</div>

---

🚫 데스크톱 안티패턴 (권장 사항과 금지 사항)

절대 이렇게 하지 마세요 (안티패턴)	항상 이렇게 하세요 (데스크톱 모범 사례)
1920px 화면에 단일 열 모바일 레이아웃을 늘려서 사용합니다.	다중 열 벤토 그리드 또는 다중 창 마스터-디테일 레이아웃을 사용하십시오.
사용자가 페이지당 5행만 데이터 테이블을 페이지 매기도록 강제합니다.	고정 테이블 헤더와 즉시 검색 필터링 기능을 사용하여 기본값을 25-50행으로 설정하십시오.
순수 #000000 배경과 거친 #FFFFFF 테두리를 사용합니다.	깊은 옵시디언(#0B0F17)을 미묘한 글라스모픽 테두리(border-white/10)와 함께 계층화하십시오.
고급 엔터프라이즈 사용자로부터 키보드 단축키를 숨깁니다.	대화형 요소에 직접 단축키 태그(⌘K, /, G then D)를 표시하십시오.
단순한 상태 필터링을 위해 느린 전체 페이지 리로드에 의존합니다.	낙관적 UI 업데이트를 통해 텔레메트리 차트와 테이블 행을 즉시 업데이트하십시오.

---

💬 AI 프롬프팅 템플릿 (사용자가 당신을 프롬프트하는 방법)

사용자는 다음과 같은 프롬프트를 사용하여 이 스킬을 활성화할 수 있습니다:

• "desktop-uiux-pro 스킬을 사용하여, 벤토 그리드와 실시간 ClickHouse 텔레메트리 테이블이 있는 엔터프라이즈 분석 대시보드를 디자인해 주세요."
• "desktop-uiux-pro를 사용하여, NeoSoftUI 다크 모드, 증명 우선 접근법 및 3계층 가격 매트릭스를 갖춘 B2B SaaS 랜딩 페이지를 아키텍처링해 주세요."
• "공간 밀도, 키보드 단축키 및 WCAG 대비 측면에서 이 데스크톱 레이아웃을 검토해 주세요."