Frontend Design

• Erstellen einer neuen UI-Komponente oder Seite, bei der visuelle Qualität und Einzigartigkeit zählen, nicht nur funktionale Korrektheit.
• Prototyping eines Produkts oder einer Landing Page, und du möchtest etwas, das wirklich gestaltet wirkt und nicht automatisch generiert aussieht.
• Erkunden kreativer Richtungen für eine Marke, App oder Kampagne, bevor du dich auf ein Design-System festlegst.
• Ersetzen einer eintönigen oder generischen bestehenden Oberfläche durch etwas mit einem klaren ästhetischen Standpunkt.

• Wenn Sie strikte Marken-/Design-System-Konformität benötigen — diese Skill priorisiert kreative Unverwechselbarkeit und kann von bestehenden Style Guides abweichen.
• Wenn Sie nur ein Backend-API oder eine Datenschicht benötigen — diese Skill konzentriert sich ausschließlich auf Frontend-Präsentationscode.

Bevor eine einzige Zeile Code geschrieben wird, legt der Skill einen klaren konzeptionellen Ton fest – radikal minimalistisch, maximalistisch, organisch, luxuriös, industriell, redaktionell und vieles mehr. Das Ergebnis ist eine Benutzeroberfläche mit einer kohärenten Perspektive, kein generisches Sammelsurium.

Generische Schrift-Stacks (Inter, Roboto, Arial) werden bewusst vermieden – stattdessen kommen ausdrucksstarke Display- und Fließtext-Paarungen zum Einsatz. Farbpaletten verwenden CSS-Variablen mit dominanten Farbtönen und markanten Akzenten, anstatt auf zaghaft gleichmäßig verteilte Schemata zu setzen.

Animationen werden strategisch eingesetzt — orchestrierte Seitenlade-Einblendungen mit gestaffelten Verzögerungen, scroll-ausgelöste Effekte und Hover-Zustände, die überraschen. CSS-only-Lösungen werden für HTML bevorzugt; die Motion-Bibliothek wird für React verwendet, wenn verfügbar.

Hintergründe gehen über einfarbige Flächen hinaus: Gradientenmeshes, Rauschtexturen, geometrische Muster, geschichtete Transparenzen, dramatische Schatten, Körnung-Overlays und dekorative Rahmen werden kontextbezogen eingesetzt, um Tiefe und Atmosphäre zu erzeugen.

Layouts bevorzugen Asymmetrie, Überlappungen, diagonale Führung und gitterbrechende Elemente. Großzügiger Weißraum oder kontrollierte Dichte wird bewusst gewählt – niemals als Standardlösung.

Der generierte Code ist funktional und produktionsreif und unterstützt HTML/CSS/JS, React, Vue und andere Frameworks. Die Komplexität entspricht der ästhetischen Vision – maximalistische Designs umfassen aufwändige Animationen, minimalistische liefern Präzision und Zurückhaltung.

Ein Gründer möchte eine Landingpage, die sich von der Konkurrenz abhebt. Der Skill wählt eine mutige ästhetische Richtung – zum Beispiel einen editorial/magazinartigen Stil mit starker typografischer Hierarchie – und erstellt eine vollständig funktionsfähige Seite mit Scroll-Animationen und einem unverwechselbaren Farbsystem.

Ein Designer oder Entwickler benötigt eine persönliche Website, die seine Persönlichkeit widerspiegelt. Die Fähigkeit Frontend Design vermeidet vorlagenähnliche Strukturen und erstellt etwas Einprägsames – vielleicht mit einem asymmetrischen Layout, einem individuellen Cursor und einer sorgfältig ausgewählten Schriftkombination.

Ein Team benötigt eine datenreiche Interface-Komponente – eine Tabelle, eine Diagrammkarte oder ein Filterpanel – die dennoch gestaltet wirkt. Die Fähigkeit Frontend Design wendet eine utilitaristische oder verfeinert minimalistische Ästhetik mit sorgfältiger Abstände und subtiler Bewegung an, damit die Komponente poliert und durchdacht wirkt.

Eine Kampagnenseite muss immersiv und visuell beeindruckend sein. Der Skill kann eine maximalistische, animationsreiche Seite mit mehrschichtigen visuellen Effekten, dramatischer Typografie und orchestrierten Eingangsanimationen erstellen, die echte Begeisterung erzeugen.