Pracownia przetwarzania z wykorzystaniem sztucznej inteligencji do przeniesienia małej strony internetowej na Cloudflare

Niewielka strona informacyjna nie wymaga już długiego procesu tworzenia. Dzięki asystentowi do programowania opartemu na sztucznej inteligencji, który zajmuje się większością implementacji, jedna osoba może przejść od wstępnej koncepcji do kodu źródłowego na GitHubie, automatycznego wdrażania za pośrednictwem Cloudflare oraz aktywnego domeny dostosowanej pod potrzeby w zaledwie pół dnia intensywnej pracy. Trudniejsza część przenosi się z pisania kodu na decydowanie o tym, czego chcemy, oraz dostarczanie precyzyjnych informacji na temat uzyskanego rezultatu. Ten przewodnik przedstawia ten proces krok po kroku, wraz z szablonami zapytań, które można dostosować do faz projektowania, tworzenia logo, przeglądania i iteracji, oraz jasno wskazuje, w którym momencie ten podejście przestaje być odpowiednie.

Zacznij od celu, a nie od frameworka

Pierwszym naturalnym pytaniem dla programisty jest to, jaki zestaw narzędzi wybrać: React, Next.js, generator stron statycznych czy coś innego. Gdy asystent może stworzyć większość elementów implementacji, to pytanie traci na znaczeniu w porównaniu z prostszym: co właściwie musi robić strona?

Dla pierwszej wersji strony osobistej lub usług doradczych odpowiedź może być krótka. Odwiedzający powinni zrozumieć, co reprezentuje strona, móc znaleźć jej artykuły i analizy oraz wiedzieć, jak nawiązać kontakt. To już kompletny zakres prac. Zapisanie tego najpierw daje zarówno tobie, jak i modelowi jasną miarę dla każdej późniejszej decyzji, a także zapobiega temu, by pierwsza wersja przerodziła się w projekt przebudowy.

Gdy nie masz żadnego projektu wizualnego

Wiele osób rozpoczyna pracę bez specyfikacji projektowej, i to jest w porządku. Zamiast mockupów opisz doświadczenie, jakiego pragniesz: na przykład profesjonalne, nowoczesne, czyste, przestronne i zorientowane na technologię, ale bez nadmiernego nacisku na futuryzm. Asystent przekształca tę opis w pierwszy wizualny szkic.

Gdy coś pojawi się na ekranie, uzyskanie informacji zwrotnych staje się łatwe, ponieważ reagujesz na coś konkretnego, a nie tylko o tym myślisz:

• Logo nie pasuje do marki.
• Zdjęcie na banerze jest przycięte.
• Jedna z sekcji wydaje się zbyt zatłoczona.
• Część strony powinna być na razie ukryta.

Taka sekwencja reakcji stanowi proces projektowania. Nie potrzebujesz specjalistycznej terminologii projektowej – wystarczy umiejętność zauważenia tego, co jest nie tak, i o tym powiedzenia.

Pętla informacji zwrotnych jest ważniejsza niż pierwsze polecenie

Nie istnieje jeden idealny prompt. Pierwszy wynik ma na celu dostarczenie czegoś, na co można odpowiedzieć. Kolejne instrukcje stają się coraz bardziej precyzyjne i konkretne: poprawić logo, skorygować obróbkę banera, ukryć nieukończone sekcje, przemienić nazwy elementów nawigacyjnych, sprawdzić linki, przejrzeć układ na urządzeniach mobilnych.

Jakość wynika z wielu krótkich, konkretnych rund zamiast z jednego ogromnego żądania. Krótkie rundy ułatwiają również wykrycie sytuacji, gdy model zmienił coś, o czym nie prosiłeś.

Master prompt dla pierwszej wersji

Przydatny prompt początkowy opisuje projekt, a następnie prosi model o zaproponowanie projektu i uzasadnienie go przed wygenerowaniem kodu. Szablon może zawierać następujące elementy:

• Nazwa marki, firmy lub projektu.
• Cel: co strona powinna pomóc ci osiągnąć.
• Odbiorcy: dla kogo jest przeznaczona.

Główne przesłanie, które odwiedzający powinien przyjąć w ciągu pierwszych 15 do 20 sekund.

Kierunek wizualny, np. profesjonalny, minimalistyczny, premium, kreatywny lub oparty na technologii, oraz to, czy wolisz jasny, ciemny czy neutralny tło.

Bazowe oczekiwania: czysta typografia, duże odstępy między elementami, wyraźna hierarchia wizualna oraz układ funkcjonujący na telefonach.

Szczerze powiedziane, że jeszcze nie wybrałeś kolorów, czcionek ani struktury strony.

Następnie poproś model o zaproponowanie, w oparciu o cel i grupę docelową:

1. Palety kolorów.
2. Kierunku typograficznego.
3. Struktury strony głównej.
4. Koncepcji sekcji głównej.
5. Nawigacji.
6. Zalecanych sekcji treściowych.
7. Wezwań do działania.
8. Ogólnego stylu wizualnego.

Zakończ, polecając mu wyjaśnienie proponowanego projektu oraz powody, dla których pasuje on do odbiorców, zanim napisze jakikolwiek kod, oraz aby stworzył pierwszą działającą wersję dopiero po twojej zatwierdzeniu tego kierunku. Kluczowym krokiem jest oddzielenie propozycji od implementacji – o wiele taniej jest odrzucić paletę kolorów w formie tekstu niż usuwać ją z wygenerowanego CSS.

Traktuj logo jako odrębne zadanie

Logo musi funkcjonować również poza stroną internetową: na profilach w mediach społecznościowych, w prezentacjach i w dokumentach. Mieszanie go z opisem strony skutkuje zazwyczaj czymś dostosowanym wyłącznie do nagłówka, dlatego przydziel brandingowi osobne zadanie.

Zaproś o prosty koncepcję logo, która będzie wyglądać minimalistycznie, nowocześnie, profesjonalnie i unikalnie, a także będzie rozpoznawalna nawet w małych rozmiarach. Wymień miejsca, gdzie będzie używane: strony internetowe, awatary w mediach społecznościowych, prezentacje, dokumenty oraz tła jasne i ciemne. Krótko opisz ideę, którą reprezentuje marka, a następnie poproś o:

1. Koncepcję wizualną.
2. Kierunek typograficzny.
3. Paletę kolorów.
4. Ideę ikony lub monogramu.
5. wersję dla tła jasnego.
6. wersję dla tła ciemnego.
7. wyjaśnienie, dlaczego projekt pasuje do marki.

Dodaj wyraźną ograniczającą zasadę, aby uniknąć skomplikowanych ilustracji lub symboli wymagających drobnych detali, ponieważ przy rozmiarze ikony favicon tracą na jakości.

Pozwól asystentowi zająć się realizacją, a ty skup się na intencji

Gdy kierunek zostanie ustalony, asystent do kodowania (ChatGPT i Codex, w przypadku tego schematu pracy) może przejąć większość prac implementacyjnych. Zaletą jest to, że instrukcje mogą dotyczyć tego, czego chcesz osiągnąć, a nie konkretnych plików i wierszy do zmiany:

• Bannera przecina się na pół.
• Tymczasowo odkomentuj te sekcje.
• Zmień nazwę tego przycisku.
• Ustaw tak, aby ten przycisk przenosił użytkownika do odpowiedniej sekcji.
• Zrób tak, aby logo pasowało do oryginalnego projektu graficznego.

Nadal sprawdzasz każdy wynik, ale nie musisz już samodzielnie przeglądać całego kodu przy każdej drobnej modyfikacji.

Zarejestruj domenę wcześnie i kontynuuj pracę lokalnie

