Jak tworzyć strony z AI Vibe Coding? Historia HybridAthlete.pl

Stronę hybridathlete.pl zbudowałem w jeden weekend, bez zespołu developerów i bez agencji - w modelu vibe coding, czyli opisując AI po polsku, co ma powstać. Pomysł miałem rano, wieczorem strona była online. W tym tekście rozkładam ten proces na czynniki pierwsze: jak promptować, co budować najpierw i co naprawdę dostajesz.

Jedno zastrzeżenie na start, żeby było uczciwie. To nie jest historia o magii, która sama zrobi stronę. To historia o tym, jak przesunąłem swoją robotę z pisania kodu na bycie strategiem, testerem i redaktorem produktu. I dlaczego to zadziałało.

• →Czym jest vibe coding?
• →Dlaczego w ogóle zbudowałem to sam?
• →Jak wyglądał mój workflow krok po kroku?
• →Jak promptowałem, żeby AI mnie rozumiało?
• →Co zbudowałem na hybridathlete.pl?
• →Co siedzi pod spodem?
• →Co realnie z tego wyszło?
• →Na co uważać przy vibe codingu?
• →Dla kogo to ma sens?
• →FAQ Czy vibe coding wymaga umiejętności programowania? Jak długo trwała budowa hybridathlete.pl? Jakiego narzędzia użyłem? Czy taka strona jest dobra pod SEO? Czy mogę później coś zmieniać sam?
• →Słowniczek

Czym jest vibe coding?

Vibe coding to podejście, w którym opisujesz AI cel, układ i funkcje, a model generuje kod, design, bazę danych i deploy. Ty oceniasz efekt, dajesz feedback i iterujesz. Zamiast pisać linia po linii, prowadzisz projekt rozmową.

W praktyce wygląda to tak: mówisz, co chcesz mieć, jak człowiekowi. AI robi pierwszą wersję. Ty patrzysz, co działa, a co nie, i wskazujesz poprawki. Po kilku rundach masz coś, co naprawdę stoi w sieci. Nie potrzebujesz do tego klasycznego procesu developerskiego.

Dlaczego w ogóle zbudowałem to sam?

Bo strona-wizytówka z numerem telefonu już mi nie wystarczała. Sprzedaję plany treningowe online, prowadzę treningi 1:1 w Gdańsku i piszę bloga pod SEO. Potrzebowałem czegoś, co sprzedaje, a nie tylko istnieje. Klasyczna ścieżka to brief, agencja, tygodnie czekania i faktura. Vibe coding skrócił to do weekendu.

Drugi powód jest prosty: znam swój biznes lepiej niż ktokolwiek z zewnątrz. Wiem, jaka kolejność sekcji konwertuje, jakie mam USP i co ma być w nagłówku. Narzędzie przyspieszyło wykonanie, ale strategię trzymałem u siebie.

Jak wyglądał mój workflow krok po kroku?

Zacząłem od krótkiego PRD, czyli kilku zdań o tym, dla kogo jest strona i co ma robić. Potem budowałem cegłami, jedną sekcją na raz.

1. 1.Ustaliłem cel: sprzedaż planów, leady na konsultacje 1:1, zapisy przez formularz.
2. 2.Napisałem pierwszy prompt z briefem: grupa docelowa, styl, sekcje, główny CTA, przewagi, FAQ.
3. 3.Poprosiłem o front na mock danych, bez komplikowania backendu na starcie.
4. 4.Iterowałem ekran po ekranie: hero, oferta, sklep, social proof, formularz, thank you page.
5. 5.Dopiero potem dodałem logikę, integracje i warstwę techniczną.

Ta kolejność jest ważna. Najpierw layout i flow na zmyślonych danych, backend dopiero wtedy, gdy doświadczenie użytkownika już działa. Dzięki temu szybko widziałem, czy strona ma sens, zanim wszedłem w integracje.

Jak promptowałem, żeby AI mnie rozumiało?

AI działa lepiej, gdy dostaje jasny kontekst i wie, czego ma nie ruszać. Trzymałem jeden dokument z zasadami brandu, sekcjami i stylem, i wracałem do niego przy kolejnych zmianach.

Mój prompt miał zawsze ten sam szkielet:

• →Co buduję.
• →Dla kogo.
• →Jaki jest cel biznesowy.
• →Jakie sekcje mają być.
• →Jaki styl wizualny.
• →Czego nie zmieniać.
• →Co jest kolejnym krokiem.

Przykład, którego użyłem przy stronie głównej: nowoczesny landing dla marki Hybrid Athlete, hero z parallaxem, ciemny industrialny klimat, custom typografia, animacje przy scrollu, mocny CTA do planów treningowych. Najpierw front na mock danych. Tak właśnie powstał hero, który dziś widać na stronie, razem z optymalizacją pod Core Web Vitals.

Co zbudowałem na hybridathlete.pl?

