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

/* Token thiết kế tự động tạo */
:root {
  /* Hệ thống khoảng cách (8px cơ sở) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  /* Tỷ lệ phông chữ */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;

  /* Tầng bóng đổ */
  --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);
}

// Nút do AI tạo, tự động bao gồm mọi trạng thái
<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>

// Tự động bao gồm hiệu ứng hover, khoảng cách, bóng đổ
<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>

// Ưu tiên di động, tự động thích ứng desktop
<div className="
  grid
  grid-cols-1        /* Điện thoại: 1 cột */
  sm:grid-cols-2     /* Máy tính bảng: 2 cột */
  lg:grid-cols-3     /* Desktop: 3 cột */
  xl:grid-cols-4     /* Màn hình lớn: 4 cột */
  gap-4 sm:gap-6 lg:gap-8
"
>
  {items.map(item => <Card key={item.id} {...item} />)}
</div>

// Tự động thêm vi tương tác
<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>

# Clone thư viện kỹ năng
git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git

# Sao chép vào thư mục skills của Hermes
cp -r ui-ux-pro-max-skill ~/.hermes/skills/

# Khởi động lại Hermes, kỹ năng tự động tải
hermes

# Thêm nội dung SKILL.md vào system prompt
# Hoặc dán quy chuẩn thiết kế khi bắt đầu cuộc trò chuyện

User: Viết trang đăng nhập
AI: (Tạo trang chức năng đầy đủ nhưng thiết kế thô sơ)

User: Viết trang đăng nhập
AI: (Tạo trang đăng nhập với hệ thống thiết kế tinh xảo)
- Nền chuyển màu + thẻ glassmorphism
- Hoạt ảnh focus ô nhập
- Trạng thái hover/active nút
- Bố cục đáp ứng
- Hỗ trợ chế độ tối

<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>