frontend-design

1本技能指导创建**独具一格、可交付生产**的前端界面，规避千篇一律的「AI 感」审美。在实现可运行代码的同时，对美学细节与创意选择给予充分关注。
2 
3用户会提供前端需求：要做的组件、页面、应用或界面，可能附带使用场景、目标用户或技术约束。
4 
5## 设计思维
6 
7动手写代码前，先理解上下文并**选定一个明确、大胆的美学方向**：
8 
9- **目的**：这个界面解决什么问题？谁在用？
10- **调性**：选一个鲜明风格并贯彻到底，例如：极简克制、繁复张扬、复古未来、有机/自然、奢华精致、 playful/玩具感、编辑/杂志风、粗野/原始、装饰艺术/几何、柔和/马卡龙、工业/实用主义等。用这些作灵感，但最终要忠于你选定的那一套美学。
11- **约束**：技术条件（框架、性能、可访问性等）。
12- **差异化**：什么会让用户**过目不忘**？你最希望被记住的那一点是什么？
13 
14**关键**：选定清晰的概念方向并精准执行。大胆的繁复与克制的极简都成立——核心是**有意图**，而不是单纯「够猛」或「够淡」。
15 
16在此基础上，用可运行代码（HTML/CSS/JS、Vue、React等）实现：
17 
18- 达到生产可用、功能完整
19- 视觉上有冲击力、易被记住
20- 整体统一、有明确的美学立场
21- 细节经得起推敲
22 
23## 前端美学指南
24 
25重点把握以下维度：
26 
27### 字体与排版
28 
29- 选用**有辨识度、耐看、有趣**的字体，避免 Arial、Inter、思源黑体等「默认感」过强的选择。
30- 用有性格的字体提升整体气质；可尝试非常规、带个性的字体组合。
31- **标题用一款有表现力的展示字体，正文用一款清晰易读的字体**，形成层次。
32- 建立清晰的**字号与字重层级**（标题 / 小标题 / 正文 / 辅助说明），配合行高、字间距与留白。
33 
34### 色彩与主题
35 
36- 围绕一套**统一的色彩体系**，用 CSS 变量管理，便于维护与主题切换。
37- **主色明确 + 少量高对比强调色**，比「平均分配」的配色更有力。
38- 兼顾**无障碍**：重要文字与背景对比度建议 ≥ 4.5:1（WCAG AA）；不要仅靠颜色传达信息，需配合形状、图标或文字。
39 
40### 动效与微交互
41 
42- 用动画营造反馈与氛围。纯 HTML/CSS 场景优先用 CSS 实现；React 项目可配合 Motion 等库。
43- **集中做好少数高光时刻**：例如一次精心编排的页面进入（错落出现、animation-delay）比零散的微动效更打动人。
44- 适度使用滚动触发、悬停状态，让交互有惊喜感。
45- **尊重用户偏好**：通过 `prefers-reduced-motion` 媒体查询为「减少动效」用户提供静态或简化动效，不强制观看动画。
46 
47### 空间与版式
48 
49- **非常规布局**：不对称、重叠、斜线走向、打破网格的元素。
50- **留白（负空间）**：要么给足留白、营造呼吸感，要么刻意做高密度信息排布，二者都要有明确意图。
51- 留白能引导视线、建立层次、减轻视觉疲劳；重要元素周围留白越多，注意力越集中。可尝试「比你以为需要的再多留 30% 空间」以提升品质感。
52 
53### 背景与视觉细节
54 
55- 用**层次与氛围**替代纯色块：渐变网格、噪点纹理、几何图案、半透明叠加、强烈阴影、装饰边框、颗粒叠加等，与整体风格一致。
56- 根据场景选择：定制光标、细线、底纹等，增强情境感。
57 
58## 禁忌：避免「AI 通用审美」
59 
60**不要**使用以下套路：
61 
62- 泛滥的字体：Inter、Roboto、Arial、系统默认字体堆砌。
63…