Projektowanie stron www z AI: pięć bramek przed budową

Projektowanie stron www z AI potrafi dziś, w czasie potrzebnym na zaparzenie kawy, dostarczyć wiarygodną stronę główną. Ta szybkość jest prawdziwa i właśnie w niej tkwi pułapka. Wygenerowana strona wygląda na skończoną znacznie wcześniej, niż jest, a niedokończone elementy (kontrast, kolejność nagłówków, lustrzane układy, dyscyplina tokenów) to dokładnie te rzeczy, które klient odkrywa trzy tygodnie po starcie. Poniżej opisujemy sekwencję, której używamy, by zachować szybkość i pozbyć się niespodzianek: pięć bramek w kolejności, każda z wyraźnym zaliczeniem lub niezaliczeniem.

Dlaczego wygenerowana strona wygląda na gotową, choć nie jest?

Ponieważ model optymalizuje to, co widać na zrzucie ekranu: sekcję bohatera, trzy karty funkcji, rząd opinii i stopkę. Każdy z tych elementów jest statystycznie znajomy, więc cała strona na pierwszy rzut oka wygląda profesjonalnie. Tego, czego zrzut ekranu nie pokaże, a co decyduje o tym, czy strona przetrwa przekazanie klientowi, po prostu nie widać.

Weźmy dostępność. Raport WebAIM Million 2026 wykrył błędy WCAG 2 na 95,9% stron głównych z miliona najpopularniejszych witryn, a tekst o niskim kontraście na 83,9% z nich. Model wytrenowany na tej sieci odtwarza tę sieć. Z pełnym przekonaniem poda ci jasnoszary podpis na kremowym tle.

Drugi niewidoczny problem to miejsce, w którym żyją decyzje projektowe. Wygenerowana strona zwykle niesie kolory, rozmiary i odstępy jako dosłowne wartości rozrzucone po kodzie. Gdy w przyszłym kwartale zmieni się niebieski marki, trzeba szukać po czterdziestu blokach. To rachunek za utrzymanie, a płaci go wykonawca, nie model.

Dlatego użyteczne pytanie nie brzmi: „czy AI zaprojektuje tę stronę?". Narzędzie potrafi wyprodukować szkic. Pytanie brzmi: które decyzje pozwalam mu podejmować i gdzie sprawdzam jego pracę. Odpowiadają na nie właśnie te pięć bramek.

Brama pierwsza: napisz brief, zanim otworzysz narzędzie

Większość rozczarowujących wyników sięga jednozdaniowego promptu. „Strona dla piekarni w Casablance" daje modelowi pełną swobodę: odbiorcę, ton, listę podstron, wezwania do działania. Wymyśli je ze średniej wszystkich stron piekarni, jakie widział.

Brief, który działa, mieści się na pół strony. Kto odwiedza stronę i po co przyszedł w pierwszych dziesięciu sekundach. Trzy podstrony, które muszą istnieć. Jedna akcja, dla której strona istnieje: rezerwacja, telefon albo zamówienie. Dwie strony, które klient podziwia, i jedna, której nie znosi. Języki, włącznie z kierunkiem pisma. Jeśli serwis ma działać po arabsku lub hebrajsku, powiedz to teraz, a nie po zatwierdzeniu układu.

Ta ostatnia informacja waży więcej, niż się wydaje. Kierunek pisma od prawej do lewej to właściwość układu, a nie zadanie tłumaczeniowe. Model, któremu nic o tym nie powiedziano, da projekt wyrównany do lewej z wklejonym arabskim tekstem. Podanie kierunku w briefie zmienia to, jakie układy narzędzie proponuje, i kosztuje jedno zdanie.

Dobrze napisany brief ma jeszcze jedną zaletę: staje się kryterium odbioru. Gdy klient wraca z uwagami, sprawdzasz je wobec tych samych punktów, a nie wobec nastroju z pierwszego spotkania. Zmiana, która nie wynika z briefu, jest zmianą zakresu i warto ją tak nazwać, zanim ją wykonasz.

Pomiń przymiotniki w rodzaju „nowoczesny i czysty". Nie niosą żadnej informacji. „Gęsty i redakcyjny, jak pierwsza strona działu gazety" niesie ich sporo.

Brama druga: proś o kierunki, nigdy o strony

Najtańsze zastosowanie AI w całej tej pracy to eksploracja. Poproś o trzy do pięciu odrębnych kierunków w postaci zgrubnych układów i par krojów pisma, a potem wybierz, zanim cokolwiek zostanie zbudowane. Sześć szkiców kosztuje kilka minut. Przebudowa strony odrzuconej przez klienta kosztuje popołudnie.

