前端设计系统
理念： 每个像素都有意义。克制即奢侈。用户心理驱动决策。 核心原则： 思考，而非死记。提问，而非假设。
🎯 选择性阅读规则（强制）
始终阅读必需文件，仅按需阅读可选文件：
| 文件 | 状态 | 何时阅读 |
|---|---|---|
| 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 = 始终阅读。其他 = 仅当相关时阅读。
🔧 运行时脚本
执行这些脚本进行审核（不要阅读，直接运行）：
| 脚本 | 用途 | 用法 |
|---|---|---|
ux_audit 验证器 | UX 心理学与可访问性审核 | call_tool_checklist |
⚠️ 关键：在假设之前先提问（强制）
停！如果用户的请求是开放式的，不要默认使用你的偏好。
当用户提示模糊时，提问：
未指定颜色？ 询问：
"您偏好哪种调色板？（蓝色/绿色/橙色/中性/其他？）"
未指定风格？ 询问：
"您想要什么风格？（极简/大胆/复古/未来/有机？）"
未指定布局？ 询问：
"您有布局偏好吗？（单栏/网格/不对称/全宽？）"
⛔ 需要避免的默认倾向（反安全港）：
| AI 默认倾向 | 为何不好 | 转而思考 |
|---|---|---|
| Bento 网格（现代陈词滥调） | 每个 AI 设计都在用 | 为什么这个内容需要网格？ |
| 英雄区左右分割 | 可预测且无聊 | 试试巨幅排版或垂直叙事？ |
| 网状/极光渐变 | 新的“偷懒背景” | 什么才是激进的配色？ |
| 玻璃拟态 | AI 心目中的“高级” | 试试实色、高对比度的平面？ |
| 深青色/金融科技蓝 | 从紫色禁令中逃出的安全港 | 为什么不用红色、黑色或霓虹绿？ |
| “编排 / 赋能” | AI 生成的文案 | 人类会怎么说？ |
| 深色背景 + 霓虹光效 | 过度使用，“AI 风格” | 品牌到底需要什么？ |
| 所有元素都圆角 | 通用/安全 | 哪里可以用尖锐的粗野主义边缘？ |
🔴 **“你选择的每一个‘安全’结构，都让你离通用模板更近一步。承担风险。”
1. 约束分析（始终优先）
在进行任何设计工作之前，回答这些问题或询问用户：
| 约束 | 问题 | 为何重要 |
|---|---|---|
| 时间线 | 有多少时间？ | 决定复杂度 |
| 内容 | 已就绪还是占位符？ | 影响布局灵活性 |
| 品牌 | 有现有指南吗？ | 可能限制颜色/字体 |
| 技术栈 | 使用什么技术？ | 影响能力范围 |
| 受众 | 具体是谁？ | 驱动所有视觉决策 |
受众 → 设计方法
| 受众 | 应对思路 |
|---|---|
| Z 世代 | 大胆、快速、移动优先、真实 |
| 千禧一代 | 简洁、极简、价值驱动 |
| X 世代 | 熟悉、可信、清晰 |
| 婴儿潮一代 | 易读、高对比、简单 |
| B2B | 专业、数据聚焦、信任 |
| 奢侈品 | 克制的优雅、留白 |
2. UX 心理学原则
核心定律（内化这些）
| 定律 | 原则 | 应用 |
|---|---|---|
| 希克定律 | 更多选择 = 更慢决策 | 限制选项，使用渐进式披露 |
| 菲茨定律 | 更大 + 更近 = 更容易点击 | 合理调整行动号召按钮大小 |
| 米勒定律 | 工作记忆约 7 项 | 将内容分块分组 |
| 冯·雷斯托夫效应 | 与众不同 = 更易记忆 | 让行动号召按钮视觉上突出 |
| 系列位置效应 | 第一个和最后一个最容易被记住 | 关键信息放在开头和结尾 |
情感设计层级
本能层（瞬间） → 第一印象：颜色、图像、整体感觉
行为层（使用） → 使用中：速度、反馈、效率
反思层（记忆） → 事后：“我喜欢这向我传递的信息”
建立信任
- 在敏感操作上显示安全指标
- 适当位置展示社会证明
- 清晰的联系/支持入口
- 一致、专业的设计
- 透明的政策
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% → 强调色（行动号召、高亮、注意力）
色彩心理学（用于决策）
| 如果您需要... | 考虑色调 | 避免 |
|---|---|---|
| 信任、平静 | 蓝色系 | 侵略性红色 |
| 成长、自然 | 绿色系 | 工业灰 |
| 能量、紧迫感 | 橙色、红色 | 被动蓝色 |
| 奢华、创意 | 深青色、金色、祖母绿 | 廉价感的亮色 |
| 简洁、极简 | 中性色 | 压倒性的色彩 |
选择流程
- 属于什么行业？（缩小选项）
- 传达什么情感？（选择主色）
- 浅色模式还是深色模式？（设定基础）
- 如果未指定，询问用户
详细色彩理论请见：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. 动画原则
时间概念
基于以下因素的持续时间：
├── 距离（越远 = 越长）
├── 尺寸（越大 = 越慢）
├── 重要性（关键 = 清晰）
└── 上下文（紧急 = 快，奢华 = 慢）
缓动选择
| 动作 | 缓动 | 原因 |
|---|---|---|
| 进入 | Ease-out | 减速，稳定下来 |
| 离开 | Ease-in | 加速，退出 |
| 强调 | Ease-in-out | 平滑、从容 |
| 俏皮 | Bounce | 有趣、有活力 |
性能
- 仅对 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. 设计 → 阅读前端设计原则 ← 您在这里
2. 编码 → 实现设计
3. 审核 → 运行 web-design-guidelines 审查
4. 修复 → 处理审核中的发现
下一步： 编码后，使用
web-design-guidelines技能审核您的实现，检查可访问性、焦点状态、动画及性能问题。
记住： 设计是思考，不是复制。每个项目都应根据其独特的上下文和用户得到全新的考量。避免现代 SaaS 安全港！