Prompty krok po kroku: strona z AI

Jesteś moim asystentem do budowy strony internetowej. Zanim cokolwiek zaprojektujemy, przeprowadź ze mną krótki wywiad o mojej firmie.

Moja firma w 1 zdaniu: [co robisz, gdzie i dla kogo]
Co klient ma zrobić na stronie: [np. umówić wizytę w kalendarzu, zadzwonić, zapytać o wolny termin]

Zasady wywiadu:
- Zadawaj maksymalnie 3 pytania naraz i czekaj na moje odpowiedzi.
- Najwyżej 3 rundy. Oznacz każdą: "Runda 1 z 3".
- Runda 1: firma i oferta (co sprzedaję, w jakich cenach, od kiedy, czym się różnię od innych).
- Runda 2: klient (kim jest, z czym przychodzi, czego próbował wcześniej, jakimi słowami mówi o swoim problemie).
- Runda 3: współpraca krok po kroku, czego nie robię, o co klienci pytają najczęściej.
- Dopytuj, gdy odpowiem ogólnikiem. Gdy napiszę "nie wiem", daj mi 2-3 opcje do wyboru.
- Nie wymyślaj faktów. Czego brakuje, oznacz "(do uzupełnienia)".
- Gdy napiszę SZYBKO, skończ pytania i od razu zrób dokumenty z tego, co już wiesz.

Na koniec zwróć 3 krótkie dokumenty, każdy w osobnym bloku do skopiowania:
1. PROFIL: kim jestem, oferta i ceny, liczby, czym się różnię, czego nie robię.
2. PERSONA: kim jest klient, z czym przychodzi, co blokuje decyzję, co ją przyspiesza, 3-5 zdań jego słowami.
3. PROCESY: współpraca w 3-5 krokach, 5-6 najczęstszych pytań klientów z krótkimi odpowiedziami.

Każdy dokument ma najwyżej pół strony. Zostaw tylko zdania, bez których strona byłaby gorsza. Pisz prosto, po polsku, z polskimi znakami. Zacznij od rundy 1.

Na podstawie 3 dokumentów powyżej (profil, persona, procesy) przygotuj kartę strony, czyli brief landing page na 1 kartkę. Pisz konkretnie, słowami klienta z dokumentu PERSONA.

Karta ma 7 punktów:
1. Cel: 1 akcja, którą ma wykonać odwiedzający.
2. Odbiorca: kto to jest i skąd trafia na stronę, w 2 zdaniach.
3. Obietnica w 1 zdaniu: co klient dostaje i dlaczego właśnie tutaj.
4. Przycisk (CTA): tekst przycisku w 1. osobie, najwyżej 5 słów, mówi, co się stanie po kliknięciu, np. "Umawiam wizytę". Nie "Wyślij" i nie "Dowiedz się więcej". Pod przyciskiem 1 zdanie, które zdejmuje obawę.
5. Kontakt: 1 główny sposób: kalendarz online (Cal.com albo Calendly), telefon, WhatsApp albo mail. Napisz, który pasuje najlepiej i dlaczego.
6. Kierunek wizualny: nastrój w 3 słowach, 4 kolory w HEX (tło, tekst, kolor pomocniczy, akcent tylko na przyciski), font do nagłówków i font do tekstu (darmowe, z polskimi znakami), 8-10 zdjęć, które najlepiej pokażą firmę (co jest w kadrze).
7. Czego unikamy: 5 rzeczy, przez które ta strona wyglądałaby jak każda inna.

Niczego nie wymyślaj, braki oznacz "(do uzupełnienia)". Liczby cyframi, polskie znaki. Zwróć całość w jednym bloku do skopiowania.

Na podstawie kontekstu i karty strony napisz treść landing page, sekcja po sekcji, w tej kolejności:

1. Hero: nagłówek (najwyżej 8 słów), 1 zdanie pod nim, przycisk z karty, 1 zdanie pod przyciskiem.
2. Dla kogo (i dla kogo nie).
3. Problem: z czym klient przychodzi, jego słowami.
4. Przed i po: 3-4 pary "dziś / po".
5. Oferta: co dokładnie klient dostaje, najwyżej 4 punkty językiem korzyści.
6. Jak to działa w 3 krokach: od kliknięcia przycisku do efektu.
7. Galeria: 6-8 zdjęć, przy każdym podpis w 1 linijce.
8. Dowody: prawdziwe opinie i liczby.
9. Kto za tym stoi: imię i 2-3 zdania, dlaczego właśnie ja.
10. Cena albo pakiety (opcjonalnie).
11. FAQ: 5-6 pytań z dokumentu PROCESY, krótkie odpowiedzi.
12. Rezerwacja albo kontakt: powtórz obietnicę, ten sam przycisk i 1 zdanie, co się stanie po kliknięciu.
13. Stopka: nazwa firmy, kontakt.

