Zbuduj i opublikuj sklep z odzieżą do jogi — krok po kroku

Ten przewodnik przeprowadzi Cię — krok po kroku, spokojnie i po ludzku — od pustej kartki do gotowej strony internetowej Twojej firmy, opublikowanej w internecie. Nie musisz umieć programować. Wystarczy, że potrafisz opisać, czego chcesz.

Za przykład posłuży nam prawdziwy scenariusz: sklep z odzieżą do jogi „Sattva”. Zbudujemy nowoczesną, jednostronicową stronę (tzw. one-page), która pięknie prezentuje kolekcję i zbiera zamówienia — na tym etapie bez płatności online, za to z działającym formularzem, firmowym e-mailem i klikalnym telefonem. Wszystko po polsku.

Co dokładnie osiągniesz

• Zrozumiesz, czym jest v0 i jak z nim rozmawiać, żeby dostać dokładnie to, czego chcesz.
• Nauczysz się prostego „języka instrukcji” (JSON) — bez strachu, na przykładach.
• Zaprojektujesz wyjątkową sekcję hero i galerię produktów, które sprzedają.
• Zbudujesz kompletną instrukcję dla swojej strony i wygenerujesz ją jednym poleceniem.
• Ustawisz zbieranie zamówień przez e-mail i telefon (płatności online dodasz później).
• Opublikujesz stronę w internecie i podepniesz własną domenę z home.pl.

Mapa drogi

v0 to asystent sztucznej inteligencji od firmy Vercel. Wyobraź sobie, że zatrudniasz jednocześnie projektanta i programistę, który pracuje 24 godziny na dobę, nigdy się nie męczy i rozumie zwykły język.

Nie klikasz w skomplikowane menu. Piszesz po prostu, czego potrzebujesz — na przykład „zrób mi stronę dla kwiaciarni z Krakowa” — a v0 projektuje ją i pisze cały kod za Ciebie. Efekt widzisz od razu w podglądzie po prawej stronie.

Jak wygląda ekran v0

Interfejs ma trzy główne części. Poznaj je, zanim zaczniemy:

Trzy pojęcia, które warto znać

Agent to program AI, z którym rozmawiasz jak z człowiekiem. Prompt to Twoja wiadomość do agenta — prośba lub polecenie. Podgląd (preview) to widok Twojej strony na żywo, który zmienia się po każdym poleceniu.

Czego v0 nie zrobi za Ciebie

v0 nie wymyśli za Ciebie, czym zajmuje się Twoja firma ani co chcesz powiedzieć klientom. Im lepiej opiszesz swój pomysł, tym lepszy będzie efekt. Dlatego w tym przewodniku przygotujemy razem dokładną instrukcję — zanim cokolwiek zbudujemy.

Zanim zaczniesz budować, musisz się zalogować. To jak włączenie komputera przed pracą — prosty, jednorazowy krok.

Krok po kroku

1. 1. Otwórz przeglądarkę i wejdź na stronę v0.app.
2. 2. Kliknij przycisk „Sign in” (Zaloguj się) w prawym górnym rogu.
3. 3. Wpisz dane dostępu, które otrzymałeś/-aś (patrz karta poniżej), albo zaloguj się kontem Google.
4. 4. Gotowe — zobaczysz puste pole do wpisania pierwszego polecenia.

Czas na pierwszą rozmowę z agentem. Nauczysz się pisać polecenia tak, żeby v0 rozumiał Cię za pierwszym razem.

Złota zasada: bądź konkretny/-a

Porównaj dwa polecenia. Pierwsze jest zbyt ogólne, drugie daje agentowi wszystko, czego potrzebuje:

Spróbuj sam/-a — symulacja rozmowy

Poniżej znajdziesz bezpieczną makietę okna czatu. Kliknij przykładowe polecenie albo wpisz własne i zobacz, jak agent „odpowiada” i buduje stronę. To tylko ćwiczenie — nic się nie zepsuje.

Cofanie i wersje

Nie bój się eksperymentować. Każda zmiana zapisuje się jako wersja. Jeśli coś Ci się nie spodoba, wracasz do poprzedniej wersji jednym kliknięciem — jak cofnięcie w edytorze tekstu.

Tryb projektowania (Design Mode) — zmiany bez pisania

Poza rozmową v0 ma też Design Mode — tryb, w którym poprawiasz wygląd myszką, jak w edytorze graficznym. Otwierasz go z ustawień projektu (przycisk koła zębatego w prawym górnym rogu → „Design”).

