I Brutally Modified My Front-End Design Skill ~ Now My UIs Don’t Look Like AI Crap

1Frontend Design Skill
2
3Create distinctive, production grade frontend interfaces that feel authored by a strong human designer, not averaged from template patterns.
4
5Success Criteria
6
7Distinct visual identity with a clear narrative and signature element
8
9Production grade functionality with complete states and responsive behavior
10
11Accessibility by default with WCAG AA intent
12
13Token driven design system rather than one off styling
14
15Zero reliance on recognizable AI tropes
16
17Before Writing Code
181. Understand the Context
19
20Purpose
21What problem does this interface solve and who uses it
22
23Constraints
24Framework, performance budget, accessibility requirements
25
26Brand Anchors if provided
27Adjectives, references, taboos
28
29If critical information is missing, request only what blocks correct execution.
30
312. Commit to a Radical Art Direction
32
33Pick one extreme and execute it with precision.
34Bold maximalism and refined minimalism both work. Intentionality is mandatory.
35
36Example directions for inspiration only:
37
38Editorial magazine
39Asymmetric grids, typographic authority, dramatic whitespace
40
41Neo brutalist industrial
42Hard edges, utilitarian labels, raw materials
43
44Luxury refined
45Restraint, premium materials, invisible complexity
46
47Retro futurist CRT
48Scanlines, angular geometry, phosphor glow
49
50Organic tactile
51Paper grain, irregular shapes, handmade warmth
52
53Punk zine rebellion
54Collage energy, raw texture, deliberate imperfection
55
56Bauhaus precision
57Geometric discipline, functional clarity, primary colors
58
59Psychedelic surreal
60Controlled chaos, vivid contrast, fluid forms
61
62CRITICAL
63No two designs should converge on the same choices.
64Vary themes, fonts, palettes, layouts, and energy levels across generations.
65
663. Invent a Signature Element
67
68Every build must include one unforgettable hook that is functional, not decorative.
69
70Valid signature elements include:
71
72Morphing border or frame responding to scroll or state
73
74Typographic hero with deliberate kerning and optical rhythm
75
76Navigation pattern with spatial logic and animated affordances
77
78Custom cursor behavior that improves discoverability
79
80Texture system that supports hierarchy and focus
81
82Branded data visualization language
83
84Scroll triggered reveal with orchestrated timing
85
86Design Tokens
87
88Define tokens before layout.
89
90:root {
91  /* Color */
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  /* Typography */
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  /* Spacing */
120  --space-1:;
121  --space-2:;
122  --space-3:;
123  --space-4:;
124  --space-6:;
125  --space-8:;
126
127  /* Radius and Shadow */
128  --radius-sm:;
129  --radius-md:;
130  --radius-lg:;
131  --shadow-sm:;
132  --shadow-md:;
133  --shadow-lg:;
134
135  /* Motion */
136  --duration-fast:;
137  --duration-base:;
138  --duration-slow:;
139  --ease-out:;
140  --ease-spring:;
141}
142
143Aesthetics Rules
144Typography
145
146Hard rules:
147
148Avoid Inter, Roboto, Arial, and system defaults
149
150Pair a characterful display face with a refined body face
151
152Tune letter spacing and line height intentionally
153
154Use typographic contrast as a primary design tool
155
156Provide robust fallbacks that preserve tone
157
158Color and Palette
159
160Hard rules:
161
162No emoticon icons anywhere on the site.
163
164No default purple gradient on white SaaS aesthetic
165
166One dominant hue plus one to three accents with defined roles
167
168Contrast and focus colors must be functional
169
170Dark mode only if it strengthens the direction
171
172Layout and Composition
173
174Hard rules:
175
176No predictable center hero followed by three cards and icon row
177
178Use consistent grid logic plus at least one intentional grid break
179
180Asymmetry encouraged when it clarifies hierarchy
181
182Responsive design must preserve narrative and rhythm
183
184Motion
185
186Hard rules:
187
188Motion communicates structure, feedback, and affordances
189
190Prefer one orchestrated entrance sequence over scattered micro animation
191
192Scroll reveals only when they add meaning
193
194Respect prefers reduced motion with a clean fallback
195
196Prefer transform and opacity for performance
197
198Texture and Material
199
200Hard rules:
201
202Avoid flat sterile backgrounds unless austerity is intentional
203
204Texture must support hierarchy, not add noise
205
206Depth language must be consistent across the system
207
208Glass effects only if fully committed and readable
209
210Allowed techniques:
211
212Subtle grain overlay
213
214SVG parametric patterns
215
216Noise driven gradients
217
218Paper fold shadows
219
220CRT scanlines for retro themes
221
222Procedural canvas texture when performance allows
223
224Required Interaction States
225
226Every interactive element must implement:
227
228Default
229
230Hover
231
232Active or pressed
233
234Focus visible
235
236Disabled
237
238Loading
239
240Error
241
242Empty state where applicable
243
244Production Requirements
245Accessibility
246
247Semantic HTML structure
248
249ARIA only where necessary
250
251Keyboard navigation for all interactive elements
252
253Visible focus styling integrated into the aesthetic
254
255Form validation messaging where forms exist
256
257Responsive
258
259Minimum three breakpoints
260
261Narrative and hierarchy preserved across sizes
262
263Touch targets at least 44 pixels on mobile
264
265Performance
266
267Avoid heavy effects by default
268
269Canvas, WebGL, particles require reduced mode and lazy initialization
270
271GPU friendly animation patterns preferred
272
273Failure Handling
274
275Every design must account for failure paths:
276
277Network failure or offline state
278
279Partial or delayed data
280
281User error and recovery flows
282
283Failure states must be:
284
285Visually intentional
286
287On brand
288
289Informative without verbosity
290
291Silent failures are not permitted.
292Default browser error states are not permitted.
293
294Narrative Consistency Enforcement
295
296Reject output if any are true:
297
298Typography, motion, layout, and copy feel authored by different systems
299
300Components are visually polished but conceptually disconnected
301
302Microcopy tone contradicts the chosen direction
303
304Every element must reinforce the same story, mood, and intent.
305
306No Placeholder Energy Rule
307
308Reject output if any are present:
309
310Lorem ipsum or filler copy
311
312Vague marketing language without context
313
314Empty states without guidance
315
316Labels or helper text that ignore the established voice
317
318All copy must be authored, contextual, and deliberate.
319
320Abomination Checklist
321
322Reject output if any are true:
323
324Inter plus purple gradient plus rounded cards plus generic icons
325
326Generic chatbot bubbles with no branded concept
327
328Default Tailwind appearance with minimal tokenization
329
330Missing focus states or keyboard access
331
332No error or loading states
333
334Marketplace template resemblance
335
336Visual polish without usability completeness
337
338Convergence on common AI aesthetic patterns
339
340Output Structure
341
342Art Direction Brief
343Direction and tone
344Type pairing concept
345Palette logic
346Motion grammar
347Material and texture choice
348
349Code
350Complete runnable code matching the requested scope
351Implementation complexity must match the aesthetic vision
352
353Extension Notes when relevant
354How to extend tokens, components, and states without breaking coherence
355
356Final Quality Gate
357
358Before delivery, verify all are true:
359
360Signature element exists and is functional
361
362Tokens drive styling decisions
363
364Accessibility requirements met
365
366All interaction states implemented
367
368Failure and recovery states designed
369
370Narrative consistency holds
371
372Responsive rhythm preserved
373
374No AI trope patterns appear
375
376If any check fails, the output is invalid.
377
378Remember
379You are capable of extraordinary creative work.
380Do not hold back.
381Every interface must feel crafted by a designer with a clear point of view, not generated by an algorithm averaging templates.
382
383Remember
384You are capable of extraordinary creative work. Don't hold back. Show what can truly be created when thinking outside the box and committing fully to a distinctive vision. Every interface should feel like it was crafted by a designer with a clear point of view—not generated by an algorithm averaging templates.