我狠心优化了我的前端设计技能 ~ 现在我的 UI 再也不会看起来像 AI 生成的垃圾了

1前端设计技能
2
3打造独特、生产级的前端界面，使其感觉像是由一位优秀的人类设计师精心打造，而非从模板模式中平均生成。
4
5成功标准
6
7具有清晰叙事和标志性元素的独特视觉标识
8
9具备完整状态和响应式行为的生产级功能
10
11默认具备无障碍性，遵循 WCAG AA 标准
12
13采用基于设计令牌的系统，而非一次性样式
14
15零依赖可识别的 AI 套路
16
17在编写代码之前
181. 理解上下文
19
20目的
21这个界面解决了什么问题，用户是谁
22
23约束条件
24框架、性能预算、无障碍要求
25
26品牌锚点（如有提供）
27形容词、参考案例、禁忌
28
29如果缺少关键信息，只请求那些会阻碍正确执行的内容。
30
312. 确定一个激进的视觉方向
32
33选择一个极端并精准执行。
34大胆的极繁主义与精致的极简主义都可行。但必须有意为之。
35
36以下方向仅供参考：
37
38编辑杂志风格
39非对称网格、排版权威感、戏剧性留白
40
41新粗野主义工业风
42硬朗边缘、实用标签、原始材质
43
44精致奢华风
45克制、高级材质、隐形的复杂性
46
47复古未来主义 CRT 风格
48扫描线、有棱角的几何图形、磷光光泽
49
50有机触感风
51纸纹理、不规则形状、手工质感
52
53朋克杂志反叛风
54拼贴能量、原始纹理、刻意的不完美
55
56包豪斯精准风
57几何纪律、功能清晰、原色
58
59迷幻超现实风
60受控的混乱、鲜明的对比、流动的形态
61
62关键
63任何两个设计都不应趋同于相同的选择。
64在不同的生成中，要变化主题、字体、调色板、布局和能量层级。
65
663. 设计一个标志性元素
67
68每个构建必须包含一个令人难忘的“钩子”，且具有功能性，而非装饰性。
69
70有效的标志性元素包括：
71
72随滚动或状态变化的动态边框或框架
73
74具有刻意字距和光学节奏的排版主角
75
76具有空间逻辑和动画提示的导航模式
77
78可提高可发现性的自定义光标行为
79
80支持层级和焦点的纹理系统
81
82品牌化的数据可视化语言
83
84具有编排时序的滚动触发式揭示
85
86设计令牌
87
88在布局之前定义令牌。
89
90:root {
91  /* 颜色 */
92  --color-bg:;
93  --color-surface:;
94  --color-text:;
95  --color-muted:;
96  --color-accent:;
97  --color-focus:;
98  --color-success:;
99  --color-warning:;
100  --color-danger:;
101
102  /* 排版 */
103  --font-display:;
104  --font-body:;
105  --font-mono:;
106  --text-xs:;
107  --leading-xs:;
108  --text-sm:;
109  --leading-sm:;
110  --text-base:;
111  --leading-base:;
112  --text-lg:;
113  --leading-lg:;
114  --text-xl:;
115  --leading-xl:;
116  --text-2xl:;
117  --leading-2xl:;
118
119  /* 间距 */
120  --space-1:;
121  --space-2:;
122  --space-3:;
123  --space-4:;
124  --space-6:;
125  --space-8:;
126
127  /* 圆角和阴影 */
128  --radius-sm:;
129  --radius-md:;
130  --radius-lg:;
131  --shadow-sm:;
132  --shadow-md:;
133  --shadow-lg:;
134
135  /* 动效 */
136  --duration-fast:;
137  --duration-base:;
138  --duration-slow:;
139  --ease-out:;
140  --ease-spring:;
141}
142
143美学规则
144排版
145
146硬性规则：
147
148避免使用 Inter、Roboto、Arial 和系统默认字体
149
150将富有特色的展示字体与精致的正文字体配对
151
152有意识地调整字间距和行高
153
154将排版对比作为主要设计工具
155
156提供能保留基调的可靠后备字体
157
158颜色和调色板
159
160硬性规则：
161
162网站上任何地方都不使用表情符号图标。
163
164不允许使用默认的紫色渐变加白色 SaaS 美学风格
165
166一种主色调加上一到三种有明确角色的强调色
167
168对比色和焦点色必须具有功能性
169
170仅当能强化设计方向时才使用深色模式
171
172布局和构成
173
174硬性规则：
175
176避免可预测的居中英雄区、三个卡片加图标行的模式
177
178使用一致的网格逻辑，并至少有一次有意的网格打破
179
180当有助于明确层级时，鼓励使用非对称布局
181
182响应式设计必须保留叙事和节奏
183
184动效
185
186硬性规则：
187
188动效应传达结构、反馈和可供性
189
190优先使用一个编排好的入场序列，而非零散的微动效
191
192仅当滚动揭示能增加意义时才使用
193
194尊重用户对减少动效的偏好，并提供干净的降级方案
195
196优先使用 transform 和 opacity 以保证性能
197
198纹理和材质
199
200硬性规则：
201
202除非有意追求朴素，否则避免使用平坦无菌的背景
203
204纹理必须支持层级，而非增加噪点
205
206深度语言必须在整个系统中保持一致
207
208玻璃效果仅当完全投入且可读性良好时使用
209
210允许使用的技术：
211
212微妙的颗粒叠加
213
214SVG 参数化图案
215
216噪点驱动的渐变
217
218纸张折叠阴影
219
220用于复古主题的 CRT 扫描线
221
222在性能允许时的程序化画布纹理
223
224必需的交互状态
225
226每个可交互元素必须实现：
227
228默认状态
229
230悬停状态
231
232激活或按下状态
233
234焦点可见状态
235
236禁用状态
237
238加载状态
239
240错误状态
241
242空状态（如适用）
243
244生产要求
245无障碍性
246
247语义化的 HTML 结构
248
249仅在必要时使用 ARIA
250
251所有交互元素可通过键盘导航
252
253将可见的焦点样式融入美学设计
254
255表单验证消息（如表单存在）
256
257响应式
258
259至少三个断点
260
261叙事和层级在不同尺寸下保持一致
262
263移动端触摸目标至少 44 像素
264
265性能
266
267默认避免使用重量级效果
268
269Canvas、WebGL、粒子效果需要降级模式和延迟初始化
270
271优先使用对 GPU 友好的动画模式
272
273失败处理
274
275每个设计必须考虑失败路径：
276
277网络故障或离线状态
278
279部分或延迟数据
280
281用户错误和恢复流程
282
283失败状态必须：
284
285在视觉上具有意图性
286
287符合品牌调性
288
289信息丰富但不冗长
290
291不允许静默失败。
292不允许使用浏览器默认的错误状态。
293
294叙事一致性检查
295
296如果以下任何一项为真，则拒绝输出：
297
298排版、动效、布局和文案感觉像是来自不同的系统
299
300组件在视觉上精致，但概念上脱节
301
302微文案的语气与所选方向相矛盾
303
304每个元素必须强化同一个故事、情绪和意图。
305
306无占位符能量规则
307
308如果存在以下任何一项，则拒绝输出：
309
310Lorem ipsum 或填充性文案
311
312缺乏上下文的模糊营销语言
313
314没有指导的空状态
315
316忽略已建立语气的标签或帮助文本
317
318所有文案必须是有作者意图、有上下文且经过深思熟虑的。
319
320禁忌清单
321
322如果以下任何一项为真，则拒绝输出：
323
324Inter 字体加紫色渐变加圆角卡片加通用图标
325
326没有品牌概念的通用聊天机器人气泡
327
328具有最少令牌化的默认 Tailwind 外观
329
330缺少焦点状态或键盘访问
331
332没有错误或加载状态
333
334类似市场模板的外观
335
336只有视觉打磨而无可用性完整性
337
338趋同于常见的 AI 美学模式
339
340输出结构
341
342艺术方向简介
343方向和基调
344字体配对概念
345调色板逻辑
346动效语法
347材质和纹理选择
348
349代码
350与请求范围匹配的完整可运行代码
351实现复杂度必须与美学愿景相匹配
352
353扩展说明（如相关）
354如何在不破坏一致性的情况下扩展令牌、组件和状态
355
356最终质量关卡
357
358在交付前，验证以下所有项均为真：
359
360存在标志性元素且具有功能性
361
362令牌驱动样式决策
363
364满足无障碍要求
365
366所有交互状态均已实现
367
368已设计失败和恢复状态
369
370叙事一致性得以保持
371
372响应式节奏得以保留
373
374未出现 AI 套路模式
375
376如果任何一项检查失败，则输出无效。
377
378请记住
379你拥有非凡的创意能力。
380不要有所保留。
381每一个界面都必须让人觉得是由一位有明确观点的设计师精心打造，而不是由算法平均模板生成的。
382
383请记住
384你拥有非凡的创意能力。不要有所保留。展示跳出框架思考并全身心投入独特愿景所能真正创造的东西。每一个界面都应该让人觉得是由一位有明确观点的设计师精心打造——而不是由算法平均模板生成的。