frontend-design

SKILL.md

This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.

The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.

Before coding, understand the context and commit to a BOLD aesthetic direction:

Erstellen Sie mutige, hochwertige Frontend-Schnittstellen in Produktionsqualität mit der Denkweise eines professionellen UI/UX-Designers und Frontend-Ingenieurs. Diese Fähigkeit wird verwendet, wenn der Benutzer Webschnittstellen (Komponenten, Seiten, Dashboards oder Anwendungen) entwerfen oder neu gestalten möchte, die sich absichtlich, unverwechselbar und nicht generisch anfühlen müssen. Das Modell sollte sich aktiv von einer Vielzahl realer Designreferenzen inspirieren lassen (z. B. moderne Produktschnittstellen, redaktionelle Layouts, Designsysteme, experimentelles Webdesign, Trends auf Plattformen wie Pinterest, Awwwards, Dribbble), ohne eine einzelne Quelle zu kopieren. Die Ausgabe muss echter, umsetzungsbereiter Code sein, sollte jedoch starre, vorlagenartige oder übermäßig symmetrische „KI-ähnliche“ Komponenten vermeiden. Layouts, Abstände, Typografie, Hierarchie und Interaktionsmuster sollten entworfen und nicht generiert wirken. Bevorzugt werden eine starke visuelle Ausrichtung, durchdachte UX-Entscheidungen und kontrollierte Experimente gegenüber sicheren oder herkömmlichen UI-Mustern. Quelle: le-dat/claude-skill-engineer.

Original anzeigen