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 变量模板

: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);
}

暗色模式

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

Token	Size	用途
--text-xs	0.75rem	辅助说明、标签
--text-sm	0.875rem	次要文字、表格内容
--text-base	1rem	正文
--text-lg	1.125rem	小标题、强调
--text-xl	1.25rem	区块标题
--text-2xl	1.5rem	页面标题
--text-3xl	1.875rem	大标题 / Hero

行高

场景	line-height
标题	1.2 ~ 1.3
正文	1.5 ~ 1.6
紧凑（标签/按钮）	1 ~ 1.2

字重

Regular (400) — 正文
Medium (500)  — 次标题、强调
Semibold (600) — 标题
Bold (700)    — 仅用于极少数 Hero 场景

---

间距系统

8px 基准网格

:root {
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
}

间距使用原则

关系	间距
同组元素（label + input）	space-1 ~ space-2
相关元素（表单字段之间）	space-3 ~ space-4
区块内填充	space-4 ~ space-6
区块之间	space-8 ~ space-12
页面级留白	space-12 ~ space-16

---

视觉层次

建立层次的 5 种手段（按优先级）

1. 大小对比    — 标题 vs 正文字号差 ≥ 1.5 倍
2. 色彩权重    — 深色 = 重要，浅色 = 辅助
3. 空白分隔    — 用留白代替分割线
4. 位置关系    — 重要信息靠上靠左（LTR 布局）
5. 视觉修饰    — 最后手段：边框、背景色、图标

信息密度控制

场景	策略
后台表格/列表	紧凑模式，行高 40~48px，减少留白
详情页/表单	舒适模式，合理分组+留白
营销/落地页	宽松模式，大量留白突出核心信息
仪表盘	混合模式，卡片紧凑 + 卡片间宽松

---

阴影系统

:root {
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.06), 0 4px 6px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.08), 0 8px 10px rgba(0, 0, 0, 0.04);
}

元素	阴影	说明
普通卡片	shadow-xs 或 border	平面感，不浮起
悬浮卡片	hover: shadow-md	交互反馈
下拉菜单/弹窗	shadow-lg	明确浮层关系
模态框	shadow-xl	最高层级

---

圆角系统

:root {
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
}

同一页面圆角不超过 3 种尺寸。

---

交互微动效

原则

1. 有目的 — 每个动效都传达状态变化
2. 快速   — 200~300ms，不拖沓
3. 自然   — ease-out 为主，模拟物理惯性

常用 Timing

:root {
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 350ms;

  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

禁止的动效

• 超过 500ms 的动画
• 旋转、弹跳、脉冲等花哨效果
• 页面加载时的入场动画（除首屏 Hero）
• 无限循环动画（除 loading 指示器）

---

响应式设计

断点

--bp-sm: 640px;
--bp-md: 768px;
--bp-lg: 1024px;
--bp-xl: 1280px;
--bp-2xl: 1536px;

适配策略

元素	方案
布局	Grid/Flex 自适应，避免固定宽度
字号	clamp() 流式缩放
间距	移动端减半或使用较小 token
导航	lg 以下折叠为汉堡菜单
表格	md 以下转为卡片列表
图片	srcset + sizes，或 picture 元素

---

组件设计模式

按钮层级

Primary（主操作）   — 实心填充主色，每页最多 1~2 个
Secondary（次操作） — 描边/浅色背景
Tertiary（辅助）    — 纯文字按钮，无背景无边框
Danger（危险操作）  — 红色系，需二次确认

表单设计

规则	说明
Label 始终可见	不依赖 placeholder 传达字段含义
错误提示就近	在输入框下方，红色小字
必填标记	* 在 label 后，颜色 --color-error
分组	相关字段用标题/间距分组，不用边框围起来
操作区	主按钮靠右（或靠左，全站统一）

空状态 / 加载状态

空状态：简洁图标 + 一句话说明 + 行动按钮
加载态：骨架屏（首选）、Spinner（局部）、进度条（可量化）

---

无障碍基础

规则	要求
颜色对比度	正文 ≥ 4.5:1，大字 ≥ 3:1（WCAG AA）
焦点可见	focus-visible 样式清晰可辨
键盘导航	Tab 顺序合理，可键盘操作所有交互
语义化 HTML	正确使用 heading 层级、landmark 元素
Alt 文本	功能性图片必须有 alt

---

代码输出要求

生成页面/组件时必须：

1. 使用 CSS 变量 — 不硬编码颜色/间距/字号
2. 响应式 — 至少覆盖移动端 + 桌面端
3. 交互状态完整 — hover / focus / active / disabled
4. 语义化标签 — 不滥用 div
5. 暗色模式 — 提供 [data-theme="dark"] 变量覆盖

---

设计评审检查清单

在生成 UI 代码后，自查以下项目：

• 视觉层次清晰：标题、正文、辅助文字 3 级以上
• 间距节奏感：不是所有间距都一样
• 配色克制：主色点缀，不是大面积铺色
• 没有 AI 模板风信号（见反 AI 风格清单）
• 交互状态完整：hover、focus、disabled、loading、empty、error
• 响应式基本可用
• 对比度达标
• 无多余装饰性元素