Dieses Skill führt die Erstellung unverwechselbarer, produktionsreifer Frontend-Oberflächen an, die die generische „KI-Einheitsästhetik“ vermeiden. Implementieren Sie echten, funktionierenden Code mit außergewöhnlicher Liebe zu ästhetischen Details und kreativen Entscheidungen.
Der Benutzer gibt die Frontend-Anforderungen an: eine zu erstellende Komponente, Seite, Anwendung oder Schnittstelle. Er kann dabei Kontext zum Zweck, zur Zielgruppe oder zu technischen Einschränkungen liefern.
Design Thinking
Bevor Sie mit dem Programmieren beginnen, verstehen Sie den Kontext und legen Sie eine KLARE ästhetische Richtung fest:
- Zweck: Welches Problem löst diese Schnittstelle? Wer nutzt sie?
- Ton: Wählen Sie ein Extrem: brutal minimalistisch, maximalistisches Chaos, retro-futuristisch, 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. Lassen Sie sich davon inspirieren, entwerfen Sie aber eine Richtung, die der Ästhetik treu bleibt.
- Einschränkungen: Technische Anforderungen (Framework, Leistung, Barrierefreiheit).
- Abgrenzung: Was macht diese Arbeit UNVERGESSLICH? Was ist das eine, woran man sich erinnern wird?
KRITISCH: Wählen Sie eine klare konzeptionelle Richtung und setzen Sie diese präzise um. Sowohl kühner Maximalismus als auch verfeinerter Minimalismus funktionieren – der Schlüssel ist Zielstrebigkeit, nicht 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 einem klaren ästhetischen Standpunkt 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 Optionen, die die Ästhetik des Frontends aufwerten; unerwartete, charaktervolle Schriftarten. Kombinieren Sie eine unverwechselbare Auszeichnungsschrift mit einer verfeinerten Grundschrift.
- Farbe & Design: Bleiben Sie einer kohärenten Ästhetik treu. Verwenden Sie CSS-Variablen für Konsistenz. Dominante Farben mit scharfen Akzenten sind besser als zurückhaltende, gleichmäßig verteilte Paletten.
- Bewegung: Verwenden Sie Animationen für Effekte und Mikrointeraktionen. 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 Freude als verstreute Mikrointeraktionen. Verwenden Sie Scroll-Auslöser und Hover-Zustände, die überraschen.
- Räumliche Komposition: Unerwartete Layouts. Asymmetrie. Überlappungen. Diagonale Flussrichtung. Gitterbrechende Elemente. Großzügiger Negativraum ODER kontrollierte Dichte.
- Hintergründe & visuelle Details: Schaffen Sie Atmosphäre und Tiefe, anstatt standardmäßig Volltonfarben zu verwenden. Fügen Sie kontextbezogene Effekte und Texturen hinzu, die zur Gesamtästhetik passen. Wenden Sie kreative Formen an, wie z. B. Verlaufsnetze, Rauschtexturen, geometrische Muster, geschichtete Transparenzen, dramatische Schatten, dekorative Ränder, benutzerdefinierte Cursor und Kornüberlagerungen.
Verwenden Sie NIEMALS generische KI-generierte Ästhetiken wie übermäßig genutzte Schriftfamilien (Inter, Roboto, Arial, Systemschriftarten), klischeehafte Farbschemata (insbesondere lila Farbverläufe auf weißem Hintergrund), vorhersehbare Layout- und Komponentenmuster sowie Standarddesigns, denen der kontextspezifische Charakter fehlt.
Interpretieren Sie kreativ und treffen Sie unerwartete Entscheidungen, die sich so anfühlen, als wären sie wirklich für den Kontext entworfen worden. Kein Design sollte gleich sein. Variieren Sie zwischen hellen und dunklen Themen, verschiedenen Schriftarten, unterschiedlichen Ästhetiken. Konvergieren Sie NIEMALS zu gängigen Entscheidungen (wie Space Grotesk) über verschiedene 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 Umsetzung 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.