前端设计体系

理念： 每个像素都有其目的。克制即奢华。用户心理驱动决策。 核心原则： 思考，而非记忆。询问，而非假设。

🎯 选择性阅读规则（强制）

始终阅读必需文件，仅按需阅读可选文件：

文件	状态	何时阅读
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 心理学与可访问性审计	使用浏览器开发者工具和 Lighthouse

⚠️ 关键：先询问，再假设（强制）

停！如果用户的请求是开放式的，切勿默认使用你喜欢的选项。

当用户提示不明确时，请询问：

未指定颜色？ 询问：

“您偏好哪种配色方案？（蓝色/绿色/橙色/中性色/其他？）”

未指定风格？ 询问：

“您想采用哪种风格？（极简/大胆/复古/未来感/有机？）”

未指定布局？ 询问：

“您有布局偏好吗？（单栏/网格/不对称/全宽？）”

⛔ 应避免的默认倾向（反安全港）：

AI 默认倾向	为何不好	应思考的方向
Bento 网格（现代陈词滥调）	每个 AI 设计都在用	这个内容为什么需要网格？
Hero 分栏（左/右）	可预测且无聊	试试大型排版或垂直叙事？
Mesh/Aurora 渐变	“新”的懒惰背景	有什么激进的色彩搭配？
玻璃态（Glassmorphism）	AI 眼中的“高级”	试试纯粹、高对比的扁平设计？
深青色 / 金融科技蓝	从紫色禁令逃出的安全港	为什么不用红色、黑色或霓虹绿？
“编排 / 赋能”	AI 生成的文案	人类会怎么表达？
深色背景 + 霓虹发光	过度使用，“AI 感”	品牌真正需要什么？
所有元素都圆角	通用/安全	哪里可以用尖锐、粗野的直角？

🔴 “你选择的每一个‘安全’结构，都将你更近一步推向通用模板。大胆冒险。”

1. 约束分析（始终优先）

在任何设计工作之前，请回答以下问题或询问用户：

约束	问题	为何重要
时间线	有多少时间？	决定复杂度
内容	已就绪还是占位符？	影响布局灵活性
品牌	是否有现有指南？	可能决定颜色/字体
技术	使用什么技术栈？	影响能力范围
受众	具体是谁？	驱动所有视觉决策

受众 → 设计方法

受众	考虑方向
Z 世代	大胆、快速、移动优先、真实
千禧一代	简洁、极简、价值驱动
X 世代	熟悉、可信、清晰
婴儿潮一代	易于阅读、高对比度、简单
B2B	专业、数据导向、信任
奢侈品	克制优雅、留白

2. UX 心理学原则

核心法则（内化这些）

法则	原理	应用
希克定律	选择越多，决策越慢	限制选项，渐进式披露
菲茨定律	越大越近，越易点击	合理设计 CTA 尺寸
米勒定律	工作记忆约 7 个项目	将内容分块
冯·雷斯托夫效应	与众不同 = 令人难忘	使 CTA 视觉上独特
系列位置效应	第一个/最后一个最易被记住	关键信息放在开头/结尾

情感设计层次

本能层（瞬间）→ 第一印象：颜色、图像、整体感觉
行为层（使用）→ 使用体验：速度、反馈、效率
反思层（记忆）→ 之后：“我喜欢这体现出来的我”

建立信任

在敏感操作上显示安全指示
适当展示社会证明
清晰的联系/支持入口
一致、专业的设计
透明的政策

3. 布局原则

黄金比例（φ = 1.618）

用于比例和谐：
├── 内容：侧边栏 ≈ 62% : 38%
├── 每级标题尺寸 = 上一级 × 1.618（营造戏剧性比例）
├── 间距可遵循：sm → md → lg（每一步 × 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 偏移（光从上方来）
├── 多层阴影更真实
└── 深色模式：可能需要发光代替

渐变使用

和谐渐变：
├── 色轮上相邻的颜色（类似色）
├── 或同一色相，不同明度
├── 避免生硬的互补色组合
├── 🚫 **不要使用 Mesh/Aurora 渐变**（浮动的色块）
└── 每个项目要剧烈变化

完整效果指南请见：visual-effects.md

7. 动效原则

时间概念

持续时间基于：
├── 距离（越远越长）
├── 尺寸（越大越慢）
├── 重要性（关键要清晰）
└── 上下文（紧急则快，奢华则慢）

缓动选择

动作	缓动类型	原因
进入	缓出（ease-out）	减速，稳定下来
离开	缓入（ease-in）	加速，退出
强调	缓入缓出（ease-in-out）	流畅、从容
俏皮	弹性（bounce）	有趣、充满活力

性能

仅对 transform 和 opacity 做动画
尊重减少动效偏好设置
在低端设备上测试

动效模式请见：animation-guide.md，高级内容请见：motion-graphics.md

8. “哇效果”检查清单

高级感指示器

充足的留白（奢华 = 呼吸空间）
微妙的深度和维度
流畅、有目的的动效
对细节的关注（对齐、一致性）
一致的视觉节奏
自定义元素（不全用默认值）

信任建立器

情感触发点

唤起预期情感的英雄区域
人类元素（面孔、故事）
进步/成就指示
愉悦时刻

9. 反模式（不要做什么）

❌ 懒惰设计指示

未经考虑就使用默认系统字体
不匹配的图库图片
不一致的间距
过多竞争色彩
没有层级的文字墙
不可访问的对比度

❌ AI 倾向模式（避免！）

每个项目都用相同的颜色
默认深色 + 霓虹
到处用紫色/紫罗兰（紫色禁令 ✅）
为简单的落地页使用 Bento 网格
Mesh 渐变和发光效果
相同的布局结构 / Vercel 克隆
不询问用户偏好

❌ 暗黑模式（不道德）

隐藏费用
虚假紧迫感
强制操作
欺骗性 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 - 用户心理学深度解析

设计后工作流程

实施设计后，运行审计：

1. 设计   → 阅读 frontend-design 原则 ← 你在这里
2. 编码     → 实施设计
3. 审计    → 运行 web-design-guidelines 审查
4. 修复      → 处理审计发现

下一步： 编码后，使用 web-design-guidelines 技能审计你的实现，检查可访问性、焦点状态、动效和性能问题。

记住： 设计是思考，不是复制。每个项目都应根据其独特的上下文和用户获得全新的考量。避免现代 SaaS 安全港！

技能	何时使用
frontend-design（本技能）	编码前 - 学习设计原则（颜色、排版、UX 心理学）
web-design-guidelines	编码后 - 审计可访问性、性能和最佳实践

在你喜欢的 AI 中提问

文档