Jak stworzyć stronę WWW z AI? Część 2: rozbudowa i przygotowanie do publikacji

Otwórz Codexa lub Claude Code, w którym tworzyliśmy pierwszą część strony „Zielona Przestrzeń”.

Możesz po prostu kontynuować poprzednią rozmowę. Asystent będzie miał wtedy dostęp do wcześniejszej dyskusji i ustaleń.

Możesz również rozpocząć nowy czat w ramach tego samego projektu, klikając przycisk nowej rozmowy obok nazwy projektu.

W obu przypadkach pracujemy dalej nad istniejącą stroną. Nie musimy tworzyć nowego projektu ani ponownie wskazywać jego folderu.

Pamiętaj tylko, że nowa rozmowa nie zawsze zachowuje pełną historię poprzedniej. Dlatego przed rozpoczęciem kolejnych zmian warto poprosić asystenta o sprawdzenie aktualnego stanu projektu.

Skopiuj i wklej ten prompt:

Wracamy do pracy nad moją stroną internetową „Zielona Przestrzeń”.

Nie znam się na programowaniu, dlatego tłumacz mi wszystko prostym językiem.

Sprawdź aktualny stan projektu. Powiedz mi, co jest już gotowe, co jeszcze trzeba zrobić i czy mamy zapisaną bezpieczną wersję, do której można wrócić.

Na razie niczego nie zmieniaj.

AI przeanalizuje projekt i przedstawi podsumowanie.

To ważny nawyk. Zanim zlecimy kolejne zmiany, upewniamy się, że asystent rozumie, nad czym pracujemy.

Dlaczego pytamy o bezpieczną wersję?

Podczas rozbudowy strony można łatwo zepsuć coś, co wcześniej działało.

Dlatego korzystamy z Git. To narzędzie pozwalające zapisywać kolejne wersje projektu.

Możesz potraktować je jak system punktów kontrolnych w grze. Gdy coś pójdzie nie tak, można wrócić do wcześniejszego stanu.

Nie musisz znać poleceń Git. Wystarczy, że nauczysz się prosić AI o zapisanie zaakceptowanych zmian.

Zanim zaczniemy rozbudowę, zastanówmy się, czego oczekuje osoba odwiedzająca stronę firmy ogrodniczej.

Prawdopodobnie chce wiedzieć:

• Jakie usługi oferuje firma?
• Czym się wyróżnia?
• Jak wyglądają jej projekty?
• Jak można się skontaktować?

Nie musimy samodzielnie projektować każdej sekcji. Możemy poprosić AI o przygotowanie propozycji.

Prompt:

Chcę rozbudować stronę „Zielona Przestrzeń”.

To przykładowa firma zajmująca się projektowaniem, zakładaniem i pielęgnacją ogrodów.

Zaproponuj przejrzystą strukturę strony głównej, która pomoże potencjalnemu klientowi poznać ofertę i skontaktować się z firmą.

Zachowaj dotychczasowy wygląd projektu.

Nie wprowadzaj jeszcze zmian. Najpierw przedstaw propozycję i wyjaśnij, dlaczego poszczególne elementy są potrzebne.

Zauważ, że nie mówimy AI, jakiego kodu ma użyć. Mówimy, jaki rezultat chcemy osiągnąć.

To istotna różnica.

Dobry asystent programistyczny potrafi sam dobrać odpowiednie rozwiązania techniczne. Naszym zadaniem jest ocenić, czy odpowiadają temu, czego potrzebujemy.

Zacznijmy od usług.

Dla naszej przykładowej firmy będą to projektowanie ogrodów, zakładanie ogrodów i pielęgnacja sezonowa.

Zamiast budować całą stronę za jednym razem, poprosimy AI o wykonanie jednego zadania.

Prompt:

Dodaj do mojej strony sekcję „Nasze usługi”.

Przygotuj trzy estetyczne elementy opisujące projektowanie ogrodów, zakładanie ogrodów i pielęgnację sezonową.

