前端设计系统
哲学： 每一个像素都有其目的。克制即是奢华。用户心理驱动决策。 核心原则： 思考，不要死记硬背。询问，不要凭空假设。
🎯 选择性阅读规则（强制）
必读文件始终读取，可选文件仅当需要时读取：
| 文件 | 状态 | 何时读取 |
|---|---|---|
| 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 设计都在用 | 为什么这个内容需要网格？ |
| Hero 分割（左/右） | 可预测且无聊 | 巨型排版或垂直叙事如何？ |
| 网格/极光渐变 | “新”的懒惰背景 | 什么才是激进的色彩搭配？ |
| 玻璃态 | 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 | 可读、宽敞 |
| Hero/展示 | 1.5-1.618 | 戏剧化冲击 |
搭配概念
对比 + 和谐：
├── 要有足够的差异以体现层级
├── 要有足够的相似以实现连贯
└── 通常是：展示字体 + 中性字体，或衬线 + 无衬线
可读性规则
- 行长度：每行 45-75 个字符为佳
- 行高：正文 1.4-1.6
- 对比度：检查 WCAG 要求
- 字号：网页正文 16px 以上
关于详细的排版： typography-system.md
6. 视觉效果原则
玻璃态（在适当时使用）
关键属性：
├── 半透明背景
├── 背景模糊
├── 用于定义边界的细微边框
└── ⚠️ **警告：** 标准的蓝色/白色玻璃态是现代庸俗设计。要么激进地使用，要么完全不用。
阴影层级
高度概念：
├── 元素越高 = 阴影越大
├── 垂直偏移 > 水平偏移（光从上方来）
├── 多层阴影 = 更真实
└── 深色模式：可能需要用发光代替
渐变使用
和谐的渐变：
├── 色轮上相邻的颜色（类似色）
├── 或者相同色相，不同明度
├── 避免刺眼的互补色对
├── 🚫 **无网格/极光渐变**（浮动色块）
└── 在项目之间进行剧烈变化
关于完整效果指南： visual-effects.md
7. 动画原则
时机概念
基于以下因素的持续时间：
├── 距离（越远 = 越长）
├── 尺寸（越大 = 越慢）
├── 重要性（关键 = 清晰）
└── 上下文（紧急 = 快，奢华 = 慢）
缓动选择
| 动作 | 缓动函数 | 原因 |
|---|---|---|
| 进入 | Ease-out | 减速，稳定下来 |
| 退出 | Ease-in | 加速，离开 |
| 强调 | Ease-in-out | 平滑，刻意 |
| 有趣 | Bounce | 有趣，充满活力 |
性能
- 仅动画化 transform 和 opacity
- 尊重 reduced-motion 偏好设置
- 在低端设备上测试
关于动画模式： animation-guide.md， 关于高级动画： motion-graphics.md
8. “哇元素”检查清单
高级感指标
- 慷慨的留白（奢华 = 呼吸空间）
- 微妙的深度和层次感
- 流畅、有目的的动画
- 注重细节（对齐、一致性）
- 连贯的视觉韵律
- 自定义元素（不完全使用默认值）
信任建立器
- 适当时的安全提示
- 社会化证明 / 客户评价
- 清晰的价值主张
- 专业的图像
- 一致的设计语言
情感触发器
- 能唤起预期情感的 Hero 区域
- 人性化元素（面孔、故事）
- 进度/成就指示器
- 令人愉悦的瞬间
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 安全港！