Strona to nie jeden landing, tylko mały ekosystem. Po kolei:

• →Strona główna z hero, planami treningowymi i sekcją "poznaj mnie"
• →Oferta i podstrona trenera personalnego z konsultacją 1:1 w Gdańsku
• →Sklep z planami w integracji z FITMADE
• →Blog pod SEO z panelem admina
• →Atlas ćwiczeń, sekcja motywacja, partnerzy, kontakt

Sklep sprzedaje konkret. Program Hybrid Athlete to 5 dni treningowych po 60-90 minut w modelu ciągłym, z 3 dniami darmowego trialu. Plan na 2 tygodnie kosztuje 59 zł, a na 4 tygodnie 99 zł. Formularz kontaktowy podpiąłem pod mailing, dorzuciłem panel admina do bloga i FAQ - i to wszystko ustawiłem z poziomu czatu.

Co siedzi pod spodem?

Stack jest nowoczesny, choć sam prawie go nie dotykałem ręcznie. AI dobrało i spięło elementy, ja pilnowałem efektu.

SSR i edge deployment nie są tu ozdobą. To one sprawiają, że strona ładuje się szybko i jest gotowa pod indeksację, a to przekłada się na widoczność i konwersję.

Co realnie z tego wyszło?

Konkrety, bo bez nich case study to tylko opowieść:

• →Ponad 12 podstron i landing page'y
• →Pełna responsywność i dark mode
• →SEO od podstaw: meta tagi, sitemap, JSON-LD
• →CMS, czyli panel admina do bloga i FAQ
• →Plik llms.txt pod widoczność w ChatGPT i innych modelach
• →Nieograniczona liczba iteracji bez kosztów agencji

Ten ostatni punkt jest dla mnie najmocniejszy. Każda zmiana w ofercie, nowy plan, nowy wpis na blogu - robię to sam, w kilka minut, bez kolejki u zewnętrznego wykonawcy.

Na co uważać przy vibe codingu?

Nie wszystko jest różowe i nie chcę tego ukrywać.

• →Nie zlecaj pięciu zmian naraz, bo rośnie chaos i trudniej znaleźć, co się zepsuło.
• →Po każdej większej zmianie testuj mobilkę, CTA i formularz.
• →Trzymaj jeden dokument z zasadami brandu jako punkt odniesienia.
• →Używaj screenów stron referencyjnych i screenów błędów, bo wizualny input działa.
• →Gdy projekt zaczyna się sypać, wracaj do stabilnej wersji zamiast naprawiać w nieskończoność.

I rzecz najważniejsza: narzędzie nie zastąpi strategii. Strukturę pod SEO, kolejność sekcji pod konwersję, USP i nagłówki nadal ustawiasz Ty. AI jest przyspieszaczem, nie zastępcą myślenia.

Dla kogo to ma sens?

Z mojego doświadczenia vibe coding najlepiej sprawdza się przy:

• →stronach pod lead generation,
• →prostych narzędziach SEO i kalkulatorach,
• →stronach sprzedażowych pod usługę lub webinar,
• →MVP i marce osobistej, którą trzeba szybko zweryfikować rynkowo.

Marka osobista trenera to wręcz modelowy przykład. Mam konkretne dowody - starty, tytuły, wyniki - i potrzebowałem miejsca, które to pokaże i jednocześnie sprzeda plany. Weekend wystarczył.

Czy vibe coding wymaga umiejętności programowania?

Nie do startu. Opisujesz cel po polsku, a AI generuje kod. Przydaje się natomiast myślenie produktowe i znajomość własnego biznesu.

Jak długo trwała budowa hybridathlete.pl?

Pierwsza działająca wersja powstała w jeden weekend. Rozwijam ją dalej iteracyjnie.

Jakiego narzędzia użyłem?

Lovable, w połączeniu z Lovable Cloud i AI Gateway, na stacku React + TanStack Start, Tailwind CSS v4 i Cloudflare Workers.

Czy taka strona jest dobra pod SEO?

Tak, jeśli zadbasz o podstawy. U mnie to SSR, meta tagi, sitemap, JSON-LD i plik llms.txt pod widoczność w modelach AI.

Czy mogę później coś zmieniać sam?

Tak. Panel admina i model iteracyjny pozwalają dodawać wpisy, plany i sekcje bez kosztów agencji.

Słowniczek

• →Vibe coding - budowanie produktu przez opis w języku naturalnym i iterację z AI zamiast ręcznego pisania kodu.
• →PRD - krótki dokument celu: dla kogo, po co, jakie sekcje, jaki CTA.
• →SSR - renderowanie po stronie serwera, pomaga w szybkości i indeksacji.
• →llms.txt - plik ułatwiający modelom AI rozumienie i cytowanie strony.
• →Mock data - dane zastępcze, na których testujesz layout przed podłączeniem backendu.