Prompt · materiał ze szkolenia
Strona, która nie wygląda jak z AI.
01 · Definicja
Czym jest AI slop.
AI slop to strona albo tekst, który wygląda poprawnie, ale nijako, jak tysiąc innych. Nikt nie podjął przy nim decyzji, więc model podjął je sam i wybrał to, co najczęstsze.
Anthropic nazywa to zjawisko distributional convergence. Model bez wskazówek sięga po najbezpieczniejsze, najczęściej spotykane wzorce z danych treningowych: font Inter, fioletowe gradienty na białym tle, przewidywalne układy. Anthropic, 12.11.2025.
Adam Wathan, twórca Tailwinda, żartem przeprosił w 2025 roku za kolor bg-indigo-500 w Tailwind UI, bo przez niego tyle interfejsów z AI wychodzi w odcieniach indygo.
02 · Sygnały
Po czym poznać stronę bez decyzji.
W designie
- Fioletowo-niebieski gradient, gradient na tekście, neonowa poświata, efekt matowego szkła (glassmorphism).
- Jeden font na wszystko, najczęściej Inter albo Poppins, bez żadnej decyzji typograficznej.
- Wszystko wyśrodkowane, sekcja po sekcji.
- 3 identyczne karty w rzędzie, a w nich kolejne karty.
- Duże ikony w kółkach nad nagłówkami, emoji zamiast ikon.
- Te same zaokrąglenia i obramowania na każdym elemencie.
- Mały napis wersalikami nad każdym nagłówkiem tylko dlatego, że tak wygląda szablon.
- Plastikowe ilustracje AI i zdjęcia stockowe zamiast prawdziwych ludzi i miejsc.
- Kilka efektów WOW naraz i animacje w pętli.
- Ten sam układ co wszędzie: hero, 3 karty, opinie, CTA.
W tekście
- Przesadne podkreślanie wagi: „przełomowy moment”, „kluczowe znaczenie”.
- Język reklamowy: „kompleksowe rozwiązania”, „przenieś na wyższy poziom”, a po angielsku „Elevate”, „Unlock”, „Seamless”.
- „W dzisiejszym dynamicznym świecie” na początku akapitu.
- Konstrukcja „nie tylko X, ale także Y” w co drugim zdaniu.
- Ogólniki typu „eksperci wskazują” bez nazwiska i źródła.
- Długie myślniki wstawiane tam, gdzie wystarczy kropka albo przecinek.
- Okrągłe liczby bez źródła, logotypy „zaufali nam” bez pokrycia, lorem ipsum.
- Nagłówki, które pasują do każdej firmy, np. „Zmień swój biznes”.
Sygnały w tekście opieram na liście Wikipedii „Signs of AI writing” (po angielsku). Polskie przykłady są moje.
03 · Zasada
Inter to nie grzech, grzech to brak decyzji.
Pojedynczy element nie robi jeszcze slopu. Inter, gradient czy jeden font mogą być świadomym wyborem. Ta strona też używa Inter do tekstu.
Problem zaczyna się przy klastrze sygnałów albo wtedy, gdy coś przeszkadza odwiedzającemu: nieczytelny tekst, przycisk, którego nie widać, animacja, która spowalnia stronę. Dlatego prompt niżej zaczyna od decyzji, nie od listy zakazów.
04 · Metoda
8 kroków, jak dać AI smak.
- 01
Jeden kierunek i jeden element-sygnatura
Zanim AI napisze pierwszą linijkę, opisz kierunek w jednym zdaniu (np. „jasno, papier i drewno, spokojne tempo”) i wybierz jedną rzecz, którą odwiedzający zapamięta.
- 02
Jeden wyrazisty font nagłówkowy
Z Fontshare albo Google Fonts, z polskimi znakami (subset latin-ext). Do treści spokojny, czytelny font. Dwa fonty wystarczą.
- 03
Ograniczona paleta
Tło, tekst i 1 kolor akcentu, zapisane jako zmienne CSS. AI nie dopisuje wtedy nowego koloru w każdej sekcji.
- 04
Prawdziwe zdjęcia
Najpierw własne z telefonu, potem Unsplash albo Pexels. Grafika z AI tylko wtedy, gdy ma konkretną rolę i nie udaje prawdziwego miejsca.
- 05
Asymetria i rytm
Sąsiednie sekcje mają różny układ: zdjęcie z lewej, lista z prawej, szeroki cytat, tabela. Nie hero, 3 karty, opinie i CTA.
- 06
Konkretne liczby i własny język
„6 pokoi, 25 minut od Olsztyna” zamiast „wyjątkowe miejsce”. Słowa klientów z maili i rozmów zamiast słów z reklam.
- 07
Jedno zaplanowane wejście strony
Jedna dopracowana animacja przy wejściu zamiast drobnych efektów przy każdym przewinięciu. Z obsługą prefers-reduced-motion dla osób, które wyłączyły animacje w systemie.
- 08
Zakazy wprost w prompcie
Napisz, czego nie chcesz: „bez fioletu, bez 3 kart w rzędzie, bez emoji”. Bez zakazów model wraca do średniej.
05 · Prompt
Najpierw decyzje, potem kod.
Prompt anty AI-slop
Kierunek, zakazy i kontrola na koniec
Model najpierw proponuje kierunek, font, paletę i układ sekcji. Kod pisze dopiero po Twojej akceptacji, a na koniec sam sprawdza zakazy.
Budujesz stronę dla prawdziwej firmy. Twoim zadaniem jest podjąć decyzje projektowe, a nie wybrać najbezpieczniejszą średnią z internetu. Jeśli strona pasowałaby do dowolnej innej firmy, to znaczy, że decyzji zabrakło. KONTEKST Firma: [co robisz, gdzie i dla kogo] Cel strony: [jedno działanie, np. zapytanie o wolny termin] Jak ma się czuć odwiedzający: [3 słowa] Materiały, które mam: [zdjęcia, logo, opinie, liczby] ZANIM NAPISZESZ KOD, odpowiedz krótko: 1. Kierunek art direction w 1 zdaniu (np. "jasno, papier i drewno, spokojne tempo"). 2. Element-sygnatura: 1 rzecz, którą odwiedzający zapamięta. 3. Font nagłówkowy (1, wyrazisty) i font do treści. Oba darmowe, z polskimi znakami. Przy Google Fonts użyj subsetu latin-ext. Jeśli wybierasz bardzo popularny font (np. Inter), uzasadnij to w 1 zdaniu. 4. Paleta: tło, tekst, tekst pomocniczy i 1 kolor akcentu. Kolory w HEX, zapisane jako zmienne CSS. 5. Kolejność sekcji i układ każdej z nich w 1 linijce. Sąsiednie sekcje mają różny układ. Poczekaj, aż zatwierdzę te decyzje. WYMAGANIA - Kolory, fonty, odstępy i zaokrąglenia tylko ze zmiennych CSS. - Prawdziwe zdjęcia z moich materiałów. Jeśli ich brakuje, zostaw opisane miejsce na zdjęcie (co ma być w kadrze, jakie proporcje) zamiast generować ilustrację. - Asymetria tam, gdzie ma sens: tekst i zdjęcie nie zawsze w dwóch równych kolumnach, nie wszystko wyśrodkowane. - Konkretne liczby i nazwy z moich materiałów. Jeśli liczby nie ma, wpisz [DO UZUPEŁNIENIA] zamiast ją wymyślać. - Jedno zaplanowane wejście strony, np. hero pojawia się w 600 ms. Żadnych animacji w pętli. Uszanuj prefers-reduced-motion. - Nagłówki krótkie, w języku klienta. Przycisk mówi, co się stanie po kliknięciu. - Przyciski min. 48 px wysokości, pola formularza z czcionką min. 16 px, główny przycisk widoczny na pierwszym ekranie telefonu. ZAKAZY - fioletowo-niebieskie gradienty, gradient na tekście, neonowa poświata, glassmorphism - emoji jako ikony, ikony w kółkach nad nagłówkami - 3 identyczne karty w rzędzie, karty w kartach - wyśrodkowanie wszystkiego, ten sam duży radius na każdym elemencie - zwroty: "kompleksowe rozwiązania", "w dzisiejszym dynamicznym świecie", "przenieś na wyższy poziom", "nie tylko..., ale także...", "Elevate", "Unlock", "Seamless" - długie myślniki w tekście (zamiast nich kropka, przecinek albo zwykły łącznik) - wymyślone opinie, logotypy klientów, statystyki i nagrody KONTROLA NA KONIEC Przejdź po gotowej stronie i wypisz, które zakazy złamałeś. Popraw je, zanim oddasz kod. Jeśli coś zostawiłeś świadomie, napisz dlaczego.
Źródła
Następny krok