O czym jest ten film
- Teza wyjściowa: 99% stron i aplikacji tworzonych przez AI wygląda fatalnie, bo nie opierają się na sprawdzonych systemach projektowych; lekarstwo to danie modelowi wglądu w dziesiątki tysięcy dobrych, gotowych ekranów interfejsów.
- Cały proces — od pomysłu do płatnego, działającego produktu — odbywa się w jednym narzędziu, kreatorze aplikacji Base44, w czterech etapach: projekt i budowa, teksty, integracje, publikacja na żywo.
- Inspiracje zbiera się w galeriach gotowych interfejsów (m.in. Mobbin, 21st.dev) i składa z nich własny mood board, zamiast opisywać modelowi oczekiwany wygląd słowami, których często brakuje.
- Porządek pracy: najpierw podstawowa funkcjonalność i właściwy kierunek wizualny, dopiero potem kolejne warstwy — przy rozbudowie AI potrafi inaczej rozsypać całą architekturę.
- Krytyczne ścieżki testuje się od razu: logowanie przez Google, edycja danych w panelu (zmiana limitu z 25 tys. na 500 tys. dolarów), wylogowanie i powrót z zachowanymi danymi.
- Teksty to osobny front: jeżeli copy brzmi jak wygenerowane, nikt go nie kupi — a stron użytkownicy skanują wzrokiem, a nie czytają.
- Autorski zestaw reguł „Slop Monster” (pięć sekcji: słownik AI, struktury zdaniowe, rytm interpunkcji, zasada trójki, wzorce sprzedażowe) przepisuje copy tak, by brzmiało ludzko — z przykładami „przed i po”.
- „UI sniping”: gotowe komponenty i animacje z katalogów typu 21st.dev można skopiować razem z kodem i wkleić do projektu — przykład: interaktywne pole promptu i osadzony na stronie asystent oparty na Web MCP.
- Integracje dodaje się zwykłą prośbą: Stripe (subskrypcja 10 dolarów miesięcznie, najpierw tryb testowy), Zapier (dzienny e-mail z rejestracjami, webhooki), a także Slack, Notion czy Arkusze Google.
- Publikacja jednym przyciskiem: tymczasowy adres, własna domena w panelu, analityka odsłon, SEO i GEO — oraz puenta autora: ładne ekrany nie zastąpią rozumienia systemów projektowych.
Redakcyjne tłumaczenie
Dlaczego generowane przez AI strony wyglądają źle
Dziewięćdziesiąt dziewięć procent witryn i aplikacji tworzonych przez AI wygląda koszmarnie, a powód jest banalny: nikt nie oparł ich na porządnym systemie projektowym. W tym materiale pokażę, jak dać modelowi wgląd w ponad dziesięć tysięcy znakomitych ekranów interfejsów, żeby budować strony i aplikacje, które ludzie faktycznie kupią — oparte na designie, który już się gdzieś sprawdził. Całość zrealizujemy w jednym narzędziu.
Jeśli trafiłeś tu po raz pierwszy: jestem Jack. Poprzedni startup z branży AI zbudowałem od zera i sprzedałem, a obsługiwał tłumy klientów. Teraz buduję kolejny i pokazuję wyłącznie to, co naprawdę działa. Nalej sobie kawy, bo wchodzimy w konkret od razu.
Plan: tysiące ekranów, jedno narzędzie, cztery kroki
Co się dzieje, gdy model dostaje do wglądu dziesięć tysięcy ekranów UI? Sprawdzimy to razem i zbudujemy coś, co — mam nadzieję — wszystkich zadziwi. System jest w gruncie rzeczy prosty i ułożony w cztery etapy: najpierw zaprojektujemy i zbudujemy, potem zajmiemy się tekstami tak, żeby brzmiały jak napisane piórem człowieka, upewnimy się, że całość działa jak trzeba, a na końcu — jeszcze w trakcie tego nagrania — wypuścimy produkt na żywo.
Sedno pomysłu: zamiast opisywać AI, czego chcemy (bo często brakuje nam słów), pokazujemy mu projekty, które już odniosły sukces. Stripe, Apple, Duolingo — w takich bibliotekach jest mnóstwo pomysłów: można filtrować po konkretnych elementach, szukać po witrynach, przeglądać dashboardy w poszukiwaniu natchnienia. Pod filmem zostawiam linki do wszystkiego — od galerii stron po tzw. UI sniping, czyli wycinanie, zapisywanie i kolekcjonowanie gotowych elementów interfejsu. Po tym materiale będziecie designowymi superbohaterami. Pelerynę musicie przynieść własną — jedyne, czego nie potrafię wam dać, to peleryna.
Narzędzie: Base44
(Informacja dodatkowa: Base44 to kreator aplikacji działający w przeglądarce — na podstawie opisu (promptu) generuje od razu działający, publikowalny produkt.)
Kilka słów przejrzystości: Base44 skontaktowało się ze mną samo. Do tej pory siedziałem głównie w Claude Code i kreatorów aplikacji specjalnie nie zgłębiałem, więc z ciekawością sprawdzałem, jak daleko da się zajść wewnątrz jednej aplikacji. Do wyboru są wszystkie modele premium — pytanie tylko, gdzie faktycznie ma się odbywać praca. Nam zależy na tym, żeby nie przeskakiwać między oknami. Argumenty za tym narzędziem: od promptu wprost do działającej aplikacji, możliwość podpięcia własnego systemu projektowego, dowolny model, bezproblemowe łączenia, publikacja, SEO i sporo więcej.
Krok pierwszy: inspiracje i pierwszy szkic
Zbudujemy coś z branży finansów — aplikację, w której zakłada się konto, o profesjonalnym charakterze. Bardzo podobał mi się wygląd witryny Origami (to tylko przykład; wybierzcie, co wam pasuje), bo świetnie pokazuje zarówno strukturę, jak i rzemiosło projektowe.
Zaczynamy od zebrania inspiracji — Canva nadaje się na tablicę motywów idealnie. Przeglądam projekty finansowe, wybieram kilka z nich i składam w stu procentach unikalny mood board.
Potem przechodzę do Base44 i piszę mniej więcej tak: „Chcę zbudować piękną aplikację finansową. Inspirują mnie poniższe projekty — zrób coś, co wygląda równie dobrze jak te obrazy, referencje i style. Uchwyć ich istotę. Nadaj produktowi nazwę Gorilla Finance i zachowaj elegancką, dopracowaną formę”. Do prompty wrzucam linki, obrazy i zrzuty ekranu, a następnie wybieram tryb budowania albo planowania.
Przy modelach zatrzymajmy się chwilę. Base One to własny model Base44 — firma celowo zoptymalizowała go pod jeden typ zadania: tworzenie aplikacji i stron — i moim zdaniem taka wyrazista specjalizacja to ciekawa droga. Tryb Auto sam dobiera model do zadania i oszczędza kredyty. Bo szczerze: skoro budujecie dużo, to czy każdy projekt zasługuje na najcięższe działo? Wiem, co mówię — zapytałem kiedyś Fable 5.1, ile kalorii ma mój koktajl białkowy. Dało radę, ale to trochę strzelanie z armaty do wróbla. Ja tutaj wybieram najmocniejszy model, bo chcę dużej siły; jeśli wolicie oszczędzać tokeny — macie pełne prawo.
Zanim ruszymy, doprecyzujmy funkcje: „to ma być ładna witryna z sekcją logowania i możliwością dostosowania kilku rzeczy w jej wnętrzu. Buduję narzędzie do śledzenia budżetu — świetnie byłoby, gdyby dało się edytować wewnętrzny widok”. Base44 wykonał to zadanie naprawdę przyzwoicie.
I tu uwaga, którą warto zapamiętać: na tym etapie interesuje mnie wyłącznie podstawowa funkcjonalność i właściwy kierunek wizualny. Od lat powtarzam, że funkcje robi się przed designem — ale z AI sprawa wygląda tak: gdy nałożą się na siebie kolejne warstwy i kombinacje, model potrafi, uśpiony i z zamkniętymi oczami, rozjechać całą architekturę. Zanim wejdziemy na drugi poziom, wygląd musi pasować do potrzeb, a podstawowa logika — działać.
Efekt pierwszego podejścia: witryna klasy premium dla biznesu i finansów. Delikatny gradient, subtelne animacje po najechaniu kursorem, sekcja „Explore Gorilla”, panel z liczbami — ten fragment podobał mi się najbardziej. Niżej zielonkawa poświata unosząca się przy przewijaniu i logotypy partnerów. Znalazło się parę rzeczy do poprawienia i przestawienia, ale jak na pierwszy strzał — bardzo dobrze. Na dole, ku mojemu zaskoczeniu, zgrabna stopka.
Sprawdzamy logowanie i zapis danych
Wchodzimy w opcję logowania — „Kontynuuj z Google”. Ekran logowania powstał z automatu, co doceniam. Po kliknięciu od razu otwiera się Google — i to jest największa zaleta całego rozwiązania: cała konfiguracja uwierzytelniania po prostu znika. Loguję się testowym kontem, przyznaję dostęp i jestem w środku; aplikacja rozpoznała mój adres e-mail i pociągnęła jakieś dane.
Sprawdzam edycję: przy pozycji „Engineering infrastructure” zmieniam 25 tysięcy na 500 tysięcy — Jack, podwajamy budżet, robimy coś większego, to nasz nowy limit. Wylogowuję się i loguję ponownie, żeby potwierdzić, że zmiana się utrzymała. I faktycznie: dashboard wraca z całością danych i nową kwotą. A dostałem to wszystko po jednym, dość luźno sformułowanym promptcie.
Krok drugi: wojna z potworem slopu
(Informacja dodatkowa: „slop” to żargonowe określenie generycznej, wtórnej treści, którą sypią modele językowe; w polskim internecie przyjęło się zapożyczenie „slop”.)
Mamy interfejs i podstawową logikę. Teraz najpoważniejszy problem całego przedsięwzięcia: teksty. Jeżeli copy brzmi jak wygenerowane, nikt tego nie kupi. Zapamiętajcie: stron i aplikacji nikt nie czyta od deski do deski — użytkownicy przeskanowują je wzrokiem.
Do tego służy Slop Monster — narzędzie, które zbudowałem na bazie najlepszych istniejących repozytoriów do „uczłowieczania” tekstów AI: przetrzepałem je wszystkie, wziąłem to, co działa, i złożyłem w jednym miejscu. Całość podzieliłem na pięć sekcji: rozpoznawanie klasycznego słownika AI, typowych struktur zdaniowych, rytmu interpunkcyjnego i metrum „zasady trójki”; fundament stanowią sprawdzone systemy sprzedażowe i marketingowe — Hormoziego, Priestleya, Kruga. (Informacja dodatkowa: Alex Hormozi i Daniel Priestley to szeroko znani autorzy strategii sprzedażowych, a Steve Krug napisał klasyczną dziś książkę o użyteczności „Don’t Make Me Think”.) Do tego mnóstwo przykładów przed i po: fraza w stylu „najbardziej zaufany lokalny fachowiec od dachów od 2001 roku” zostaje przerobiona tak, że brzmi, jakby ułożył ją człowiek. Projekt będę rozwijał — korzystajcie śmiało.
Praktyka jest prosta: wracam do Base44 i proszę o poprawienie tekstów na stronie według systemów Slop Monstera, po czym wklejam reguły. Narzędzie pracuje w tle. Gdybyście robili to w Claude, ChatGPT 5.6 czy Astrze, moglibyście zajść dalej — na przykład postawić rzeszę podagentów. Tu wygrywa prostota: mówisz „zrób to i tamto”, a wszystko wykonuje się w jednym miejscu.
Efekt? Przed: „Karty bankowe, treasury i wiele więcej na jednej platformie”. Po: „Konta, karty i treasury w jednym miejscu. Koniec z uzgadnianiem wszystkiego na koniec miesiąca”. Przed: „Trzy połączone ze sobą działy, które zwiększają kontrolę, płynność i sprawność”. Po: „Liczy się to, gdzie są pieniądze, jak szybko krążą i kto może ich dotknąć”. Różnicę widać gołym okiem — i to jest właśnie przepaść między „kupię” a „zamykam kartę”.
Przy okazji: jeśli odnosicie wrażenie, że rozmawiam językiem projektantów — pod filmem zostawiam link do mojego kompletnego masterclassu o budowaniu bez kodu. Znajdziecie tam między innymi systemy pamięci i cały agentowy system operacyjny, których nigdy wcześniej nie pokazywałem na kanale. Konkurencji będzie się z wami słabo pracowało.
W panelu Base44 mam zresztą pełną kontrolę nad produktem: przełącznik widoczności, lista użytkowników (moje dwa konta testowe) z opcją edycji i usuwania, dane, analityka odsłon na żywo, a dalej sekcje domen, integracji, kodu, agentów i workflow — wszystko spięte w jednym miejscu.
Szlify i wycinanie gotowych komponentów
Druga część drugiego etapu to drobne korekty. Przykład: sekcja „chronimy wasz kapitał” w szerokim widoku przyciąga zbyt mocno do lewej krawędzi — proszę więc o dopisanie słowa lub dwóch i przemeblowanie układu, a dla wygody dołączam zrzut ekranu.
Następnie własny komponent. W aplikacji klikam sekcję UI Sniping i wchodzę na przykład na 21st.dev — Mobbin to zresztą kolejne znakomite miejsce, pełne ekranów interfejsów. Przeglądam komponenty i animacje, które można przenieść na własną stronę; spodobał mi się wygląd interaktywnego pola promptu AI. Kopiuję kod, wracam do Base44 i mówię: „dodaj ten piękny, interaktywny element — pole promptu — tak, żeby podnosił jakość całości”. Wklejam link z kompletnym kodem.
Efekt? Moje uwagi zostały przyjęte, a na dole strony pojawił się asystent: „Zapytaj o cokolwiek — napisz pytanie i od razu dostaniesz odpowiedź”. Testuję: „Jak działają konta wirtualne?”. Odpowiedź trafia w sedno: konto wirtualne to cyfrowy sposób przyjmowania, wysyłania i zarządzania pieniędzmi. Pytam o czas realizacji przelewów międzynarodowych — znowu konkretnie. A przecież nie napisałem ani jednej linijki kodu. Element działa na zasadzie Web MCP — (Informacja dodatkowa: Model Context Protocol to standard łączenia modeli językowych z zewnętrznymi danymi i narzędziami; „Web MCP” przenosi tę ideę na strony internetowe.) Kto pamięta nagrania sprzed dwóch lat, wie, że zbudowanie takiego chatbota było kiedyś projektem samym w sobie. Dziś po prostu siedzi osadzony na stronie.
Krok trzeci: integracje ze światem
Gdy design jest dopięty, przechodzimy do podpięcia danych i integracji. Stripe, Slack, Notion — dowolny system. Chcę na przykład dostawać e-mail z codziennym zestawieniem nowych rejestracji. Zrobię to przez Zapiera, którego osobiście traktuję jako uniwersalną warstwę uwierzytelniającą i łączącą: przez niego spinam wszystko — Hermesa, Claude’a, Groka, Barda, Base44 — i decyduję, które konta i poziomy dostępu mają być aktywne.
W Base44 wystarczy poprosić: „użyj Zapiera i wyślij mi codziennie e-mail z listą nowych użytkowników”. Narzędzie wyprowadza przez konfigurację krok po kroku: prosi o URL webhooka i dokładnie podpowiada, co zrobić — można też sięgnąć po serwer MCP Connect Events z Zapiera.
Podobnie działa Stripe: „dodaj plan płatności — nowi użytkownicy niech płacą dziesięć dolarów miesięcznie — i podepnij Stripe”. Integrację instaluję jednym przyciskiem i dostaję testowy system zakupowy. Po zalogowaniu, na samym dole strony, mogę aktywować członkostwo.
Krok czwarty: publikacja
Ostatni etap to wypuszczenie produktu do klientów. Zrobiłem aplikację finansową, ale z tych samych ekranów interfejsów da się złożyć cokolwiek. Przy okazji przydatny trik: w przepływie rejestracji wpisuję hasło typu „celebration” czy „confetti” i przeglądam gotowe efekty, które jednym ruchem wstawiam w dowolne miejsce strony.
Klikam „Publish” w prawym górnym rogu. Dostaję tymczasowy, generyczny adres — na początek w zupełności wystarczy (dałoby się też wygenerować aplikację mobilną, ale zostańmy przy stronie). Od tej chwili produkt żyje: loguję się przez Google, widzę swój panel z limitem 500 000 dolarów, włączam członkostwo i trafiam na stronę płatności spiętą ze Stripe — wystarczy zsynchronizować konto i można zbierać pierwsze opłaty.
Jeśli chcę własną domenę, w panelu po lewej na dole jest odpowiednia sekcja: kupię ją i ogarnę w tym samym miejscu, co bardzo wygodne. Przy okazji można zmienić nazwę, bo nie każdy chce mieszkać pod adresem w rodzaju „secure-gorilla-vault”. W zakładce marketingowej czekają SEO, GEO (optymalizacja pod wyszukiwarki generatywne) i treści na media społecznościowe.
Na koniec: ostatni problem
Zbudowanie aplikacji na pięknych ekranach to jedno. Jeżeli nie rozumiemy do głębi, jak posługiwać się systemami projektowymi, nigdy nie wyciągniemy z naszych stron i aplikacji tego, co w nich najlepsze. Jak to nadrobić — pokażę w nagraniu, które pojawia się na ekranie końcowym.
10 najważniejszych takeaways — z kontekstem zastosowania
1.Pokazuj modelowi, nie opisuj
Na czym polega: Model nie wie, co dokładnie znaczy „nowoczesny” czy „elegancki”. Zamiast przymiotników podaj referencje: zrzuty ekranu, linki do witryn, mood board złożony z galerii typu Mobbin — tak jak w filmie zainspirowano się witryną Origami.
Jak stosować: Zbierz 5–10 ekranów o pożądanym charakterze, wrzuć je do prompty wraz z nazwą produktu i jednym zdaniem o jego funkcji, a potem iteruj na wyniku.
Na co uważać: Referencje powinny pochodzić z jednej klimatycznej rodziny — mieszanie skrajnie różnych stylów daje eklektyczny miks zamiast spójnego wyglądu.
2.Najpierw szkielet, potem szlif
Na czym polega: Na starcie wystarczą podstawowa funkcjonalność i właściwy kierunek wizualny. Każda kolejna warstwa zmian zwiększa ryzyko, że model rozjedzie całą architekturę — dlatego autor wyraźnie oddziela etapy: funkcje, teksty, integracje, publikacja.
Jak stosować: Podziel pracę na etapy i po każdym z nich wracaj do sprawdzenia, czy poprzednie nadal działają (logowanie, zapis danych, dashboard), zanim dodasz coś nowego.
Na co uważać: Nie szlifuj designu, dopóki logika nie działa — wylądujesz z dopracowanym wyglądem czegoś, co i tak trzeba przebudować.
3.Krytyczne ścieżki testuj natychmiast
Na czym polega: Błąd w logowaniu lub zapisie danych psuje całość niezależnie od urody interfejsu. W filmie autor od razu przechodzi pełną pętlę: założenie konta przez Google, edycja danych (limit 25 tys. → 500 tys. dolarów), wylogowanie i powrót.
Jak stosować: Po każdej większej zmianie przetestuj ścieżkę: rejestracja → logowanie → edycja danych → wylogowanie → ponowne logowanie. Potwierdź, że zmiany się utrzymały.
Na co uważać: Jeden profil testowy to za mało — przy drugim koncie sprawdzisz, czy dane użytkowników rzeczywiście są rozdzielone.
4.Copy pisz pod skanowanie, nie pod lekturę
Na czym polega: Stron nikt nie czyta od deski do deski — użytkownicy skanują je wzrokiem. Tekst rozpoznawalnie „generowany” zabija zaufanie i sprzedaż.
Jak stosować: Krótkie frazy, konkret korzyści, zero typowego słownika AI. Porównaj wersję przed i po z filmu: „trzy połączone działy zwiększające kontrolę, płynność i sprawność” ustępuje miejsca „liczy się to, gdzie są pieniądze, jak szybko krążą i kto może ich dotknąć”.
Na co uważać: Uczłowieczenie nie może iść w parze z utratą precyzji — treść musi pozostać prawdziwa i zgodna z tym, co produkt faktycznie robi.
5.Trzymaj listę kontrolną „slopa” w jednym miejscu
Na czym polega: Autorski „Slop Monster” porządkuje zasady uczłowieczania tekstów w pięciu sekcjach: słownictwo, struktury zdaniowe, rytm interpunkcji, zasada trójki oraz wzorce sprzedażowe (Hormozi, Priestley, Krug).
Jak stosować: Zestaw reguł trzymaj w jednym pliku i wklejaj do kreatora przy każdej iteracji tekstów — wtedy poprawki są powtarzalne, a nie przypadkowe.
Na co uważać: Reguły to punkt wyjścia, nie dogmat — sekcje prawne czy techniczna mogą wymagać innego, bardziej formalnego tonu.
6.Gotowe komponenty zamiast wymyślania koła na nowo
Na czym polega: Katalogi takie jak 21st.dev oferują dopracowane komponenty i animacje razem z kodem; „UI sniping” polega na skopiowaniu ich i wklejeniu do projektu jednym zdaniem kontekstu — jak w filmie z interaktywnym polem promptu.
Jak stosować: Wybierz element, skopiuj kod lub link, a w kreatorze poproś: „dodaj ten element tak, żeby pasował do całości i podnosił jej jakość”.
Na co uważać: Nadmiar efektów potrafi zatopić stronę — pilnuj spójności wizualnej i sprawdź, jak komponent zachowuje się na urządzeniach mobilnych.
7.Osadź asystenta i przepytaj go na fenomen
Na czym polega: Asystent oparty na Web MCP odpowiada na pytania o produkt (konta wirtualne, przelewy międzynarodowe) bez pisania choćby linijki kodu — coś, co dwa lata temu było osobnym projektem.
Jak stosować: Po dodaniu asystenta testuj pytaniami domenowymi z branży produktu i weryfikuj odpowiedzi merytorycznie, zanim puścisz je do klientów.
Na co uważać: Model może zmyślać przy pytaniach wykraczających poza dane produktu — miej plan na wypadek, gdy zabraknie mu rzetelnej odpowiedzi.
8.Płatności wdrażaj najpierw w trybie testowym
Na czym polega: Stripe podpina się jedną prośbą („plan 10 dolarów miesięcznie przy rejestracji”), a kreator od razu stawia testowy system zakupowy zanim ktokolwiek zapłaci prawdziwe pieniądze.
Jak stosować: Instalujesz integrację, przechodzisz pełną ścieżkę zakupu na żywej stronie, a dopiero po sprawdzeniu całego przepływu przechodzisz na produkcję.
Na co uważać: Kreator nie załatwia za Ciebie kwestii faktur, podatków ani zgodności z prawem — to wciąż Twoja odpowiedzialność.
9.Jedna warstwa łącząca wszystkie systemy
Na czym polega: Zamiast pisać każdą integrację osobno, autor używa Zapiera jako uniwersalnego pośrednika: webhooki, serwery MCP, e-maile, arkusze — z centralną kontrolą dostępów.
Jak stosować: Zacznij od jednego prostego przepływu (np. dzienny e-mail z listą rejestracji) i rozbudowuj dopiero, gdy zadziała; zakresy dostępu kont włączaj tylko wtedy, gdy są potrzebne.
Na co uważać: Każdy dodatkowy pośrednik to nowy punkt awarii i koszty, które rosną wraz ze skalą.
10.Publikacja to dopiero początek
Na czym polega: Kliknięcie „Publish” daje tymczasowy adres, a dalej w tym samym panelu czekają domena, analityka odsłon na żywo, zarządzanie użytkownikami, SEO i GEO.
Jak stosować: Publikuj wcześnie na tymczasowym adresie, podpinaj własną domenę, obserwuj analitykę i listę użytkowników, a feedback zbieraj od pierwszego dnia.
Na co uważać: Zbiór ładnych ekranów to nie to samo co spójny system projektowy — puenta całego materiału: bez zrozumienia systemów projektowych produkt nigdy nie osiągnie pełni możliwości.