Dyscyplina polega na tym, by kierunki pozostały tanie. Nie pozwól narzędziu renderować pełnych stron z wygenerowanymi zdjęciami dla każdego z nich. Klienci zakochują się w zdjęciach i potem nie potrafią oddzielić układu od obrazków. Wystarczą szare prostokąty i prawdziwe nagłówki. Jeśli klient nie umie wybrać między trzema układami z szarymi polami, problemem był brief, a ty dowiedziałeś się tego za darmo.

Kategoria narzędzia ma tu znaczenie, więc warto być w tej kwestii bezpośrednim. Generatory całych serwisów, takie jak 10Web, budują kompletną stronę WordPress z promptu, adresu URL lub pliku Figma, a plany zaczynają się od $10 miesięcznie przy rozliczeniu rocznym za jedną stronę. Hostowane kreatory, takie jak Durable, prowadzą od kilku odpowiedzi do gotowej strony małej firmy w mniej więcej pół minuty. Oba typy są świetne w bramce drugiej i słabe w czwartej, bo zarządzają decyzjami projektowymi zamiast je odsłaniać. Używaj ich, by zobaczyć opcje. Nieufnie podchodź do użycia ich jako finalnej budowy strony, którą będziesz utrzymywać przez lata.

Brama trzecia: przypnij projekt do theme.json przed budową

To brama, którą pomija większość procesów, i to ona oddziela stronę, którą da się utrzymać, od strony, którą da się tylko zademonstrować. Gdy kierunek jest wybrany, przenieś jego decyzje do tokenów i zapisz je w theme.json: paletę kolorów, rodziny i rozmiary krojów pisma, skalę odstępów, szerokość treści. Od tego momentu każdy blok odwołuje się do tokenu po slugu, nigdy do wartości dosłownej.

Dokumentacja theme.json powstała właśnie w tym celu. Daje motywowi blokowemu jedno miejsce, w którym deklaruje paletę i skale, a edytor oferuje je jako kontrolki. Gdy zmienia się niebieski marki, zmieniasz jedną linijkę. Gdy klient otwiera Site Editor, wybiera z twojej palety, a nie z dowolnego koła barw, co po cichu zapobiega całej kategorii edycji niezgodnych z marką.

Tu AI zarabia na siebie w inny sposób. Podaj mu wybrany kierunek i poproś o zestaw tokenów, a potem sprawdź go według dwóch zasad. Każda para tekstu i tła musi osiągać 4,5:1 dla zwykłego tekstu (próg WCAG AA), więc policz współczynniki sam, zamiast ufać deklaracji modelu. Skala musi być mała: pięć albo sześć kroków odstępów i sześć rozmiarów typografii. Modele uwielbiają podsuwać czternaście niemal identycznych szarości. Usuń jedenaście z nich.

Praktyczny test, czy ta bramka zadziałała: otwórz gotowy motyw i poszukaj kodu hex w dowolnym szablonie. Jeśli coś znajdziesz, decyzja uciekła z systemu. Ten test zajmuje dwie minuty i wykrywa większość przypadków, w których model zostawił wartości dosłowne. Warto go powtarzać po każdej większej zmianie, bo nowy blok wprowadzony w tym samym tygodniu potrafi dołożyć kolejny kod hex, zanim ktokolwiek to zauważy.

Brama czwarta: buduj z natywnych bloków i trzymaj generator poza pętlą

Teraz budujesz. Struktura zaproponowana przez model zwykle jest warta zachowania: kolejność sekcji, logika kolumn, rytm między gęstymi a otwartymi obszarami. Kod, który wygenerował, zwykle już nie. Odtwórz zatwierdzoną strukturę w blokach core (Group, Columns, Cover, Query Loop), używając swoich tokenów, a wygenerowane wyjście traktuj jako rysunek referencyjny, a nie plik źródłowy.

Praktyczna korzyść wychodzi przy pierwszej zmianie po starcie. Gdy klient prosi o nowy kolor przycisku, zmieniasz token, a nie szukasz po stronach. Gdy agencja przejmuje serwis po kimś innym, czyta motyw jak dokumentację: palety, skale i bloki są tam, gdzie się ich spodziewa. Wygenerowany kod z dosłownymi wartościami wymaga, by ktoś najpierw go odtworzył, zanim cokolwiek zmieni.

