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. zapytać o wolny termin, zadzwonić, umówić wizytę]

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. Nie "Wyślij" i nie "Dowiedz się więcej". Pod przyciskiem 1 zdanie, które zdejmuje obawę.
5. Formularz: najwyżej 5 pól, tylko te naprawdę potrzebne, plus numer telefonu firmy, jeśli go podałem.
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), 5 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. Dowody: prawdziwe opinie, liczby, zdjęcia z realizacji.
8. Kto za tym stoi: imię i 2-3 zdania, dlaczego właśnie ja.
9. Cena albo pakiety (opcjonalnie).
10. FAQ: 5-6 pytań z dokumentu PROCESY, krótkie odpowiedzi.
11. Finalny przycisk: powtórz obietnicę i ten sam przycisk.
12. Stopka: nazwa firmy, kontakt, informacja o danych osobowych.

Dla każdej sekcji podaj: nagłówek, treść i układ w 1 linijce (np. "zdjęcie z lewej, tekst z prawej"). Sąsiednie sekcje mają różny układ.

Zasady pisania:
- Język klienta z dokumentu PERSONA. Prosto, krótkie zdania, jak dla ucznia 6 klasy.
- 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]

Załączam zrzut strony, która mi się podoba. Chcę przenieść jej styl na moją stronę, a nie ją skopiować.

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 i font do tekstu z Google Fonts, oba z polskimi znakami (zestaw latin-ext),
   - 4 kolory w HEX: tło, tekst, kolor pomocniczy, akcent tylko na przyciski,
   - odstępy: między sekcjami, wewnątrz bloków, zaokrąglenie rogó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 ze zrzutu 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.

Wygeneruj fotorealistyczne zdjęcie do hero, czyli pierwszego ekranu strony internetowej.

Firma: [1 zdanie: co robisz i gdzie]
W kadrze: [np. drewniany pomost na jeziorze o świcie, mgła nad wodą, łódka przy pomoście]
Nastrój: [3 słowa z karty stylu]
Kolory: [tło i akcent z karty stylu], naturalne, bez przesycenia.

Styl: jak zdjęcie z aparatu, naturalne światło, prawdziwe kolory, lekkie ziarno, bez efektu plastiku i bez przesadnej ostrości.
Kadr: poziomy 16:9. Główny motyw w prawej części kadru, lewa część spokojna, bo tam będzie nagłówek.
Zakazy: żadnego tekstu, napisów, logo ani znaków wodnych. Bez twarzy na pierwszym planie.

Na podstawie karty strony wypisz 6 zdjęć, które zrobię telefonem w 30 minut. Przy każdym: co jest w kadrze, z jakiej odległości, pion czy poziom, o jakiej porze dnia. Pierwsze zdjęcie to hero, poziomo.

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.

MATERIAŁY (są wyżej w tej rozmowie)
- kontekst firmy: profil, persona, procesy,
- karta strony: cel, przycisk, formularz, telefon,
- treść landing page, sekcja po sekcji: teksty i kolejność sekcji bierz DOKŁADNIE stamtąd,
- KARTA STYLU: kolory, fonty, odstępy, zakazy.
Jeśli któregoś z nich nie widzisz, zapytaj mnie, zanim zaczniesz.
Zdjęcia leżą w folderze img obok index.html: [Twoje nazwy, np. hero.jpg, o-nas.jpg, oferta-1.jpg, oferta-2.jpg, miejsce.jpg].

TREŚĆ
- Nie dopisuj haseł od siebie. Nie wymyślaj opinii, ocen, liczby klientów ani logotypów.
- Polskie znaki wszędzie, także w <title>, meta description i alt. Zamiast długich myślników zwykły łącznik "-".

NAJPIERW TELEFON
- Projektuj od szerokości 375 px, potem breakpointy 768 px i 1100 px.
- Na pierwszym ekranie telefonu (375x667) widać nagłówek, 1 zdanie i przycisk.
- Przyciski min. 48 px wysokości, tekst w polach formularza min. 16 px. Nic nie wychodzi poza ekran w poziomie.

HERO
- Duże zdjęcie img/hero.jpg na całą szerokość i wysokość ekranu (min-height: 100svh, object-fit: cover), na nim przyciemnienie, żeby tekst miał kontrast min. 4,5:1.
- Gdy zdjęcia brakuje, hero ma tło w kolorze z karty stylu i nadal dobrze wygląda.

PRZYCISK I KONTAKT
- 1 cel: ten sam przycisk w hero, w środku strony i na końcu, każdy prowadzi do sekcji z id="formularz". Bez menu.
- Przy formularzu numer telefonu jako klikalny link tel: (jeśli jest w karcie).

WYGLĄD
- Kolory, fonty i odstępy tylko jako zmienne CSS w :root, wartości z karty stylu.
- Fonty z Google Fonts przez <link>, tylko kroje z zestawem latin-ext (polskie znaki).
- Sąsiednie sekcje mają różny układ, min. 2 sekcje asymetryczne (np. zdjęcie 60%, tekst 40%). Większość tekstu do lewej, tekst ciągły max 680 px szerokości.
- Zdjęcia w sekcjach: <img src="img/NAZWA.jpg" alt="konkretny opis po polsku" loading="lazy"> w <figure> z aspect-ratio i tłem w kolorze pomocniczym.
- Ikony tylko jako proste inline SVG. FAQ na <details> i <summary>.

