Makieta nowej strony z AI: zobacz redesign swojej strony za darmo

Co dostajesz za darmo

Co z tym zrobić: potraktuj makietę jak kierunek do rozmowy, czyli układ sekcji, hierarchię i kolory. Zdjęcia, teksty i SEO dopracowuje się przy wdrożeniu.

Przykład przed i po: nasza strona ai-seo-company.pl

Zamiast wymyślonej firmy pokazujemy prawdziwy wynik dla naszej własnej strony. 12 listopada 2026 uruchomiliśmy narzędzie na adresie ai-seo-company.pl tak jak każdy użytkownik, bez wpisanego celu w polu „Co ma się poprawić?”. Makieta była gotowa po około półtorej minuty i ma 6 sekcji. Poniżej jest jej pierwszy ekran, czyli ta część, którą narzędzie pokazuje od razu, bez podawania e-maila.

Zrzuty obu wersji zrobiliśmy tą samą przeglądarką w tych samych rozmiarach ekranu: 1280 × 800 pikseli na komputerze i 390 × 844 na telefonie. Na obecnej stronie przed zrzutem kliknęliśmy „Odrzuć opcjonalne” w banerze cookies, żeby nie zasłaniał treści. Makiety nie poprawialiśmy ręcznie: to dokładnie ten kod, który zwróciło narzędzie.

Na komputerze

Na telefonie

Zrzuty z 12 listopada 2026, bez ręcznych poprawek. Pozostałych 5 sekcji makiety tu nie pokazujemy, bo w narzędziu też są dostępne dopiero po podaniu e-maila.

Co makieta zmieniła na naszej stronie, a co trzeba poprawić

Oceniamy wynik tak samo, jak radzimy oceniać makietę swojej strony: osobno to, co jest lepsze, i to, czego przy wdrożeniu nie można zostawić tak jak w makiecie.

Co jest lepsze