Klikasz w element na stronie — na przykład w nagłówek albo przycisk — i zmieniasz jego kolor, rozmiar czcionki czy odstępy za pomocą prostych suwaków i pól. To wygodne do drobnych poprawek stylu, gdy nie chcesz za każdym razem pisać polecenia.

JSON brzmi groźnie, ale to po prostu uporządkowany sposób zapisywania informacji — jak wypełniony formularz albo przepis kulinarny, który komputer rozumie bez pomyłek.

Analogia: przepis kulinarny

Wyobraź sobie przepis. Ma nazwę, listę składników i kroki. JSON działa tak samo: ma „etykiety” (co to jest) i „wartości” (co konkretnie). Etykietę i wartość oddziela dwukropek, a kolejne pary — przecinek.

Najprostszy przykład

{
  "nazwa_marki": "Sattva",
  "miasto": "Kraków",
  "wysylka": true,
  "produkty": ["legginsy", "topy", "bluzy"]
}

Czytamy to tak: „nazwa marki to Sattva, miasto to Kraków, wysyłka jest dostępna (true = prawda), a produkty to legginsy, topy i bluzy”. Nawiasy klamrowe { } to „pudełko” z informacjami, a nawiasy kwadratowe [ ] to lista.

Wypróbuj na żywo

Poniżej masz mały edytor. Zmień tekst po prawej stronie dwukropka — na przykład wpisz swoje miasto — i zobacz, jak od razu zmienia się „wizytówka” po prawej. Jeśli popełnisz błąd (np. usuniesz cudzysłów), edytor delikatnie Cię o tym uprzedzi.

Zanim zaprojektujesz stronę, zobacz, co robi konkurencja. Nie po to, żeby kopiować — po to, żeby wiedzieć, co działa, a czego unikać, i czym się wyróżnisz.

Rekonesans w 15 minut

Wpisz w Google to, co wpisałby Twój klient — np. „joga Kraków” albo „fryzjer Wrocław centrum”. Otwórz 3–4 pierwsze strony i przy każdej zanotuj dwie rzeczy: co Ci się podoba i co Cię irytuje.

Twój arkusz rekonesansu

Wypełnij poniższy arkusz. Zapiszemy z niego gotowy fragment JSON, który później wkleimy do instrukcji dla v0. Wszystko zostaje w Twojej przeglądarce.

Dobra strona firmowa to nie zbiór przypadkowych elementów, tylko historia opowiedziana od góry do dołu. Każda sekcja odpowiada na jedno pytanie odwiedzającego.

Sekcje strony one-page

Poznaj typowy układ. Odwiedzający przewija stronę i po kolei dowiaduje się wszystkiego, czego potrzebuje, aby się z Tobą skontaktować lub kupić.

• Hero — „Gdzie jestem i czy to dla mnie?” Duży nagłówek, zdjęcie, przyciski.
• Kolekcja — „Co mogę kupić?” Galeria produktów ze zdjęciem, nazwą i ceną.
• O nas — „Czy mogę Wam zaufać?” Krótka, ludzka historia marki.
• Opinie — „Czy inni są zadowoleni?” Cytaty klientek.
• FAQ — „Jak to działa?” Np. jak złożyć zamówienie, zwroty, rozmiary.
• Kontakt — „Jak zamówić?” Formularz na e-mail, klikalny telefon.

Sekcja hero, która sprzedaje

Hero to pierwsze, co widzi klientka — masz około 3 sekund, żeby ją zatrzymać. Dobra sekcja powitalna łączy sześć elementów. Kliknij każdy z nich poniżej, aby zobaczyć, co robi i dlaczego jest ważny:

Nadhasło (eyebrow)Nagłówek głównyPodtytułDwa przyciski (CTA)Znaczki zaufaniaDuże zdjęcie

sattva.pl

Odzież do jogi z bawełny organicznej

Ubrania, które oddychają razem z Tobą

Miękkie, minimalistyczne komplety szyte w Polsce z certyfikowanej bawełny organicznej. Do ruchu i do odpoczynku.

Zobacz kolekcję Zamów przez e-mail

Bawełna organiczna Szyte w Polsce Darmowa wysyłka od 300 zł

Kliknij element powyżej, aby dowiedzieć się, dlaczego dobra sekcja hero go zawiera.

Zobacz JSON tej sekcji

Poukładaj resztę strony