Zarejestrowanie domeny to szybki proces: wyszukiwanie, sprawdzenie dostępności, rejestracja i opłata. Uczynienie jej w pełni użyteczną może potrwać dłużej. W opisanym tutaj scenariuszu minęło około 24 godzin, zanim wszystko rozwiązało się zgodnie z oczekiwaniami; opóźnienie, które zaobserwujesz, zależy od dostawcy usług rejestracyjnych oraz od propagacji DNS.

To oczekiwanie nie musi blokować rozwoju. Kontynuuj pracę i testowanie przy użyciu lokalnego wersji roboczej poprzez ciągły cykl: zmiana, przegląd, analiza, korekta, ponowne testowanie. Praca lokalnie oznacza również, że nieukończone eksperymenty nigdy nie trafiają do publicznej dostępności, a opisywanie zmian na wyższym poziomu oszczędza czas potrzebny na przeszukiwanie wielu plików w celu dostosowania poszczególnych linijek.

Wykorzystuj model jako narzędzie do sprawdzania, a nie tylko do tworzenia

Gdy powstanie pierwsza wersja, poproś asystenta o jej ocenę. W zapytaniu o recenzję należy określić jego rolę, powstrzymać go przed całkowitą przebudową wszystkiego oraz zażądać uporządkowanych, praktycznych rekomendacji.

Zaproś go, aby jako doświadczony projektant interfejsu i użytkownika przyjrzał się zrzutowi ekranu i bez niepotrzebnej przebudowy wskazał najważniejsze możliwości ulepszenia:

• Rozkład: odstępy, wyraźność kompozycji oraz ogólna równowaga wizualna.
• Hierarchia i typografia: to, na jak jasny sposób kierowany jest wzrok, wybór czcionek oraz czytelność tekstu.
• Konsekwencja wizualna: kolory i elementy marki na całej stronie.
• Odporność na mniejsze ekrany.
• Wezwania do działania: czy każde z nich jest oczywiste i jasno sformułowane.

Zaproś o sklasyfikowanie ustaleń, aby każde z nich wskazywało, co wydaje się słabe, dlaczego to ma znaczenie oraz dokładnie co należy zmienić. Ogranicz to do zmian, które istotnie poprawiają profesjonalizm i użyteczność. To ostatnie zdanie zapobiega temu, by recenzja przerodziła się w listę estetycznych preferencji.

To właśnie podczas iteracji odbywa się większość pracy

Po początkowym projekcie bardzo niewiele pracy polega na tworzeniu czegoś nowego. Prawie cała praca dotyczy udoskonalania tego, co już istnieje, a w tym przypadku najlepiej sprawdzają się krótkie i precyzyjne polecenia. Niezawodny szablon iteracji wygląda tak:

• Liczona lista konkretnych zmian, po jednej na linii.
• Jasne polecenie, by nie projektować na nowo niespokrewnionych sekcji i zachować wszystko, co już funkcjonuje poprawnie.

Listę kontrolną weryfikacji, którą model musi wykonać po edycjach: sprawdzić rozmiarowanie na komputerze stacjonarnym, sprawdzić rozmiarowanie na urządzeniach mobilnych, potwierdzić, że linki nawigacyjne działają, upewnić się, że każdy przycisk prowadzi we właściwe miejsce, sprawdzić, czy nic nie zostało przypadkowo ukryte lub obcięte, oraz zgłosić wszelkie pozostałe problemy, które zauważy.

Należy podkreślić znaczenie zasady zachowania oryginału. Asystenci mają tendencję do „ulepszania” sąsiedniego kodu podczas naprawiania tego, o co prosisz, a wyraźna ograniczenie zmniejsza tę tendencję. Lista samokontroli nie zastępuje twojej własnej weryfikacji, ale pomaga wykryć oczywiste regresje przed tym, jak je zauważysz.

Gdy strona będzie działać lokalnie, zapisz jej kod źródłowy w repozytorium GitHub. GitHub umożliwia przeglądanie historii wersji oraz bezpieczne cofnięcie jakichkolwiek zmian wprowadzonych przez asystenta.

