UI/UX Pro Max — Professional-Grade Interface Design Specifications
Goal: Generate frontend interfaces with a sense of design that can be delivered directly, saying goodbye to the AI template style.
Design Philosophy
克制 > 堆砌 — 少即是多，每个元素都有存在理由
层次 > 装饰 — 用空间和对比建立信息层次，而非边框和分割线
一致 > 创意 — 系统化的设计语言优于零散的创意点缀
功能 > 形式 — 美观服务于可用性，永远不反过来
Anti-AI-Style Checklist
Strictly Prohibited
| Category |
Prohibited Items |
| Color |
Blue-purple neon gradients, large-area linear gradient backgrounds, fluorescent color accents |
| Effects |
Glassmorphism, glowing strokes, neon shadows, particle backgrounds |
| Layout |
Centered large card + excessive rounded corners, infinitely stacked card-in-card |
| Decoration |
Meaningless geometric shapes, decorative grid lines, floating bubbles |
| Icons |
Purely decorative emoji, icons replacing text explanations |
| Copywriting |
"Powered by AI", exaggerated marketing-style language |
Signals for Identifying the AI Template Style
- All cards are equal width and height, with completely identical spacing → lacks visual rhythm
- The primary color is only one blue/purple → lacks color layering
- Shadows are all identical
shadow-lg → no depth layering
- Buttons are all gradient-filled → lacks action hierarchy
Color System
Construction Method
1. 确定品牌主色（1 个）
2. 派生 5 级明暗梯度（50/100/300/500/700）
3. 选择 1 个功能强调色（CTA / 重要操作）
4. 语义色：success/warning/error/info 各 1 个
5. 中性色：gray 7 级梯度（50~900）
CSS Variable Template
: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);
}
Dark Mode
[data-theme="dark"] {
--text-primary: #f5f5f5;
--text-secondary: #a3a3a3;
--bg-page: #0a0a0a;
--bg-card: #171717;
--bg-hover: #262626;
--border-default: #2e2e2e;
--border-strong: #404040;
}
Typography System
Font Size Scale (rem)
| Token |
Size |
Purpose |
| --text-xs |
0.75rem |
Supplementary descriptions, labels |
| --text-sm |
0.875rem |
Secondary text, table content |
| --text-base |
1rem |
Body text |
| --text-lg |
1.125rem |
Subheadings, emphasis |
| --text-xl |
1.25rem |
Section titles |
| --text-2xl |
1.5rem |
Page titles |
| --text-3xl |
1.875rem |
Large titles / Hero |
Line Height
| Scenario |
line-height |
| Titles |
1.2 ~ 1.3 |
| Body text |
1.5 ~ 1.6 |
| Compact (labels/buttons) |
1 ~ 1.2 |
Font Weight
Regular (400) — 正文
Medium (500) — 次标题、强调
Semibold (600) — 标题
Bold (700) — 仅用于极少数 Hero 场景
Spacing System
8px Base Grid
: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 — 页面级分隔 */
}
Spacing Usage Principles
| Relationship |
Spacing |
| Elements in the same group (label + input) |
space-1 ~ space-2 |
| Related elements (between form fields) |
space-3 ~ space-4 |
| Padding within a section |
space-4 ~ space-6 |
| Between sections |
space-8 ~ space-12 |
| Page-level whitespace |
space-12 ~ space-16 |
Visual Hierarchy
5 Ways to Establish Hierarchy (in order of priority)
1. 大小对比 — 标题 vs 正文字号差 ≥ 1.5 倍
2. 色彩权重 — 深色 = 重要，浅色 = 辅助
3. 空白分隔 — 用留白代替分割线
4. 位置关系 — 重要信息靠上靠左（LTR 布局）
5. 视觉修饰 — 最后手段：边框、背景色、图标
Information Density Control
| Scenario |
Strategy |
| Backend tables/lists |
Compact mode, row height 40~48px, reduced whitespace |
| Detail pages/forms |
Comfortable mode, reasonable grouping + whitespace |
| Marketing/landing pages |
Loose mode, ample whitespace to highlight core information |
| Dashboards |
Mixed mode, compact cards + loose spacing between cards |
Shadow System
Layered Shadows
: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);
}
Usage Rules
| Element |
Shadow |
Description |
| Regular card |
shadow-xs or border |
Flat feel, does not float |
| Floating card |
hover: shadow-md |
Interaction feedback |
| Dropdown menu/Modal |
shadow-lg |
Clear overlay relationship |
| Modal |
shadow-xl |
Highest level |
Border Radius System
:root {
--radius-sm: 4px; /* 按钮、输入框、标签 */
--radius-md: 8px; /* 卡片、弹窗 */
--radius-lg: 12px; /* 大卡片、图片容器 */
--radius-xl: 16px; /* 模态框、特殊容器 */
--radius-full: 9999px; /* 胶囊按钮、头像 */
}
Principles: A single page should use no more than 3 border radius sizes to maintain consistency.
Interaction Micro-animations
Principles
1. 有目的 — 每个动效都传达状态变化
2. 快速 — 200~300ms，不拖沓
3. 自然 — ease-out 为主，模拟物理惯性
Common Timing
:root {
--duration-fast: 150ms; /* hover、focus */
--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); /* 弹性（慎用） */
}
State Transition Templates
/* 按钮 hover */
.btn {
transition: background-color var(--duration-fast) var(--ease-default),
box-shadow var(--duration-fast) var(--ease-default),
transform var(--duration-fast) var(--ease-default);
}
.btn:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
.btn:active {
transform: translateY(0);
}
/* 卡片 hover */
.card {
transition: box-shadow var(--duration-normal) var(--ease-default);
}
.card:hover {
box-shadow: var(--shadow-md);
}
/* 淡入 */
.fade-enter {
opacity: 0;
transform: translateY(8px);
}
.fade-enter-active {
transition: opacity var(--duration-normal) var(--ease-out),
transform var(--duration-normal) var(--ease-out);
}
Prohibited Animations
- ❌ Animations longer than 500ms (users perceive it as "lagging")
- ❌ Flashy effects like rotation, bouncing, pulsing
- ❌ Entrance animations on page load (except for the Hero on the first screen)
- ❌ Infinite loop animations (except loading indicators)
Responsive Design
Breakpoints
/* Mobile First */
--bp-sm: 640px; /* 大屏手机 */
--bp-md: 768px; /* 平板 */
--bp-lg: 1024px; /* 笔记本 */
--bp-xl: 1280px; /* 桌面 */
--bp-2xl: 1536px; /* 大屏 */
Adaptation Strategy
| Element |
Solution |
| Layout |
Grid/Flex adaptive, avoid fixed widths |
| Font size |
clamp() fluid scaling |
| Spacing |
Halve on mobile or use smaller tokens |
| Navigation |
Collapse to hamburger menu below lg |
| Table |
Convert to card list below md |
| Images |
srcset + sizes, or picture element |
Fluid font size example
h1 { font-size: clamp(1.5rem, 2vw + 1rem, 2.5rem); }
h2 { font-size: clamp(1.25rem, 1.5vw + 0.75rem, 1.875rem); }
Component Design Patterns
Button Hierarchy
Primary（主操作） — 实心填充主色，每页最多 1~2 个
Secondary（次操作） — 描边/浅色背景
Tertiary（辅助） — 纯文字按钮，无背景无边框
Danger（危险操作） — 红色系，需二次确认
Form Design
| Rule |
Description |
| Label always visible |
Do not rely on placeholder to convey field meaning |
| Error message nearby |
Below the input field, in small red text |
| Required marker |
* after the label, color --color-error |
| Grouping |
Group related fields with headings/spacing, do not enclose with borders |
| Action area |
Primary button aligned right (or left, consistent site-wide) |
Empty State Design
1. 简洁插图或图标（不要大面积灰色区域）
2. 一句话说明当前状态
3. 一个明确的行动按钮（如有）
4. 不要用 "Oops!" 等拟人化表达
Loading States
骨架屏（Skeleton） — 首选，保持布局稳定
Spinner — 仅用于局部操作（按钮内、小区域）
进度条 — 文件上传等可量化进度
Accessibility Basics
| Rule |
Requirement |
| Color contrast |
Body text ≥ 4.5:1, large text ≥ 3:1 (WCAG AA) |
| Visible focus |
focus-visible styles clearly distinguishable |
| Keyboard navigation |
Reasonable Tab order, all interactions operable via keyboard |
| Semantic HTML |
Correct use of heading hierarchy, landmark elements |
| Alt text |
Functional images must have alt |
Code Output Requirements
When generating pages/components, you must
- Use CSS variables — do not hardcode colors/spacing/font sizes
- Responsive — cover at least mobile + desktop
- Complete interaction states — hover / focus / active / disabled
- Semantic tags — do not overuse div
- Dark mode — provide
[data-theme="dark"] Variable overrides
Generation order
1. 定义设计 tokens（CSS 变量）
2. 搭建页面结构（HTML / Template）
3. 实现布局（Grid / Flex）
4. 填充组件内容
5. 添加交互状态和微动效
6. 响应式适配
Style organization
/* 1. CSS 变量 / Tokens */
/* 2. Reset / Base */
/* 3. Layout */
/* 4. Components */
/* 5. Utilities（极少量） */
/* 6. 响应式覆盖 */
Design review checklist
After generating UI code, self-check the following items:
- Clear visual hierarchy: headings, body text, and auxiliary text at 3 or more levels
- Sense of spacing rhythm: not all spacing is the same
- Restrained color scheme: primary color as an accent, not large-area color filling
- No AI template style signals (see the anti-AI style checklist)
- Complete interaction states: hover, focus, disabled, loading, empty, error
- Basically usable responsiveness
- Contrast meets standards
- No redundant decorative elements
Rule provenance
> 📋 本回复遵循：`ui-ux-pro-max` - [具体章节]