Ten sam materiał można ułożyć na kilka sposobów. Poklikaj warianty układu hero i zobacz, że to tylko kilka wartości w JSON-ie. Potem ułożysz w głowie kolejność pozostałych sekcji.

klasycznyasymetrycznyodważny

sattva.pl

Sattva

Ubrania, które oddychają razem z Tobą

Miękkie, minimalistyczne komplety do jogi, szyte w Polsce z bawełny organicznej.

Zobacz kolekcję

Ta sama treść — inny układ. Zmienia się tylko kilka wartości w JSON-ie.

Zobacz JSON tej sekcji

To serce całego przewodnika. Zbudujemy jedną, kompletną instrukcję JSON, która opisuje całą Twoją stronę. Wkleisz ją do v0, a agent zbuduje wszystko za jednym razem.

Nie pisz tego od zera. Poniżej masz gotowy szablon z „miejscami do wypełnienia” w podwójnych nawiasach klamrowych, np. {{NAZWA_FIRMY}}. Twoim zadaniem jest tylko podmienić te miejsca na własne dane.

Wypełniaj i podglądaj na żywo

Edytuj szablon poniżej. Po lewej piszesz, po prawej od razu widzisz, jak będzie wyglądać Twoja strona. Gdy skończysz, kliknij „Kopiuj” i przejdź do v0.

Pełny szablon do skopiowania

To jest kompletna, gotowa instrukcja dla sklepu z odzieżą do jogi: hero, galeria produktów, „o nas”, opinie, FAQ i kontakt (e-mail + telefon). Płatności są celowo wyłączone ("provider": "none") — dodasz je później. Skopiuj i podmieniaj pola {{...}} po kolei:

Zobacz, jak wygląda w pełni wypełniony

Nie wiesz, co wpisać w danym polu? Podejrzyj kompletny, realny przykład marki „Sattva” — wszystkie pola są już wypełnione. Możesz go potraktować jako wzór albo punkt startu.

Jak użyć tego w v0

1. 1. Skopiuj wypełniony JSON.
2. 2. W v0 wpisz: „Zbuduj stronę dokładnie według tej instrukcji JSON:” i wklej całość.
3. 3. Poczekaj, aż podgląd się zbuduje. Potem poprawiaj pojedyncze rzeczy zwykłymi zdaniami.

Nawigacja (menu na górze) i stopka (na samym dole) to rama Twojej strony. Prowadzą odwiedzającego i budują zaufanie. Zobaczmy je na żywych przykładach.

Nawigacja (navbar)

Menu może być przyklejone do góry (zawsze widoczne), przezroczyste nad sekcją hero albo zmieniać się po przewinięciu. Na telefonie zwija się do ikony „hamburgera”. Poklikaj warianty i przełącz widok telefonu:

Stopka (footer)

Stopka to nie „śmietnik” na dole. To miejsce na kontakt, linki, social media i wymagane prawnie odnośniki (polityka prywatności, regulamin). Zobacz warianty:

SEO to pisanie strony tak, aby Google rozumiało, dla kogo ona jest, i pokazywało ją ludziom, którzy szukają Twoich usług. Bez tego nawet najładniejsza strona pozostanie niewidoczna.

Trzy rzeczy, które musisz ustawić

Tytuł (do 60 znaków) — pojawia się jako niebieski link w Google. Opis (meta description) (do 155 znaków) — szary tekst pod tytułem. Słowa kluczowe — frazy, których szukają klienci, wplecione w naturalne zdania.

Zobacz, jak wyglądasz w Google

Wpisz swój tytuł i opis, a poniżej zobaczysz podgląd wyniku wyszukiwania. Licznik ostrzeże Cię, jeśli tekst będzie za długi (Google go wtedy ucina).

Na tym etapie nie potrzebujesz płatności online, żeby zacząć sprzedawać. Wystarczy, że klientka może łatwo napisać lub zadzwonić. Ustawimy trzy rzeczy: formularz na e-mail, klikalny telefon i firmowy adres e-mail.

1. Formularz, który wysyła e-mail

Formularz to pola: imię, e-mail, produkt i rozmiar, wiadomość. Po kliknięciu „Wyślij” treść trafia na Twoją skrzynkę. Aby v0 mógł faktycznie wysyłać wiadomości, użyje usługi do e-maili (np. Resend albo Formspree), a jej klucz zapiszesz bezpiecznie w zmiennych środowiskowych.

