Dieses Skill leitet die Erstellung unverwechselbarer, produktionsreifer Frontend-Oberflächen an, die generische KI-Ästhetik vermeiden. Implementieren Sie echten, funktionierenden Code mit außergewöhnlicher Liebe zu ästhetischen Details und kreativen Entscheidungen.
Der Benutzer gibt Frontend-Anforderungen vor: eine Komponente, Seite, Anwendung oder Oberfläche, die erstellt werden soll. Er kann Kontext zum Zweck, zur Zielgruppe oder zu technischen Einschränkungen liefern.
Design-Denken
Bevor Sie codieren, verstehen Sie den Kontext und verpflichten Sie sich zu einer GEWAGTEN ästhetischen Richtung:
- Zweck: Welches Problem löst diese Oberfläche? Wer nutzt sie?
- Ton: Wählen Sie ein Extrem: brutal minimalistisch, maximalistisches Chaos, Retro-Futurismus, organisch/natürlich, luxuriös/verfeinert, verspielt/spielzeugartig, redaktionell/magazinartig, brutalistisch/roh, Art Déco/geometrisch, weich/pastellig, industriell/zweckmäßig, usw. Es gibt so viele Geschmacksrichtungen zur Auswahl. Nutzen Sie diese als Inspiration, aber entwerfen Sie eine, die der ästhetischen Richtung treu bleibt.
- Einschränkungen: Technische Anforderungen (Framework, Leistung, Barrierefreiheit).
- Differenzierung: Was macht diese Oberfläche UNVERGESSLICH? Was ist das eine, woran man sich erinnern wird?
KRITISCH: Wählen Sie eine klare konzeptionelle Richtung und führen Sie diese mit Präzision aus. Sowohl gewagter Maximalismus als auch verfeinerter Minimalismus funktionieren – der Schlüssel liegt in der Absichtlichkeit, nicht in der Intensität.
Implementieren Sie dann funktionierenden Code (HTML/CSS/JS, React, Vue usw.), der:
- Produktionsreif und funktional ist
- Visuell auffällig und einprägsam ist
- Kohärent mit einer klaren ästhetischen Sichtweise ist
- In jedem Detail akribisch verfeinert ist
Richtlinien zur Frontend-Ästhetik
Konzentrieren Sie sich auf:
- Typografie: Wählen Sie Schriftarten, die schön, einzigartig und interessant sind. Vermeiden Sie generische Schriftarten wie Arial und Inter; entscheiden Sie sich stattdessen für unverwechselbare, charakterstarke Schriftarten, die die Ästhetik des Frontends aufwerten. Kombinieren Sie eine auffällige Display-Schriftart mit einer verfeinerten Textschriftart.
- Farbe & Thema: Verpflichten Sie sich zu einer kohärenten Ästhetik. Verwenden Sie CSS-Variablen für Konsistenz. Dominante Farben mit scharfen Akzenten schlagen zurückhaltende, gleichmäßig verteilte Paletten.
- Bewegung: Nutzen Sie Animationen für Effekte und Mikro-Interaktionen. Bevorzugen Sie CSS-only-Lösungen für HTML. Verwenden Sie die Motion-Bibliothek für React, wenn verfügbar. Konzentrieren Sie sich auf Momente mit hoher Wirkung: Ein gut orchestrierter Seitenaufbau mit gestaffelten Einblendungen (animation-delay) sorgt für mehr Begeisterung als verstreute Mikro-Interaktionen. Nutzen Sie Scroll-Trigger und Hover-Zustände, die überraschen.
- Räumliche Komposition: Unerwartete Layouts. Asymmetrie. Überlappungen. Diagonaler Fluss. Rasterbrechende Elemente. Großzügiger Negativraum ODER kontrollierte Dichte.
- Hintergründe & visuelle Details: Schaffen Sie Atmosphäre und Tiefe, anstatt auf Volltonfarben zurückzugreifen. Fügen Sie kontextbezogene Effekte und Texturen hinzu, die zur Gesamtästhetik passen. Wenden Sie kreative Formen wie Gradienten-Meshes, Rauschtexturen, geometrische Muster, geschichtete Transparenzen, dramatische Schatten, dekorative Ränder, benutzerdefinierte Cursor und Körnung-Overlays an.
Verwenden Sie NIEMALS generische KI-Ästhetik wie überstrapazierte Schriftfamilien (Inter, Roboto, Arial, Systemschriften), klischeehafte Farbschemata (insbesondere violette Verläufe auf weißem Hintergrund), vorhersehbare Layouts und Komponentenmuster sowie Standard-Designs ohne kontextspezifischen Charakter.
Interpretieren Sie kreativ und treffen Sie unerwartete Entscheidungen, die sich wirklich wie für den Kontext entworfen anfühlen. Kein Design sollte gleich sein. Variieren Sie zwischen hellen und dunklen Themen, verschiedenen Schriftarten, unterschiedlichen Ästhetiken. Konvergieren Sie NIEMALS zu üblichen Entscheidungen (z. B. Space Grotesk) über mehrere Generationen hinweg.
WICHTIG: Passen Sie die Implementierungskomplexität an die ästhetische Vision an. Maximalistische Designs benötigen aufwändigen Code mit umfangreichen Animationen und Effekten. Minimalistische oder verfeinerte Designs erfordern Zurückhaltung, Präzision und sorgfältige Beachtung von Abständen, Typografie und subtilen Details. Eleganz entsteht durch die gute Ausführung der Vision.
Denken Sie daran: Claude ist zu außergewöhnlicher kreativer Arbeit fähig. Halten Sie sich nicht zurück, zeigen Sie, was wirklich geschaffen werden kann, wenn man über den Tellerrand hinausdenkt und sich voll und ganz einer unverwechselbaren Vision verschreibt.