Dieser Skill leitet die Erstellung unverwechselbarer, produktionstauglicher Frontend-Oberflächen an, die generische „KI-Schlonz“-Ä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 gebaut werden soll. Er kann den Zweck, die Zielgruppe oder technische Einschränkungen mitteilen.
Design Thinking
Bevor du programmierst, verstehe den Kontext und verpflichte dich zu einer KLAREN ästhetischen Richtung:
- Zweck: Welches Problem löst diese Oberfläche? Wer nutzt sie?
- Tonfall: Wähle ein Extrem: brutalistisch minimal, maximalistisches Chaos, retro-futuristisch, organisch/natürlich, luxuriös/verfeinert, verspielt/spielzeugartig, redaktionell/magazinartig, brutalistisch/roh, Art-Déco/geometrisch, sanft/pastellig, industriell/zweckmäßig usw. Es gibt so viele Geschmacksrichtungen zur Auswahl. Nutze diese als Inspiration, aber entwerfe eine Richtung, die zur ästhetischen Vision passt.
- Einschränkungen: Technische Anforderungen (Framework, Performance, Barrierefreiheit).
- Abgrenzung: Was macht dieses Design UNVERGESSLICH? Was ist die eine Sache, an die sich jemand erinnern wird?
KRITISCH: Wähle eine klare konzeptionelle Richtung und setze sie mit Präzision um. Kühner Maximalismus und verfeinerter Minimalismus funktionieren beide – der Schlüssel liegt in der Absicht, nicht in der Intensität.
Implementiere dann funktionierenden Code (HTML/CSS/JS, React, Vue, etc.), der:
- Produktionstauglich und funktional ist
- Visuell beeindruckend und einprägsam ist
- Kohärent mit einer klaren ästhetischen Sichtweise ist
- In jedem Detail akribisch verfeinert ist
Frontend-Ästhetik-Richtlinien
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 Schriftarten. Kombiniere eine unverwechselbare Schaufenster-Schrift mit einer verfeinerten Grundschrift.
- Farben & Thema: Verpflichte dich zu einer kohärenten Ästhetik. Verwende CSS-Variablen für Konsistenz. Dominante Farben mit starken Akzenten sind besser als zaghafte, gleichmäßig verteilte Paletten.
- Bewegung: Verwende Animationen für Effekte und Micro-Interaktionen. Bevorzuge reine CSS-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 Micro-Interaktionen. Nutze Scroll-Trigger und Hover-Zustände, die überraschen.
- Räumliche Komposition: Unerwartete Layouts. Asymmetrie. Überlappungen. Diagonaler Fluss. Rasterbrechende Elemente. Großzügiger negativer Raum ODER kontrollierte Dichte.
- Hintergründe & visuelle Details: Erzeuge Atmosphäre und Tiefe, anstatt auf einfarbige Flächen zurückzugreifen. Füge kontextbezogene Effekte und Texturen hinzu, die zur Gesamtästhetik passen. Verwende kreative Formen wie Verlaufsnetze, Rauschtexturen, geometrische Muster, überlagerte Transparenzen, dramatische Schatten, dekorative Rahmen, benutzerdefinierte Cursor und Kornüberlagerungen.
Verwende NIEMALS generische KI-Ästhetik wie übermäßig genutzte Schriftfamilien (Inter, Roboto, Arial, Systemschriften), klischeehafte Farbschemata (insbesondere violette Verläufe auf weißem Hintergrund), vorhersehbare Layouts und Komponentenmuster sowie einheitliches Design 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, unterschiedlichen Ästhetiken. Wennde dich NIEMALS gemeinsamen Entscheidungen zu (z. B. Space Grotesk) über verschiedene Erzeugungen hinweg.
WICHTIG: Passe 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.
Denk daran: Claude ist zu außergewöhnlicher kreativer Arbeit fähig. Halte dich nicht zurück, zeige, was wirklich geschaffen werden kann, wenn man über den Tellerrand schaut und sich voll und ganz einer unverwechselbaren Vision verschreibt.