joyeking/redesigned-portfolio

Redesign-Fähigkeit

So funktioniert es

Wenn auf ein bestehendes Projekt angewendet, folge dieser Reihenfolge:

1. Scannen — Lese die Codebasis. Identifiziere das Framework, die Styling-Methode (Tailwind, Vanilla CSS, styled-components usw.) und die aktuellen Designmuster.
2. Diagnostizieren — Führe 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 vorhandenen Stack arbeiten. Schreibe nichts von Grund auf neu. Verbessere das Vorhandene.

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 haben keine Präsenz. Vergrößere die Darstellungsgröße für Displayschrift, verringere die Zeichenabstände, reduziere die Zeilenhöhe. Überschriften sollten schwer und absichtsvoll wirken.
• Fließtext zu breit. Begrenze die Absatzbreite auf ca. 65 Zeichen. Erhöhe die Zeilenhöhe für bessere Lesbarkeit.
• Nur Regular (400) und Bold (700) Schriftstärken verwendet. Führe Medium (500) und SemiBold (600) für eine subtilere Hierarchie ein.
• Zahlen in Proportionalschrift. Verwende eine Monospace-Schrift oder aktiviere tabellarische Ziffern (font-variant-numeric: tabular-nums) für datenlastige Oberflächen.
• Fehlende Anpassungen des Zeichenabstands. Verwende negatives Tracking für große Überschriften, positives Tracking für Kapitälchen oder Beschriftungen.
• Überall Großbuchstaben-Zwischenüberschriften. Versuche stattdessen kleine kursive Buchstaben, Satzfall oder Kapitälchen.
• Schusterjungen. Einzelne Wörter, die allein in der letzten Zeile stehen. Korrigiere mit text-wrap: balance oder text-wrap: pretty.

Farbe und Oberflächen

• Reiner #000000-Hintergrund. Ersetze durch Off-Black, dunkle Holzkohle oder getönte Dunkelheit (#0a0a0a, #121212 oder ein dunkles Marineblau).
• Übersättigte Akzentfarben. Halte die Sättigung unter 80%. Entsättige Akzente, sodass sie sich in die Neutraltöne einfügen, anstatt zu schreien.
• Mehr als eine Akzentfarbe. Wähle eine aus. Entferne den Rest. Konsistenz schlägt Vielfalt.
• Mischung aus warmen und kühlen Grautönen. Bleibe bei einer Graufamilie. Töne alle Grautöne mit einem konsistenten Farbton (warm oder kühl, nicht beides).
• Lila/blauer „KI-Verlauf“-Ästhetik. Dies ist der häufigste KI-Design-Fingerabdruck. Ersetze durch neutrale Basen und einen einzigen, durchdachten Akzent.
• Generischer box-shadow. Töne Schatten passend zum Hintergrundfarbton. Verwende farbige Schatten (z. B. dunkelblauen Schatten auf blauem Hintergrund) anstelle von reinem Schwarz bei geringer Deckkraft.
• Flaches Design ohne Textur. Füge subtile Unschärfe, Körnung oder Mikromuster zu Hintergründen hinzu. Reine flache Vektoren wirken steril.
• Perfekt gleichmäßige Verläufe. Brich die Gleichmäßigkeit mit Radialverläufen, Rausch-Overlays oder Netzverläufen anstelle von standardmäßigen linearen 45-Grad-Verläufen.
• Inkonsistente Lichtrichtung. Überprüfe alle Schatten, um sicherzustellen, dass sie auf eine einzige, konsistente Lichtquelle hindeuten.
• Zufällige dunkle Abschnitte auf einer hellen Seite (oder umgekehrt). Ein einzelner dunkler Hintergrundabschnitt, der eine ansonsten helle Seite unterbricht, sieht aus wie ein Copy-Paste-Unfall. Entweder zu einem vollständigen dunklen Modus wechseln oder einen konsistenten Hintergrundton auf der gesamten Seite beibehalten. Wenn Kontrast benötigt wird, verwende einen etwas dunkleren Farbton derselben Palette – nicht einen plötzlichen Sprung zu #111 in der Mitte einer cremefarbenen Seite.
• Leere, flache Abschnitte ohne visuelle Tiefe. Abschnitte, die nur aus Text auf schlichtem 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, deckungsarmes Vollbildfoto verleiht Präsenz.

Layout