Następnie połącz ten repozytorium z Cloudflare, aby każde dodanie pliku do repozytorium uruchamiało automatyczne budowanie i wdrażanie. Od tego momentu publikowanie polega po prostu na zapisywaniu zmian i wysyłaniu ich. W przypadku małej strony informacyjnej w tym scenariuszu wystarczyła darmowa wersja Cloudflare; sprawdź aktualne limity planu dostosowane do twoich potrzeb.

Gdy domena jest aktywna, a jej rekordy DNS są skonfigurowane, przymocuj domenę użytkowną do wdrożonego projektu. W tym momencie wpisanie domeny do przeglądarki pokaże żywą stronę.

Ile to kosztuje i w jakich przypadkach nie nadaje się

Koszty utrzymania tego typu projektu są niewielkie:

• Rejestracja domeny: w tym przypadku około 12 dolarów rocznie.
• GitHub: bezpłatnie.
• Cloudflare: darmowa wersja była wystarczająca.
• Narzędzia AI: tyle, ile kosztuje twoja subskrypcja ChatGPT lub innego asystenta.

Oprócz subskrypcji asystenta, domena jest w zasadzie jedynym kosztem infrastrukturalnym.

To podejście nie nadaje się do każdego aplikacji. Wszystko, co wiąże się z płatnościami, wrażliwymi danymi osobistymi, złożoną autoryzacją, bazami danych lub środowiskami regulowanymi, wymaga odpowiedniego projektowania: modelowania zagrożeń, przeglądu kodu przez osobę rozumiejącą każdą linię, testowania oraz monitoringu operacyjnego. Dla portfoliów, stron startowych, stron konsultingowych, prototypów oraz prostych stron z treścią jednak bariery wejścia są znacznie niższe niż kiedyś.

Czym zajmuje się asystent i czego nie decyduje

Asystent przejmuje dużą część zadań wykonawczych: pisze i edytuje kod, przekształca uwagi dotyczące projektu w konkretną zmianę, naprawia problemy wizualne oraz wyjaśnia nieznane kroki techniczne. Kilka decyzji pozostaje jednak wyłącznie w gestii człowieka:

• To, co powinna reprezentować strona.

Który treść jest ważna.

Czy projekt wizualny wydaje się odpowiedni.

Kiedy pierwsza wersja jest na tyle dobra, by ją wydać.

To przesuwa wąskie gardło. Kluczowe pytanie przestaje dotyczyć tego, czy technicznie można stworzyć stronę, a staje się pytaniem o to, czy można jasno zdecydować, czego chce się osiągnąć. Bariery implementacyjne spadają, ale potrzeba osądu pozostaje.

Główne wnioski

• Zdefiniuj cel, odbiorców i główną przesłanie przed wyborem jakiejkolwiek technologii.
• Zażądaj od modelu, aby zaproponował i uzasadnił projekt przed napisaniem kodu, oraz wyraźnie zatwierdź wybrany kierunek.
• Zajmij się logo oddzielnie, aby działało we wszystkich mediach, a nie tylko w nagłówku strony.
• Opieraj się na krótkich, konkretnych rundach iteracji z ograniczeniem „zachować wszystko inne” oraz listą kontrolną.
• Wykorzystuj asystenta zarówno jako krytyka, jak i pomocnika w tworzeniu, otrzymując uporządkowane i praktyczne informacje zwrotne.
• Zapisz kod na GitHubie i pozwól Cloudflare na jego rozpakowanie przy każdym pushu, dzięki czemu kontrola wersji i hostowanie będą automatyczne.
• Zachowaj ten lekki podejście dla stron o niskim ryzyku. Jego wartość polega na tym, jak poszczególne elementy łączą się w jeden proces pracy: ty decydujesz o celu, ocenie i zatwierdzeniu, asystent zajmuje się wykonaniem, GitHub przechowuje historię, a Cloudflare publikuje wynik.