Dla każdej sekcji podaj: nagłówek, treść, układ w 1 linijce (np. "zdjęcie na całą szerokość, tekst na nim" albo "zdjęcie z lewej, tekst z prawej") i jakie zdjęcie pasuje (co jest w kadrze). Sąsiednie sekcje mają różny układ. Co najmniej połowa sekcji ma zdjęcie.

Zasady pisania:
- Język klienta z dokumentu PERSONA. Prosto i krótko, tak jak mówisz do klienta przy kawie.
- Korzyść zamiast cechy: pisz, co klient z tego ma.
- Konkret: liczby, miejsca, czas. Liczby cyframi.
- Niczego nie wymyślaj. Nie ma opinii? Daj konkretne fakty albo wpisz "(do uzupełnienia)".
- Bez pustych haseł: "kompleksowe rozwiązania", "przenieś na wyższy poziom", "nie tylko..., ale także...".

Na końcu daj 3 inne wersje nagłówka hero. Zwróć całość w jednym bloku do skopiowania.

[wklej zrzut ekranu: Ctrl + V albo Cmd + V]

Strona, która mi się podoba: [wklej link]
Załączam też zrzut ekranu jej pierwszego ekranu. Chcę przenieść jej styl na moją stronę, a nie ją skopiować.

Jeśli możesz otworzyć link, przejrzyj stronę: układ sekcji, długość tekstów, jak pokazuje zdjęcia. Wygląd (kolory, fonty, proporcje) oceniaj ze zrzutu ekranu. Jeśli nie możesz otworzyć linku, napisz to wprost i pracuj na samym zrzucie.

Z referencji BIORĘ: [np. duże zdjęcie w hero, dużo powietrza, spokojne tempo]
Z referencji NIE BIORĘ: [np. ciemnego tła], a także tekstów, zdjęć, logo ani nazw.

Zrób po kolei:
1. Opisz w 5 punktach, co w tej referencji buduje wrażenie: kompozycja, kolory, typografia, odstępy, zdjęcia. Bez ogólników typu "nowoczesny i czysty".
2. Zestaw to z kierunkiem wizualnym z mojej karty strony i przygotuj KARTĘ STYLU:
   - charakter w 3 słowach,
   - font do nagłówków (z charakterem) i font do tekstu z Google Fonts, oba z polskimi znakami,
   - 4 kolory w HEX: tło, tekst, kolor pomocniczy, akcent tylko na przyciski,
   - zdjęcia: jak je pokazujemy (duże, na całą szerokość, galeria), zaokrąglenie rogów,
   - odstępy: między sekcjami i wewnątrz bloków,
   - 1 element, który odwiedzający zapamięta,
   - 3 rzeczy, które zmieniamy względem referencji, żeby strona była moja.
3. Dopisz zakazy: bez fioletowo-niebieskich gradientów, bez gradientu na tekście, bez 1 fontu na wszystko, bez 3 identycznych kart w rzędzie, bez ikon w kółkach, bez emoji zamiast ikon, bez wyśrodkowania wszystkiego.

Jeśli nie da się odczytać nazwy fontu, napisz to wprost i zaproponuj najbliższy darmowy odpowiednik. Nie buduj jeszcze strony. Zwróć kartę stylu w jednym bloku.

Jesteś doświadczonym web designerem i front-end developerem. Zbuduj mój landing page w JEDNYM pliku index.html: HTML, CSS w <style>, JS w <script> na końcu. Strona ma od pierwszej wersji dobrze wyglądać na telefonie i na komputerze.

MATERIAŁY (są wyżej w tej rozmowie)
- kontekst firmy: profil, persona, procesy,
- karta strony,
- treść landing page, sekcja po sekcji: teksty i kolejność sekcji bierz DOKŁADNIE stamtąd,
- KARTA STYLU: kolory, fonty, zdjęcia, odstępy, zakazy.
Jeśli któregoś z nich nie widzisz, zapytaj mnie, zanim zaczniesz.

