Zanim zaczniesz — poznaj Klaster Innowacji Społecznych
Fundacja Klaster Innowacji Społecznych działa od 2015 roku i jest dziś jedną z najprężniejszych organizacji pozarządowych na południu Polski. Od początku stawiamy na edukację cyfrową. Zrealizowaliśmy blisko sto projektów, które dotarły do ponad piętnastu tysięcy osób. Prowadzimy Kluby Rozwoju Cyfrowego, szkolimy pracowników administracji i pomagamy lokalnym społecznościom oswajać nowe technologie, od cyberbezpieczeństwa po codzienne e‑usługi.
Ćwiczenie na dzisiejszy moduł · ok. 60 minut · 3 ruchy w Lovable
KLASTERInnowacji Społecznych
Materiał dedykowany · TZM #7
Twoje ruchyNie pamiętasz, ile masz? Odznaczaj tutaj
Masz 3 darmowe wiadomości w Lovable. To wystarczy na profesjonalną aplikację dla Twojej organizacji — pod warunkiem, że żadnej nie zmarnujesz. Dlatego promptów nie piszesz z głowy: pisze je dla Ciebie inny agent AI.
1 · Ty
Masz pomysł na aplikację dla swojej organizacji
2 · Agent AI
ChatGPT, Claude lub Gemini zamienia pomysł w profesjonalny prompt
3 · Lovable
Buduje gotową stronę z bazą danych i panelem admina
Zasada gry: 3 wiadomości, zero improwizacji
Każda wiadomość wysłana do Lovable — pierwsza i każda poprawka — zużywa jedną z Twoich darmowych prób. Nie wysyłamy nic „na szybko". Najpierw prompt przygotowuje agent, Ty tylko kopiujesz i wklejasz. Po każdej wysłanej wiadomości odhacz kółko w pasku u góry — licznik ruchów jest widoczny cały czas.
0
Załóż konto w Lovable
~5 min
Wybierz zakładkę pasującą do Ciebie. Jeśli masz konto Google (Gmail) — wybierz pierwszą, będzie najszybciej.
Nie widzisz maila? Zajrzyj do folderu SPAM / Oferty — tam trafia najczęściej.
Interfejs Lovable jest po angielsku — to nie przeszkadza. Wszystko, co wkleisz, i cała Twoja strona będą po polsku.
1
Wymyśl swoją aplikację
~5 min
Pomyśl o jednej rzeczy, którą Twoja organizacja robi „ręcznie" — przez telefon, mailem, w zeszycie — a mogłaby robić przez stronę. Przykłady na rozruch:
Zapisy na warsztatyLista terminów + formularz zgłoszenia + lista uczestników dla Ciebie
Baza wolontariuszy„Chcę pomagać" — formularz z dostępnością i umiejętnościami
Zgłoszenia podopiecznychFormularz potrzeby + panel do przeglądania zgłoszeń
Wizytówka projektuCo robicie, dla kogo, aktualności, kontakt
Ubierz pomysł w jedno zdanie według wzoru — będzie Ci potrzebne za chwilę:
Aplikacja dla kogo?, w której można zrobić co?, prowadzona przez nazwa Twojej organizacji.
2
Agent pisze za Ciebie prompt
~15 min
Otwórz agenta, którego używasz na co dzień, i wklej w całości poniższą instrukcję. Agent zada Ci 3 proste pytania, a potem odda gotowy prompt do skopiowania.
Jesteś ekspertem od promptów dla Lovable.dev — narzędzia, które buduje kompletne aplikacje webowe z jednego opisu. Pomagasz mi — osobie z organizacji pozarządowej, bez doświadczenia technicznego.
Mam tylko 3 darmowe wiadomości w Lovable, więc Twój prompt musi być kompletny za pierwszym razem.
KROK 1. Zadaj mi dokładnie 3 proste pytania, po jednym naraz:
(1) dla kogo jest aplikacja i co użytkownik ma na niej zrobić,
(2) jak nazywa się moja organizacja i czym się zajmuje,
(3) jakie informacje muszę zbierać od ludzi (jeśli w ogóle).
Czekaj na moje odpowiedzi.
KROK 2. Na podstawie odpowiedzi napisz JEDEN kompletny prompt dla Lovable, w bloku kodu, gotowy do skopiowania. Prompt musi spełniać wszystkie te zasady:
- Cała treść strony po polsku.
- Design na poziomie nowoczesnego startupu, żeby robił efekt „wow": duży, pełnoekranowy hero z mocnym nagłówkiem i jednym wyraźnym przyciskiem akcji, elegancka paleta z jednym kolorem akcentowym dobranym do tematu, wyrazista nowoczesna typografia, subtelne animacje przy przewijaniu i efekty hover na kartach i przyciskach. Zakaz fioletowych gradientów i tandetnych, przeładowanych efektów — ma wyglądać drogo i profesjonalnie.
- Struktura: hero, pasek nawigacji przyklejony u góry, 3–4 sekcje treści (w tym sekcja z 3 liczbami/atutami organizacji), sekcja z wezwaniem do działania, stopka z danymi organizacji.
- Prawdziwe, konkretne treści zbudowane z moich odpowiedzi — zero „lorem ipsum" i tekstów-wypełniaczy.
- Strona ma dobrze wyglądać na telefonie i na komputerze.
- WAŻNE: jeśli aplikacja zawiera jakikolwiek formularz, zapisy, rezerwacje lub zgłoszenia — prompt MUSI zamówić bazę danych (Lovable Cloud), do której trafia każde zgłoszenie, oraz prosty panel administratora pod adresem /admin z tabelą wszystkich zgłoszeń. Dopisz to nawet, jeśli o tym nie wspomniałem. Formularz bez bazy danych to atrapa.
- Na końcu promptu dopisz po angielsku: "Do not add any features I did not ask for. Make the design modern, polished and impressive."
KROK 3. Pod blokiem kodu napisz jedno zdanie: co mam teraz zrobić z tym promptem.
Odpowiadaj na pytania agenta zwyczajnie, po ludzku — jakbyś opowiadał(a) koleżance o pomyśle. Konkretne nazwy, prawdziwe terminy, prawdziwe dane kontaktowe.
✱
Podejrzyj, z czego składa się dobry prompt
Zanim wkleisz prompt do Lovable, przeczytaj go. Zobaczysz w nim te elementy — kliknij każdy, żeby zrozumieć, po co tam jest. To jest cała „magia" promptowania:
Jedno zdanie mówiące, CO powstaje i DLA KOGO. Bez tego Lovable zgaduje — a każde zgadywanie to zmarnowany ruch.
Konkretny spis treści strony. Lovable buduje dokładnie to, co wymienisz — i wymyśla to, czego nie wymienisz. Lepiej, żeby nie musiał wymyślać.
Co użytkownik może ZROBIĆ na stronie — wypełnić, kliknąć, zarezerwować. Z listą pól formularza co do jednego, bo to o nie potem najczęściej trzeba poprawiać.
Najczęściej pomijany element! Formularz bez bazy danych wygląda, jakby działał — ale zgłoszenia znikają w próżni. Baza + panel /admin sprawiają, że TY widzisz każde zgłoszenie w tabeli. Dlatego nasz agent dopisuje to zawsze, nawet gdy o tym zapomnisz.
To ten fragment robi efekt „wow". Zamawiamy konkrety: duży hero, przyklejoną nawigację, animacje przy przewijaniu, sekcję z liczbami — i jednocześnie zakazujemy tandety (fioletowe gradienty, przeładowane efekty). Wynik ma wyglądać jak strona, za którą agencja wzięłaby kilkanaście tysięcy.
Zamyka furtkę: bez tego zdania AI lubi „dorzucić coś od siebie" — a każda niechciana funkcja to potencjalny błąd, którego naprawa kosztuje Twój kolejny ruch.
3
Ruch 1: wklej prompt do Lovable
~10 min
Skopiuj gotowy prompt z bloku kodu, który przygotował agent (przycisk kopiowania jest w rogu bloku).
Wejdź do Lovable — na środku ekranu jest duże pole tekstowe.
Wklej prompt i naciśnij Enter. Odhacz kółko nr 1 w pasku u góry strony.
Czekaj 2–4 minuty. Lovable pisze kod na żywo — nie klikaj w tym czasie niczego, nie odświeżaj strony.
Nie wysyłaj „cześć", „czy działasz?" ani pojedynczych pytań — każda wiadomość to zużyty ruch.
Nie poprawiaj literówki osobną wiadomością — zbieraj wszystko na później.
4
Ruchy 2 i 3: poprawiaj hurtowo
~20 min
Obejrzyj swoją stronę w podglądzie — także na telefonie. Wypisz na kartce wszystko, co chcesz zmienić: teksty, kolory, brakujące pole w formularzu. Potem wróć do swojego agenta (ChatGPT/Claude) i wklej:
Lovable zbudował moją aplikację. Oto lista poprawek, które chcę wprowadzić:
1. [wpisz poprawkę]
2. [wpisz poprawkę]
3. [wpisz poprawkę]
Zamień tę listę w JEDNĄ zwięzłą wiadomość dla Lovable (w bloku kodu), która wprowadza wszystkie poprawki naraz i kończy się zdaniem: "Change only what I listed. Do not modify anything else."
Skopiuj wynik, wklej do Lovable, odhacz kółko nr 2. Trzeci ruch trzymaj w rezerwie — na jedną rzecz, która wyjdzie dopiero przy testowaniu formularza.
Przetestuj formularz jak użytkownik
Wypełnij własny formularz testowym zgłoszeniem, a potem wejdź na adres /admin (dopisz go na końcu adresu swojej strony). Twoje testowe zgłoszenie powinno być w tabeli. Jeśli jest — masz działającą aplikację z prawdziwą bazą danych. To jest właśnie backend.
★
Finisz: opublikuj i pochwal się
~5 min
Co dalej, po zjeździe?
Twój projekt zostaje na koncie Lovable — możesz do niego wrócić w każdej chwili. Darmowe wiadomości odnawiają się codziennie, więc jutro masz kolejne ruchy na rozwijanie aplikacji. Tą samą metodą (pomysł → agent → prompt) rozbudujesz ją o kolejne funkcje.
Materiał szkoleniowy przygotowany przez Klaster Innowacji Społecznych dla uczestników projektu „Technologia z Misją".
