# Frontend Design

> Web UI（网页界面）的设计思维与决策。用于设计组件、布局、配色、字体或打造美观界面。教授原则而非固定值。

- Skill: `misonl/frontend-design` (Agent Skill, multi-file: 10 files)
- Install (CLI): `npx skillmds@latest add misonl/frontend-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/misonl/frontend-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: misonl (https://skillmd.com/u/misonl)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/misonl/frontend-design

---


# 前端设计系统

> **理念：** 每一个像素都有目的。克制就是奢侈。用户心理驱动决策。
> **核心原则：** THINK（思考），不要死记硬背。ASK（提问），不要自作主张。

---

##  选择性阅读规则（强制）

**必须阅读必读文件，可选文件仅在需要时阅读：**

| 文件 | 状态 | 何时阅读 |
|------|------|----------|
| [ux-psychology.md](ux-psychology.md) | [CRITICAL]  **必读** | 必须先读！ |
| [color-system.md](color-system.md) |  可选 | 需要做配色/色盘决策时 |
| [typography-system.md](typography-system.md) |  可选 | 需要选择/搭配字体时 |
| [visual-effects.md](visual-effects.md) |  可选 | 玻璃拟态、阴影、渐变相关 |
| [animation-guide.md](animation-guide.md) |  可选 | 需要动画时 |
| [motion-graphics.md](motion-graphics.md) |  可选 | Lottie、GSAP、3D |
| [decision-trees.md](decision-trees.md) |  可选 | 场景化模板 |

> [CRITICAL]  **ux-psychology.md = 必读。其他 = 仅在相关时阅读。**

---

##  运行时脚本

**执行这些脚本用于审计（不要阅读，只需运行）：**

| 脚本 | 用途 | 用法 |
|------|------|------|
| `scripts/ux_audit.py` | UX 心理与无障碍审计 | `python scripts/ux_audit.py <项目路径>` |

---

## [WARN]  关键要求：先问再设（强制）

> **停！如果用户需求是开放式的，不要默认你的偏好。**

### 当用户表述模糊时，必须提问：

**未指定颜色？** 问：
> "你偏好哪类配色？（蓝/绿/橙/中性/其他？）"

**未指定风格？** 问：
> "你希望整体风格是什么？（极简/大胆/复古/未来感/有机？）"

**未指定布局？** 问：
> "你对布局有偏好吗？（单列/网格/非对称/全宽？）"

###  需要避免的默认倾向（反“安全港”）

| AI 默认倾向 | 为什么不好 | 换个思路 |
|------------|-----------|---------|
| **Bento Grids（盒状网格，现代陈词滥调）** | 用得太多 | 为什么这个内容一定要用网格？ |
| **Hero Split（左右分栏）** | 可预测且乏味 | 能否用超大字或垂直叙事？ |
| **Mesh/Aurora Gradients（网格/极光渐变）** | “新式懒背景” | 能否做更大胆的色彩组合？ |
| **Glassmorphism（玻璃拟态）** | AI 眼中的“高级感” | 试试高对比纯色平面？ |
| **Deep Cyan / Fintech Blue（深青/金融蓝）** | 规避紫色禁令的安全色 | 为什么不用红、黑或霓虹绿？ |
| **"Orchestrate / Empower"** | AI 味文案 | 人类会怎么说？ |
| 深色背景 + 霓虹发光 | 过度使用的“AI 风” | 这个品牌真正需要什么？ |
| **Rounded everything（全圆角）** | 通用且安全 | 哪里可以使用锋利、粗粝的边？ |

> [CRITICAL]  **“每一次选择安全结构，都会让你更接近一个模板化设计。敢于冒险。”**

---

## 1. 约束分析（必须先做）

在任何设计工作之前，先回答或询问：

| 约束 | 问题 | 为什么重要 |
|------|------|-----------|
| **时间线** | 时间有多紧？ | 决定复杂度 |
| **内容** | 内容已准备好还是占位？ | 影响布局弹性 |
| **品牌** | 是否有既定规范？ | 可能限定颜色/字体 |
| **技术** | 技术栈是什么？ | 影响实现能力 |
| **受众** | 具体是谁？ | 决定视觉方向 |

### 受众 -> 设计方向

| 受众 | 设计要点 |
|------|---------|
| **Gen Z（Z 世代）** | 大胆、快速、移动优先、真实 |
| **Millennials（千禧一代）** | 干净、极简、价值导向 |
| **Gen X（X 世代）** | 熟悉、可信、清晰 |
| **Boomers（婴儿潮一代）** | 易读、高对比、简单 |
| **B2B（企业服务）** | 专业、数据导向、信任感 |
| **Luxury（奢华）** | 克制优雅、留白充足 |

---

## 2. UX 心理原则

### 核心定律（务必内化）

| 定律 | 原则 | 应用 |
|------|------|------|
| **Hick's Law（希克定律）** | 选择越多 = 决策越慢 | 限制选项，渐进披露 |
| **Fitts' Law（菲茨定律）** | 更大更近 = 更易点击 | 合理设置 CTA（行动号召）尺寸 |
| **Miller's Law（米勒定律）** | 工作记忆约 7 项 | 内容分组组织 |
| **Von Restorff（冯·雷斯托夫效应）** | 差异 = 更易记忆 | CTA（行动号召）视觉突出 |
| **Serial Position（首因-近因效应）** | 首尾最易记住 | 关键信息放首尾 |

### 情感设计层级

```
VISCERAL（直觉）  -> 第一印象：颜色、图像、整体感受
BEHAVIORAL（行为）-> 使用过程：速度、反馈、效率
REFLECTIVE（反思）-> 使用后：“我喜欢它传达的价值”
```

### 信任建立

- 关键操作加安全提示
- 适当的社会证明
- 清晰的联系/支持入口
- 一致且专业的视觉
- 透明的政策说明

---

## 3. 布局原则

### 黄金比例（φ = 1.618）

```
用于比例和谐：
+-- 内容 : 侧栏 ≈ 62% : 38%
+-- 标题字号 = 上一级 × 1.618（营造戏剧感）
+-- 间距可按：sm -> md -> lg（每次 × 1.618）
```

### 8 点网格概念

```
所有间距与尺寸以 8 为倍数：
+-- Tight: 4px（微调半步）
+-- Small: 8px
+-- Medium: 16px
+-- Large: 24px, 32px
+-- XL: 48px, 64px, 80px
+-- 依据内容密度调整
```

### 关键尺寸原则

| 元素 | 考量 |
|------|------|
| **触达目标** | 点击/触控的舒适最小尺寸 |
| **按钮** | 高度由重要性层级决定 |
| **输入框** | 与按钮高度对齐 |
| **卡片** | 内边距一致、留白充足 |
| **阅读宽度** | 45-75 字符最佳 |

---

## 4. 配色原则

### 60-30-10 规则

```
60% -> 主色/背景（稳定、中性基底）
30% -> 次级色（支撑区域）
10% -> 点缀色（CTA（行动号召）、高亮、注意力）
```

### 色彩心理（用于决策）

| 需求 | 参考色系 | 避免 |
|------|---------|------|
| 信任、平静 | 蓝色系 | 侵略性红色 |
| 成长、自然 | 绿色系 | 工业感灰色 |
| 能量、紧迫 | 橙/红 | 被动蓝色 |
| 奢华、创意 | 深青、金色、祖母绿 | 便宜感亮色 |
| 干净、极简 | 中性色 | 过度色彩 |

### 选择流程

1. **行业是什么？**（缩小范围）
2. **情绪是什么？**（确定主色）
3. **浅色还是深色？**（确定基底）
4. **未指定就提问**

详细色彩理论见：[color-system.md](color-system.md)

---

## 5. 字体原则

### 比例选择

| 内容类型 | 比例 | 质感 |
|---------|------|------|
| 密集型 UI | 1.125-1.2 | 紧凑、高效 |
| 通用 Web | 1.25 | 平衡（最常见） |
| 编辑排版 | 1.333 | 易读、宽松 |
| Hero（首屏展示）/展示 | 1.5-1.618 | 强烈冲击 |

### 搭配概念

```
对比 + 协调：
+-- 足够不同以形成层级
+-- 足够相似以保持一致
+-- 常见：展示字体 + 中性字体，或衬线 + 无衬线
```

### 可读性规则

- **行长**：45-75 字符最佳
- **行高**：正文 1.4-1.6
- **对比**：检查 WCAG（无障碍标准）要求
- **字号**：Web 正文字号 16px+

详细字体见：[typography-system.md](typography-system.md)

---

## 6. 视觉效果原则

### 玻璃拟态（Glassmorphism，适用时）

```
关键属性：
+-- 半透明背景
+-- 背景模糊
+-- 轻微边框以界定层级
+-- [WARN]  **警告：** 标准蓝/白玻璃拟态已成现代陈词滥调。要么做得激进，要么别用。
```

### 阴影层级

```
高度概念：
+-- 越高的元素 = 更大的阴影
+-- Y 轴偏移 > X 轴偏移（光从上方）
+-- 多层叠加 = 更真实
+-- 深色模式：可能需要改为发光
```

### 渐变使用

```
和谐渐变：
+-- 色轮相邻色（analogous）
+-- 或同色相不同明度
+-- 避免强烈互补色
+--  **禁止 Mesh/Aurora 渐变**（漂浮块）
+-- 不同项目要有明显差异
```

完整效果指南见：[visual-effects.md](visual-effects.md)

---

## 7. 动画原则

### 时长概念

```
时长依据：
+-- 距离（更远更久）
+-- 尺寸（更大更慢）
+-- 重要性（关键动作要清晰）
+-- 场景（紧急更快，奢华更慢）
```

### 缓动选择

| 动作 | 缓动 | 原因 |
|------|------|------|
| 进入 | Ease-out（缓出） | 减速并稳定 |
| 离开 | Ease-in（缓入） | 加速离场 |
| 强调 | Ease-in-out（缓入缓出） | 平滑、克制 |
| 活泼 | Bounce（弹跳） | 有趣、活力 |

### 性能

- 只动画 transform 和 opacity
- 尊重 reduced-motion（减少动画）偏好
- 在低端设备上测试

动画模式见：[animation-guide.md](animation-guide.md)，进阶见：[motion-graphics.md](motion-graphics.md)

---

## 8. “Wow Factor（惊艳度）”检查清单

### 高级感指标

- [ ] 充足留白（奢华 = 呼吸空间）
- [ ] 细微的层次与维度
- [ ] 顺滑、目的明确的动画
- [ ] 细节到位（对齐、一致性）
- [ ] 统一的视觉节奏
- [ ] 自定义元素（不是全默认）

### 信任构建

- [ ] 适当位置的安全提示
- [ ] 社会证明 / 用户评价
- [ ] 清晰的价值主张
- [ ] 专业图像
- [ ] 设计语言一致

### 情绪触发

- [ ] 能传递目标情绪的首屏
- [ ] 人的元素（面孔、故事）
- [ ] 进度/成就指标
- [ ] 令人愉悦的瞬间

---

## 9. 反模式（不要这样做）

### [FAIL]  懒惰设计信号

- 默认系统字体且不加思考
- 与内容不匹配的图库素材
- 间距不一致
- 颜色过多相互争抢
- 大段无层级文本
- 对比不足

### [FAIL]  AI 倾向模式（避免）

- **每个项目都用同一套颜色**
- **深色 + 霓虹默认化**
- **紫色/紫罗兰泛滥（PURPLE BAN [OK] ，禁紫提醒）**
- **简单落地页硬套 Bento 网格**
- **Mesh 渐变与发光效果**
- **同样的布局结构 / Vercel 仿制**
- **不询问用户偏好**

### [FAIL]  黑暗模式（不道德）

- 隐藏成本
- 虚假紧迫感
- 强迫操作
- 欺骗性 UI
- Confirmshaming（确认羞辱）

---

## 10. 决策流程总结

```
对每一次设计任务：

