Potrzebowałem prostej strony lądowania (landing page) do zbierania maili do newslettera. Wyceny od agencji? Od 1500 zł w górę. Czas oczekiwania? Dwa tygodnie. Powiedziałem „sprawdzam” i postanowiłem przetestować nową funkcję Google – Gemini z interfejsem Canvas. Efekt? Mam gotową stronę w jednym pliku HTML, nie napisałem ani linijki kodu i zajęło mi to tyle, co wypicie kawy.
Jako pasjonat technologii testuję każde nowe narzędzie AI, które pojawia się na rynku. Większość to tylko zabawki. Ale kiedy Google odpaliło Canvas w Gemini (specjalny tryb pracy na podzielonym ekranie, idealny do kodowania i pisania), poczułem, że to może być rewolucja dla osób nietechnicznych.
Nie myliłem się. Jeśli prowadzisz mały biznes, jesteś freelancerem lub twórcą i potrzebujesz prostej wizytówki w sieci – właśnie zaoszczędziłem Ci masę pieniędzy i nerwów.
Oto jak stworzyłem w pełni responsywną, nowoczesną stronę internetową, rozmawiając z AI jak z kumplem.
Spis treści
Co to jest Gemini Canvas i dlaczego to rewolucja?
Do tej pory, gdy prosiłeś ChatGPT czy zwykłe Gemini o kod strony, dostawałeś ścianę tekstu w okienku czatu. Trudno było to edytować, trudno było zobaczyć efekt.
Canvas zmienia zasady gry.
Gdy poprosisz o stworzenie strony, ekran dzieli się na pół. Po lewej masz czat, po prawej – „płótno” (Canvas), na którym AI pisze kod na żywo. Najlepsze jest to, że możesz zaznaczyć fragment kodu na płótnie (np. przycisk) i w czacie napisać: „zmień kolor na limonkowy”. AI wykonuje polecenie tylko na tym fragmencie.
To jak posiadanie junior developera siedzącego obok Ciebie, który natychmiast wykonuje Twoje polecenia.
Mój eksperyment: Landing page w 3 krokach
Postawiłem przed Gemini konkretne zadanie: „Stwórz mi stronę lądowania dla e-booka o produktywności. Ma być nowoczesna, mieć ciemny motyw (dark mode), duży nagłówek, sekcję z korzyściami i formularz zapisu na newsletter”.
Krok 1: „Magiczny prompt” (klucz do sukcesu)
Nie napisałem po prostu „zrób stronę”. AI potrzebuje kontekstu. Użyłem takiego promptu (możesz go skopiować):
„Działaj jako ekspert UX/UI i front-end developer. Stwórz dla mnie landing page w jednym pliku HTML (z wbudowanym CSS i prostym JS). Cel strony: zbieranie leadów na darmowy e-book pt. 'AI w Biurze’. Styl: nowoczesny, minimalistyczny, ciemny motyw z jaskrawymi, fioletowymi akcentami. Struktura: Hero sekcja z dużym nagłówkiem i przyciskiem CTA, poniżej 3 kolumny z korzyściami, na dole prosta sekcja 'O autorze’ i formularz zapisu. Użyj fontu 'Inter’ z Google Fonts. Kod ma być czysty i responsywny na mobile. Maile mają być zbierane do pliku JSON który się utworzy automatycznie przy pierwszym zapisie.”
Krok 2: Obserwowanie magii w Canvas
Gemini otworzyło okno Canvas i zaczęło pisać. Po około 45 sekundach miałem gotowy szkielet HTML i CSS.
Wyglądało nieźle, ale to nie był koniec. To tutaj Canvas błyszczy – w iteracjach.
Krok 3: „Popraw to!” – czyli dyrektor kreatywny w akcji
Pierwsza wersja była trochę zbyt prosta. Zacząłem wydawać polecenia, nie dotykając kodu:
- „Nagłówek jest za mały. Zrób go 2x większym i bardziej chwytliwym.” – Gemini zmieniło styl CSS i zaproponowało lepszy tekst.
- „Te ikony w sekcji korzyści są nudne. Zamień je na nowoczesne emoji.” – Zrobione w 5 sekund.
- „Przycisk 'Pobierz’ musi pulsować, żeby przyciągać uwagę.” – Gemini dodało prostą animację CSS.
Cały proces przypominał bardziej rozmowę z grafikiem niż programowanie.
EFEKT KOŃCOWY (Plik do pobrania)
Po 15 minutach „zabawy” otrzymałem jeden, spójny plik HTML. Wystarczy go zapisać na dysku (np. jako index.html) i otworzyć w przeglądarce – działa jak każda inna strona internetowa. Można go wrzucić na dowolny darmowy hosting (np. GitHub Pages czy Netlify) i mieć stronę w sieci za darmo.
Oto jak wygląda strona, którą stworzyło dla mnie AI:
(Jeśli chcesz zobaczyć kod lub pobrać gotowy plik, znajdziesz go na końcu artykułu).
To co zasługuje na uwagę to fakt, że mamy podgląd na żywo tego co robimy i co się zmienia. To tylko prosty Landing Page dla testów – na potrzeby tego poradnika. To, co można zrobić na „serio” to zdecydowanie przewyższa oczekiwania większości z Nas. Dlatego też programiści mają coraz mniej pracy. Jak popracujesz kilka godzin z takim narzędziem jak Canvas od Gemini to zrozumiesz. Chcesz przykładu? Zajrzyj na gdzienagrzyby.com.pl albo kamilgarden.com – to efekty Gemini Canvas.
Czy to koniec web developerów?
Nie. Jeśli potrzebujesz skomplikowanego sklepu internetowego czy zaawansowanej aplikacji webowej, nadal potrzebujesz specjalistów.
Ale jeśli potrzebujesz prostej strony dla:
- Zbierania zapisów na webinar,
- Prezentacji swojego portfolio,
- Sprzedaży prostego e-booka,
- Lokalnej usługi (np. fryzjer, hydraulik),
…to Gemini Canvas właśnie „zabiło” sens płacenia za to tysięcy złotych lub męczenia się z drogimi kreatorami typu Wix czy Squarespace.
Technologia właśnie stała się jeszcze bardziej dostępna. I o to w tym wszystkim chodzi.
Oczywiście to jest strona, którą tak na prawdę wygenerowałem w max 3 minuty. Pomyśl tylko jak wyglądałaby po trzech godzinach. Ale o tym w kolejnych wpisach.