ZDJĘCIA
- Leżą w tym samym folderze co index.html: [Twoje nazwy, np. hero.jpg, o-mnie.jpg, galeria-1.jpg, galeria-2.jpg, opinia-1.jpg].
- Użyj każdego z nich, dokładnie pod tą nazwą, np. src="hero.jpg". Żadnych zdjęć z internetu ani innych nazw.
- Zdjęć ma być dużo i mają być duże: hero na cały ekran, co najmniej 1 zdjęcie na całą szerokość ekranu między sekcjami, galeria przewijana w bok na telefonie i siatka na komputerze.
- Grafiki marki (jeśli są na liście) to nie zdjęcia, bez <figure> i podpisu, na każdej onerror="this.remove()":
  - logo.png: w nagłówku strony i w stopce, alt z nazwą firmy. Nazwa firmy tekstem zostaje obok, gdy logo się nie wczyta.
  - znak-1.png: powtarzaj na stronie jako motyw (mały przy nagłówkach sekcji, duży i jasny w tle 1 sekcji), alt="".
  - wzor-1.png: tło 1-2 sekcji (background-image, powtarzany, jasny, tekst na nim ma kontrast min. 4,5:1).
- Każde zdjęcie w <figure>, każde <img> ma alt po polsku oraz width i height. Poza hero: loading="lazy" i decoding="async".
- Gdy pliku zdjęcia brakuje, zdjęcie znika bez śladu: na każdym <img> onerror="this.closest('figure').remove()". Dlatego <figure> zawiera tylko zdjęcie i krótki podpis, nigdy cytat opinii ani tekst sekcji. Hero bez zdjęcia ma tło w kolorze z karty stylu.
- Układ zdjęcie obok tekstu rób na flexbox z flex-wrap (nie na siatce z osobną kolumną na zdjęcie), żeby po zniknięciu zdjęcia tekst zajął całą szerokość. Zdjęcie przy opinii stawiaj nad cytatem albo obok podpisu, nigdy jako kolumnę, od której zależy szerokość tekstu.