Brzmi to wolniej. W naszym doświadczeniu od drugiej strony jest szybciej, bo natywne bloki dziedziczą tokeny, reagują na Site Editor i zachowują się, gdy klient je edytuje. Wygenerowany kod z zaszytymi stylami walczy z każdą z tych rzeczy. Kreatory stron stoją na drugim końcu tej samej wymiany. Divi, przebudowany jako Divi 5 w lutym 2026 roku, dodaje Divi AI w planie Pro za $277 rocznie, a wynik pozostaje w systemie modułów Divi. To uzasadniony wybór dla agencji standaryzującej się na Divi. To jednak inny produkt niż motyw blokowy, z innym kosztem wyjścia, który trzeba uwzględnić w wycenie.

Miejsce, w którym generowanie AI wciąż zasługuje na obecność w samej budowie, to warstwa powtarzalna: wariant sekcji cennika, tekst zastępczy o kształcie prawdziwego, alternatywne układy bohatera do porównania przez klienta. Każdą z nich traktuj jako szkic wzorca do uporządkowania i zarejestrowania, nigdy jako gotową pracę.

Jedno uczciwe ograniczenie. Jeśli projekt wymaga prawdziwej interakcji (filtrowane archiwa, własna logika zapytań, cokolwiek z zachowaniem w JavaScripcie), żaden generator tego nie udźwignie. Tę część napisze programista, a udział AI zostanie na obrzeżach.

Brama piąta: audytuj to, czego zrzut ekranu nie pokaże

Przeprowadź ten sam krótki audyt na każdej stronie, w tej samej kolejności, żeby stał się nawykiem, a nie nastrojem.

Najpierw kontrast. Sprawdź rzeczywiste renderowane pary, w tym tekst na obrazach oraz stany wyłączone i po najechaniu kursorem, których model nie wziął pod uwagę. Po drugie, struktura nagłówków: jeden H1, nagłówki schodzące bez przeskakiwania poziomów i żaden nagłówek wybrany tylko dlatego, że jest duży. Po trzecie, klawiatura: przejdź klawiszem Tab przez całą stronę i potwierdź, że fokus jest widoczny, a kolejność odpowiada kolejności czytania. Po czwarte, tekst alternatywny przy każdym obrazie niosącym znaczenie i pusty atrybut alt przy tych, które go nie niosą.

Piąte sprawdzenie wyróżnia tę listę spośród zwykłej checklisty: kierunek. Jeśli serwis ma wersję arabską lub hebrajską, obejrzyj ją od prawej do lewej i szukaj tego, co się nie odbiło lustrzanie. Ikony wskazujące w złą stronę, obraz bohatera, którego temat znalazł się teraz przy tekście, odstęp zapisany jako margin-left zamiast właściwości logicznej, takiej jak margin-inline-start. Są tanie w poprawce na tej bramce i kłopotliwe, gdy ktoś znajdzie je na zrzucie ekranu klienta.

Zachowuj dowody z audytu: parę przed i po dla każdej strony, notatkę, co nie przeszło, i notatkę, co zmieniono. Zamienia to „wsparte przez AI" z mglistego twierdzenia w rezultat, który da się pokazać klientowi. To także akapit w dokumencie przekazania, który uzasadnia twoje honorarium wobec klienta, który tydzień wcześniej sam wypróbował generator.

A co z kreatorami jednopromptowymi?

Mają swoje miejsce, a jest ono wąskie. Kreator jednopromptowy to dobry sposób na jednorazowy prototyp do oferty, landing page na weekendowe wydarzenie albo wizualny punkt wyjścia dla klienta, który nie potrafi opisać, czego chce. Framer łączy generator stron AI z swobodnym płótnem i darmowym planem, co czyni go dobrym właśnie do szybkiej, jednorazowej pracy wizualnej, a plan Basic zaczyna się od $10 miesięcznie.

Pomijaj je, gdy serwis ma działać na WordPressie, ma być edytowany przez nietechnicznego klienta albo ma obsługiwać odbiorców pisanych od prawej do lewej, bo i tak przebudujesz wynik w blokach. Prototyp był wart zrobienia; strona nie była warta wysłania. Wiedza, którą z tych dwóch rzeczy trzymasz w ręku, oszczędza najwięcej czasu.

Co wypróbować przy następnym briefie

Wybierz jeden żywy projekt i uruchom tylko bramki pierwszą i trzecią. Napisz półstronicowy brief, a potem przypnij wybraną paletę i skale do theme.json, zanim powstanie choćby jedna strona. Zmierz czas i porównaj go z tym, ile zajęło twojemu ostatniemu serwisowi dojście do stabilnego projektu. Jeśli wynik się potwierdzi, dodawaj pozostałe bramki pojedynczo. Którą bramkę zastosowałbyś jako pierwszą, gdyby była w twoim ostatnim wdrożeniu?