• Obietnica i przyciski są wyżej. Na komputerze nagłówek „Pozycjonowanie, które buduje sprzedaż” i przyciski „Wyceń projekt” i „Zobacz portfolio” mieszczą się w pierwszym ekranie. Na obecnej stronie przyciski ucina dolna krawędź ekranu 1280 × 800.
• Menu widać od razu. Cztery pozycje (Usługi, Dlaczego my, Wyniki, Kontakt) zamiast przycisku, który otwiera menu na cały ekran.
• Tekst jest krótszy, ale nic nie zostało dopisane. Model wziął nasz nagłówek i podtytuł bez zmian, a opis skrócił z czterech zdań do dwóch i usunął słowo „masowo”. Nie dodał żadnej liczby, opinii ani obietnicy, której nie ma na stronie.
• Kolory zostały nasze. Pomarańczowy (#ef6a1f) i ciemny grafit (#2a2e40) to najczęstsze kolory w kodzie obecnej strony głównej, poza białym.

Co trzeba poprawić przy wdrożeniu

• Zniknęły ważne elementy nagłówka. W makiecie nie ma przełącznika języka PL/EN, linku „Zaloguj się” do panelu klienta ani skrótów do demo panelu i wyników. Makieta projektuje jedną stronę główną i takie elementy trzeba dodać ręcznie.
• Menu na telefonie jest ucięte. Pozycje tworzą rząd przewijany w bok, a czwarta („Kontakt”) kończy się na krawędzi ekranu, więc nie każdy zauważy, że da się przewinąć.
• Logo jest za małe. Narzędzie bierze logo z ikony strony (favicon), a nie z nagłówka, i w makiecie wyszło wyraźnie mniejsze niż na obecnej stronie.
• Obraz nie pasuje do polskiej strony. Model nie tworzy zdjęć, więc w pierwszym ekranie użył naszej grafiki do udostępniania, która ma napis po angielsku.
• Strona straciła charakter. Duża grafika „SEO” i postać 3D wyróżniają obecną stronę. Makieta jest czytelniejsza, ale wygląda bardziej typowo.

Wniosek dla nas: z makiety bierzemy konkretne zmiany w pierwszym ekranie, czyli przyciski wyżej i widoczne menu, a wygląd marki zostaje. Tak samo warto czytać makietę swojej strony: jako listę zmian do sprawdzenia, a nie projekt do skopiowania.

Jak powstaje makieta: 3 kroki

1. Czytamy Twoją stronę główną. Pobieramy nazwę, nagłówki, menu, opisy usług, dane kontaktowe i kolory marki i robimy zrzut obecnego wyglądu.
2. AI projektuje nowy układ. Model Claude układa nagłówek z menu i pierwszy ekran, potem 4 do 6 sekcji z Twoich treści (np. usługi, dlaczego my, proces, obszar działania, kontakt) i stopkę, w wersji na komputer i telefon.
3. Porównujesz. Pierwszy ekran nowej strony pokazujemy obok obecnej od razu. Całą makietę i link ważny 60 dni dostajesz po podaniu e-maila.

Cały proces trwa zwykle 1 do 3 minut. W tym czasie zostaw kartę otwartą: postęp widać pod przyciskiem.

Twoje treści, bez wymyślonych danych

Model może skracać i porządkować Twoje teksty, ale nie wymyśla liczb, lat doświadczenia, opinii klientów, nagród, certyfikatów, cen, nazw klientów ani statystyk. Gdy czegoś na stronie brakuje, pomija ten element zamiast go zmyślać. Makieta jest plikiem bez skryptów i formularzy, wyświetlanym w zamkniętej ramce, a my tylko czytamy publiczną stronę główną, tak jak przeglądarka.

Jedno ograniczenie: gdy strona pokazuje tekst dopiero po uruchomieniu JavaScriptu, model dostaje mniej treści i makieta wychodzi uboższa. Sprawdzisz to w darmowym audycie SEO (reguła „Treść niewidoczna bez JavaScriptu”).

Jak przygotować stronę, żeby makieta wyszła lepsza

Model widzi tylko to, co narzędzie wyciągnie z kodu Twojej strony głównej. Kilka poprawek na obecnej stronie daje lepszą makietę, a przy okazji pomaga też w Google i w odpowiedziach AI:

• Nagłówek H1 i tytuł strony mówią, co robisz, dla kogo i gdzie. Model dostaje tytuł, opis meta i do 3 nagłówków H1. W naszym przykładzie wziął nagłówek H1 bez zmian, więc to on ustawia cały pierwszy ekran.
• Każda usługa ma własny nagłówek H2. Model dostaje do 12 nagłówków H2 i na nich buduje kolejne sekcje. Usługi wymienione w jednym długim akapicie łatwiej zgubić.
• Telefon i e-mail są zwykłym tekstem. Narzędzie szuka ich w treści strony. Numer pokazany tylko na obrazku albo ukryty w formularzu nie trafi do przycisku kontaktu w makiecie.
• Grafika do udostępniania (og:image) pasuje do strony. Obok logo to jedyny obraz, którego model może użyć. Jeśli to baner z napisem w innym języku albo ze starą ofertą, trafi do pierwszego ekranu, tak jak u nas.
• Ikona strony to czytelny znak. Logo w makiecie pochodzi z ikony strony (favicon albo apple-touch-icon). Jeśli ikoną jest sam symbol, makieta pokaże symbol zamiast pełnego logo.
• Kolory marki są zapisane w kodzie. Narzędzie bierze do 6 najczęstszych kolorów z kodu HTML strony głównej i z meta theme-color. Bez nich model sam dobiera spokojną paletę do branży.
• Menu ma krótkie nazwy. Do makiety trafia do 8 linków do Twoich podstron, każdy do 30 znaków. Dłuższe opisy w menu wypadają.
• Najważniejsza treść jest wysoko. Model dostaje do 6 000 znaków tekstu od początku strony, więc opis oferty i obszaru działania powinien być przed długimi tekstami SEO na dole.

Kiedy warto zmienić wygląd strony

• Strona źle wygląda na telefonie albo trzeba ją powiększać palcami.
• Klient w pierwszym ekranie nie widzi, co robisz, dla kogo i jak się z Tobą skontaktować.
• Strona ładuje się wolno, a audyt pokazuje niską wydajność na telefonie.
• Wygląd odstaje od konkurencji i od tego, jak firma pracuje dziś.

Makieta pomaga zobaczyć kierunek, zanim wydasz pieniądze. Wersja na telefon ma znaczenie także dla SEO: Google ocenia stronę głównie w wersji mobilnej.

Jak ocenić makietę: 5 pytań

1. Czy w pierwszym ekranie widać, co robisz, dla kogo i gdzie? Jeśli nie, brakuje tego zdania także na obecnej stronie: dopisz je, zanim zaczniesz wdrożenie.
2. Czy przycisk kontaktu i telefon są widoczne bez przewijania, także na telefonie? Przełącz podgląd na telefon i sprawdź pierwszy ekran.
3. Czy sekcje odpowiadają na pytania klientów? Co oferujesz, jak wygląda współpraca, gdzie działasz i jak się umówić.
4. Czego brakuje, bo nie ma tego na obecnej stronie? Realizacje, zdjęcia, opinie, ceny: model ich nie dopisze, więc to lista treści do przygotowania.
5. Czy kolory i typografia pasują do marki? Zapisz, co zostaje, a co zmienić. To gotowy fragment briefu dla wykonawcy.

Czego makieta nie zrobi

• Projektuje tylko stronę główną, bez podstron oferty, kontaktu czy bloga.
• Nie tworzy zdjęć: używa logo i obrazu udostępniania z Twojej strony, a resztę zastępuje kolorem i prostymi ikonami.
• Model dostaje do 6 000 znaków tekstu ze strony głównej. Dłuższy tekst jest ucinany, więc treści z dolnej części strony mogą się nie zmieścić.
• To statyczny plik HTML: bez edytora i eksportu do WordPressa czy Figmy. Zmiany wprowadza się przy wdrożeniu.
• Polska wersja narzędzia pisze makietę po polsku. Każde uruchomienie daje trochę inną propozycję; limit to 2 makiety dziennie z jednego adresu IP.
• Zrzut obecnej strony robi zewnętrzna usługa. Gdy nie odpowie, model pracuje na samych treściach i nie zobaczysz porównania obok siebie.

Makieta z AI a projekt od projektanta

• Czas: makieta powstaje w 1 do 3 minut. Projekt od projektanta wymaga briefu, rozmowy i kilku rund poprawek.
• Treść: makieta używa tylko tego, co już jest na Twojej stronie. Projektant może zaproponować nowe teksty, zdjęcia i strukturę podstron.
• Zakres: makieta to jedna strona główna. Projekt obejmuje też podstrony, elementy powtarzalne i zasady wyglądu marki.
• Kiedy co: makieta pomaga zdecydować, czy i w którą stronę zmieniać wygląd. Projekt jest potrzebny, gdy ta decyzja już zapadła.

Co dalej z makietą

• Wdrożenie u nas: stronę firmową w Next.js budujemy od 5 900 zł netto, z SEO, szybkością i przekierowaniami ze starych adresów. Wycenę dostajesz w 24 godziny w dni robocze. Zobacz, jak pracujemy przy projektowaniu stron internetowych.
• Wdrożenie z innym wykonawcą: link z maila działa 60 dni, więc możesz pokazać makietę programiście albo agencji.
• Sam kierunek: użyj makiety jako punktu wyjścia do briefu strony: zapisz, które sekcje zostają, czego brakuje i jakie zdjęcia trzeba przygotować.

Poradniki do tego narzędzia

• Ile kosztuje strona internetowa dla firmy? Ceny 2026: od czego zależy cena wdrożenia makiety
• Audyt UX strony pod konwersję: przewodnik: co poprawić, zanim zmienisz wygląd
• Brief strony internetowej: wzór z częścią SEO: szybsza wycena nowej strony