前端设计系统
理念： 每个像素都有目的。克制即奢侈。用户心理驱动决策。 核心原则： 思考，而非死记硬背。询问，而非假设。
🎯 选择性阅读规则（强制）
始终读取必需文件，仅按需读取可选文件：
| 文件 | 状态 | 何时读取 |
|---|---|---|
| ux-psychology.md | 🔴 必需 | 始终首先阅读！ |
| color-system.md | ⚪ 可选 | 颜色/调色板决策 |
| typography-system.md | ⚪ 可选 | 字体选择/配对 |
| visual-effects.md | ⚪ 可选 | 玻璃拟态、阴影、渐变 |
| animation-guide.md | ⚪ 可选 | 需要动画时 |
| motion-graphics.md | ⚪ 可选 | Lottie、GSAP、3D |
| decision-trees.md | ⚪ 可选 | 上下文模板 |
🔴 ux-psychology.md = 始终阅读。其他文件 = 仅当相关时阅读。
🔧 运行时脚本
执行这些脚本以进行审计（不要读取，直接运行）：
| 脚本 | 用途 | 使用方法 |
|---|---|---|
scripts/ux_audit.py | UX心理学与可访问性审计 | python scripts/ux_audit.py <项目路径> |
⚠️ 关键：先询问，再假设（强制）
停！如果用户的请求是开放式的，不要默认使用你最喜欢的方案。
当用户提示模糊时，提问：
未指定颜色？ 询问：
“你偏好哪种调色板？（蓝色/绿色/橙色/中性/其他？）”
未指定样式？ 询问：
“你追求什么风格？（极简/大胆/复古/未来/有机？）”
未指定布局？ 询问：
“你有布局偏好吗？（单列/网格/不对称/全宽？）”
⛔ 需要避免的默认倾向（反安全港）：
| AI 默认倾向 | 为何不好 | 应转而思考 |
|---|---|---|
| Bento 网格（现代陈词滥调） | 每个AI设计都使用 | 此内容为何需要网格？ |
| 英雄区左右分割 | 可预测且无聊 | 试试大字号排版或垂直叙事？ |
| 网格/极光渐变 | “新的”懒惰背景 | 什么是一种激进的配色方案？ |
| 玻璃拟态 | AI眼中的“高级感” | 试试纯色、高对比度的扁平风格？ |
| 深青色 / 金融科技蓝 | 从紫禁中逃出的安全港 | 为何不用红、黑或霓虹绿？ |
| “编排 / 赋能” | AI生成的文案 | 人类会怎么说？ |
| 深色背景 + 霓虹发光 | 过度使用，“AI 外观” | 品牌实际需要什么？ |
| 所有元素圆角化 | 通用/安全 | 哪里可以使用尖锐的、粗野主义边缘？ |
🔴 “你选择的每一个‘安全’结构，都让你离通用模板更近一步。承担风险。”
1. 约束分析（始终首先进行）
在任何设计工作之前，回答这些问题或询问用户：
| 约束 | 问题 | 为何重要 |
|---|---|---|
| 时间线 | 有多少时间？ | 决定复杂度 |
| 内容 | 已就绪还是占位符？ | 影响布局灵活性 |
| 品牌 | 现有指南吗？ | 可能决定颜色/字体 |
| 技术栈 | 使用什么技术栈？ | 影响能力 |
| 受众 | 具体是谁？ | 驱动所有视觉决策 |
受众 → 设计方法
| 受众 | 思考方向 |
|---|---|
| Z 世代 | 大胆、快速、移动优先、真实 |
| 千禧一代 | 干净、极简、价值驱动 |
| X 世代 | 熟悉、可信、清晰 |
| 婴儿潮一代 | 易读、高对比度、简单 |
| B2B | 专业、数据聚焦、信任 |
| 奢侈品 | 克制的优雅、留白 |
2. UX 心理学原则
核心定律（内化这些）
| 定律 | 原则 | 应用 |
|---|---|---|
| 希克定律 | 更多选择 = 更慢的决策 | 限制选项，使用渐进式披露 |
| 菲茨定律 | 更大 + 更近 = 更容易点击 | 适当调整 CTA 大小 |
| 米勒定律 | 工作记忆约 7 项 | 将内容分块 |
| 冯·雷斯托夫效应 | 与众不同 = 令人难忘 | 使 CTA 在视觉上与众不同 |
| 序列位置效应 | 最先和最后的内容记得最牢 | 关键信息放在开头和结尾 |
情感设计层次
本能层（瞬间） → 第一印象：颜色、意象、整体感觉
行为层（使用） → 使用体验：速度、反馈、效率
反思层（记忆） → 事后：“我喜欢这所传达的关于我的信息”
建立信任
- 敏感操作上的安全指示符
- 适当的社会证明
- 清晰的联系/支持入口
- 一致、专业的设计
- 透明的政策
3. 布局原则
黄金比例（φ = 1.618）
用于比例和谐：
├── 内容：侧边栏 ≈ 62% : 38%
├── 每个标题大小 = 前一个 × 1.618（用于戏剧性的缩放）
├── 间距可遵循：小 → 中 → 大（每个 × 1.618）
8 点网格概念
所有间距和大小为 8 的倍数：
├── 紧凑：4px（微距半步）
├── 小：8px
├── 中：16px
├── 大：24px, 32px
├── 超大：48px, 64px, 80px
└── 根据内容密度调整
关键尺寸原则
| 元素 | 考量 |
|---|---|
| 触摸目标 | 最小舒适点击大小 |
| 按钮 | 根据重要性层级确定高度 |
| 输入框 | 与按钮高度匹配以对齐 |
| 卡片 | 一致的内边距，透气 |
| 阅读宽度 | 45-75 字符最佳 |
4. 颜色原则
60-30-10 规则
60% → 主色/背景（平静、中性基底）
30% → 第二色（支撑区域）
10% → 强调色（CTA、高亮、注意力）
色彩心理学（用于决策）
| 如果需要... | 考虑色相 | 避免 |
|---|---|---|
| 信任、平静 | 蓝色系 | 攻击性的红色 |
| 成长、自然 | 绿色系 | 工业灰色 |
| 能量、紧迫感 | 橙色、红色 | 被动的蓝色 |
| 奢华、创造力 | 深青色、金色、祖母绿 | 廉价感的亮色 |
| 干净、极简 | 中性色 | 过多的颜色 |
选择过程
- 行业是什么？（缩小范围）
- 情绪是什么？（选择主色）
- 浅色还是深色模式？（奠定基础）
- 如果未指定，询问用户（不要默认！）
有关详细色彩理论：请参阅 color-system.md
5. 排版原则
缩放选择
| 内容类型 | 缩放比例 | 感觉 |
|---|---|---|
| 密集 UI | 1.125-1.2 | 紧凑、高效 |
| 通用网页 | 1.25 | 平衡（最常见） |
| 编辑型 | 1.333 | 易读、宽敞 |
| 英雄/展示 | 1.5-1.618 | 戏剧性冲击 |
配对概念
对比 + 和谐：
├── 足够不同以建立层级
├── 足够相似以保持凝聚力
└── 通常：展示字体 + 中性字体，或衬线 + 无衬线
可读性规则
- 行长度：45-75 字符最佳
- 行高：正文 1.4-1.6
- 对比度：检查 WCAG 要求
- 字号：网页正文 16px+
有关详细排版：请参阅 typography-system.md
6. 视觉效果原则
玻璃拟态（适当情况下）
关键属性：
├── 半透明背景
├── 背景模糊
├── 为清晰添加微妙边框
└── ⚠️ **警告：** 标准的蓝/白玻璃拟态是现代陈词滥调。要么激进使用，要么完全不使用。
阴影层级
高度概念：
├── 越高的元素 = 越大的阴影
├── Y 偏移 > X 偏移（光线来自上方）
├── 多层阴影 = 更真实
└── 深色模式：可能需要发光代替
渐变使用
和谐的渐变：
├── 色轮上的相邻颜色（类似色）
├── 或相同色相，不同明度
├── 避免刺眼的互补色对
├── 🚫 **不使用网格/极光渐变**（浮动斑点）
└── 在项目之间激进地变化
有关完整效果指南：请参阅 visual-effects.md
7. 动画原则
时机概念
基于以下因素确定持续时间：
├── 距离（越远 = 越长）
├── 大小（越大 = 越慢）
├── 重要性（关键 = 清晰）
└── 上下文（紧急 = 快，奢侈 = 慢）
缓动选择
| 动作 | 缓动 | 原因 |
|---|---|---|
| 进入 | 缓出 | 减速，稳定下来 |
| 离开 | 缓入 | 加速，退出 |
| 强调 | 缓入缓出 | 平滑、从容 |
| 有趣 | 弹跳 | 有趣、有活力 |
性能
- 仅对 transform 和 opacity 进行动画
- 尊重减少运动的偏好
- 在低端设备上测试
动画模式请参阅 animation-guide.md，高级内容请参阅 motion-graphics.md
8. “哇因子”检查清单
高级感指标
- 充足的留白（奢华 = 呼吸空间）
- 微妙的深度和维度
- 平滑、有目的的动画
- 对细节的关注（对齐、一致性）
- 有凝聚力的视觉节奏
- 自定义元素（并非所有默认值）
信任建立者
- 适当的安全提示
- 社会证明 / 用户评价
- 清晰的价值主张
- 专业的意象
- 一致的设计语言
情感触发器
- 能唤起预期情感的主视觉
- 人性元素（面孔、故事）
- 进度/成就指示器
- 惊喜时刻
9. 反模式（不要做什么）
❌ 懒惰设计指标
- 未经考虑使用默认系统字体
- 不匹配的库存图片
- 不一致的间距
- 太多冲突的颜色
- 没有层级的文字墙
- 不可访问的对比度
❌ AI 倾向模式（避免！）
- 每个项目使用相同颜色
- 默认深色 + 霓虹
- 到处都是紫色/紫罗兰（紫色禁令 ✅）
- 为简单落地页使用 Bento 网格
- 网格渐变与发光效果
- 相同布局结构 / Vercel 克隆
- 不询问用户偏好
❌ 暗黑模式（不道德的）
- 隐藏成本
- 虚假紧迫感
- 强制操作
- 欺骗性 UI
- 确认羞辱
10. 决策过程总结
对于每个设计任务：
1. 约束
└── 时间线、品牌、技术栈、受众是什么？
└── 如果不清楚 → 询问
2. 内容
└── 存在哪些内容？
└── 层级是什么？
3. 风格方向
└── 什么适合上下文？
└── 如果不清楚 → 询问（不要默认！）
4. 执行
└── 应用上述原则
└── 对照反模式检查
5. 回顾
└── “这是否服务于用户？”
└── “这与我默认的方案有何不同？”
└── “我会为这个感到自豪吗？”
参考文件
如需深入了解特定领域：
- color-system.md - 色彩理论与选择过程
- typography-system.md - 字体配对与缩放决策
- visual-effects.md - 效果原则与技术
- animation-guide.md - 动效设计原则
- motion-graphics.md - 高级：Lottie、GSAP、SVG、3D、粒子
- decision-trees.md - 上下文特定模板
- ux-psychology.md - 用户心理学深度探究
相关技能
| 技能 | 何时使用 |
|---|---|
| frontend-design（本技能） | 编码前 - 学习设计原则（颜色、排版、UX 心理学） |
| web-design-guidelines | 编码后 - 审计可访问性、性能和最佳实践 |
设计后工作流
实现设计后，运行审计：
1. 设计 → 阅读 frontend-design 原则 ← 你在这里
2. 编码 → 实现设计
3. 审计 → 运行 web-design-guidelines 审查
4. 修复 → 处理审计发现的问题
下一步： 编码完成后，使用
web-design-guidelines技能来审计你的实现，检查可访问性、焦点状态、动画和性能问题。
记住： 设计是思考，而非复制。每个项目都应基于其独特的上下文和用户，获得全新的考量。避免现代 SaaS 安全港！