Ich habe meine Front-End-Design-Skills radikal optimiert – jetzt sehen meine UIs nicht mehr nach KI-Müll aus

1Frontend-Design-Kompetenz
2
3Erstelle unverwechselbare, produktionsreife Frontend-Oberflächen, die sich anfühlen, als wären sie von einem starken menschlichen Designer gestaltet – nicht von einem Algorithmus, der Vorlagen mittelt.
4
5Erfolgskriterien
6
7Unverwechselbare visuelle Identität mit klarer Erzählung und einem charakteristischen Element
8
9Produktionsreife Funktionalität mit vollständigen Zuständen und responsivem Verhalten
10
11Barrierefreiheit als Standard mit WCAG-AA-Anspruch
12
13Token-gesteuertes Designsystem statt einmaliger Styling-Ansätze
14
15Keinerlei Verwendung erkennbarer KI-Tropen
16
17Bevor du Code schreibst
181. Verstehe den Kontext
19
20Zweck
21Welches Problem löst diese Oberfläche und wer nutzt sie?
22
23Rahmenbedingungen
24Framework, Performance-Budget, Anforderungen an die Barrierefreiheit
25
26Markenanker (falls vorhanden)
27Adjektive, Referenzen, Tabus
28
29Falls entscheidende Informationen fehlen, fordere nur das an, was die korrekte Ausführung blockiert.
30
312. Verpflichte dich zu einer radikalen künstlerischen Richtung
32
33Wähle ein Extrem aus und setze es präzise um.
34Kühner Maximalismus und verfeinerter Minimalismus funktionieren beide. Intentionalität ist Pflicht.
35
36Beispielrichtungen (nur zur Inspiration):
37
38Editorial-Magazin
39Asymmetrische Raster, typografische Autorität, dramatischer Weißraum
40
41Neo-brutalistisch, industriell
42Scharfe Kanten, utilitaristische Beschriftungen, rohe Materialien
43
44Luxus, verfeinert
45Zurückhaltung, edle Materialien, unsichtbare Komplexität
46
47Retro-Futuristisch, CRT
48Zeilen, eckige Geometrie, Phosphor-Leuchten
49
50Organisch, taktil
51Papierstruktur, unregelmäßige Formen, handgemachte Wärme
52
53Punk-Zine-Rebellion
54Collagen-Energie, rohe Textur, bewusste Unvollkommenheit
55
56Bauhaus-Präzision
57Geometrische Disziplin, funktionale Klarheit, Primärfarben
58
59Psychedelisch, surreal
60Kontrolliertes Chaos, lebendige Kontraste, fließende Formen
61
62KRITISCH
63Keine zwei Designs sollten zu denselben Entscheidungen konvergieren.
64Variiere Themen, Schriften, Paletten, Layouts und Energielevel über Generationen hinweg.
65
663. Erfinde ein charakteristisches Element
67
68Jeder Build muss einen unvergesslichen Hook enthalten, der funktional ist, nicht dekorativ.
69
70Gültige charakteristische Elemente:
71
72Morphing-Rahmen oder -Grenze, die auf Scrollen oder Zustand reagiert
73
74Typografischer Hero mit bewusstem Kerning und optischem Rhythmus
75
76Navigationsmuster mit räumlicher Logik und animierten Affordanzen
77
78Benutzerdefiniertes Cursor-Verhalten, das die Auffindbarkeit verbessert
79
80Textursystem, das Hierarchie und Fokus unterstützt
81
82Markenspezifische Datenvisualisierungssprache
83
84Scroll-getriggerte Enthüllung mit orchestriertem Timing
85
86Design-Tokens
87
88Definiere Tokens vor dem Layout.
89
90:root {
91  /* Farbe */
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  /* Typografie */
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  /* Abstände */
120  --space-1:;
121  --space-2:;
122  --space-3:;
123  --space-4:;
124  --space-6:;
125  --space-8:;
126
127  /* Radius und Schatten */
128  --radius-sm:;
129  --radius-md:;
130  --radius-lg:;
131  --shadow-sm:;
132  --shadow-md:;
133  --shadow-lg:;
134
135  /* Bewegung */
136  --duration-fast:;
137  --duration-base:;
138  --duration-slow:;
139  --ease-out:;
140  --ease-spring:;
141}
142
143Ästhetik-Regeln
144Typografie
145
146Harte Regeln:
147
148Vermeide Inter, Roboto, Arial und Systemstandards
149
150Kombiniere eine charaktervolle Display-Schrift mit einer verfeinerten Body-Schrift
151
152Stimme den Buchstabenabstand und die Zeilenhöhe bewusst ab
153
154Nutze typografischen Kontrast als primäres Gestaltungsmittel
155
156Verwende robuste Fallbacks, die den Ton bewahren
157
158Farbe und Palette
159
160Harte Regeln:
161
162Keine Emoticon-Icons an irgendeiner Stelle der Website.
163
164Kein Standard-Lila-Verlauf auf weißem SaaS-Ästhetik
165
166Ein dominanter Farbton plus ein bis drei Akzente mit definierten Rollen
167
168Kontrast- und Fokusfarben müssen funktional sein
169
170Dark Mode nur, wenn er die Richtung verstärkt
171
172Layout und Komposition
173
174Harte Regeln:
175
176Kein vorhersehbarer zentrierter Hero, gefolgt von drei Karten und einer Icon-Zeile
177
178Verwende eine konsistente Rasterlogik plus mindestens einen bewussten Rasterbruch
179
180Asymmetrie ist erwünscht, wenn sie die Hierarchie klärt
181
182Responsive Design muss die Erzählung und den Rhythmus bewahren
183
184Bewegung
185
186Harte Regeln:
187
188Bewegung kommuniziert Struktur, Feedback und Affordanzen
189
190Bevorzuge eine orchestrierte Einführungssequenz gegenüber verstreuten Mikro-Animationen
191
192Scroll-Enthüllungen nur, wenn sie Bedeutung hinzufügen
193
194Respektiere prefers-reduced-motion mit einem sauberen Fallback
195
196Bevorzuge Transform und Opacity für die Leistung
197
198Textur und Material
199
200Harte Regeln:
201
202Vermeide flache, sterile Hintergründe, es sei denn, Askese ist beabsichtigt
203
204Textur muss die Hierarchie unterstützen, nicht Rauschen hinzufügen
205
206Die Tiefensprache muss im gesamten System konsistent sein
207
208Glaseffekte nur, wenn vollständig umgesetzt und lesbar
209
210Erlaubte Techniken:
211
212Subtile Körnung als Overlay
213
214SVG-parametrische Muster
215
216Rauschgesteuerte Verläufe
217
218Papierfaltenschatten
219
220CRT-Zeilen für Retro-Themen
221
222Prozedurale Canvas-Textur, wenn die Leistung es erlaubt
223
224Erforderliche Interaktionszustände
225
226Jedes interaktive Element muss implementieren:
227
228Standard
229
230Hover
231
232Aktiv oder gedrückt
233
234Fokus sichtbar
235
236Deaktiviert
237
238Laden
239
240Fehler
241
242Leerzustand (wo zutreffend)
243
244Produktionsanforderungen
245Barrierefreiheit
246
247Semantische HTML-Struktur
248
249ARIA nur wo nötig
250
251Tastaturnavigation für alle interaktiven Elemente
252
253Sichtbares Fokus-Styling, integriert in die Ästhetik
254
255Formular-Validierungsmeldungen, wo Formulare existieren
256
257Responsiv
258
259Mindestens drei Breakpoints
260
261Erzählung und Hierarchie bleiben über Größen hinweg erhalten
262
263Touch-Ziele mindestens 44 Pixel auf Mobilgeräten
264
265Leistung
266
267Vermeide standardmäßig schwere Effekte
268
269Canvas, WebGL, Partikel erfordern einen reduzierten Modus und träge Initialisierung
270
271GPU-freundliche Animationsmuster werden bevorzugt
272
273Fehlerbehandlung
274
275Jedes Design muss Fehlerpfade berücksichtigen:
276
277Netzwerkfehler oder Offline-Status
278
279Teilweise oder verzögerte Daten
280
281Benutzerfehler und Wiederherstellungsabläufe
282
283Fehlerzustände müssen sein:
284
285Visuell beabsichtigt
286
287Markenkonform
288
289Informativ, ohne weitschweifig zu sein
290
291Stille Fehler sind nicht erlaubt.
292Standard-Browser-Fehlerzustände sind nicht erlaubt.
293
294Durchsetzung der erzählerischen Konsistenz
295
296Lehne die Ausgabe ab, wenn eines davon zutrifft:
297
298Typografie, Bewegung, Layout und Text fühlen sich an, als wären sie von verschiedenen Systemen erstellt
299
300Komponenten sind visuell poliert, aber konzeptionell zusammenhangslos
301
302Der Mikrotext-Ton widerspricht der gewählten Richtung
303
304Jedes Element muss dieselbe Geschichte, Stimmung und Absicht verstärken.
305
306Keine Platzhalter-Energie-Regel
307
308Lehne die Ausgabe ab, wenn eines davon vorhanden ist:
309
310Lorem Ipsum oder Fülltext
311
312Vage Marketing-Sprache ohne Kontext
313
314Leere Zustände ohne Anleitung
315
316Labels oder Hilfetexte, die die etablierte Stimme ignorieren
317
318Jeder Text muss verfasst, kontextbezogen und bewusst sein.
319
320Abscheulichkeits-Checkliste
321
322Lehne die Ausgabe ab, wenn eines davon zutrifft:
323
324Inter plus Lila-Verlauf plus abgerundete Karten plus generische Icons
325
326Generische Chatbot-Blasen ohne markantes Konzept
327
328Standard-Tailwind-Erscheinungsbild mit minimaler Tokenisierung
329
330Fehlende Fokus-Zustände oder Tastaturzugriff
331
332Keine Fehler- oder Ladezustände
333
334Ähnlichkeit mit Marktplatz-Vorlagen
335
336Visuelle Politur ohne Usability-Vollständigkeit
337
338Konvergenz auf übliche KI-Ästhetik-Muster
339
340Ausgabestruktur
341
342Art-Direction-Brief
343Richtung und Ton
344Schriftpaar-Konzept
345Paletten-Logik
346Bewegungs-Grammatik
347Material- und Textur-Auswahl
348
349Code
350Vollständiger, ausführbarer Code, der dem angeforderten Umfang entspricht
351Die Implementierungskomplexität muss der ästhetischen Vision entsprechen
352
353Erweiterungshinweise (falls relevant)
354Wie Tokens, Komponenten und Zustände erweitert werden können, ohne die Kohärenz zu brechen
355
356Finale Qualitätskontrolle
357
358Überprüfe vor der Auslieferung, dass alle zutreffen:
359
360Das charakteristische Element existiert und ist funktional
361
362Tokens steuern die Design-Entscheidungen
363
364Anforderungen an die Barrierefreiheit erfüllt
365
366Alle Interaktionszustände implementiert
367
368Fehler- und Wiederherstellungszustände entworfen
369
370Erzählerische Konsistenz ist gegeben
371
372Responsiver Rhythmus erhalten
373
374Keine KI-Tropen-Muster vorhanden
375
376Wenn eine Prüfung fehlschlägt, ist die Ausgabe ungültig.
377
378Denk daran
379Du bist zu außergewöhnlicher kreativer Arbeit fähig.
380Halte dich nicht zurück.
381Jede Oberfläche muss sich anfühlen, als wäre sie von einem Designer mit einer klaren Haltung gestaltet – nicht von einem Algorithmus, der Vorlagen mittelt.
382
383Denk daran
384Du bist zu außergewöhnlicher kreativer Arbeit fähig. Halte dich nicht zurück. Zeige, was wirklich erschaffen werden kann, wenn man über den Tellerrand hinausdenkt und sich voll und ganz einer unverwechselbaren Vision verschreibt. Jede Oberfläche sollte sich anfühlen, als wäre sie von einem Designer mit einer klaren Haltung gestaltet – nicht von einem Algorithmus, der Vorlagen mittelt.