Każda usługa powinna mieć krótki opis zrozumiały dla klienta.

Zachowaj istniejące kolory, czcionki i styl strony. Zadbaj o dobry wygląd na komputerze i telefonie.

Nie zmieniaj pozostałych sekcji, jeśli nie jest to konieczne.

Po zakończeniu sprawdź, czy projekt działa, i powiedz mi, jak obejrzeć rezultat.

Teraz otwórz stronę w przeglądarce.

Przyjrzyj się nowej sekcji. Czy opisy są czytelne? Czy kolory pasują do reszty? Czy na telefonie elementy nie są zbyt ciasne?

Co zrobić, jeśli coś nam się nie podoba?

Po prostu powiedz o tym AI.

Na przykład:

Sekcja usług wygląda zbyt sztywno. Chciałbym, żeby była bardziej naturalna i pasowała do charakteru firmy ogrodniczej.

Zaproponuj delikatniejsze karty, więcej przestrzeni między elementami i subtelne akcenty roślinne.

Nie zmieniaj kolorystyki całej strony.

Możesz także przesłać asystentowi zrzut ekranu i wskazać element, który wymaga poprawy.

Nie musisz znać słów takich jak CSS, flexbox czy komponenty.

Ważne, żebyś potrafił opisać, co chcesz zmienić.

Teraz dodamy sekcję „O nas”.

Tutaj warto zachować ostrożność.

Modele AI potrafią pisać przekonujące teksty marketingowe. Problem pojawia się wtedy, gdy zaczynają wymyślać doświadczenie firmy, liczbę klientów, nagrody albo zrealizowane projekty.

Na prawdziwej stronie internetowej takie informacje powinny być zgodne z rzeczywistością.

W naszym projekcie demonstracyjnym nie mamy jeszcze prawdziwych danych firmy. Dlatego przedstawimy sposób pracy zamiast fikcyjnej historii.

Prompt:

Dodaj do strony sekcję „O nas”.

Opisz podejście firmy do projektowania ogrodów, zwracając uwagę na poznanie potrzeb klienta, dopasowanie roślin do warunków i tworzenie przestrzeni wygodnych w użytkowaniu.

Nie wymyślaj liczby lat doświadczenia, nagród, klientów ani wykonanych realizacji.

Przygotuj przyjazny, naturalny tekst. Nie używaj przesadnego języka reklamowego.

Zachowaj dotychczasowy wygląd strony.

Jeśli tworzysz prawdziwą stronę dla swojej firmy, możesz od razu podać AI informacje o działalności, doświadczeniu i usługach.

Im więcej prawdziwych informacji przekażesz, tym lepiej asystent dopasuje treść.

Strona firmy zajmującej się ogrodami powinna pokazywać coś więcej niż sam tekst.

Zdjęcia i ilustracje pomagają odwiedzającym wyobrazić sobie efekt pracy.

Mamy jednak ważne rozróżnienie: zdjęcie wygenerowane przez AI nie jest fotografią rzeczywiście wykonanego projektu.

Dlatego w naszej demonstracyjnej stronie stworzymy sekcję „Inspiracje”, a nie fikcyjne portfolio.

Prompt:

Dodaj do strony sekcję „Inspiracje”.

Pokaż trzy koncepcje: ogród naturalistyczny, zielone patio oraz ogród rodzinny.

Zaproponuj atrakcyjny sposób przedstawienia tych pomysłów z wykorzystaniem odpowiednich ilustracji lub zdjęć, do których mamy prawo.

Nie przedstawiaj obrazów wygenerowanych przez AI jako rzeczywistych realizacji firmy.

Zadbaj o spójność wizualną z istniejącą stroną oraz o czytelne opisy.

Jeśli masz już własne zdjęcia, możesz przekazać je asystentowi i poprosić o wykorzystanie na stronie.

Pamiętaj tylko, by nie przekazywać cudzych fotografii bez odpowiednich praw do ich wykorzystania.

