O czym jest ten film
- Autor pokazuje strony, które stworzył z pomocą GPT-6 Astra: od witryny apartamentu po interaktywną stronę firmy meblarskiej.
- Wyjaśnia, dlaczego przed napisaniem polecenia warto zebrać przykłady wyglądu strony oraz własne zdjęcia i opis oferty.
- Pokazuje, jak wykorzystać gotowy opis stylu z Refero Design.
- Łączy ChatGPT z Higgsfield, by przygotować zdjęcia i filmy do witryny. Higgsfield jest sponsorem odcinka.
- Omawia wybór modelu, czasu pracy i limitu kredytów na materiały graficzne.
- Porównuje koszty generowania wideo różnymi modelami i pokazuje wynik pracy nad stroną firmy meblarskiej.
- Zaleca potraktować pierwszą wersję jako szkic oraz poprawić ją pod kątem czytelności i wygody użytkownika.
- Przeprowadza przez zakup domeny i hostingu, włączenie certyfikatu SSL oraz przesłanie plików na serwer.
10 najważniejszych takeaways — z kontekstem zastosowania
1.Zacznij od treści i materiałów firmy
Na czym polega: AI może szybko przygotować projekt, ale potrzebuje informacji o ofercie i produktach. Autor podkreśla, że najlepszy efekt daje przekazanie mu własnych zdjęć oraz konkretnego opisu działalności.
Jak stosować: Przed rozpoczęciem pracy spisz, co sprzedajesz, jakie informacje mają znaleźć się na stronie i co powinien zrobić odwiedzający. Dołącz zdjęcia rzeczywistych produktów, jeśli je masz.
Na co uważać: Przykładowe treści i wygenerowane obrazy mogą dobrze wyglądać w demonstracji, lecz nie zastąpią danych o prawdziwej firmie.
2.Pokaż styl, którego oczekujesz
Na czym polega: Zrzuty ekranu, zdjęcia i przykłady stron pomagają określić wygląd witryny precyzyjniej niż samo ogólne polecenie.
Jak stosować: Zbierz kilka przykładów, wybierz z nich konkretne cechy — układ, kolory, typografię, sposób prezentacji produktu — i opisz je razem z załączonymi obrazami.
Na co uważać: Samo hasło „strona w stylu Apple” pozostawia modelowi dużo swobody. Nawet przy dobrej inspiracji trzeba wskazać, co ma pasować do Twojej oferty.
3.Gotowy opis stylu potraktuj jako punkt wyjścia
Na czym polega: Autor korzysta z Refero Design, gdzie znajduje przykłady stron, animacji i szczegółowe opisy ich stylistyki.
Jak stosować: Wybierz inspirację, skopiuj opis stylu i dołącz go do polecenia dla modelu. Dopisz własne wymagania dotyczące treści i funkcji strony.
Na co uważać: Opis wyglądu nie dostarczy automatycznie wszystkich filmów czy zdjęć widocznych w pierwowzorze. Te materiały trzeba przygotować osobno.
4.Ustal budżet generowania przed uruchomieniem pracy
Na czym polega: Integracja z Higgsfield pozwala tworzyć materiały wizualne, ale zużywa kredyty. Autor wpisał w poleceniu limit około 200 kredytów na przykładową stronę.
Jak stosować: Podaj modelowi maksymalną liczbę kredytów, którą może wykorzystać, i sprawdzaj koszt wybranego modelu przed generowaniem filmu.
Na co uważać: Bez limitu narzędzie może wybrać kosztowny model. Cenniki i liczba kredytów potrzebnych do generowania mogą się zmieniać.
5.Dobieraj model wideo do ujęcia
Na czym polega: W przykładzie autora za film wygenerowany jednym modelem można było zapłacić znacznie więcej kredytów niż za podobnej długości materiał wykonany innym.
Jak stosować: Do prostego ujęcia sprawdź tańszy model. Droższy wybierz wtedy, gdy potrzebujesz większej precyzji lub lepszego odwzorowania przesłanego produktu.
Na co uważać: Oszczędniejszy model może sobie nie poradzić z dokładnym pokazaniem mechanizmu lub szczegółów konstrukcji. Oceniaj wynik, a nie samą cenę.
6.Określ czas pracy i oczekiwany zakres
Na czym polega: Autor daje agentowi konkretny termin wykonania zadania. Dla prezentowanego projektu wyznaczył 35 minut, choć zaleca przeznaczyć na podobną pracę około 45–50 minut.
Jak stosować: Napisz, jaką stronę chcesz otrzymać, jakie sekcje i funkcje mają się na niej znaleźć oraz ile czasu agent może poświęcić na pierwszą wersję.
Na co uważać: Krótki termin pomaga szybko uzyskać szkic, lecz nie oznacza, że strona będzie gotowa do publikacji bez poprawek.
7.Sprawdź działanie każdej funkcji
Na czym polega: Przykładowa strona firmy meblarskiej zawiera konfigurator stołu, zmianę wymiarów i kolorów oraz animację uruchamianą podczas przewijania. Autor zauważa też błąd w jednej z sekcji.
Jak stosować: Przejdź całą witrynę, wypróbuj przyciski i formularze, zmień ustawienia konfiguratora oraz sprawdź, co dzieje się podczas przewijania.
Na co uważać: Efektowny wygląd pierwszej wersji może odwrócić uwagę od niedziałających lub niedopracowanych elementów.
8.Efekty wizualne nie mogą utrudniać znalezienia informacji
Na czym polega: Filmy, animacje 3D i rozbudowane przewijanie robią wrażenie, ale mogą zniecierpliwić osobę szukającą ceny, oferty lub kontaktu.
Jak stosować: Umieść najważniejsze informacje i wyraźne przyciski tam, gdzie łatwo je znaleźć. Zostaw animacje w miejscach, w których pomagają pokazać produkt.
Na co uważać: Jeśli użytkownik musi długo przewijać stronę, zanim dowie się, co firma oferuje, może ją opuścić.
9.Poproś AI o poprawki, nie tylko o ocenę
Na czym polega: Autor proponuje polecenie, w którym agent działa jako projektant UX, redaktor, programista frontendu i tester, a następnie sam wprowadza zmiany w stronie.
Jak stosować: Po obejrzeniu pierwszej wersji wskaż błędy i poproś o poprawienie istniejących plików, uporządkowanie nawigacji, treści oraz przygotowanie paczki do publikacji.
Na co uważać: Raport z uwag nie jest poprawioną stroną. Sprawdź gotową wersję ponownie, także po wgraniu plików na serwer.
10.Publikuj zawartość paczki we właściwym katalogu
Na czym polega: W pokazanym procesie autor kupuje hosting i domenę, włącza certyfikat SSL, tworzy konto FTP i przesyła pliki strony przez FileZillę.
Jak stosować: Rozpakuj plik ZIP przygotowany przez agenta i prześlij znajdujące się w nim pliki oraz katalogi do folderu przypisanego domenie. Następnie otwórz adres strony w przeglądarce.
Na co uważać: Nowa domena i certyfikat mogą zacząć działać z opóźnieniem. Jeśli strona nie otwiera się od razu, odczekaj, odśwież ją i sprawdź w oknie prywatnym.
Redakcyjne tłumaczenie
Co można stworzyć z pomocą AI
GPT-6 Astra potrafi przygotować efektowne strony internetowe. Pokażę, jak zrobić zarówno prostszą witrynę, jak i stronę z animacjami, ile może to kosztować oraz których błędów warto uniknąć.
Na początek kilka przykładów wykonanych na potrzeby tego materiału. Przy pierwszych projektach polecenie było bardzo ogólne: poprosiłem o piękne, interaktywne strony internetowe. Chciałem zobaczyć, co powstanie bez szczegółowego opisywania każdego elementu.
Pierwszy projekt przedstawia dom w Beskidach, który mógłby być apartamentem na wynajem. U góry strony widać film z chmurami i wyraźny przycisk zachęcający do zaplanowania pobytu. Niżej są zdjęcia wnętrza, opis wyposażenia, galeria oraz możliwość rozpoczęcia rezerwacji.
Drugi przykład to strona produktu z flakonem i filmem w tle. Dalsza część ma już bardziej tradycyjny układ, między innymi z cennikiem. W kolejnym projekcie, dla salonu fryzjerskiego, uwagę przyciągają falujące włosy kobiety i wrażenie głębi. Strona agencji zajmującej się automatyzacją pracy pokazuje z kolei składającą się podczas przewijania kostkę Rubika. W tym projekcie powstało też animowane tło, które uważam za mniej udane. To dobry przykład, dlaczego warto dokładnie opisać zamierzony efekt.
Dałem agentowi również istniejącą stronę i poprosiłem o lepszą wersję w ciągu 15 minut. Przekazałem tylko jej adres, bez dodatkowych wzorów. Wynik mogłem porównać ze stroną wcześniej zaprojektowaną przez grafika. Inny z pokazanych projektów stawia przede wszystkim na widowiskowy początek i długie przewijanie. Taki zabieg może pasować do niektórych odbiorców, choć sam w sobie nie jest zaletą.
Najpierw wybierz narzędzia i zbierz inspiracje
Do pracy potrzebujesz ChatGPT. W chwili nagrania dostęp do GPT-6 Astra zapewniał plan Plus za około 100 zł miesięcznie; po miesiącu można go anulować. Można skorzystać także z tańszego planu Go, ale oferuje słabsze modele i limity, które szybciej się wyczerpują.
Zanim zaczniesz tworzyć stronę, poszukaj przykładów, które pokazują, jaki efekt chcesz osiągnąć. To może zaoszczędzić dużo czasu i kredytów zużywanych przy kolejnych próbach. Lepiej przesłać modelowi zrzuty ekranu lub zdjęcia i dopisać, co Ci się w nich podoba, niż polegać wyłącznie na opisie.
Korzystam między innymi z Refero Design. W zakładce poświęconej stylom można obejrzeć różne rozwiązania wizualne i animacje. Kiedy zajmowałem się tworzeniem stron, często słyszałem od klientów, że chcą witryny podobnej do stron Apple. W Refero można wyszukać takie inspiracje, obejrzeć przykład i skopiować szczegółowy opis jego stylu.
Nie musisz znać każdego terminu z tego opisu. Możesz wkleić go do rozmowy z modelem i wykorzystać jako wskazówkę dotyczącą wyglądu. Trzeba jednak pamiętać, że przykład może zawierać konkretne filmy i animacje. Sam opis stylu ich nie dostarczy — materiały wizualne należy przygotować dodatkowo.
Połącz ChatGPT z narzędziem do materiałów wizualnych
Do tworzenia zdjęć i filmów używam Higgsfield. To narzędzie jest sponsorem odcinka. Liczba dostępnych kredytów zależy od wybranego pakietu.
Po założeniu konta trzeba połączyć Higgsfield z ChatGPT. W pokazanym procesie wyszukuję integrację, instaluję ją, loguję się do Higgsfield i zezwalam na połączenie. Dzięki temu agent może korzystać z funkcji tworzenia zdjęć, filmów i innych materiałów wizualnych.
Polecam też zainstalować aplikację ChatGPT na komputerze. W tym przykładzie pracuję w Codexie: tworzę projekt, wskazuję katalog na dysku i tam agent zapisuje pliki strony. Po utworzeniu projektu można wpisywać kolejne zadania w jego obrębie.
Przygotuj polecenie dla agenta
Wracam do wybranej inspiracji w Refero Design, kopiuję opis stylu i wklejam go do zadania. Następnie określam, jaką stronę chcę zbudować. Na potrzeby pokazu wybieram firmę meblarską oferującą meble na zamówienie.
Gdybym naprawdę prowadził taką firmę, przed rozpoczęciem pracy opisałbym dokładnie ofertę i dodał zdjęcia własnych produktów. Tutaj tworzę przykład, więc agent musi przygotować również przykładowe materiały.
W poleceniu proszę o nowoczesną, interaktywną stronę produktową, korzystającą z dołączonego opisu stylu. Określam temat, główny efekt wizualny oraz informacje, które mają się znaleźć na stronie. Dopisuję także, ile kredytów Higgsfield wolno wykorzystać na ten projekt. To ważne: bez takiego ograniczenia agent mógłby wybrać kosztowny model generowania i szybko zużyć dostępny budżet. W moim przykładzie wystarcza około 200 kredytów.
Wybieram GPT-6 Astra i ustawiam wysoki poziom wysiłku modelu. Przy prostszych zadaniach mogą wystarczyć niższe ustawienia. Podaję również czas pracy. Dwadzieścia pięć minut uznaję za absolutne minimum, a zwykle radziłbym przeznaczyć około 45–50 minut. W tej demonstracji ustawiam 35 minut i uruchamiam zadanie.
Ile kosztuje tworzenie filmów
W trakcie pracy agenta zdjęcia przygotowane przez Higgsfield trafiają na moje konto w tej usłudze. Mogę je później obejrzeć, uporządkować, zmienić lub wygenerować ponownie. Podobnie jest z filmami. Jeśli ujęcie się nie uda, mogę poprawić polecenie i spróbować jeszcze raz.
Przed generowaniem warto sprawdzić, ile kredytów pobiera wybrany model. W czasie nagrania jeden film wykonany modelem Seedance 2.5 mógł kosztować około 130 kredytów. Przy ustawieniu Kling 3.0 piętnastosekundowy film kosztował w pokazanym przykładzie około 30 kredytów. Różnica jest duża, zwłaszcza gdy przygotowujesz kilka prób.
Nie zawsze warto wybierać najtańszą opcję. Kling może wystarczyć do prostego ujęcia, na przykład zbliżenia na budynek. Gdy film ma dokładnie pokazać mechanizm albo wiernie odtworzyć przesłany produkt, może być potrzebny inny model. Wybór zależy więc od tego, co ma przedstawiać gotowy materiał.
Higgsfield oferuje różne plany miesięczne. Najtańszy może wystarczyć do testów, lecz ma ograniczenia; wyższe plany zapewniają więcej kredytów i dostęp do dodatkowych modeli. Na stronie z cennikiem znajduje się przelicznik pokazujący przybliżoną liczbę filmów i zdjęć możliwych do wygenerowania w danym pakiecie. Podawane liczby i ceny dotyczą chwili nagrania, dlatego przed zakupem sprawdź aktualne warunki.
Pierwsza wersja strony i jej poprawki
Po 35 minutach oglądam wynik. Na początku strony znajduje się główna sekcja prezentująca produkt. Jest też konfigurator stołu: można zmieniać kolor oraz wymiary, pobrać specyfikację i przejść do wysłania zapytania. Podczas przewijania odtwarzana jest animacja składania stołu. Dalej można obejrzeć inne jego wersje i kolejny produkt — szafę.
Jak na pierwszy wynik, przygotowany bez moich ręcznych poprawek, strona wygląda dobrze. Widzę jednak błąd w jednej z sekcji. Taką wersję trzeba traktować jako szkic do dalszej pracy, nawet jeśli sprawia dobre pierwsze wrażenie.
Filmy, trójwymiarowe elementy i animacje uruchamiane podczas przewijania mogą znakomicie prezentować produkt. Łatwo jednak przesadzić. Ktoś, kto chce szybko znaleźć informacje, nie będzie zadowolony, jeśli musi długo przewijać stronę, a potrzebna treść wciąż się nie pojawia. Dlatego należy zadbać o czytelne przyciski, przejrzysty układ i umiar w stosowaniu efektów.
Przygotowałem dodatkowe polecenie do poprawiania strony. Proszę w nim agenta, by pracował jak projektant UX, redaktor, programista frontendu i tester. Ma nie poprzestawać na wskazaniu problemów, lecz poprawić istniejącą witrynę. Polecenie kładzie nacisk na czytelność i rozwiązania znane użytkownikom. Przykładowo logo w lewym górnym rogu oraz nawigacja u góry pomagają szybko zorientować się na stronie. Po wprowadzeniu zmian agent przygotowuje paczkę plików do umieszczenia na hostingu.
Domena, hosting i publikacja
Gdy agent przygotowuje pliki, pokazuję zakup hostingu i domeny na przykładzie polskiej firmy LH. Wybieram pakiet hostingu; do prostej strony odpowiedni może być pakiet Kiwi. Następnie sprawdzam dostępność nazwy domeny, dodaję ją do koszyka i przechodzę do zamówienia. W materiale pokazuję także miejsce na kod rabatowy „netgonet”. Potem zakładam konto i kończę zakup.
Po zalogowaniu do panelu wybieram serwer WWW i dodaję do niego kupioną domenę. Większość ustawień pozostawiam bez zmian, ale włączam bezpłatny certyfikat SSL. Na jego przygotowanie trzeba chwilę poczekać.
Do przesłania strony korzystam z programu FileZilla. Najpierw w panelu hostingu tworzę konto FTP i generuję hasło, którego nie należy nikomu udostępniać. Z panelu odczytuję adres serwera oraz nazwę użytkownika, a potem używam tych danych do połączenia. W programie otwieram katalog przypisany mojej domenie.
Agent przygotował plik ZIP z poprawioną stroną oraz opisem wprowadzonych zmian. Rozpakowuję archiwum na komputerze i przesyłam jego zawartość — pliki i foldery strony — do odpowiedniego katalogu na serwerze. W pokazanym przykładzie paczka ma około 20 MB, więc przesyłanie trwa chwilę.
Na końcu otwieram adres domeny w przeglądarce. Strona się wyświetla i wygląda tak jak w podglądzie. Jeśli po publikacji Twoja witryna nie działa od razu, odczekaj kilkanaście lub kilkadziesiąt minut. Możesz też odświeżyć stronę albo sprawdzić ją w oknie prywatnym przeglądarki.
To przyspieszony sposób zbudowania i opublikowania strony z pomocą AI. Gotowy projekt nadal wymaga obejrzenia, sprawdzenia działania oraz poprawek odpowiednich dla konkretnej firmy.