UI 设计系统

技能文档

---
name: ui-new
title: UI 设计系统
category: 内容创作
description: 专业 UI 生成与现有界面优化设计系统，参考 Google Material Design 3、Apple HIG 与高赞设计审美，输出大气简约、高级美学的 UI 代码，覆盖生成新界面、优化现有界面、单组件设计三大协议。当用户需要生成 UI 界面、设计页面、优化现有界面、创建组件库/设计系统、做 App/Web/Dashboard/Landing Page 时触发。触发词：UI 设计、界面生成、设计系统、组件设计、界面优化。
---

# UI 设计系统

## 📋 背景与设计哲学

### 核心定位
本技能专注于生成**大厂级别、高级简约**的 UI 界面。参考标准：
- **Google Material Design 3** — 色彩系统、动效原则、组件规范
- **Apple Human Interface Guidelines** — 空间设计、排版节奏、细腻质感
- **Fluent Design (Microsoft)** — Acrylic 材质、深度层次
- **Pinterest / Dribbble 高赞设计** — 视觉张力、留白美学、色彩大胆

### 设计价值观
> "少即是多，但每一处都要有意图"
- **克制的奢华**：不是堆砌，而是精准取舍
- **系统性思维**：每个组件都来自同一设计语言
- **情绪传达**：界面有温度，有性格，不是功能机器
- **细节决定品质**：阴影、圆角、间距都是设计语言

---

## 技能工作流

### 步骤1：需求分析（必须先做）

分析以下维度，在回复前先梳理清楚：

```
用途分类:
├── 生成新UI    → 执行步骤2「UI Generation Protocol」
├── 优化现有UI  → 执行步骤3「UI Audit & Optimization Protocol」
└── 组件设计    → 执行步骤4「Component Design Protocol」

产品类型:
├── Mobile App (iOS/Android 风格)
├── Web App / Dashboard
├── Landing Page / Marketing
├── Admin / B端系统
└── 创意/作品集页面
```

**必须明确的信息（缺失时主动询问或合理假设并说明）：**
- 产品定位（面向谁？解决什么问题？）
- 品牌调性（科技感/温暖/奢华/年轻/专业？）
- 主色倾向（有偏好色系，或自由发挥）
- 交付格式（HTML/CSS、React/JSX、SVG 原型图）

### 步骤2：生成新 UI（UI Generation Protocol）

**执行顺序：**
1. **定义设计 DNA** — 确定调性、主色、字体组合
2. **建立 CSS 变量体系** — 完整的 token 系统
3. **搭建布局骨架** — Grid/Flex 响应式结构
4. **实现核心组件** — 从最重要的交互元素开始
5. **添加视觉质感** — 渐变、阴影、纹理、背景
6. **注入微交互** — 动效、过渡、Hover 状态
7. **精调细节** — 间距、对齐、字重、行高
8. **响应式适配** — Mobile First

**代码规范：**
```html
<!-- 必须包含的 meta -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">

<!-- 结构原则 -->
<!-- 1. CSS Variables 在 :root 统一定义 -->
<!-- 2. 组件用 BEM 或语义化命名 -->
<!-- 3. 响应式用 clamp() 而非 media query 断点堆叠 -->
<!-- 4. 动画性能优先用 transform/opacity -->
```

色彩、排版、组件与动效的完整参考体系见下文「设计参考体系」与 references/ 文档。

### 步骤3：优化现有 UI（UI Audit & Optimization Protocol）

拿到现有 UI 后，必须从 6 个维度审查：

**1. 视觉层级**
- [ ] 是否有清晰的信息优先级？
- [ ] 用户视线路径是否顺畅？
- [ ] 重要信息是否足够突出？

**2. 色彩系统**
- [ ] 色彩对比度是否达标（WCAG AA: 4.5:1 文字）？
- [ ] 颜色使用是否一致、有系统性？
- [ ] 是否存在色彩混乱或过多颜色？

**3. 排版质量**
- [ ] 字体层级是否清晰（最多 3 个层级）？
- [ ] 行高/字间距是否舒适？
- [ ] 字体选择是否与品牌调性匹配？

**4. 间距与对齐**
- [ ] 是否遵循基准网格（4pt 或 8pt）？
- [ ] 组件内外间距是否统一？
- [ ] 元素对齐是否精准？

