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>