Strona zrobiona z AI? Dlaczego kod po piątej poprawce zamienia się w chaos

W skrócie: narzędzia AI w kilka minut budują stronę, która na pierwszy rzut oka wygląda profesjonalnie. Problem zaczyna się przy zmianach. Przy każdym nowym poleceniu AI woli dodać coś nowego, niż uporządkować to, co już jest: nową klasę CSS dla tego samego przycisku, kolejną regułę nadpisującą starą, jeszcze jedno !important. Po kilku rundach jeden przycisk ma cztery klasy i trzy sprzeczne kolory. Strona nadal wygląda dobrze, ale każda kolejna zmiana psuje coś w innym miejscu.

Sam używam AI jako narzędzia i często naprawdę pomaga. Właśnie dlatego codziennie widzę jej granice. Coraz częściej przychodzą klienci ze stroną, którą zbudowali sami „z ChatGPT” albo w kreatorze AI. Pierwsza wersja powstała szybko. Potem przyszły zmiany. A w końcu zdanie: „Zmieniłem tylko kolor przycisku, a na telefonie zniknęło menu”.

Skąd przycisk ma cztery klasy

Typowy przebieg, taki jak widzę w projektach:

1. Pierwsza wersja: „Zrób mi niebieski przycisk”. AI tworzy .btn-primary.
2. Zmiana 1: „Przycisk ma być bardziej zaokrąglony”. Zamiast zmienić .btn-primary, dochodzi .btn-rounded.
3. Zmiana 2: „Na stronie głównej większy”. Nowa klasa .hero-btn z własnym kolorem, żeby „na pewno zadziałało”.
4. Zmiana 3: „Kolor nie pasuje do logo”. AI zmienia kolor w .btn-primary, ale .hero-btn go nadpisuje. Więc tworzy kolejną klasę .cta-main z !important, żeby nowy kolor „na pewno wygrał”.
5. Zmiana 4: „Na telefonie przycisk ma mieć pełną szerokość”. Nowe media query, które jeszcze raz dotyka dwóch z tych klas, znowu z !important.

Na końcu wygląda to tak:

<a class="btn-primary btn-rounded hero-btn cta-main" href="/kontakt">Zapytaj</a>

.btn-primary { background: #1a5cff; border-radius: 4px; }
.btn-rounded { border-radius: 24px; }
.hero-btn    { background: #2563eb; padding: 18px 32px; }
.cta-main    { background: #0f4fd8 !important; }
@media (max-width: 600px) {
  .hero-btn, .btn-primary { display: block; width: 100% !important; }
}

Cztery klasy, trzy odcienie niebieskiego, dwa razy !important. Który niebieski obowiązuje? Ten z !important. Czy ktoś będzie to wiedział, gdy za pół roku zechce zmienić kolor? Nie. AI zresztą też nie będzie tego wiedzieć następnym razem, bo zwykle widzi tylko fragment, który akurat jej Państwo pokazują.

Dlaczego AI tak działa

• Optymalizuje pod „działa teraz”. Najszybszy sposób, żeby zmiana była widoczna, to nowa, silniejsza reguła. Sprzątanie to więcej pracy i nikt o nie nie prosi.
• Nie zna całości. Przy dłuższych projektach widzi tylko część plików. Często nie wie, że .btn-primary już istnieje.
• Chce przytakiwać. Dostarcza to, o co poproszono, i rzadko dopytuje, czy problem nie leży gdzie indziej.
• Niechętnie usuwa. Stary kod zostaje, „gdyby jeszcze był potrzebny”. Plik CSS rośnie z każdą rundą.

Jak rozpoznać chaos

Nie trzeba umieć programować. Wystarczy otworzyć stronę w przeglądarce, kliknąć prawym przyciskiem na przycisk i wybrać „Zbadaj”. W Safari trzeba najpierw włączyć w ustawieniach funkcje dla programistów.

• Po prawej widać reguły CSS. Wiele przekreślonych linii oznacza reguły nadpisywane przez inne.
• Dużo !important to znak, że reguły walczą ze sobą.
• Element z czterema, pięcioma i więcej klasami do prostego zadania.
• Podobne, ale nie identyczne kolory, odstępy i rozmiary czcionek na różnych podstronach.
• Plik CSS, który przy małej stronie ma tysiące linii.

Ile to kosztuje

Dopóki nikt nie chce niczego zmieniać, nic. Problem pojawia się, gdy strona ma rosnąć: nowe podstrony, sklep, druga wersja językowa. Wtedy ktoś musi zrozumieć, co obowiązuje, zanim zbuduje coś nowego. Często sprzątanie trwa dłużej niż porządne napisanie od nowa tych części. Do tego dochodzi czas ładowania, bo nawet nieużywany CSS przeglądarka musi pobrać i przetwarzać przy każdym wyświetleniu strony.

Przy kodzie PHP skutki są poważniejsze, bo chodzi o dane i bezpieczeństwo. Siedem typowych błędów opisuję w artykule Kod PHP z AI: 7 kosztownych błędów. Dlaczego wiele stron z AI wygląda tak samo, wyjaśniam w Strony z AI wszystkie wyglądają tak samo.

Jak zrobić to lepiej

• System zamiast pojedynczych łatek. Kolory, odstępy i czcionki ustala się raz jako zmienne. Przycisk to jedna klasa z kilkoma jasnymi wariantami.
• Zmieniać zamiast dopisywać. Kto zmienia kolor, zmienia zmienną, a nie dziesiąty wyjątek.
• Człowiek, który zna całość. AI pisze kod szybciej. Ale o tym, co pasuje do systemu i co można usunąć, musi decydować ktoś, kto ogarnia cały projekt.
• AI jako narzędzie, nie architekt. Do pojedynczych zadań jest świetna. Odpowiedzialności za kod za Państwa nie weźmie.

Pomoc w sprzątaniu

Mają Państwo stronę zbudowaną z AI i każda zmiana to loteria? Przejrzę kod i uczciwie powiem, czy opłaca się sprzątać, czy lepiej przebudować wybrane części. Więcej o stronach, które da się utrzymać latami, w usłudze WordPress na miarę i w cenniku.