# UI UX Pro Max

专业级 UI/UX 设计规范，需要高质量界面设计时手动触发或描述"设计感/专业UI"时自动触发。覆盖视觉层次、配色体系、排版节奏、交互微动效、响应式适配等。日常前端开发由...

- Repository: https://github.com/doccker/cc-use-exp (1063 stars)
- Category: Design
- License: see repository
- Last updated: 2026-08-26
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add doccker/cc-use-exp --skill ui-ux-pro-max -g -a claude-code -y`
Codex: `npx skills add doccker/cc-use-exp --skill ui-ux-pro-max -g -a codex -y`
Cursor: `npx skills add doccker/cc-use-exp --skill ui-ux-pro-max -g -a cursor -y`
Gemini CLI: `npx skills add doccker/cc-use-exp --skill ui-ux-pro-max -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add doccker/cc-use-exp`

## Description

专业级 UI/UX 设计规范，需要高质量界面设计时手动触发或描述"设计感/专业UI"时自动触发。覆盖视觉层次、配色体系、排版节奏、交互微动效、响应式适配等。日常前端开发由 frontend-dev skill + frontend-design 插件覆盖。

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# UI/UX Pro Max, 专业级界面设计规范

> 目标：生成有设计感、可直接交付的前端界面，告别 AI 模板风。

---

## 设计哲学

```
克制 > 堆砌, 少即是多，每个元素都有存在理由
层次 > 装饰, 用空间和对比建立信息层次，而非边框和分割线
一致 > 创意, 系统化的设计语言优于零散的创意点缀
功能 > 形式, 美观服务于可用性，永远不反过来
```

---

## 反 AI 风格清单

### 严格禁止

| 类别 | 禁止项 |
|------|--------|
| 配色 | 蓝紫霓虹渐变、大面积线性渐变背景、荧光色强调 |
| 效果 | 玻璃拟态(glassmorphism)、发光描边、霓虹阴影、粒子背景 |
| 布局 | 居中大卡片+圆角过度、无限堆叠的 card-in-card |
| 装饰 | 无意义几何图形、装饰性网格线、浮动气泡 |
| 图标 | 纯装饰性 emoji、图标代替文字说明 |
| 文案 | "Powered by AI"、营销式夸张用语 |

### 识别 AI 模板风的信号

- 所有卡片等宽等高、间距完全一致 → 缺乏视觉节奏
- 主色只有一个蓝/紫 → 缺乏色彩层次
- 阴影千篇一律 `shadow-lg` → 没有深度层次
- 按钮全是渐变填充 → 缺乏操作层级

---

## 配色体系

### 构建方法

```
1. 确定品牌主色（1 个）
2. 派生 5 级明暗梯度（50/100/300/500/700）
3. 选择 1 个功能强调色（CTA / 重要操作）
4. 语义色：success/warning/error/info 各 1 个
5. 中性色：gray 7 级梯度（50~900）
```

### CSS 变量模板

```css
:root {
  /* 主色梯度 */
  --color-primary-50: #f0f7ff;
  --color-primary-100: #e0efff;
  --color-primary-300: #7cb8ff;
  --color-primary-500: #2b7de9;   /* 主色 */
  --color-primary-700: #1a56a8;

  /* 中性色 */
  --color-gray-50: #fafafa;
  --color-gray-100: #f5f5f5;
  --color-gray-200: #e8e8e8;
  --color-gray-300: #d4d4d4;
  --color-gray-500: #737373;
  --color-gray-700: #404040;
  --color-gray-900: #171717;

  /* 语义色 */
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #3b82f6;

  /* 文字 */
  --text-primary: var(--color-gray-900);
  --text-secondary: var(--color-gray-500);
  --text-disabled: var(--color-gray-300);

  /* 背景 */
  --bg-page: var(--color-gray-50);
  --bg-card: #ffffff;
  --bg-hover: var(--color-gray-100);

  /* 边框 */
  --border-default: var(--color-gray-200);
  --border-strong: var(--color-gray-300);
}
```

### 暗色模式

```css
[data-theme="dark"] {
  --text-primary: #f5f5f5;
  --text-secondary: #a3a3a3;
  --bg-page: #0a0a0a;
  --bg-card: #171717;
  --bg-hover: #262626;
  --border-default: #2e2e2e;
  --border-strong: #404040;
}
```

---

## 排版系统

### 字号梯度（rem）

The rest: https://github.com/doccker/cc-use-exp/blob/HEAD/.antigravity/skills/ui-ux-pro-max/SKILL.md