KALENDARZ ALBO KONTAKT
[wklej kod kalendarza i link do wydarzenia z kroku 6 ALBO wpisz: telefon, WhatsApp, e-mail]
- Kod kalendarza wstaw bez żadnych zmian w sekcji id="rezerwacja", z nagłówkiem i 1 zdaniem, co się stanie po rezerwacji. Pod kalendarzem link "Otwórz kalendarz w nowej karcie" do wydarzenia (jeśli go podałem).
- Bez kodu kalendarza: w sekcji id="rezerwacja" duże przyciski do telefonu (tel:), WhatsAppa (https://wa.me/48...) i maila (mailto:).
- 1 cel: ten sam przycisk w hero, po ofercie i na końcu, każdy prowadzi do #rezerwacja. Bez menu i bez hamburgera: na górze tylko nazwa firmy i 1 przycisk.

TREŚĆ BEZ WYMYŚLANIA
- Nie dopisuj haseł od siebie. Nie wymyślaj opinii, ocen, gwiazdek, liczby klientów, nagród, certyfikatów ani logotypów. Czego brakuje, wpisz "(do uzupełnienia)".
- Polskie znaki wszędzie, także w <title>, meta description i alt. Zamiast długich myślników zwykły łącznik "-".
- Twarda spacja (&nbsp;) po jednoliterowych słowach (w, z, i, o, u, a) i między liczbą a słowem, np. "3&nbsp;godziny". Dodatkowo na końcu skryptu: document.querySelectorAll('h1,h2,h3,p,li,figcaption,summary,blockquote').forEach(e=>{const w=document.createTreeWalker(e,NodeFilter.SHOW_TEXT);let n;while(n=w.nextNode())n.nodeValue=n.nodeValue.replace(/(?<=^|\s)([aiouwz])\s+/gi,'$1\u00a0')})
- Na stronie nie zostają nawiasy kwadratowe z notatek.
- Zdjęć jest mniej niż miejsc w treści? Galerię zbuduj tylko z plików z listy (bez plików pomiń galerię), a pozostałe sekcje zostaw bez zdjęcia. Żadnej sekcji nie usuwaj.

TELEFON I KOMPUTER
- Projektuj od szerokości 375 px, potem 768 px i 1100 px.
- Na pierwszym ekranie telefonu widać nagłówek, 1 zdanie i przycisk.
- Na telefonie 1 kolumna. Tekst 16-18 px, podpisy i przypisy min. 14 px. Każdy przycisk, także ten w nagłówku, min. 48 px wysokości.
- Nic nie wychodzi poza ekran w poziomie od 320 do 1440 px: bez width: 100vw i bez ujemnych marginesów, img z max-width: 100%, kolumny siatki zawsze minmax(0, 1fr), a nie samo 1fr. Zabezpieczenie: html, body { overflow-x: clip }.
- Nagłówki nigdy nie łamią się w środku słowa: text-wrap: balance, hyphens: none, word-break: normal, overflow-wrap: normal (nigdy anywhere ani break-all). Akapity: text-wrap: pretty. H1: font-size: clamp(2.1rem, 6vw + 0.5rem, 4.75rem), line-height: 1.1, max-width: 20ch (nie węziej), na telefonie najwyżej 4 linijki. H2: font-size: clamp(1.7rem, 2.5vw + 1rem, 3rem), bez max-width w ch. Na komputerze (1440 px) każde H2 i H3 mieści się w 1 linii, na telefonie najwyżej w 2. Nie mieści się? Skróć nagłówek do najwyżej 6 słów, nie zmniejszaj fontu. Najdłuższe słowo nagłówka mieści się w 1 linii przy 375 px.
- Tekst ciągły najwyżej ok. 65 znaków w linii, wyrównany do lewej.

HERO
- Sekcja hero: min-height: 100svh, BEZ height, max-height i overflow: hidden (ucinają przycisk na niskich ekranach). Jeśli na 375x667 nagłówek, zdanie i przycisk się nie mieszczą, skróć zdanie.
- Zdjęcie hero.jpg w osobnej warstwie pod tekstem (position: absolute, inset: 0, width: 100%, height: 100%, object-fit: cover, fetchpriority="high"), wypełnia całe hero także na telefonie. object-position tak, żeby na telefonie nie ucinało głównego motywu. Na nim przyciemnienie (gradient), żeby tekst miał kontrast min. 4,5:1.
- Po wejściu na stronę zdjęcie raz, powoli (ok. 8 s) przybliża się ze skali 1.08 do 1, a nagłówek, zdanie i przycisk łagodnie wjeżdżają po kolei.

WYGLĄD
- Kolory, fonty i odstępy tylko jako zmienne CSS w :root, wartości z karty stylu. Kolor akcentu tylko na przyciskach i drobnych elementach, nigdy jako tło sekcji.
- Fonty z Google Fonts przez <link>, tylko kroje z polskimi znakami.
- Sąsiednie sekcje mają różny układ, min. 2 sekcje asymetryczne (np. zdjęcie 60%, tekst 40%).
- Ikony tylko jako proste inline SVG. FAQ na <details> i <summary>.

RUCH
- Nagłówki sekcji, akapity i zdjęcia łagodnie wjeżdżają przy przewijaniu: klasa .reveal tylko na małych blokach (nigdy na całej wysokiej sekcji, w hero ani w stopce), IntersectionObserver z threshold 0.1, opacity i przesunięcie o 24 px w 0,6 s, elementy obok siebie z małym opóźnieniem. Nagłówków nie dziel na pojedyncze litery.
- Ukrywanie włącza dopiero skrypt, na samym końcu, po utworzeniu IntersectionObservera: dodaje klasę .anim do <html>, a CSS ukrywa tylko .anim .reveal, które jeszcze nie weszły na ekran. Jeśli skrypt się wysypie, wszystko zostaje widoczne. Każdy efekt w JS w osobnym try { } catch (e) { }.
- Najechanie myszką tylko w @media (hover: hover) and (pointer: fine): zdjęcia lekko się przybliżają, przyciski wyraźnie reagują.
- @media (prefers-reduced-motion: reduce): wszystko widoczne od razu, bez animacji i przejść. Żadnych animacji w pętli.

TECHNIKA
- <html lang="pl">. Pierwsza linia w <head>: <meta charset="utf-8">, potem meta viewport, <title> i meta description.
- 1 <h1> w hero, każda sekcja ma <h2>. Zero bibliotek (wyjątek: kod kalendarza). Każde clamp() ma dokładnie 3 wartości.
- Stopka: nazwa firmy, kontakt, rok.

ZAKAZY: fioletowo-niebieskie gradienty, gradient na tekście, neony, efekt szkła, 3 identyczne karty w rzędzie, ikony w kółkach, emoji zamiast ikon, wszystko wyśrodkowane, 1 font na wszystko, mały napis wielkimi literami nad każdym nagłówkiem, zdjęcia z linków do innych stron.

ZANIM ODDASZ KOD, sprawdź w myślach szerokość 375 px i 1440 px: nic nie wychodzi poza ekran, nagłówki nie łamią się brzydko, przycisk widać na pierwszym ekranie telefonu, każde zdjęcie z listy jest użyte, polskie znaki są w każdym słowie, nie ma długich myślników.

WYNIK: tylko kompletny kod index.html w jednym bloku, od <!DOCTYPE html> do </html>. Bez komentarzy w kodzie i bez wyjaśnień. CSS zwięzły, bez powtórzeń.

Strona działa, teraz ma ożyć. Pracujesz na moim aktualnym index.html. Nie zmieniaj tekstów, oferty, cen, danych kontaktowych ani kodu kalendarza. Zmieniasz tylko zdjęcia, nagłówki i ruch. Wszystkie wcześniejsze zasady i zakazy nadal obowiązują.

MOJE ZDJĘCIA (w tym samym folderze co index.html): [wpisz nazwy plików, np. hero.jpg, o-mnie.jpg, galeria-1.jpg do galeria-6.jpg, opinia-1.jpg]
Używaj tylko tych nazw, dokładnie tak zapisanych. Nie wymyślaj plików.

KROK 1, jeszcze bez kodu. Wypisz krótko:
a) Najwyżej 8 punktów, co poprawisz, po 1 linijce. Punkt 1 to plan zdjęć: który plik trafi do której sekcji.
b) 3 propozycje 1 efektu do zapamiętania, oznaczone A, B i C, dopasowane do mojej firmy, np.:
- nagłówek w hero wchodzi słowo po słowie, a zdjęcie odsłania się jak kurtyna (1 raz po załadowaniu),
- zdjęcie stoi obok kroków i przy przewijaniu zmienia się na kolejne (na telefonie zdjęcie nad każdym krokiem),
- lekka paralaksa na 1-2 zdjęciach na całą szerokość (gdzie przeglądarka jej nie obsługuje, zdjęcie po prostu stoi),
- duży cytat klienta, który przy wejściu na ekran zapełnia się kolorem słowo po słowie (1 raz),
- zdjęcia odsłaniają się jak kurtyna przy wejściu na ekran (1 raz, na zmianę z lewej i z prawej).
Przy każdej propozycji: gdzie na stronie, dlaczego pasuje do mojej firmy i jak wygląda na telefonie.
Na koniec zapytaj: "Który efekt wybierasz: A, B czy C?" i zatrzymaj się. Nie pisz kodu przed moją odpowiedzią.

