leonxlnx/taste-skill

Redesign-Skill

Wie das funktioniert

Wenn auf ein bestehendes Projekt angewendet, folge dieser Reihenfolge:

1. Scannen – Lies die Codebasis. Identifiziere das Framework, die Styling-Methode (Tailwind, Vanilla CSS, styled-components usw.) und die aktuellen Designmuster.
2. Diagnose – Gehe die folgende Prüfung durch. Liste jedes generische Muster, jede Schwachstelle und jeden fehlenden Zustand auf, den du findest.
3. Beheben – Wende gezielte Verbesserungen an, die mit dem bestehenden Stack arbeiten. Schreibe nicht von Grund auf neu. Verbessere, was vorhanden ist.

Design-Prüfung

Typografie

Überprüfe auf folgende Probleme und behebe sie:

• Browser-Standardschriftarten oder überall Inter. Ersetze durch eine Schriftart mit Charakter. Gute Optionen: Geist, Outfit, Cabinet Grotesk, Satoshi. Für redaktionelle/kreative Projekte kombiniere eine Serifen-Überschrift mit einem serifenlosen Fließtext.
• Überschriften fehlt Präsenz. Vergrößere die Schrift für Anzeigetexte, verringere die Laufweite, reduziere die Zeilenhöhe. Überschriften sollten schwer und bewusst wirken.
• Fließtext zu breit. Begrenze die Absatzbreite auf etwa 65 Zeichen. Erhöhe die Zeilenhöhe für die Lesbarkeit.
• Nur Regular (400) und Bold (700) werden verwendet. Führe Medium (500) und SemiBold (600) für eine feinere Hierarchie ein.
• Zahlen in Proportionalschrift. Verwende eine Monospace-Schriftart oder aktiviere Tabellenziffern (font-variant-numeric: tabular-nums) für datenintensive Schnittstellen.
• Fehlende Anpassungen der Laufweite. Verwende negatives Tracking für große Überschriften, positives Tracking für Kapitälchen oder Beschriftungen.
• Überall Großbuchstaben-Unterüberschriften. Versuche stattdessen kursive Kleinbuchstaben, Satzfall oder Kapitälchen.
• Hurenkinder. Einzelne Wörter, die allein in der letzten Zeile stehen. Behebe mit text-wrap: balance oder text-wrap: pretty.

Farbe und Oberflächen

• Reiner #000000 Hintergrund. Ersetze durch Off-Black, dunkle Holzkohle oder getöntes Dunkel (#0a0a0a, #121212 oder ein dunkles Marineblau).
• Übersättigte Akzentfarben. Halte die Sättigung unter 80%. Entsättige Akzente, damit sie sich mit Neutraltönen vermischen, anstatt zu schreien.
• Mehr als eine Akzentfarbe. Wähle eine aus. Entferne den Rest. Konsistenz schlägt Abwechslung.
• Mischen von warmen und kühlen Grautönen. Bleibe bei einer Graufamilie. Töne alle Grautöne mit einem einheitlichen Farbton (warm oder kühl, nicht beides).
• Lila/blauer „KI-Gradient“-Look. Dies ist der häufigste KI-Design-Fingerabdruck. Ersetze durch neutrale Basen und einen einzelnen, durchdachten Akzent.
• Generisches box-shadow. Töne Schatten passend zum Hintergrundfarbton. Verwende farbige Schatten (z. B. dunkelblauer Schatten auf blauem Hintergrund) anstelle von reinem Schwarz mit geringer Deckkraft.
• Flaches Design ohne Textur. Füge subtiles Rauschen, Korn oder Mikromuster zu Hintergründen hinzu. Reine flache Vektorgrafiken wirken steril.
• Perfekt gleichmäßige Verläufe. Durchbreche die Gleichmäßigkeit mit radialen Verläufen, Rauschüberlagerungen oder Netzverläufen anstelle von standardmäßigen linearen 45-Grad-Übergängen.
• Inkonsistente Lichtrichtung. Überprüfe alle Schatten, um sicherzustellen, dass sie eine einzige, konsistente Lichtquelle suggerieren.
• Zufällige dunkle Abschnitte auf einer hellen Seite (oder umgekehrt). Ein einzelner dunkler Hintergrundabschnitt, der eine ansonsten helle Seite unterbricht, wirkt wie ein Copy-Paste-Unfall. Entweder auf einen vollständigen Dunkelmodus festlegen oder einen einheitlichen Hintergrundton auf der gesamten Seite beibehalten. Wenn Kontrast benötigt wird, verwende einen etwas dunkleren Farbton derselben Palette – keinen plötzlichen Sprung zu #111 in der Mitte einer cremefarbenen Seite.
• Leere, flache Abschnitte ohne visuelle Tiefe. Abschnitte, die nur aus Text auf einem einfachen Hintergrund bestehen, wirken unfertig. Füge hochwertige Hintergrundbilder (unscharf, überlagert oder maskiert), subtile Muster oder Umgebungsverläufe hinzu. Verwende zuverlässige Platzhalterquellen wie https://picsum.photos/seed/{name}/1920/1080, wenn keine echten Assets verfügbar sind. Experimentiere mit Hintergrundbildern hinter Hero-Bereichen, Feature-Blöcken oder CTAs – selbst ein subtiles Vollformatfoto mit geringer Deckkraft verleiht Präsenz.

