Deine App designen

Du bist mein Produktdesigner für diese App.
Design-Briefing:
- Zweck: Content-Teams helfen, Artikel schneller zu planen, zu schreiben und zu veröffentlichen.
- Personen: Beschäftigte Content-Leads und -Autoren an Laptops während des Arbeitstages.
- Gefühl: Ruhig, fokussiert, modern, vertrauenswürdig.
Verwende dieses Briefing als Basis für alle Design-Vorschläge und Entscheidungen.

Kritisiere das Design nur dieses Dashboards.
Konzentriere dich auf Layout, Hierarchie, Farbe, Typografie und Abstand.
Schlage dann einen kurzen Plan kleiner Änderungen vor.
Warte auf meine Genehmigung, bevor du etwas anwendest.

Wende den Plan an, den du für dieses Dashboard vorgeschlagen hast.
Mache Änderungen in kleinen Gruppen und beschreibe jede Gruppe kurz, während du fortfährst.

In diesem ausgewählten Bereich:
- Helle den Hintergrund leicht auf
- Erhöhe den vertikalen Abstand zwischen der Überschrift und dem Inhalt
- Verwende den Primary-Button-Stil für die Hauptaktion und den Secondary-Stil für die anderen

Nur für diese Karte:
- Erhöhe das Padding
- Verschiebe das Icon links neben den Titel
- Verwende einen weicheren Schatten, der zu den anderen Karten in der App passt

Globale Design-Richtlinien:
- Bevorzuge ruhige, minimale Visuals mit viel Weißraum
- Verwende abgerundete Ecken mit Radius 12 auf Karten und Buttons
- Vermeide schwere Gradienten und Glaseffekte
- Halte Animationen subtil und respektiere reduzierte Bewegungs-Präferenzen

Aktualisiere den Primary-Button-Stil und verbreite ihn an alle Stellen, wo die Primary-Button-Komponente verwendet wird.
Ändere die Secondary-Buttons nicht.

Aktualisiere nur den Hero-Bereich auf der Startseite:
- Ändere den Hintergrund in einen weichen Gradient
- Vergrößere die Überschrift
- Verwende den Primary-Button-Stil für die Hauptaufforderung zum Handeln
Ändere keine anderen Bereiche oder Seiten.

Handle als Senior Product Designer.
Überprüfe diese Seite und beschreibe drei spezifische visuelle Probleme.
Schreibe für jedes Problem einen Base44-Prompt, der es beheben würde.
Mache noch keine Änderungen.

Erstelle zwei visuelle Optionen für dieses Dashboard:
- Option A: sehr minimal, hauptsächlich neutral mit einer einzigen Akzentfarbe
- Option B: ausdrucksstärker, mit reicherer Farbe und etwas größerer Typografie
Halte Inhalt und Layout gleich.
Beschreibe jede Option in einer kurzen Zusammenfassung und warte, bis ich wähle.

Erstelle ein Farbsystem für diese App:
- 1 Primärmarkenfarbe
- 1 Sekundärfarbe
- 1 Akzentfarbe für Highlights
- 4 neutrale Grautöne für Hintergründe, Oberflächen und Rahmen
Ordne Farben Rollen zu wie Primary, Surface, Border, Success, Warning, Error.
Stelle sicher, dass Text auf Hintergründen die Barrierefreiheits-Kontraststufen erfüllt.
Wende dieses System in der gesamten App an und ersetze einzelne Farben.

Verwende diese Palette und ordne jedem Hex eine Rolle zu:
- #1D4ED8
- #6366F1
- #10B981
- #F3F4F6
- #111827
Definiere, welche Primary, Secondary, Accent und neutrale Rollen sind.
Ersetze hartkodierte Farben durch Tokens oder Tailwind-Klassen, die diesen Rollen folgen.

Wende die Farben aus diesem Bild auf meine App an.
Ordne jede Farbe einer Rolle zu wie Primary, Background, Foreground und Accent.
Ersetze bestehende Farben in der gesamten App, damit sie passen.

Importiere die "Raleway"-Schriftart von Google Fonts.
Verwende sie für Seitentitel und Bereichsüberschriften.
Behalte die aktuelle Body-Schriftart für Absätze.
Aktualisiere Stile in der gesamten App nach dieser Regel.