• Alles zentriert und symmetrisch. Brich 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 einen 2-spaltigen Zickzack, ein asymmetrisches Raster, horizontalen Scroll oder ein Masonry-Layout.
• Verwendung von height: 100vh für Vollbild-Abschnitte. Ersetze mit min-height: 100dvh, um Layout-Sprünge auf mobilen Browsern zu vermeiden (iOS Safari Viewport-Fehler).
• Komplexe Flexbox-Prozentrechnerei. Ersetze mit 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 gleicher Höhe, erzwungen durch Flexbox. Erlaube variable Höhen oder verwende Masonry, wenn der Inhalt in der Länge variiert.
• Einheitlicher border-radius überall. 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.
• Symmetrische vertikale Abstände. Oberer und unterer Abstand sind immer identisch. Optisch anpassen – unterer 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 die Abstände. Lass das Design atmen. Dichte Layouts funktionieren für Daten-Dashboards, nicht für Marketing-Seiten.
• Buttons nicht am unteren Rand von Kartengruppen ausgerichtet. Wenn Karten unterschiedliche Textlängen haben, landen CTAs auf zufälligen Höhen. Hefte Buttons am unteren Rand jeder Karte fest, sodass sie unabhängig vom darüberliegenden Inhalt eine saubere horizontale Linie bilden.
• Funktionslisten beginnen an unterschiedlichen vertikalen Positionen. 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 Blöcke mit fester Höhe für Titel/Preise.
• Inkonsistenter vertikaler Rhythmus bei nebeneinander liegenden Elementen. Wenn Karten, Spalten oder Panels nebeneinander platziert werden, richte gemeinsame Elemente (Titel, Beschreibungen, Preise, Buttons) über alle Elemente hinweg aus. Fehlausgerichtete Grundlinien lassen das Layout kaputt aussehen.
• Mathematische Ausrichtung, die optisch falsch aussieht. Zentrierung nach Mathematik sieht für das Auge nicht immer zentriert aus. Symbole neben Text, Play-Buttons in Kreisen oder Text in Buttons benötigen oft 1-2px optische Anpassungen, um richtig zu wirken.

Interaktivität und Zustände

• Keine Hover-Zustände auf Buttons. Füge Hintergrundverschiebung, leichte Skalierung oder Verschiebung beim Hover hinzu.
• Kein Aktiv-/Gedrückt-Feedback. Füge ein subtiles scale(0.98) oder translateY(1px) beim Drücken hinzu, um einen physischen Klick zu simulieren.
• Sofortige Übergänge ohne Dauer. Füge flüssige Übergänge (200-300ms) zu allen interaktiven Elementen hinzu.
• Fehlender Fokus-Ring. Stelle sichtbare Fokus-Indikatoren für die Tastaturnavigation sicher. Dies ist eine Barrierefreiheitsanforderung, nicht optional.
• Keine Ladezustände. Ersetze generische kreisförmige Spinner durch Skelett-Ladeelemente, die der Layoutform entsprechen.
• Keine leeren Zustände. Ein leeres Dashboard, das nichts zeigt, ist eine verpasste Gelegenheit. Gestalte eine zusammengestellte „Erste Schritte“-Ansicht.
• Keine Fehlerzustände. Füge klare, direkte Fehlermeldungen für Formulare hinzu. Verwende nicht window.alert().
• Tote Links. Buttons, die auf # verlinken. Verlinke entweder auf echte Ziele oder deaktiviere sie visuell.
• Keine Anzeige der aktuellen Seite in der Navigation. Gestalte den aktiven Navigationslink anders, damit Benutzer wissen, wo sie sich befinden.
• 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-Unternehmensnamen 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 klare, 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-Beitrags-Daten identisch. Randomisiere Daten, damit sie echt aussehen.
• Gleiches Avatar-Bild für mehrere Benutzer. Verwende einzigartige Assets für jede einzelne Person.
• Lorem Ipsum. Verwende niemals lateinischen Platzhaltertext. Schreibe echten Entwurfstext.
• Überschrift in Titel-Fall. Verwende stattdessen Satz-Fall.

Komponentenmuster