1. 1. Załóż darmowe konto w usłudze e-mail (np. resend.com) i skopiuj klucz API.
2. 2. W v0 otwórz ustawienia projektu → „Vars” i dodaj zmienne EMAIL_API_KEY oraz CONTACT_EMAIL (Twój firmowy adres).
3. 3. Poproś v0: „Podłącz formularz kontaktowy, aby wysyłał wiadomości na adres z CONTACT_EMAIL używając klucza EMAIL_API_KEY ze zmiennych środowiskowych”.

2. Klikalny telefon

Na telefonie numer powinien dać się kliknąć, żeby od razu zadzwonić. To drobiazg, ale bardzo podnosi liczbę kontaktów. v0 zrobi to automatycznie, gdy w JSON ustawisz "phone_clickable": true.

3. Sekcja kontaktu w JSON

Tak wygląda gotowy fragment kontaktu z naszego szablonu. Podmień e-mail i telefon na swoje:

"contact": {
  "headline": "Zamów lub zapytaj",
  "intro": "Napisz lub zadzwoń, a pomożemy dobrać rozmiar.",
  "email": "zamowienia@sattva.pl",
  "phone": "+48 600 100 200",
  "phone_clickable": true,
  "form": {
    "enabled": true,
    "fields": ["imię", "e-mail", "telefon (opcjonalnie)", "produkt i rozmiar", "wiadomość"],
    "send_to": "zamowienia@sattva.pl",
    "success_message": "Dziękujemy! Odezwiemy się w ciągu 24 godzin."
  }
}

Kilka darmowych narzędzi Google sprawi, że będziesz wiedzieć, kto odwiedza Twoją stronę i jak Cię znajdują. To Twój wgląd w to, co naprawdę działa.

Google Analytics — kto odwiedza stronę

Analytics pokazuje, ilu masz odwiedzających, skąd przychodzą i co ich interesuje. Po założeniu konta dostaniesz identyfikator w formacie G-XXXXXXXXXX. Podaj go v0, a resztę zrobi automatycznie.

Google Search Console — jak wyglądasz w wyszukiwarce

To narzędzie pokazuje, na jakie frazy Google wyświetla Twoją stronę i czy nie ma problemów z indeksowaniem. Weryfikację robisz po publikacji — wtedy masz już działający adres.

Wizytówka Google (Profil Firmy)

Jeśli masz lokal, załóż darmowy Profil Firmy w Google. Dzięki temu pojawisz się na mapach i w wynikach lokalnych z godzinami otwarcia, telefonem i opiniami.

"google": {
  "analytics_measurement_id": "G-XXXXXXXXXX",
  "search_console": "verify-after-deploy",
  "business_profile_url": "https://g.page/twoja-firma"
}

Ostatni krok — i najbardziej satysfakcjonujący. Twoja strona trafia do internetu, gdzie każdy może ją otworzyć. W v0 to naprawdę jedno kliknięcie.

Publikacja w trzech krokach

1. 1. Kliknij przycisk „Publish” w prawym górnym rogu v0.
2. 2. Poczekaj kilka sekund — dostaniesz adres w rodzaju twoja-strona.vercel.app.
3. 3. Otwórz ten adres na telefonie i komputerze, żeby sprawdzić, że wszystko działa.

Własna domena z home.pl — krok po kroku

Adres .vercel.app działa od razu, ale dla sklepu warto mieć własny, np. sattva.pl. W Polsce domeny najczęściej kupuje się w home.pl. Połączymy ją z Twoją stroną na Vercel. To wygląda groźnie, ale to zwykłe „przepisanie” kilku wartości.

1. 1. Na home.pl wyszukaj wolną domenę (np. sattva.pl) i ją kup.
2. 2. W v0/Vercel otwórz ustawienia projektu → „Domains” i wpisz swoją domenę, a potem kliknij „Add”.
3. 3. Vercel pokaże Ci, co ustawić. Masz dwie drogi — wybierz jedną:

4. 4. Zapisz zmiany w home.pl i wróć do Vercel. Przy domenie pojawi się zielony status „Valid”.
5. 5. Kłódka (SSL) włączy się automatycznie — nic nie musisz robić.

Ostateczna lista kontrolna

Zanim ogłosisz stronę światu, przejdź przez tę listę. Twój postęp zapisuje się automatycznie.

Biblioteka gotowych poleceń

Na koniec — zestaw sprawdzonych promptów po polsku, które możesz kopiować i dostosowywać, gdy będziesz rozwijać stronę.