misonl 前端设计系统
理念： 每一个像素都有目的。克制就是奢侈。用户心理驱动决策。 核心原则： THINK（思考），不要死记硬背。ASK（提问），不要自作主张。
选择性阅读规则（强制）
必须阅读必读文件，可选文件仅在需要时阅读：
| 文件 | 状态 | 何时阅读 |
|---|---|---|
| ux-psychology.md | [CRITICAL] 必读 | 必须先读！ |
| color-system.md | 可选 | 需要做配色/色盘决策时 |
| typography-system.md | 可选 | 需要选择/搭配字体时 |
| visual-effects.md | 可选 | 玻璃拟态、阴影、渐变相关 |
| animation-guide.md | 可选 | 需要动画时 |
| motion-graphics.md | 可选 | Lottie、GSAP、3D |
| 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（行动号召）、高亮、注意力）
色彩心理（用于决策）
| 需求 | 参考色系 | 避免 |
|---|---|---|
| 信任、平静 | 蓝色系 | 侵略性红色 |
| 成长、自然 | 绿色系 | 工业感灰色 |
| 能量、紧迫 | 橙/红 | 被动蓝色 |
| 奢华、创意 | 深青、金色、祖母绿 | 便宜感亮色 |
| 干净、极简 | 中性色 | 过度色彩 |
选择流程
- 行业是什么？（缩小范围）
- 情绪是什么？（确定主色）
- 浅色还是深色？（确定基底）
- 未指定就提问
详细色彩理论见：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
6. 视觉效果原则
玻璃拟态（Glassmorphism，适用时）
关键属性：
+-- 半透明背景
+-- 背景模糊
+-- 轻微边框以界定层级
+-- [WARN] **警告：** 标准蓝/白玻璃拟态已成现代陈词滥调。要么做得激进，要么别用。
阴影层级
高度概念：
+-- 越高的元素 = 更大的阴影
+-- Y 轴偏移 > X 轴偏移（光从上方）
+-- 多层叠加 = 更真实
+-- 深色模式：可能需要改为发光
渐变使用
和谐渐变：
+-- 色轮相邻色（analogous）
+-- 或同色相不同明度
+-- 避免强烈互补色
+-- **禁止 Mesh/Aurora 渐变**（漂浮块）
+-- 不同项目要有明显差异
完整效果指南见：visual-effects.md
7. 动画原则
时长概念
时长依据：
+-- 距离（更远更久）
+-- 尺寸（更大更慢）
+-- 重要性（关键动作要清晰）
+-- 场景（紧急更快，奢华更慢）
缓动选择
| 动作 | 缓动 | 原因 |
|---|---|---|
| 进入 | Ease-out（缓出） | 减速并稳定 |
| 离开 | Ease-in（缓入） | 加速离场 |
| 强调 | Ease-in-out（缓入缓出） | 平滑、克制 |
| 活泼 | Bounce（弹跳） | 有趣、活力 |
性能
- 只动画 transform 和 opacity
- 尊重 reduced-motion（减少动画）偏好
- 在低端设备上测试
动画模式见：animation-guide.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 - 色彩理论与选择流程
- 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. DESIGN（设计） -> 阅读 frontend-design 原则 <- 你在这里
2. CODE（编码） -> 实现设计
3. AUDIT（审计） -> 运行 web-design-guidelines 复审
4. FIX（修复） -> 修复审计发现
下一步： 编码后使用
web-design-guidelines技能审计无障碍、焦点状态、动画与性能问题。
记住： 设计是思考，不是抄写。每个项目都应基于其独特的上下文与用户重新做决定。远离现代 SaaS（软件即服务）的安全港！