Layout

• Alles zentriert und symmetrisch. Durchbreche die Symmetrie mit versetzten Rändern, gemischten Seitenverhältnissen oder linksbündigen Überschriften über zentriertem Inhalt.
• Drei gleiche Karten-Spalten als Feature-Reihe. Dies ist das generischste KI-Layout. Ersetze durch ein 2-spaltiges Zickzack-Layout, ein asymmetrisches Raster, einen horizontalen Scroll oder ein Masonry-Layout.
• Verwendung von height: 100vh für Vollbild-Abschnitte. Ersetze durch min-height: 100dvh, um Layout-Sprünge auf mobilen Browsern zu vermeiden (iOS Safari Viewport-Fehler).
• Komplexe Flexbox-Prozentrechnung. Ersetze durch CSS Grid für zuverlässige mehrspaltige Strukturen.
• Kein max-width-Container. Füge eine Container-Begrenzung hinzu (ca. 1200-1440px) mit automatischen Rändern, damit sich der Inhalt auf breiten Bildschirmen nicht von Rand zu Rand erstreckt.
• Karten mit gleicher Höhe, erzwungen durch Flexbox. Erlaube variable Höhen oder verwende Masonry, wenn der Inhalt in der Länge variiert.
• Einheitlicher border-radius für alles. Variiere den Radius: enger bei inneren Elementen, weicher bei Containern.
• Keine Überlappung oder Tiefe. Elemente liegen flach nebeneinander. Verwende negative Ränder, um Schichtung und visuelle Tiefe zu erzeugen.
• Symmetrischer vertikaler Abstand. Der obere und untere Abstand ist immer identisch. Optisch anpassen – der untere Abstand muss oft etwas größer sein.
• Dashboard hat immer eine linke Seitenleiste. Versuche stattdessen eine obere Navigation, ein schwebendes Befehlsmenü oder ein einklappbares Panel.
• Fehlender Weißraum. Verdopple den Abstand. Lass das Design atmen. Dichte Layouts eignen sich für Daten-Dashboards, nicht für Marketingseiten.
• Schaltflächen nicht am unteren Rand von Kartengruppen ausgerichtet. Wenn Karten unterschiedliche Inhaltslängen haben, landen CTAs auf zufälligen Höhen. Halte die Schaltflächen am unteren Rand jeder Karte fest, so dass sie unabhängig vom darüber liegenden Inhalt eine saubere horizontale Linie bilden.
• Funktionslisten, die an unterschiedlichen vertikalen Positionen beginnen. In Preistabellen oder Vergleichskarten sollte die Liste der Funktionen in allen Spalten an derselben Y-Position beginnen. Verwende konsistente Abstände oberhalb der Liste oder Titel-/Preisblöcke mit fester Höhe.
• Inkonsistenter vertikaler Rhythmus bei nebeneinander angeordneten Elementen. Wenn Karten, Spalten oder Panels nebeneinander platziert werden, richte gemeinsame Elemente (Titel, Beschreibungen, Preise, Schaltflächen) über alle Elemente hinweg aus. Fehlausgerichtete Grundlinien lassen das Layout kaputt aussehen.
• Mathematische Ausrichtung, die optisch falsch aussieht. Das Zentrieren nach der Mathematik sieht nicht immer zentriert aus. Symbole neben Text, Play-Buttons in Kreisen oder Text in Schaltflächen benötigen oft 1-2 Pixel optische Anpassungen, um sich richtig anzufühlen.