RUCH
- Teksty i zdjęcia łagodnie wjeżdżają przy przewijaniu: IntersectionObserver, bez bibliotek, przejście opacity i przesunięcie o 24 px w 0,6 s.
- Elementy ukrywaj tylko wtedy, gdy działa JavaScript (klasa js na <html>).
- Przy prefers-reduced-motion wszystko jest widoczne od razu, bez ruchu. Żadnych animacji w pętli.

FORMULARZ (Netlify Forms)
- <form name="zapytanie" method="POST" action="/dziekuje.html" data-netlify="true" netlify-honeypot="bot-field">
- W środku <input type="hidden" name="form-name" value="zapytanie"> i pole-pułapka na boty: <p hidden><label>Nie wypełniaj: <input name="bot-field"></label></p>
- Pola z karty strony, każde z widoczną etykietą <label>. E-mail: type="email", name="email". Zwykła wysyłka formularza, bez fetch.
- Pod przyciskiem krótka informacja RODO: administrator danych [nazwa firmy i e-mail], cel (odpowiedź na zapytanie), [jak długo trzymasz dane], prawo do wglądu i usunięcia danych. Bez checkboxa zgody, bo to zwykłe zapytanie.

TECHNIKA
- <html lang="pl">, <meta charset="utf-8">, meta viewport, <title> i meta description.
- 1 <h1> w hero, każda sekcja ma <h2>. Zero bibliotek. Każde clamp() ma dokładnie 3 wartości.
- Stopka: nazwa firmy, kontakt, link do informacji RODO przy formularzu, 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, zdjęcia z linków do innych stron.

WYNIK: tylko kompletny kod index.html w jednym bloku, od <!DOCTYPE html> do </html>. Bez wyjaśnień.

Teraz zrób drugi plik: dziekuje.html, w tym samym stylu (te same zmienne CSS i fonty). Treść: nagłówek "Dziękuję, zapytanie doszło", 1-2 zdania, kiedy odpowiesz [np. w ciągu 24 godzin] i żeby zajrzeć do folderu Spam, link "Wróć na stronę" do index.html. Dodaj <meta name="robots" content="noindex">. Zwróć cały plik w jednym bloku.

[wklej zrzut ekranu strony w widoku telefonu]

Sprawdź index.html na telefonie 375x667 i popraw:
- przycisk w hero widać bez przewijania,
- przyciski mają min. 48 px wysokości, tekst w polach formularza min. 16 px,
- nic nie wychodzi poza ekran w poziomie, zdjęcia się nie rozjeżdżają,
- nagłówki nie łamią się w dziwnych miejscach, tekst ma wygodną wielkość.
Najpierw wypisz, co poprawiasz, potem zwróć cały poprawiony index.html w jednym bloku.

Ta strona nadal wygląda jak z AI. Przerób ją, zachowując całą treść, formularz i kolejność sekcji.
1. Wypisz 5 miejsc, które zdradzają AI.
2. Popraw każde z nich. Sprawdź szczególnie: fioletowo-niebieskie gradienty, gradient na tekście, neony, efekt szkła, 3 identyczne karty w rzędzie, karty w kartach, ikony w kółkach nad nagłówkami, emoji zamiast ikon, wszystko wyśrodkowane, ten sam duży zaokrąglony róg na każdym elemencie, mały napis wielkimi literami nad każdym nagłówkiem, puste hasła ("kompleksowe rozwiązania", "w dzisiejszym dynamicznym świecie", "nie tylko..., ale także..."), długie myślniki w tekście.
3. Zostaw kolory i fonty z karty stylu. Akcent tylko na przyciskach. Wyraźna różnica wielkości między nagłówkiem a tekstem.
Zwróć cały poprawiony index.html w jednym bloku.

Dodaj do strony 1 efekt, który zostaje w pamięci. Bez przesady: 1 efekt, nie 5.
Najpierw zaproponuj 3 efekty pasujące do mojej firmy i karty stylu, np. zdjęcie w hero powoli przybliża się przy przewijaniu, nagłówek pojawia się słowo po słowie, zdjęcie stoi w miejscu, a tekst przewija się obok. Przy każdym napisz w 1 zdaniu, co klient z niego ma.
Poczekaj, aż wybiorę. Potem dodaj wybrany efekt:
- bez bibliotek, tylko CSS i krótki JS,
- płynny na słabszym telefonie,
- wyłączony przy prefers-reduced-motion,
- bez animacji w pętli.
Zwróć cały poprawiony index.html w jednym bloku.

Zanim opublikuję, sprawdź index.html w 6 punktach i popraw, jeśli trzeba:
1. Formularz ma name="zapytanie", data-netlify="true", action="/dziekuje.html" i ukryte pole form-name o wartości "zapytanie".
2. Pole e-mail ma name="email".
3. Przycisk w hero widać na telefonie 375x667 bez przewijania.
4. <title> i meta description są po polsku, z polskimi znakami.
5. Ścieżki zdjęć to img/NAZWA.jpg i zgadzają się z moimi plikami: [wpisz nazwy]. Żadnych zdjęć z innych stron.
6. Stopka ma link do informacji o danych osobowych.
Zwróć listę OK / POPRAWIONE, a pod nią cały plik w jednym bloku.