**5. 组件一致性**
- [ ] 相同功能的组件样式是否统一？
- [ ] 交互状态是否完整（默认/Hover/Active/Disabled）？
- [ ] 圆角、阴影是否系统化？

**6. 现代感与审美**
- [ ] 是否有过时的 UI 模式（阴影过重、渐变廉价）？
- [ ] 是否有高级的视觉吸引力？
- [ ] 留白是否足够、有设计感？

**优化输出格式：**
```
## UI 审查报告

### 🎯 核心问题（3-5个最重要的）
1. [问题描述] → [具体改进建议]

### 🎨 设计升级方案
[输出改进后的完整代码]

### 📊 改进对比
Before: [原方案问题]
After: [改进后效果]
```

### 步骤4：单组件设计（Component Design Protocol）

适用于：按钮、卡片、导航栏、表单、Modal、Toast、Tab、Chip 等单一组件。

**输出标准：**
- 包含所有状态（Default / Hover / Active / Focus / Disabled / Loading）
- 提供 Dark Mode 变体
- 包含使用示例
- 代码直接可用，不需要额外依赖（除非用户指定框架）

### 步骤5：交付自检

按「高质量 UI 的标志性特征」逐项核对（见下文），确认无「绝对避免」清单中的问题后交付。

---

## 设计参考体系

### 🎨 色彩系统

**Tonal Palette 结构（参考 Material You）：**
```
Primary   → 品牌主色，用于关键操作和焦点元素
Secondary → 辅助色，用于标签、图标、次要按钮
Tertiary  → 对比色，用于强调差异化内容
Neutral   → 灰阶体系，背景/表面/文字层级
Error     → 错误/警告状态色
```

**推荐高级色板（可直接使用）：**

| 风格 | Primary | Secondary | Accent | Surface |
|------|---------|-----------|--------|---------|
| 极简白 | #1A1A2E | #16213E | #E94560 | #F8F9FA |
| 深空科技 | #6C63FF | #3ECFCF | #FF6584 | #0D0D1A |
| 自然有机 | #2D6A4F | #95D5B2 | #F4A261 | #FEFDF8 |
| 奢华金融 | #1C1C28 | #8B7355 | #C9A84C | #F5F3EF |
| 现代橙红 | #FF4B2B | #FF416C | #FFA07A | #1A1A1A |
| 苹果式灰 | #007AFF | #34C759 | #FF9500 | #F2F2F7 |
| 薰衣草紫 | #7B61FF | #B693FD | #4DC9D9 | #FAFAFF |
| 珊瑚暖调 | #FF6B6B | #FFE66D | #4ECDC4 | #FFFAF0 |

**Apple HIG 间距系统：**
```css
/* 参考 Apple 8pt 网格系统 */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;   /* 标准间距 */
--space-6: 24px;   /* 组件内间距 */
--space-8: 32px;   /* 区块间距 */
--space-12: 48px;  /* 大区块间距 */
--space-16: 64px;  /* 页面级间距 */
```

### 📐 排版系统

**字体层级（优先使用有个性的字体组合）：**
```css
/* 选项 A: 科技感 */
--font-display: 'Space Grotesk', 'DM Sans';
--font-body: 'Inter', system-ui;

/* 选项 B: 人文优雅 */
--font-display: 'Playfair Display', 'Cormorant';
--font-body: 'Source Serif 4', Georgia;

/* 选项 C: 现代极简 */
--font-display: 'Syne', 'Outfit';
--font-body: 'Manrope', sans-serif;

/* 选项 D: 中文友好 */
--font-display: 'Noto Serif SC', serif;
--font-body: 'Noto Sans SC', sans-serif;

/* Type Scale (参考 Material 3) */
--type-display-large: clamp(40px, 5vw, 57px) / 1.12;
--type-headline-large: clamp(24px, 3vw, 32px) / 1.25;
--type-title-large: 22px / 1.27;
--type-body-large: 16px / 1.5;
--type-label-small: 11px / 1.45;
```

### 🧩 组件设计规范

