anti-slop-design
Create distinctive, production-grade frontend interfaces that avoid generic AI aesthetics. Use when building web components, game UIs, landing pages, dashboards, or any visual web interface. Prevents purple-gradient-rounded-corner-Inter-font syndrome.
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Create distinctive, production-grade frontend interfaces that avoid generic AI aesthetics. Use when building web components, game UIs, landing pages, dashboards, or any visual web interface. Prevents purple-gradient-rounded-corner-Inter-font syndrome.
How to use
Zdefiniuj kontekst swojego projektu: jaki problem rozwiązuje interfejs, kto go będzie używać (gracze, deweloperzy, użytkownicy ogólni) i jaki ton wizualny chcesz osiągnąć — wybierz jeden wyraźny styl (brutalizm, retrofuturyzm, luksus, neon lat 80., japońska minimalizm itp.).
Wybierz unikalne fonty zamiast domyślnych — poszukaj w Google Fonts pary złożonej z fontu wyświetlającego i tekstowego, każdy projekt powinien mieć inną kombinację.
Stwórz paletę kolorów z jednym kolorem dominującym i wyrazistym akcentem, unikając równomiernego rozkładu — przechowuj kolory w zmiennych CSS dla spójności.
Zaprojektuj asymetryczną, dynamiczną kompozycję: łam regularną siatkę, dodaj nachylenia, nakładanie się elementów, nierówne marginesy — unikaj centrowania wszystkiego.
Wzbogać tło i detale: zamiast jednolitego koloru użyj gradientu mesh, tekstury szumu, wzorów geometrycznych, warstw z przezroczystością i cieniami dającymi głębię.
Dodaj ruchy i interakcje: animacje CSS przy ładowaniu strony (ujawnianie elementów ze staggerem), efekty na hover i scroll — dla gier rozważ dźwięki i responsywność na urządzenia mobilne.