我徹底改造了我的前端設計技能 ～ 現在我的 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在效能允許的情況下使用程序化 Canvas 紋理
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你有能力創造非凡的作品。不要有所保留。展示當跳出框架思考並全心投入一個獨特願景時，能夠真正創造出什麼。每個介面都應該感覺像是由一位觀點明確的設計師精心打造——而非由平均模板的演算法生成。