Interaktivität und Zustände

• Keine Hover-Zustände auf Schaltflächen. Füge eine Hintergrundverschiebung, leichte Skalierung oder Verschiebung beim Hover hinzu.
• Kein Active/Gedrückt-Feedback. Füge eine subtile scale(0.98) oder translateY(1px) beim Drücken hinzu, um einen physischen Klick zu simulieren.
• Sofortige Übergänge ohne Dauer. Füge fließende Übergänge (200-300ms) zu allen interaktiven Elementen hinzu.
• Fehlender Fokusring. Stelle sichtbare Fokusindikatoren für die Tastaturnavigation sicher. Dies ist eine Barrierefreiheitsanforderung, nicht optional.
• Keine Ladezustände. Ersetze generische kreisförmige Spinner durch Skeleton-Loader, die der Layoutform entsprechen.
• Keine Leerzustände. Ein leeres Dashboard, das nichts zeigt, ist eine verpasste Gelegenheit. Entwerfe eine zusammengestellte „Erste-Schritte“-Ansicht.
• Keine Fehlerzustände. Füge klare, inline-Fehlermeldungen für Formulare hinzu. Verwende nicht window.alert().
• Tote Links. Schaltflächen, die auf # verlinken. Verlinke entweder auf echte Ziele oder deaktiviere sie visuell.
• Keine Angabe der aktuellen Seite in der Navigation. Gestalte den aktiven Nav-Link anders, damit die Benutzer wissen, wo sie sind.
• Scroll-Sprünge. Anker-Klicks springen sofort. Füge scroll-behavior: smooth hinzu.
• Animationen mit top, left, width, height. Wechsle zu transform und opacity für GPU-beschleunigte, flüssige Animationen.

Inhalt

• Generische Namen wie „John Doe“ oder „Jane Smith“. Verwende vielfältige, realistisch klingende Namen.
• Fake runde Zahlen wie 99.99%, 50%, $100.00. Verwende organische, unordentliche Daten: 47.2%, $99.00, +1 (312) 847-1928.
• Platzhalter-Firmennamen wie „Acme Corp“, „Nexus“, „SmartFlow“. Erfinde kontextbezogene, glaubwürdige Markennamen.
• KI-Text-Klischees. Verwende niemals „Elevate“, „Seamless“, „Unleash“, „Next-Gen“, „Game-changer“, „Delve“, „Tapestry“ oder „In der Welt von...“. Schreibe einfache, spezifische Sprache.
• Ausrufezeichen in Erfolgsmeldungen. Entferne sie. Sei selbstbewusst, nicht laut.
• „Hoppla!“-Fehlermeldungen. Sei direkt: „Verbindung fehlgeschlagen. Bitte versuche es erneut.“
• Passiv. Verwende Aktiv: „Wir konnten deine Änderungen nicht speichern“ anstelle von „Fehler wurden gemacht“.
• Alle Blog-Post-Daten identisch. Verwende zufällige Daten, um echt zu wirken.
• Gleiches Avatar-Bild für mehrere Benutzer. Verwende eindeutige Assets für jede einzelne Person.
• Lorem Ipsum. Verwende niemals Platzhalter-Lateintext. Schreibe echten Entwurfstext.
• Jede Überschrift in Title Case. Verwende stattdessen Satzfall.

Komponentenmuster

