Dieser Skill leitet die Erstellung unverwechselbarer, produktionsreifer Frontend-Oberflächen an, die generische „KI-Schludge“-Ästhetik vermeiden. Implementiere echten, funktionierenden Code mit außergewöhnlicher Liebe zu ästhetischen Details und kreativen Entscheidungen.
Der Nutzer gibt Frontend-Anforderungen vor: eine Komponente, Seite, Anwendung oder Oberfläche, die erstellt werden soll. Dabei kann er Kontext zu Zweck, Zielgruppe oder technischen Einschränkungen liefern.
Designdenken
Bevor du codierst, verstehe den Kontext und verpflichte dich zu einer gewagten ästhetischen Richtung:
- Zweck: Welches Problem löst diese Oberfläche? Wer nutzt sie?
- Ton: Wähle ein Extrem: brutalistisch-minimal, maximalistisches Chaos, Retro-Futuristisch, organisch/natürlich, luxuriös/verfeinert, verspielt/spielzeugartig, redaktionell/magazinartig, brutalistisch/roh, Art Deco/geometrisch, sanft/pastellig, industriell/zweckmäßig usw. Es gibt viele Geschmacksrichtungen zur Auswahl. Nutze sie zur Inspiration, gestalte aber eine, die der ästhetischen Richtung treu ist.
- Einschränkungen: Technische Anforderungen (Framework, Performance, Barrierefreiheit).
- Differenzierung: Was macht das UNVERGESSLICH? Was ist die eine Sache, an die man sich erinnern wird?
KRITISCH: Wähle eine klare konzeptuelle Richtung und führe sie mit Präzision aus. Sowohl kühner Maximalismus als auch verfeinerter Minimalismus funktionieren – der Schlüssel liegt in der Absicht, nicht in der Intensität.
Implementiere dann funktionierenden Code (HTML/CSS/JS, React, Vue usw.), der:
- Produktionsreif und funktional ist
- Visuell beeindruckend und einprägsam ist
- Kohärent mit einem klaren ästhetischen Standpunkt ist
- In jedem Detail akribisch verfeinert ist
Richtlinien zur Frontend-Ästhetik
Konzentriere dich auf:
- Typografie: Wähle Schriftarten, die schön, einzigartig und interessant sind. Vermeide generische Schriftarten wie Arial und Inter; entscheide dich stattdessen für unverwechselbare Optionen, die die Ästhetik des Frontends aufwerten; unerwartete, charaktervolle Schriftwahl. Kombiniere eine unverwechselbare Display-Schrift mit einer verfeinerten Textschrift.
- Farbe & Design: Verpflichte dich zu einer kohärenten Ästhetik. Verwende CSS-Variablen für Konsistenz. Dominante Farben mit scharfen Akzenten sind besser als zurückhaltende, gleichmäßig verteilte Paletten.
- Bewegung: Nutze Animationen für Effekte und Mikro-Interaktionen. Bevorzuge CSS-only-Lösungen für HTML. Verwende die Motion-Bibliothek für React, wenn verfügbar. Konzentriere dich auf wirkungsvolle Momente: ein gut orchestrierter Seitenaufbau mit gestaffelten Einblendungen (animation-delay) sorgt für mehr Freude als verstreute Mikro-Interaktionen. Nutze Scroll-Trigger und Hover-Zustände, die überraschen.
- Räumliche Komposition: Unerwartete Layouts. Asymmetrie. Überlappung. Diagonaler Fluss. Gittermuster durchbrechende Elemente. Großzügiger Negativraum ODER kontrollierte Dichte.
- Hintergründe & visuelle Details: Schaffe Atmosphäre und Tiefe, anstatt auf einfarbige Hintergründe zurückzugreifen. Füge kontextuelle Effekte und Texturen hinzu, die zur Gesamtästhetik passen. Wende kreative Formen an wie Verlaufsnetze, Rauschtexturen, geometrische Muster, überlagerte Transparenzen, dramatische Schatten, dekorative Ränder, benutzerdefinierte Cursor und Kornüberlagerungen.
Verwende NIEMALS generische KI-Ästhetiken wie übermäßig genutzte Schriftfamilien (Inter, Roboto, Arial, Systemschriften), abgedroschene Farbschemata (insbesondere lila Farbverläufe auf weißem Hintergrund), vorhersehbare Layouts und Komponentenmuster sowie Standarddesign ohne kontextspezifischen Charakter.
Interpretiere kreativ und triff unerwartete Entscheidungen, die sich wirklich für den Kontext entworfen anfühlen. Kein Design sollte gleich sein. Variiere zwischen hellen und dunklen Themen, verschiedenen Schriftarten, verschiedenen Ästhetiken. Konvergiere NIEMALS auf häufige Entscheidungen (z. B. Space Grotesk) über verschiedene Generationen hinweg.
WICHTIG: Stimme die Implementierungskomplexität auf die ästhetische Vision ab. Maximalistische Designs benötigen aufwendigen 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.
Denke daran: Claude ist zu außergewöhnlicher kreativer Arbeit fähig. Halte dich nicht zurück, zeige, was wirklich erschaffen werden kann, wenn man über den Tellerrand hinausdenkt und sich voll und ganz einer unverwechselbaren Vision verschreibt.
Aufgabenorientierter Design-Workflow
Lese den vollständigen Design-Workflow für Monitor/Operate/Author-Klassifikation, Kontextrecherche, Varianten, Zustände und Validierung. In bestehenden Produkten haben deren Designsystem und die Nutzeraufgabe Vorrang vor der obigen ästhetischen Erkundung: Erzwinge keine ungewöhnlichen Schriftarten, Überlappungen, dekorativen Hintergründe oder Marketing-Kompositionen in betrieblichen Oberflächen. Verwende die verfügbaren Browser- und Dateiwerkzeuge, nicht ein bestimmtes Modellprodukt. Optionale Referenzkataloge sind prismer-popular-web-designs und prismer-design-md; lade sie nur für die vom Nutzer angeforderte Aufgabe.