Wstęp:
Zdradzę ci tajemnicę… moja strona została stworzona w 100% przez AI. Uwierzyłbyś?
Nikt nie chce uwierzyć. Za dobrze to wygląda. Znajomi web-deweloperzy mówią, że za taką stronę policzyliby sobie naprawdę spory pieniądz. Pokażę ci, jak zbudować taką stronę (prawie) za darmo.
Specjaliści od AI zaczęli pokazywać, jak budować małe statyczne strony. A co jeśli chcesz mieć większą stronę? Kilka podstron i jeszcze bloga? W takim razie dobrze trafiłeś.
W tym wpisie pokażę ci:
- Jak dokładnie wygląda proces budowania dużej strony z AI
- Jak zrobić to szybko i dobrze
- Jak uniknąć problemów
- Dobór narzędzi i ich ograniczenia
- Pro-TIPy
Co będzie potrzebne:
- Doświadczenie? – zero, tylko ten artykuł z instrukcją
- Chat GPT – wersja permium (~100zł)
- Claude – wersja premium (~100zł)
- Hosting – jakikolwiek
- WordPress – zainstalowany
- Klient FTP – jeśli twój hosting oferuje „menadżer plików”, nie potrzebujesz osobnego klienta, ale polecam (ja używam „Filezilla” – praca idzie szybciej)
Co chcemy osiągnąć?
Strona naszej firmy, z kilkoma podstronami i blogiem. Piękny i nowoczesny designe, responsywność pod urządzenia mobilne. Wszystko na najwyższym poziomie. Wszystko z AI.
Proces:
Etap I: Przygotowania (dokumenty)
Musimy zacząć od przygotowania trzech dokumentów
- Struktura naszej strony
- Badania psychograficzne naszych klientów
- Dokument z wytycznymi dot. pisania tekstów
Na początku odpalamy Chat GPT 4 – opcja „Deep Research”:
- Poproś GPT o przygotowanie dokumentu z psychoanalizą twojej grupy docelowej. Powiedz czym się zajmujesz, kto przeważnie od ciebie kupuje. Lub kto według ciebie powinien kupować jeśli dopiero zaczynasz. Niech w dokumencie będzie informacja, czego ci ludzie potrzebują, jaki jest ich ból. Im lepiej to opiszesz, tym lepiej.
- Poproś GPT o dokument z zasadami pisania najlepszych copywriterów na świecie, niech przebada mistrzów i znajdzie wspólne cechy.
- Przygotuj dokument ze strukturą strony. Do tego również możesz użyć GPT.
Proces trwa chwilę. Przygotowanie prompta + ~30 minut czekania na ukończenie prac przez GPT. Mam też dla ciebie prezent. Możesz pobrać wszystkie prompty, jakie używałem do tworzenia swojej strony ==> [LINK]
💡Tip: Do swoich promptów możesz dopisać, że dokument będzie używany jako załącznik do zadań dla AI. Więc niech będą zoptymalizowane pod jak najlepsze współgranie z modelami językowymi.
Etap II: Projektowanie szablonu
Przechodzisz do Claude – u mnie był to model 3.7 Sonnet (wersja extended). Obecnie są już nowsze wersje, więc polecam korzystać z nich.
Dajemy mu zadanie żeby napisać stronę w HTML i wklejamy 3 pliki:
- Raport o grupie docelowej
- Dokument z zasadami pisania topowych copywriterów
- Struktura strony
Używaj opcji „extended”. Dzięki temu Claude daje nam większy output i wysyła kod w jednym artefakcie. Natomiast może być tak, że cię poniesie, tak jak mnie i strona, żeby odwzorować w pełni twoją wizję będzie mieć kilka tysięcy linii kodu. Wtedy warto dodać na końcu prompta informację, żeby podzielić kod na części. W paczce z promptami zamieściłem bardzo skuteczną formułę.
Warto to dodać, bo jak Claude przerywa pisanie kodu przez osiągnięty limit i każemy mu kontynuować za pomocą funkcji „continoue”, to często się gubi i strona się wysypuje. Dzięki dopiskowi o podziale kodu, doklejamy tylko kolejne artefakty do ostatniej linii kodu w jakimś edytorze (u mnie Visual Studio, ale równie dobrze może być zwykły notatnik).
Dzięki tej technice, jesteśmy w stanie budować obszerne kody, praktycznie bez limitów.
Jak Claude zbuduje już stronę, to robimy testy. Weryfikuj czy wszystko wygląda dobrze, czy wszystko działa jak powinno. Jak coś wymaga poprawek, to piszemy, żeby poprawił. Od razu – potem będzie to ciężej poprawić.
Jak mamy już gotową wersję na komputer, prosimy go o zoptymalizowanie strony pod urządzenia mobilne (responsywność).
💡TIP: czasami trafi nam się czat, gdzie nasze AI pisze jakiś dziwny kod, w którym przykładowo nie może przez 15 wersji zrobić prostego centrowania jednego tekstu (serio). Nie kontynuuj takiego czatu, otwórz nowy. Często nowy czat rozwiązuje problem za pierwszym razem. Ewentualnie edytujemy prompta. Jak nawet to nie pomaga, to można wkleić kod do GPT o3/o4-mini-high z prośbą o interwencję. Niech współpracują (ale raczej nie będzie takiej potrzeby).
Potem niech Claude na podstawie pliku .html strony głównej i dokumentu z zasadami pisania, stworzy kolejne podstrony (osobne pliki .html).
Etap III: Konwersja szablonów i budowa katalogów
Jak już mamy strony w HTMLu, które wyglądają i działają tak, jak chcemy, to przechodzimy do GPT. Musimy rozbić pliki HTML na osobne .php, .css, .js, które wrzucimy na WordPressa. Claude sobie z tym nie radzi. On projektuje, ale dalej odpada i robotę przejmuje GPT (który z kolei projektować nie umie).
Na załączonym zdjęciu najbardziej basic prompt. Wtedy jeszcze nie wiedziałem co robię (ale zadziałał dobrze) 😂
💡TIP: Testowałem do tego zarówno model o3 jak i o4-mini-high. Ten pierwszy sprawdza się dużo lepiej.
Jak będziesz robić poprawki, albo kolejne podstrony w nowym czacie, to oprócz nowego pliku .html do konwersji, wysyłaj mu archiwum (.zip) z obecnymi plikami twojej strony, żeby pracował na nich.
Na zdjęciu przykładowy prompt. w paczce do pobrania jest trochę lepszy.
💡TIP: wrzucaj na raz tylko jeden plik .html do konwersji
Etap IV: Jak robić poprawki
Jeśli coś nie działa i GTP ma problem z naprawą, dużo mu pomożesz wysyłając komunikaty z konsoli (ctrl+shift+c) zakładka konsola oraz sieć. Możesz mu wysłać po prostu zrzut ekranu co się tam dzieje. Wtedy przeważnie od razu rozwiązuje problem.
Pamiętaj, żeby po każdej zmianie w plikach strony, czyścić cache strony (ctrl+f5), żeby pobierała się nowa wersja.
Jeśli proces tworzenia twojej strony przebiega przez kilka czatów (a tak będzie), to pamiętaj, że struktura plików musi być zachowana. Może się zdarzyć, że w jednym czacie „Gepetto” wymyśli konkretną strukturę plików, a otworzysz nowy czat i on nazwie chociażby plik motywu w inny sposób. Przez to cała strona się wysypie i dopóki nie wyślesz mu konsoli, to nie wpadnie na to, co się stało i stracisz mnóstwo czasu. Pilnuj nazewnictwa folderów i plików. A jak coś się psuje, to wysyłaj mu screeny z konsoli.
Dokładnie to samo przytrafiło się mnie, co widać na powyższym zrzucie ekranu. Dopiero wysłanie konsoli przerwało moją 30-minutową frustrację z wysypującą się stroną.
Tipy, które gdybym znał, to uniknąłbym czasochłonnych problemów:
- Stopka/nagłówek powinny mieć osobne pliki .php i osobne pliki .js
- Po każdej zmianie w plikach odświeżaj cache (ctrl+f5 na komputerze) (na telefonie zależnie od przeglądarki)
- Do wgrywania plików na serwer używaj narzędzi typu filezilla i rób kopie zapasowe każdej wersji
- AI jest dobre, ale ma swoje ograniczenia – zwłaszcza jeśli chodzi o wymyślne animowanie elementów
- Jeśli motyw bloga obsługuje np. 5 wpisów na stronie, to w ustawieniach wordpressa ustaw tę samą wartość
- Gdy nie wiesz jak coś zrobić, pytaj Gepetto, jak coś tłumaczy zbyt trudno, poproś o wyjaśnienie w „idiotoodporny sposób” (cały czas każę mu wszystko upraszczać)
Podsumowanie
Może się tego wydawać dużo, ale jest mega proste. Nawet jak się jest nietechniczny. W razie pytań, możesz pisać w komentarzu pod tym wpisem – odpowiem.
Korzystaj, działaj, testuj.
A jeśli chcesz taką stronę, która będzie idealnie dopasowana do twoich klientów i będzie miała nieziemski designe, a jednocześnie nie chce ci się z tym bawić – napisz do mnie. Z pomocą AI zrobię to za ciebie 20x szybciej i 10x taniej, niż standardowi web-deweloperzy.
Taka strona zwróci ci się w chwilę ==> konrad@desiregroup.pl
