To jest kompletny, techniczny przewodnik budowy landing page z Claude Code: z gotowymi promptami do skopiowania, dokładnym zakresem kompetencji, integracją płatności, publikacją i wyliczeniem zwrotu z inwestycji. Bez ogólników. Jeśli chcesz wersję lżejszą, zacznij od landing page w jeden wieczór, a po wybór narzędzia zajrzyj do Claude Code vs Cursor.
Zakres kompetencji technicznych
Po przejściu tej ścieżki opanowujesz konkretny, mierzalny zestaw umiejętności:
- Środowisko CLI Claude Code i praca w trybie agentowym
- Strukturyzacja kontekstu projektu przez plik CLAUDE.md
- Automatyczna edycja plików i generowanie semantycznego HTML5
- Responsywny CSS (układ mobile-first, breakpointy)
- Integracja bramki płatności Stripe Checkout
- Walidacja formularzy po stronie klienta (regex, pola wymagane)
- Optymalizacja meta tagów, Open Graph i danych strukturalnych JSON-LD
- Deployment produkcyjny na Vercel lub Netlify z HTTPS i własną domeną
Stack i wymagania wstępne
| Element | Po co | Koszt |
|---|---|---|
| Claude Code (Pro) | Silnik agentowy piszący kod | od 20 USD/mc |
| Vercel | Hosting produkcyjny | 0 zł na start |
| Stripe | Płatności (opcjonalnie) | prowizja od transakcji |
| Domena | twojafirma.pl | 50-80 zł/rok |
Nie potrzebujesz znajomości programowania. Potrzebujesz umiejętności precyzyjnego opisywania tego, co ma powstać, czyli dobrego promptowania.
Krok 1. Setup i plik CLAUDE.md
Po instalacji utwórz pusty folder, otwórz w nim Claude Code i na start ustaw kontekst projektu. Plik CLAUDE.md to pamięć projektu, którą model czyta przy każdej sesji:
Utwórz plik CLAUDE.md z opisem projektu: landing sprzedażowy dla [oferta], grupa docelowa [kto], cel: [zapis/zakup]. Zasady: czysty HTML i CSS, mobile-first, ciemny motyw, jeden wyraźny przycisk CTA, dostępność i kontrast. Trzymaj się tych zasad w całym projekcie.
Krok 2. Szkielet strony
Zbuduj jednostronicowy landing w czystym HTML i CSS. Sekcje po kolei: hero z jednym H1 i przyciskiem, korzyści w trzech kartach, sekcja o autorze ze zdjęciem, opinie klientów, cennik z jednym CTA, FAQ, stopka z kontaktem. Ciemny, nowoczesny styl, w pełni responsywny. Najpierw pokaż samą strukturę sekcji.
Krok 3. Treść pojedynczymi poleceniami
Nie przepisuj całości naraz. Zmieniaj po jednej rzeczy, sprawdzając efekt:
- „Zmień H1 na: ... i podtytuł na: ...”
- „W sekcji korzyści wpisz te trzy: ..., ..., ...”
- „Dodaj opinię klienta: ... z podpisem ...”
- „Skróć cennik do jednej oferty z ceną ... i przyciskiem ...”
Krok 4. Formularz i płatność
Dodaj formularz kontaktowy z polami imię, email i wiadomość. Waliduj po stronie klienta: email regexem, pola wymagane, komunikaty po polsku. Pod formularzem dodaj przycisk „Kup teraz” przygotowany pod Stripe Checkout, z czytelnym komentarzem gdzie wstawić klucz publiczny i identyfikator ceny.
To moment, w którym statyczna wizytówka zamienia się w stronę, która realnie sprzedaje.
Chcesz przejść to z prowadzeniem i gotowymi skillami
W kursie StarterAI robimy razem pełną stronę sprzedażową z Claude Code: od CLAUDE.md, przez płatność, po deploy. Dwa skille premium prowadzą za Ciebie strategię i design. Dożywotni dostęp, gwarancja 14 dni.
Zobacz kurs Claude Code →Krok 5. SEO i dane strukturalne
Dodaj sekcję meta: tytuł do 60 znaków, description do 155 znaków, Open Graph (title, description, image, url), canonical oraz JSON-LD. Dla strony oferty użyj typu Product albo Course z ceną i walutą. Zadbaj o jeden H1 i poprawną hierarchię nagłówków.
Krok 6. Responsywność
Pokaż jak strona wygląda na szerokości 375px. Popraw wszystko, co się rozjeżdża: zawijanie tekstu, odstępy, rozmiar przycisków pod kciuk, obrazy do 100% szerokości. Sekcje mają układać się jedna pod drugą.
Krok 7. Deploy na produkcję
Przygotuj projekt do publikacji na Vercel i przeprowadź mnie krok po kroku: inicjalizacja, połączenie z repozytorium, pierwszy deploy i podpięcie własnej domeny. Wyjaśnij każdy krok prostym językiem.
Biblioteka promptów do skopiowania
Trzymaj te szablony pod ręką, działają w większości projektów:
- Audyt: „Przejrzyj stronę pod kątem czytelności i konwersji. Wskaż 5 konkretnych poprawek i je wprowadź.”
- Szybkość: „Zmniejsz wagę strony: zoptymalizuj obrazy, usuń nieużywany CSS, dodaj loading lazy do grafik.”
- Dostępność: „Sprawdź kontrast i dodaj atrybuty alt oraz aria tam, gdzie trzeba.”
- Kopia sekcji: „Zaproponuj trzy warianty nagłówka hero pod zimny ruch z Meta Ads.”
ROI — kiedy to się zwraca
Policzmy bez ściemy. Subskrypcja Claude to ok. 20 dolarów miesięcznie, hosting darmowy, domena 50-80 zł rocznie. Jedna strona dla lokalnej firmy to realnie 1500-3000 zł zlecenia (więcej w tekście strona dla lokalnej firmy z AI). Oznacza to zwrot kosztów narzędzi i kursu już przy pierwszym zleceniu, a każde kolejne to czysty zysk przy koszcie czasu liczonym w godzinach, nie tygodniach.
Częste błędy i jak ich uniknąć
- Brak CLAUDE.md. Bez kontekstu model gubi spójność w dłuższej sesji.
- Gigantyczny prompt na start. Buduj warstwami: szkielet, treść, wygląd, płatność.
- Pomijanie telefonu. Sprawdź realnie na 375px, nie tylko na podglądzie.
- Brak danych strukturalnych. JSON-LD to sygnał dla Google i wyszukiwarek AI.
Najczęstsze pytania
Czy potrzebuję umieć programować?
Nie. Sterujesz kontekstem i decyzjami, kod pisze model. To inny rodzaj pracy niż klasyczne kodowanie.
Czym to różni się od kreatorów typu drag and drop?
Masz pełną kontrolę nad kodem i zero ograniczeń szablonu. Stronę przeniesiesz gdziekolwiek, bo to czyste HTML i CSS.
Czy Claude Code nadaje się do aplikacji, nie tylko stron?
Tak, ten sam workflow rozszerza się na proste aplikacje webowe, formularze i integracje API.