1. 约束
   +-- 时间线、品牌、技术、受众？
   +-- 不明确就提问

2. 内容
   +-- 有哪些内容？
   +-- 层级如何？

3. 风格方向
   +-- 适合当前上下文吗？
   +-- 不明确就提问（不要默认）

4. 执行
   +-- 应用上述原则
   +-- 对照反模式自检

5. 复审
   +-- “是否服务用户？”
   +-- “是否不同于我的默认模板？”
   +-- “我会为这个设计感到自豪吗？”
```

---

## 参考文件

更深层的指导：

- [color-system.md](color-system.md) - 色彩理论与选择流程
- [typography-system.md](typography-system.md) - 字体搭配与比例
- [visual-effects.md](visual-effects.md) - 效果原则与技巧
- [animation-guide.md](animation-guide.md) - 动效设计原则
- [motion-graphics.md](motion-graphics.md) - 进阶：Lottie、GSAP、SVG、3D、粒子
- [decision-trees.md](decision-trees.md) - 场景化模板
- [ux-psychology.md](ux-psychology.md) - 用户心理深度解析

---

## 相关技能

| 技能 | 适用时机 |
|------|----------|
| **frontend-design**（本技能） | 编码前 - 学习设计原则（配色、字体、UX 心理） |
| **[web-design-guidelines](../web-design-guidelines/SKILL.md)** | 编码后 - 审计无障碍、性能与最佳实践 |

## 设计后流程

实现设计后，运行审计：

```
1. DESIGN（设计） -> 阅读 frontend-design 原则 <- 你在这里
2. CODE（编码）   -> 实现设计
3. AUDIT（审计）  -> 运行 web-design-guidelines 复审
4. FIX（修复）    -> 修复审计发现
```

> **下一步：** 编码后使用 `web-design-guidelines` 技能审计无障碍、焦点状态、动画与性能问题。

---

> **记住：** 设计是思考，不是抄写。每个项目都应基于其独特的上下文与用户重新做决定。**远离现代 SaaS（软件即服务）的安全港！**