UI/UX Pro Max Skill：让 AI 秒变顶级设计师的神级技能库

/* 자동 생성된 디자인 토큰 */
:root {
  /* 간격 시스템 (8px 기준) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  /* 글꼴 비율 */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;

  /* 그림자 계층 */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
  --shadow-xl: 0 20px 25px rgba(0,0,0,0.15);
}

// AI가 생성한 버튼, 모든 상태 자동 포함
<button
  className="
    px-4 py-2 rounded-lg font-medium
    bg-blue-600 text-white
    hover:bg-blue-700
    active:bg-blue-800
    disabled:opacity-50 disabled:cursor-not-allowed
    transition-colors duration-200
    focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
  "
>
  Submit
</button>

// hover 효과, 간격, 그림자 자동 포함
<div className="
  bg-white rounded-xl shadow-md
  hover:shadow-lg transition-shadow duration-300
  p-6 space-y-4
"
>
  <img className="w-full h-48 object-cover rounded-lg" src="..." />
  <h3 className="text-xl font-semibold text-gray-900">Title</h3>
  <p className="text-gray-600 leading-relaxed">Description...</p>
</div>

// 모바일 우선, 자동으로 데스크톱 적용
<div className="
  grid
  grid-cols-1        /* 휴대폰: 1열 */
  sm:grid-cols-2     /* 태블릿: 2열 */
  lg:grid-cols-3     /* 데스크톱: 3열 */
  xl:grid-cols-4     /* 대형 화면: 4열 */
  gap-4 sm:gap-6 lg:gap-8
"
>
  {items.map(item => <Card key={item.id} {...item} />)}
</div>

// 자동으로 미세 인터랙션 추가
<div className="
  group relative
  cursor-pointer
"
>
  <div className="
    transform transition-all duration-300
    group-hover:scale-105
    group-hover:-translate-y-1
  "
  >
    {/* Card content */}
  </div>
  <div className="
    absolute inset-0 bg-black/0
    group-hover:bg-black/5
    transition-colors duration-300
    rounded-xl
  " />
</div>

# 스킬 라이브러리 클론
git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git

# Hermes skills 디렉토리에 복사
cp -r ui-ux-pro-max-skill ~/.hermes/skills/

# Hermes 재시작, 스킬 자동 로드
hermes

# SKILL.md 내용을 시스템 프롬프트에 추가
# 또는 대화 시작 시 디자인 규격을 붙여넣기

User: 로그인 페이지 작성해줘
AI: (기능은 완벽하지만 디자인이 조잡한 페이지 생성)

User: 로그인 페이지 작성해줘
AI: (아름다운 디자인 시스템이 적용된 로그인 페이지 생성)
- 그라데이션 배경 + 글래스모피즘 카드
- 입력란 focus 애니메이션
- 버튼 hover/active 상태
- 반응형 레이아웃
- 다크 모드 지원

<button style="background: blue; color: white; padding: 10px;">Click</button>

<button
  className="
    inline-flex items-center justify-center
    px-5 py-2.5 rounded-lg
    bg-gradient-to-r from-blue-600 to-indigo-600
    text-white font-medium text-sm
    shadow-lg shadow-blue-500/30
    hover:shadow-xl hover:shadow-blue-500/40
    hover:scale-105
    active:scale-95
    transition-all duration-200 ease-out
    focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
    disabled:opacity-50 disabled:cursor-not-allowed
  "
>
  <span className="mr-2">→</span>
  Get Started
</button>