KROK 2, po mojej odpowiedzi wprowadź wszystko naraz:
1. Zdjęcia: więcej i większe. Hero, 1-2 zdjęcia na całą szerokość ekranu między sekcjami, zdjęcia zamiast ikon w ofercie, galeria (telefon: przewijana w bok, widać kawałek następnego zdjęcia; komputer: siatka z 1 dużym i kilkoma mniejszymi zdjęciami), portret przy "O mnie".
2. Nagłówki bez brzydkich złamań: text-wrap: balance, twarde spacje po a, i, o, u, w, z i między liczbą a słowem, h1 najwyżej 4 linijki na telefonie, żadne słowo nie wystaje poza ekran.
3. Subtelne interakcje: nagłówki, akapity i zdjęcia odsłaniają się przy przewijaniu (1 raz), zdjęcia i przyciski reagują na najechanie myszką tylko na komputerze, liczby liczą się od 0 (1 raz).
4. Wybrany efekt: tylko 1, uruchamiany raz albo sterowany przewijaniem, nigdy w pętli.
5. Telefon: wszystko w 1 kolumnie, zdjęcie nad tekstem, nigdy tekst w wąskiej kolumnie obok zdjęcia. Nigdzie tekst nie łamie się po 1-2 słowa w linii.
6. Odporność: treść widoczna bez JavaScriptu, wszystko, co wjeżdża po załadowaniu strony, jest widoczne najpóźniej po 1,5 s, cały ruch wyłączony przy prefers-reduced-motion, animujesz tylko transform, opacity i clip-path, każdy efekt w JS w osobnym try/catch, nic nie wychodzi poza ekran w poziomie.
7. Sprawdź, czy strona nie wygląda jak z AI: fioletowo-niebieskie gradienty, gradient na tekście, efekt szkła, neony, 3 identyczne karty w rzędzie, ikony w kółkach, emoji zamiast ikon, wszystko wyśrodkowane, mały napis wielkimi literami nad każdym nagłówkiem, puste hasła. Popraw, co znajdziesz.
Zwróć cały plik index.html w 1 bloku kodu, od <!DOCTYPE html> do </html>, bez skrótów typu "reszta bez zmian". CSS zwięźle, bez komentarzy. Pod kodem najwyżej 3 zdania: co sprawdzić na telefonie.