```css
/* 卡片（Material 3 Card Variants） */
.card-elevated {
  background: var(--surface);
  border-radius: 12px;
  box-shadow: 0px 1px 2px rgba(0,0,0,.06),
              0px 4px 16px rgba(0,0,0,.08);
  transition: box-shadow 200ms ease, transform 200ms ease;
}
.card-elevated:hover {
  box-shadow: 0px 4px 8px rgba(0,0,0,.08),
              0px 12px 32px rgba(0,0,0,.12);
  transform: translateY(-2px);
}

/* 按钮（Apple 最小触控尺寸 44px） */
.btn-primary {
  height: 44px;
  padding: 0 24px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  transition: all 150ms ease;
}
/* 按钮层级: Filled > Filled Tonal > Outlined > Text > Icon */
.btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); filter: brightness(0.95); }

/* 输入框 */
.input-apple {
  height: 44px;
  background: rgba(120,120,128,0.12);
  border: none;
  border-radius: 10px;
  padding: 0 16px;
}
```

### ✨ 动效与交互规范

```css
/* Apple 弹性曲线 */
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
/* Material 标准曲线 */
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
/* 快入慢出 */
--ease-decelerate: cubic-bezier(0, 0, 0.2, 1);

/* 时长规范 */
--duration-short4: 200ms;   /* 微交互 */
--duration-medium2: 300ms;  /* 标准转场 */
--duration-extra-long: 600ms; /* 页面级切换 */
```

**必须实现的微交互：**
- **Hover 状态**：背景色变化 + 轻微位移
- **Active 状态**：轻压效果 (scale 0.97)
- **Focus 状态**：清晰的焦点环（无障碍必须）
- **Loading 状态**：骨架屏或脉冲动画
- **页面加载**：元素交错淡入 (stagger delay)

---

## 🌟 高质量 UI 的标志性特征

### 必须具备
1. **清晰的焦点** — 每个页面只有一个最重要的视觉中心
2. **呼吸感** — 足够的留白，不拥挤
3. **色彩自信** — 不是"安全"的配色，而是有个性的
4. **字体有品位** — 不用默认字体，字重搭配有对比
5. **圆角有度** — 统一的圆角半径，不乱用
6. **阴影克制** — 一两层精准的阴影，不堆叠
7. **动效有意义** — 每个动画都在传达信息

### 绝对避免
- 彩虹色渐变按钮
- 廉价 box-shadow（`0 4px 8px rgba(0,0,0,0.5)` 这种）
- 全大写 + 粗体 + 红色 的"重要提示"
- 16 种以上颜色同时出现
- 响应式断点堆叠（用 clamp 代替）
- 图标和文字对不齐
- 移动端点击区域小于 44px

---

## 📦 参考文件

需要深度参考时，读取以下文件：
- [references/color-systems.md](references/color-systems.md) — 完整色彩系统参考（Material 3、Apple、自定义）
- [references/component-patterns.md](references/component-patterns.md) — 高质量组件代码片段库
- [references/layout-templates.md](references/layout-templates.md) — 常见页面布局模板（Dashboard、Landing、App）

## ⚡ 快速决策树

```
用户给了设计稿/截图要优化？
  → 步骤3 UI Audit，先分析问题，再输出改进版本

用户要从零生成界面？
  → 问清楚用途和调性，选择色板，执行步骤2 Generation Protocol

用户只需要某个组件？
  → 执行步骤4 Component Protocol，输出所有状态变体

用户没说清楚要什么？
  → 询问：① 是什么产品 ② 大概什么风格 ③ 要 HTML 还是 React
```

使用说明

# UI 设计系统

一句话描述需求即可获得大厂级别、高级简约的 UI 代码：从零生成界面、优化现有界面、设计单组件三大模式，内建色板、排版、组件与动效参考体系。

## 使用

```text
帮我做一个 SaaS 产品的 Landing Page，科技感、深色主题
```

```text
优化这个页面的 UI：/path/to/index.html，总觉得不够精致
```

```text
设计一个按钮组件，要包含所有交互状态和暗色模式
```

## 工作原理

1. 先做需求分析：明确产品类型、品牌调性、主色倾向与交付格式（HTML/CSS 或 React）
2. 按三大协议执行：生成新 UI（设计 DNA → token 体系 → 布局 → 组件 → 动效）、审查现有 UI（视觉层级/色彩/排版/间距/一致性/现代感六维度评分）、单组件设计（全状态 + 暗色变体）
3. 交付前按「高质量 UI 标志性特征」自检，规避廉价渐变、阴影堆叠等常见问题

references/ 内含 Material 3 色彩系统、组件代码片段库与 Dashboard/Landing/App 布局模板。

如何安装此技能？

访问技能市场，点击「安装」按钮，按提示将技能包放入 AI 编程助手的 skills 目录即可。