Füge der Startseite ein bildschirmbreites Hero-Bild hinzu, das zur aktuellen Farbpalette passt.
Verwende ein Platzhalterbild, das ein modernes Analytics-Dashboard andeutet.

Erstelle ein kurzes Onboarding-Video für meine Fitness-App, das eine einfache Morgen-Trainingsroutine zeigt. Füge es über dem Get-Started-Button auf dem Begrüßungsbildschirm hinzu.

Verwende dies als Inspiration.
Behalte mein Layout und meinen Inhalt, aber:
- Passe die Button-Formen und Schatten an
- Passe den Karten-Eckenradius und Rahmenstil an
- Wende einen ähnlichen weichen Gradient nur auf den oberen Header an
Kopiere nicht die exakten Farben, nur die Struktur und das Gefühl.

Extrahiere aus diesem Screenshot Design-Regeln für:
- Farbrollen
- Schriftgrößen und -gewichte
- Eckenradius und Schatten
- Abstände zwischen Bereichen und Karten
Erkläre die Regeln und wende dann einen ähnlichen Stil mit meinen aktuellen Markenfarben an.

Ändere den Hintergrundstil dieses Elements zu:
background: linear-gradient(180deg, #C2C9B5 -1.25%, #EBEBEB 68.58%, #E6FC88 104.25%);
Halte alle anderen Stile gleich.

Ersetze generische Icons durch aussagekräftigere:
- Verwende Icons, die zu jedem Navigationspunkt und jeder Hauptaktion klar passen
- Halte Icon-Größe und Strichbreite konsistent
- Richte Icons sauber mit Labels in Navigation, Listen und Buttons aus

Aktualisiere alle Primary-Call-to-Action-Buttons:
- Verwende das "sparkles"-Icon links neben dem Label
- Halte die Icon-Größe klein und das Padding gleichmäßig
- Füge keine Icons zu Secondary- oder Destructive-Buttons hinzu

Identifiziere die wichtigsten Seitentypen in dieser App (Landing, Dashboard, Liste, Detail, Formular, Einstellungen).
Für jeden Typ:
- Schlage eine konsistente Layoutstruktur vor
- Schlage vor, welche bestehenden Komponenten wiederverwendet werden sollen
Wende diese Layouts auf alle Seiten desselben Typs an, ohne den Inhalt zu ändern.

Verbessere visuelle Hierarchie und Weißraum auf dieser Seite:
- Lass den Seitentitel klar über anderem Text hervorstechen
- Verwende konsistente Bereichsüberschriften, um Inhalte zu gruppieren
- Füge oben und unten mehr Padding um jeden Bereich hinzu
- Erhöhe die Lücke zwischen Kartenreihen
Vermeide das Hinzufügen neuer Farben oder Schriftarten.

Mache dieses Layout responsiv:
- Verwende auf Telefonen eine einzige vertikale Spalte und stacke Bereiche
- Verwende auf Tablets zwei Spalten für Karten, wo Platz es zulässt
- Verwende auf Desktops drei oder vier Spalten für Karten
Halte Bilder im Seitenverhältnis 4:3.
Klappe die Sidebar auf kleineren Bildschirmen in ein oberes Menü ein.
Vermeide horizontales Scrollen bei allen Breakpoints.

Designe die Startseite als fokussierte Landing-Page:
- Sauberer Hero-Bereich mit kurzer Überschrift, einem unterstützenden Satz und einem Primary-Call-to-Action
- Folge mit drei wichtigen Vorteilen in Karten
- Füge einen einfachen Social-Proof-Bereich mit Logos hinzu
- Halte die Navigation minimal
Verwende mein bestehendes Farb- und Typografiesystem.

Strukturiere dieses Dashboard um:
- Platziere die Hauptkennzahl oben links in einer prominenten Karte
- Gruppiere verwandte Metriken in einem 2x2-Raster von Karten
- Verschiebe Filter und Datumssteuerungen in eine saubere obere Leiste
- Reduziere visuelles Rauschen in Charts durch konsistente Farben und Stile

Bereinige diese Tabellenansicht:
- Erhöhe die Zeilenhöhe leicht
- Verwende subtile Zeilenseparatoren oder Zebrastreifen
- Richte Aktionen in einer konsistenten Spalte am Ende aus
- Füge einen klaren Empty-Zustand mit einer kurzen Nachricht und Primary-Aktion hinzu

Verbessere diese Detailseite:
- Verschiebe den Haupttitel und Primary-Aktionen nach oben
- Verwende ein Zwei-Spalten-Layout mit Hauptinhalt links und sekundären Infos rechts
- Gruppiere verwandte Felder unter kleinen Überschriften
- Mache destruktive Aktionen klar beschriftet und visuell unterscheidbar

Designe dieses Formular für Klarheit neu:
- Verwende ein einspaltiges Layout
- Gruppiere verwandte Felder unter kurzen Überschriften
- Füge klare Labels und Hilfstexte hinzu, wo nötig
- Zeige Inline-Fehlermeldungen unter jedem Feld, wenn die Validierung fehlschlägt
Verwende mein bestehendes Typografie- und Abstandssystem.

Gib dieser App einen weichen neumorphen Touch:
- Halte die aktuelle Farbpalette
- Füge subtile Schatten zu Karten und Primary-Buttons hinzu
- Vermeide kontrastreiche Hintergründe
- Halte den Textkontrast für Lesbarkeit hoch

Wende einen subtilen Glaseffekt nur auf Overlays und Seitenpanels an:
- Verwende durchscheinende Oberflächen mit Unschärfe und einem dünnen Rahmen
- Halte Hintergründe einfach, damit Text lesbar bleibt
- Behalte starken Textkontrast auf Glasoberflächen bei
Wende Glaseffekte nicht auf alle Karten oder Hauptinhalte an.

Bewege diese App in Richtung eines weichen Material-Stils:
- Verwende klare Kartenerhebung für Schlüsselbereiche
- Bereinige Ausrichtung und Raster, damit Inhalt fluchtet
- Verwende kräftige, flache Farben statt starker Gradienten
- Halte Übergänge subtil und zweckmäßig

Füge wichtigen Komponenten ein leichtes Clay-Gefühl hinzu:
- Runde die Ecken von Karten und Primary-Buttons stärker ab
- Verwende weichere Schatten unter diesen Komponenten
- Halte Hintergründe neutral, damit die App lesbar bleibt
Wende diesen Stil nur auf interaktive Elemente an, nicht auf lange Textbereiche.

Wende ein kontrolliertes Neo-Brutalist-Gefühl auf die Marketing-Seiten an:
- Verwende eine kräftige Akzentfarbe, eine dunkle und eine helle neutrale
- Füge dicke Rahmen und klare Bereiche hinzu
- Mache Überschriften groß und selbstbewusst
- Halte Fließtext hoch lesbar
Wende diesen Stil nicht auf Datentabellen oder dichte Formulare an.

Füge subtile Interaktionen hinzu:
- Lass jede Seite beim Laden mit kurzer Dauer einblenden
- Lass Primary-Buttons beim Hover und Focus sanft wachsen und heller werden
- Füge Karten beim Hover einen kleinen Lift-Effekt hinzu
Respektiere reduzierte Bewegungs-Präferenzen und vermeide schnelles Blinken.

Nur auf Marketing-Seiten:
- Lass Hero-Bereiche beim ersten Laden von der Seite hereinrutschen
- Animiere Icons, wenn eine Funktionskarte fokussiert oder gehovert wird
- Halte Animationen kurz, damit sich die Seite noch schnell anfühlt

Verbessere Feedback-Zustände:
- Füge für jede Hauptliste und jedes Dashboard einen Skeleton-Loader hinzu, der zum Layout passt
- Designe einen Empty-Zustand mit Icon, einzeiliger Erklärung und Primary-Aktion
- Füge einen klaren Fehlerzustand mit kurzer Nachricht und Retry-Button hinzu, wo relevant
Verwende das bestehende Farb- und Typografiesystem.

Ich habe das npm-Paket framer-motion hinzugefügt. Refaktoriere das bestehende Karten-Grid, damit jede Karte beim Hover mit framer-motion animiert:
- Behalte das aktuelle Layout und den Text
- Verwende die bestehenden Farb-Tokens, Eckenradius und Typografie
- Respektiere prefers-reduced-motion und halte Tastatur-Focus-Umrisse klar

Refaktoriere diese Komponenten, damit sie konsistente Tailwind-Klassen verwenden:
- Ersetze Inline-Style-Attribute durch Tailwind-Utilities
- Verwende die Design-Tokens für Farben, Abstand und Typografie
- Dokumentiere die wichtigsten Klassen-Kombinationen für Navigation, Karten und Buttons

Hier ist meine Layout.js-Komponente.
Passe sie an, sodass:
- Der Header beim Scrollen sticky ist
- Der Hauptinhalt eine maximale Breite hat und auf großen Bildschirmen zentriert ist
- Die Hintergrundfarbe das Surface-Token aus meinem Designsystem verwendet
Erkläre in Kommentaren, was du geändert hast.

Überprüfe das Design dieser App aus Performance-Sicht:
- Identifiziere schwere visuelle oder code-bezogene Elemente, die das Laden verlangsamen könnten
- Schlage leichtere Alternativen vor, die das Gesamtbild beibehalten
- Schlage spezifische Stellen vor, an denen Lazy Loading oder Code-Splitting helfen würde

Auditiere diese App auf Farbkontrast:
- Identifiziere Text oder Icons mit niedrigem Kontrast zum Hintergrund
- Stärke den Kontrast, während du die allgemeine Palette beibehältst
- Stelle sicher, dass Primary-Buttons und Links klar unterscheidbar sind
Beschreibe die wichtigsten angewendeten Fixes.

Verbessere die Textlesbarkeit:
- Erhöhe die Basis-Schriftgröße des Fließtexts leicht
- Erhöhe die Zeilenhöhe für Absätze
- Stelle sicher, dass Überschriften klar größer sind als der Fließtext
- Reduziere sehr lange Zeilenlängen auf breiten Bildschirmen

Verbessere Tastatur- und Focus-Barrierefreiheit:
- Stelle sicher, dass alle interaktiven Elemente mit Tab erreichbar sind
- Füge sichtbare Focus-Stile zu Buttons, Links und Formularfeldern hinzu
- Behebe Focus-Reihenfolge-Probleme auf dieser Seite
Beschreibe alle wesentlichen Änderungen, die du vorgenommen hast.

Passe Animationen für Barrierefreiheit an:
- Respektiere die Reduced-Motion-Präferenz des Nutzers
- Entferne oder vereinfache große kontinuierliche Animationen
- Behalte nur kurze, subtile Bewegung, die das Verständnis unterstützt

Verbessere die Barrierefreiheit von Labels und Alt-Text:
- Mache Button- und Link-Labels beschreibender, wo nötig
- Füge Alt-Text für wichtige Bilder hinzu oder verbessere ihn
- Stelle sicher, dass Überschriften einer klaren Struktur folgen
Halte den Ton und die Markenstimme gleich.

Poliere diesen Prototyp:
- Erstelle ein einfaches Farbsystem und wende es in der gesamten App an
- Definiere Typografie-Rollen für Titel, Überschriften und Fließtext
- Standardisiere Buttons und Karten und verwende sie konsistent
Halte Inhalt und Logik gleich.

Bereinige diese Tabellenseite:
- Erhöhe die Zeilenhöhe und füge subtile Zeilenseparatoren hinzu
- Verschiebe Zeilenaktionen in eine konsistente Spalte am Ende
- Füge eine einfache Filterleiste über der Tabelle hinzu
- Füge klare Lade-, Empty- und Fehlerzustände hinzu

Gib dieser App einen sanften visuellen Refresh:
- Halte Markenfarben gleich
- Verbessere Abstand und Hierarchie auf jeder Seite
- Runde Karten- und Button-Ecken leicht ab und mache Schatten weicher
- Füge subtile Hover- und Focus-Zustände zu Primary-Aktionen hinzu

Mache dieses Layout responsiv für Mobile, Tablet und Desktop.
Vermeide horizontales Scrollen und halte Primary-Aktionen ohne übermäßiges Scrollen sichtbar.