Strona zaczyna wyglądać coraz lepiej. Ale potencjalny klient musi jeszcze mieć możliwość skontaktowania się z firmą.

Możemy zastosować adres e-mail, numer telefonu albo formularz kontaktowy.

Wybór zależy od tego, jak chcesz obsługiwać zapytania.

Na początek możemy przygotować samą sekcję kontaktową. Jeśli nie mamy jeszcze prawdziwych danych, asystent powinien poprosić nas o ich uzupełnienie, a nie je wymyślać.

Prompt:

Przygotuj sekcję „Kontakt”, dopasowaną wizualnie do reszty strony.

Chcę umożliwić klientom kontakt przez e-mail, telefon oraz prosty formularz.

Zanim rozpoczniesz pracę, zapytaj mnie o potrzebne dane.

Formularz musi rzeczywiście wysyłać wiadomości, a nie tylko wyglądać na działający.

Wyjaśnij, czy do jego obsługi potrzebujemy dodatkowej usługi i czy wiąże się to z kosztami.

Nie wdrażaj płatnych usług bez mojej zgody.

Dlaczego ostatnie zdanie jest ważne?

Ponieważ stworzenie wyglądu formularza jest stosunkowo proste. Natomiast jego rzeczywista obsługa może wymagać dodatkowej konfiguracji.

AI powinno wyjaśnić, gdzie trafiają wiadomości, w jaki sposób formularz jest chroniony przed spamem i jakie informacje dotyczące prywatności trzeba udostępnić użytkownikowi.

Nie uznajemy formularza za gotowy, dopóki nie sprawdzimy, że wiadomość rzeczywiście dociera do odbiorcy.

Większość z nas przegląda internet również na telefonie. Dlatego nasza strona musi dobrze wyglądać na różnych ekranach.

Możemy poprosić AI o sprawdzenie całego projektu.

Prompt:

Sprawdź, jak moja strona działa na komputerach, tabletach i telefonach.

Zwróć uwagę na czytelność tekstu, wielkość przycisków, działanie menu, odstępy między elementami i poprawność wyświetlania ilustracji.

Sprawdź również, czy można wygodnie korzystać ze strony za pomocą klawiatury.

Najpierw przedstaw znalezione problemy prostym językiem.

Nie wprowadzaj zmian bez mojej akceptacji. Wyraźnie zaznacz, czego nie udało Ci się rzeczywiście przetestować.

To ostatnie zdanie też ma znaczenie.

Model AI potrafi oceniać kod, ale sama analiza kodu nie oznacza, że sprawdził działanie strony w prawdziwej przeglądarce.

Jeżeli agent ma możliwość otwarcia strony i wykonywania testów, warto z tego skorzystać. Jeśli nie, powinniśmy samodzielnie sprawdzić najważniejsze elementy.

Załóżmy, że strona wygląda już tak, jak chcemy.

Teraz poprosimy AI o zapisanie tej wersji w Git.

Prompt:

Jestem zadowolony z obecnej wersji strony.

Sprawdź, czy projekt działa poprawnie i czy nie ma błędów.

Jeśli testy zakończą się pomyślnie, zapisz aktualne zmiany w Git jako nowy punkt kontrolny.

Nie wysyłaj projektu do zewnętrznego repozytorium i nie publikuj go jeszcze w internecie.

Na koniec potwierdź, co zostało zapisane, oraz wyjaśnij, jak będzie można wrócić do tej wersji.

Od tej chwili mamy kolejny zapisany etap pracy.

Możemy eksperymentować z wyglądem strony, dodawać funkcje i testować pomysły, wiedząc, że mamy możliwość powrotu do poprzedniej wersji.

Oczywiście Git nie zastępuje pełnej kopii zapasowej komputera ani plików przechowywanych poza repozytorium.

Nasza strona działa na komputerze, na którym ją tworzyliśmy.

To jednak nie oznacza, że inni mogą już ją odwiedzić.

