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 原则  实现设计
3. AUDIT（审计）  -> 运行 web-design-guidelines 复审
4. FIX（修复）    -> 修复审计发现

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

---

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

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: MisonL
• Source: MisonL/Ling
• License: MIT
• Homepage: https://www.npmjs.com/package/@mison/ling

Install and usage instructions live in the source repository linked above.