• Generischer Karten-Look (Rand + Schatten + weißer Hintergrund). Entferne den Rand oder verwende nur die Hintergrundfarbe oder nur Abstände. Karten sollten nur existieren, wenn Höhe die Hierarchie kommuniziert.
• Immer eine gefüllte Schaltfläche + eine Ghost-Schaltfläche. Füge Textlinks oder tertiäre Stile hinzu, um visuelles Rauschen zu reduzieren.
• Pillenförmige „Neu“- und „Beta“-Abzeichen. Versuche quadratische Abzeichen, Flaggen oder reine Textbeschriftungen.
• FAQ-Abschnitte im Akkordeon-Stil. Verwende eine nebeneinander angeordnete Liste, durchsuchbare Hilfe oder Inline-Progressive Disclosure.
• 3-Karten-Karussell-Testimonials mit Punkten. Ersetze durch eine Masonry-Wand, eingebettete Social-Media-Beiträge oder ein einzelnes rotierendes Zitat.
• Preistabelle mit 3 Säulen. Hebe die empfohlene Stufe mit Farbe und Betonung hervor, nicht nur mit zusätzlicher Höhe.
• Modals für alles. Verwende Inline-Bearbeitung, Slide-over-Panels oder aufklappbare Abschnitte anstelle von Popups für einfache Aktionen.
• Ausschließlich Avatar-Kreise. Versuche Squircles oder abgerundete Quadrate für einen weniger generischen Look.
• Hell/Dunkel-Umschalter immer als Sonne/Mond-Schalter. Verwende ein Dropdown, Systempräferenz-Erkennung oder integriere es in die Einstellungen.
• Footer-Linkfarm mit 4 Spalten. Vereinfache. Konzentriere dich auf die wichtigsten Navigationspfade und gesetzlich erforderlichen Links.

Ikonografie

• Ausschließlich Lucide- oder Feather-Icons. Dies sind die „Standard“-KI-Icon-Auswahl. Verwende Phosphor, Heroicons oder ein benutzerdefiniertes Set zur Unterscheidung.
• Rakete für „Starten“, Schild für „Sicherheit“. Ersetze klischeehafte Metaphern durch weniger offensichtliche Icons (Blitz, Fingerabdruck, Funke, Tresor).
• Inkonsistente Strichstärken über Icons hinweg. Überprüfe alle Icons und standardisiere sie auf ein einheitliches Strichgewicht.
• Fehlendes Favicon. Füge immer ein gebrandetes Favicon hinzu.
• Stock „diverse Team“-Fotos. Verwende echte Teamfotos, Schnappschüsse oder einen konsistenten Illustrationsstil anstelle von unheimlichen Stock-Bildern.

Code-Qualität

• Div-Suppe. Verwende semantisches HTML: <nav>, <main>, <article>, <aside>, <section>.
• Inline-Stile gemischt mit CSS-Klassen. Verschiebe das gesamte Styling in das Styling-System des Projekts.
• Hartcodierte Pixelbreiten. Verwende relative Einheiten (%, rem, em, max-width) für flexible Layouts.
• Fehlender Alt-Text auf Bildern. Beschreibe den Bildinhalt für Screenreader. Lasse alt="" oder alt="image" niemals bei aussagekräftigen Bildern.
• Willkürliche z-index-Werte wie 9999. Lege eine saubere z-index-Skala im Theme/in den Variablen fest.
• Auskommentierter toter Code. Entferne alle Debug-Überreste vor der Veröffentlichung.
• Import-Halluzinationen. Überprüfe, dass jeder Import tatsächlich in package.json oder den Projektabhängigkeiten existiert.
• Fehlende Meta-Tags. Füge ordnungsgemäße <title>, description, og:image und Social-Sharing-Meta-Tags hinzu.

Strategische Auslassungen (Was KI normalerweise vergisst)