• Generischer Karten-Look (Rahmen + Schatten + weißer Hintergrund). Entferne den Rahmen oder verwende nur die Hintergrundfarbe oder nur Abstände. Karten sollten nur existieren, wenn die Höhe Hierarchie kommuniziert.
• Immer ein gefüllter Button + ein Ghost-Button. Füge Textlinks oder Tertiärstile hinzu, um visuelles Rauschen zu reduzieren.
• Pillenförmige „Neu“- und „Beta“-Abzeichen. Versuche eckige Abzeichen, Flaggen oder einfache Textbeschriftungen.
• Akkordeon-FAQ-Abschnitte. Verwende eine nebeneinander liegende Liste, durchsuchbare Hilfe oder Inline-progressive Offenlegung.
• 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 erweiterbare Abschnitte anstelle von Popups für einfache Aktionen.
• Ausschließlich runde Avatare. Versuche Squircles oder abgerundete Quadrate für einen weniger generischen Look.
• Hell/Dunkel-Umschalter immer ein Sonne/Mond-Schalter. Verwende ein Dropdown, eine Systempräferenz-Erkennung oder integriere ihn in die Einstellungen.
• Footer-Link-Farm mit 4 Spalten. Vereinfache. Konzentriere dich auf die wichtigsten Navigationspfade und rechtlich erforderliche Links.

Ikonografie

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

Code-Qualität

• Div-Suppe. Verwende semantisches HTML: <nav>, <main>, <article>, <aside>, <section>.
• Inline-Styles 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 bei aussagekräftigen Bildern niemals alt="" oder alt="image" stehen.
• Willkürliche z-index-Werte wie 9999. Erstelle eine saubere z-Index-Skala im Theme/Variablen.
• Auskommentierter toter Code. Entferne alle Debug-Artefakte vor der Auslieferung.
• Import-Halluzinationen. Überprüfe, ob 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 Datenschutzerklärung und AGB-Links im Footer hinzu.
• Keine „Zurück“-Navigation. Sackgassen in Benutzerabläufen. Jede Seite braucht einen Weg zurück.
• Keine benutzerdefinierte 404-Seite. Gestalte eine hilfreiche, markenbezogene „Seite nicht gefunden“-Erfahrung.
• Keine Formularvalidierung. Füge clientseitige Validierung für E-Mails, Pflichtfelder und Formatprüfungen hinzu.
• Kein „Zum Inhalt springen“-Link. Unverzichtbar für Tastaturbenutzer. Füge einen versteckten Skip-Link hinzu.
• Keine Cookie-Zustimmung. Wenn gesetzlich vorgeschrieben, füge ein konformes Zustimmungsbanner hinzu.

Upgradetechniken

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

Typografie-Upgrades

• Variable Schriftarten-Animation. 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 Scrollen oder Interagieren mit Farbe.
• Textmasken-Enthüllungen. Große Typografie, die als Fenster zu Video oder animiertem Bildmaterial dahinter fungiert.

Layout-Upgrades

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

Bewegungs-Upgrades

• Sanftes Scrollen mit Trägheit. Entkopple das Scrollen von den Browser-Standardwerten für ein schwereres, filmischeres Gefühl.
• Gestaffelter Eintritt. Elemente kaskadieren mit leichten Verzögerungen herein, kombinieren Y-Achsen-Verschiebung mit Deckkraft-Fade. Montiere nie alles auf einmal.
• Federphysik. Ersetze lineares Easing durch federbasierte Bewegung für ein natürliches, gewichtiges Gefühl bei allen interaktiven Elementen.
• Scroll-gesteuerte Enthüllungen. Inhalt, der durch sich ausdehnende Masken, Wischbewegungen oder gezeichnete SVG-Pfade eintritt, die an den Scroll-Fortschritt gebunden sind.

Oberflächen-Upgrades

• Echter Glas-Effekt. Gehe über backdrop-filter: blur hinaus. Füge einen 1px inneren Rahmen und einen subtilen inneren Schatten hinzu, um Kantenbrechung zu simulieren.
• Spotlight-Ränder. Kartenränder, die dynamisch unter dem Cursor leuchten.
• Korn- und Rausch-Overlays. Ein fixes, pointer-events-none Overlay mit subtilem Rauschen, um digitale Flachheit zu durchbrechen.
• Farbige, getönte Schatten. Schatten, die den Farbton des Hintergrunds tragen, anstatt generisches Schwarz zu verwenden.

Korrekturpriorität

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

1. Schriftartenaustausch — größte sofortige Verbesserung, geringstes Risiko
2. Farbpalettenbereinigung — entferne kollidierende oder übersättigte Farben
3. Hover- und Aktiv-Zustände — m...

[… für die Übersetzung abgeschnitten]