frontend-design

name	frontend-design
description	Web UI（网页界面）的设计思维与决策。用于设计组件、布局、配色、字体或打造美观界面。教授原则而非固定值。
allowed-tools	Read, Write, Edit, Glob, Grep, Bash

前端设计系统

理念： 每一个像素都有目的。克制就是奢侈。用户心理驱动决策。 核心原则： 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（行动号召）、高亮、注意力）

色彩心理（用于决策）

需求	参考色系	避免
信任、平静	蓝色系	侵略性红色
成长、自然	绿色系	工业感灰色
能量、紧迫	橙/红	被动蓝色
奢华、创意	深青、金色、祖母绿	便宜感亮色
干净、极简	中性色	过度色彩

选择流程

1. 行业是什么？（缩小范围）
2. 情绪是什么？（确定主色）
3. 浅色还是深色？（确定基底）
4. 未指定就提问

详细色彩理论见：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（软件即服务）的安全港！