• Keine rechtlichen Links. Füge Links zur Datenschutzerklärung und zu den Nutzungsbedingungen in der Fußzeile hinzu.
• Keine „Zurück“-Navigation. Sackgassen in Benutzerabläufen. Jede Seite braucht einen Weg zurück.
• Keine benutzerdefinierte 404-Seite. Gestalte eine hilfreiche, gebrandete „Seite nicht gefunden“-Erfahrung.
• Keine Formularvalidierung. Füge clientseitige Validierung für E-Mails, Pflichtfelder und Formatprüfungen hinzu.
• Kein „Skip to Content“-Link. Essenziell für Tastaturnutzer. Füge einen versteckten Skip-Link hinzu.
• Keine Cookie-Zustimmung. Wenn gesetzlich vorgeschrieben, füge ein konformes Zustimmungsbanner hinzu.

Upgrade-Techniken

Wenn du ein Projekt upgrade-st, greife auf diese wirkungsvollen Techniken zurück, um generische Muster zu ersetzen:

Typografie-Upgrades

• Variable Schriftanimation. Interpoliere Gewicht oder Breite beim Scrollen oder Hover für Text, der lebendig wirkt.
• Kontur-zu-Füllung-Übergänge. Text beginnt als Strichkontur und füllt sich beim Eintritt in den sichtbaren Bereich oder bei Interaktion mit Farbe.
• Textmasken-Enthüllungen. Große Typografie, die als Fenster zu Video oder animierten Bildern dahinter fungiert.

Layout-Upgrades

• Gebrochenes Raster / Asymmetrie. Elemente, die bewusst die Spaltenstruktur ignorieren – überlappend, vom Bildschirm abstehend oder mit berechneter Zufälligkeit versetzt.
• Weißraum-Maximierung. Aggressive Nutzung von negativem Raum, um den Fokus auf ein einzelnes Element zu erzwingen.
• Parallax-Kartenstapel. Abschnitte, die beim Scrollen haften bleiben und physisch übereinander stapeln.
• Split-Screen-Scroll. Zwei Bildschirmhälften, die in entgegengesetzte Richtungen gleiten.

Bewegungs-Upgrades

• Smooth Scroll mit Trägheit. Entkopple das Scrollen von den Browser-Standardeinstellungen für ein schwereres, filmischeres Gefühl.
• Gestaffelter Eintritt. Elemente kaskadieren mit leichten Verzögerungen ein und kombinieren Y-Achsen-Translation mit Deckkraft-Überblendung. Montiere niemals alles auf einmal.
• Feder-Physik. Ersetze lineares Easing durch federbasierte Bewegung für ein natürliches, schweres Gefühl bei allen interaktiven Elementen.
• Scrollgesteuerte Enthüllungen. Inhalt, der durch sich ausdehnende Masken, Wipes oder in SVG gezeichnete Pfade in Abhängigkeit vom Scroll-Fortschritt eintritt.

Oberflächen-Upgrades

• Echter Glassmorphismus. Gehe über backdrop-filter: blur hinaus. Füge einen 1px inneren Rand und einen subtilen inneren Schatten hinzu, um Kantenbrechung zu simulieren.
• Spotlight-Ränder. Kartenränder, die dynamisch unter dem Cursor aufleuchten.
• Korn- und Rauschüberlagerungen. Eine feste, pointer-events-none-Überlagerung mit subtilem Rauschen, um die digitale Flachheit zu durchbrechen.
• Farbige, getönte Schatten. Schatten, die den Farbton des Hintergrunds tragen, anstatt generisches Schwarz zu verwenden.

Priorität der Behebung

Wende Änderungen in dieser Reihenfolge an, um maximale visuelle Wirkung bei minimalem Risiko zu erzielen:

1. Schriftartenwechsel – größte sofortige Verbesserung, geringstes Risiko
2. Farbpaletten-Bereinigung – entferne kollidierende oder übersättigte Farben
3. Hover- und Active-Zustände – mache das Interface greifbar und reaktionsschnell
4. Inhaltliche Korrekturen – ersetze generischen Platzhaltertext und Klischees
5. Abstands- und Layout-Anpassungen – führe asymmetrische, atmende Layouts ein
6. Komponentendiversifizierung – ersetze generische Muster durch durchdachte Alternativen
7. Barrierefreiheit und Edge Cases – füge fehlende Zustände, semantisches HTML und Fallbacks hinzu