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）