Żeby strona była dostępna w internecie, potrzebujemy miejsca, w którym zostanie opublikowana.

Takie miejsce zapewnia hosting.

Potrzebujemy również adresu strony, na przykład www.twojafirma.pl. Taki adres nazywamy domeną.

Dobra wiadomość jest taka, że nie musisz ręcznie konfigurować wszystkich technicznych elementów.

Możesz poprosić Codexa lub Claude Code, aby przeprowadził Cię przez ten proces.

W naszym przypadku strona jest zbudowana w technologii Astro, która pozwala przygotować lekką stronę nadającą się do publikacji między innymi na Cloudflare Pages.

Prompt:

Chcę przygotować moją stronę do publikacji w internecie.

Nie znam się na hostingu, domenach ani konfiguracji serwerów.

Sprawdź, jakie rozwiązanie będzie odpowiednie dla mojego projektu.

Porównaj możliwość wykorzystania Cloudflare Pages oraz zwykłego hostingu lub serwera VPS.

Wyjaśnij prostym językiem zalety, ograniczenia i ewentualne koszty.

Zaproponuj najprostsze rozsądne rozwiązanie dla początkującego.

Na razie niczego nie publikuj.

Nie zawsze potrzebujemy własnego serwera VPS.

Dla prostej strony firmowej hosting statyczny może być wystarczający i łatwiejszy w utrzymaniu.

Jeżeli jednak planujemy bardziej rozbudowane funkcje, na przykład system rezerwacji, własną bazę danych czy aplikację obsługującą klientów, wymagania mogą być inne.

Najważniejsze, żeby nie kupować dodatkowej infrastruktury tylko dlatego, że asystent potrafi ją skonfigurować.

Zanim udostępnimy stronę klientom, przeprowadźmy ostatni przegląd.

Prompt:

Przygotuj moją stronę do końcowej kontroli przed publikacją.

Sprawdź poprawność działania wszystkich sekcji, menu, przycisków i formularza kontaktowego.

Skontroluj również wersję mobilną, podstawowe ustawienia SEO, dostępność strony i prawidłowość danych kontaktowych.

Sprawdź, czy strona nie zawiera przykładowych adresów, fikcyjnych opinii, nieaktualnych informacji ani elementów niedokończonych.

Uruchom dostępne testy techniczne i sprawdź, czy można poprawnie przygotować wersję produkcyjną.

Wypisz, co zostało przetestowane, czego nie udało się sprawdzić i co trzeba poprawić.

Nie publikuj strony bez mojej zgody.

Jeżeli wszystko działa, jesteśmy gotowi do następnego etapu.

Zaczynaliśmy od prostej strony z nagłówkiem i sekcją powitalną.

Teraz mamy znacznie bardziej rozbudowany projekt, zawierający ofertę usług, informacje o firmie, inspiracje i sekcję kontaktową.

Co ważniejsze, nauczyliśmy się kilku zasad współpracy z AI.

Nie musimy wiedzieć, jak napisać każdy element strony. Musimy jednak wiedzieć, jakiego rezultatu oczekujemy, jak ocenić wykonane zadanie i kiedy nie należy ufać zapewnieniom asystenta bez sprawdzenia ich w praktyce.

AI może pisać kod, proponować rozwiązania i pomagać rozwiązywać problemy. Ale ostateczna decyzja dotycząca wyglądu, treści i publikacji strony należy do nas.

Co w części trzeciej?

W kolejnej części przejdziemy przez rzeczywistą publikację strony w internecie.

Pokażemy, jak wybrać hosting, założyć potrzebne konto, podłączyć domenę i uruchomić HTTPS, żeby odwiedzający mogli bezpiecznie korzystać ze strony.

Sprawdzimy też, czy opublikowana witryna naprawdę działa i jak wprowadzać późniejsze poprawki bez budowania wszystkiego od początku.

MorenaTech | Aplikacje • automatyzacje • AI