Jak użyć Lovable lub Claude Code do prototypu

Lovable czy Claude Code — co wybrać

Oba narzędzia robią to samo z Twojej perspektywy: zamieniają opis w działającą aplikację. Różnią się tym, ile chcesz widzieć „pod maską” i ile kontroli potrzebujesz. Lovable to przeglądarka i klikanie. Claude Code to terminal i pełna kontrola nad kodem.

Prototyp w Lovable krok po kroku

Lovable buduje aplikację na podstawie opisu w oknie czatu. Nie widzisz kodu, jeśli nie chcesz — widzisz efekt na żywo obok.

1. Załóż darmowe konto na lovable.dev i utwórz nowy projekt.
2. W pierwszej wiadomości opisz jednym akapitem, co ma robić aplikacja i kto z niej korzysta. Nie wchodź w szczegóły — najpierw szkielet.
3. Poczekaj, aż Lovable wygeneruje pierwszą wersję. Kliknij ją, sprawdź przepływ.
4. Poprawiaj po kawałku: „dodaj kolumnę status”, „zmień kolejność pól”, „zrób przycisk zielony”. Jedna zmiana na wiadomość działa najlepiej.
5. Gdy przepływ wygląda sensownie, użyj podglądu, żeby pokazać go komuś przez link.

Prototyp w Claude Code krok po kroku

Claude Code działa w terminalu i pracuje bezpośrednio na plikach projektu. To ta sama filozofia, ale masz w ręku prawdziwy kod, który może potem rozwijać programista.

1. Zainstaluj Claude Code według instrukcji ze strony Anthropic i uruchom go w pustym folderze na projekt.
2. Poproś o utworzenie prostej aplikacji: „Zbuduj aplikację w Next.js z jednym ekranem listy klientów i formularzem dodawania”.
3. Claude tworzy pliki i podpowiada, jak uruchomić podgląd. Odpalasz go w przeglądarce lokalnie.
4. Poprawiasz rozmową, tak jak w Lovable — ale możesz też poprosić o wyjaśnienie, co robi dany fragment, i uczyć się po drodze.
5. Kod zostaje u Ciebie. Możesz go spakować i przekazać nam albo dowolnemu programiście do dokończenia.

Jak pisać prompty, żeby dostać sensowny wynik

Jakość prototypu zależy w 90% od tego, jak opiszesz, czego chcesz. Zła instrukcja to ogólnik. Dobra instrukcja mówi: kto, co robi, co widzi i co się dzieje po kliknięciu.

Kontekst: aplikacja dla właściciela małej szwalni.
Cel: zapanować nad zamówieniami zamiast prowadzić je w zeszycie.

Ekran 1 — Lista zamówień:
- kolumny: klient, produkt, ilość, status, termin
- status: nowe / w szyciu / gotowe / wydane
- przycisk „Dodaj zamówienie” u góry

Ekran 2 — Formularz dodawania:
- pola: klient, produkt, ilość, termin, notatka
- przycisk „Zapisz” wraca do listy

Na razie bez logowania i bez bazy danych — dane mogą być przykładowe.

Częste pułapki (i jak ich uniknąć)

• Chcesz wszystkiego naraz. Rozwiązanie: jeden ekran, jeden przepływ, reszta później.
• Wrzucasz prawdziwe dane klientów. Nie rób tego — prototyp to nie bezpieczny system. Używaj danych przykładowych.
• Mylisz „działa na ekranie” z „gotowe do firmy”. Prototyp pokazuje pomysł, nie zastępuje wdrożenia.
• Poddajesz się po pierwszym dziwnym wyniku. AI się myli — powiedz mu, co jest nie tak, i poproś o poprawkę. To normalna część pracy.
• Nie zapisujesz wersji. Gdy coś działa, zrób kopię albo commit, zanim poprosisz o duże zmiany.

Co zrobić z gotowym prototypem

Masz klikalny prototyp — i to jest moment, w którym warto porozmawiać z kimś, kto robił to wiele razy. Prototyp świetnie pokazuje pomysł, ale między nim a narzędziem, na którym stanie firma, jest praca: bezpieczeństwo, integracje z tym, czego już używasz, i utrzymanie.

Przyjdź z prototypem, a rozmowa o wdrożeniu będzie konkretna od pierwszej minuty. Zamiast zgadywać, o co Ci chodzi, popatrzymy razem na ekran i powiemy wprost, co zostawić, a co zmienić.

Mateusz Kozłowski

Założyciel flowbiz · Ekspert automatyzacji procesów

Wdrażam automatyzacje, integracje i AI w średnich firmach na Pomorzu i w Kujawsko-Pomorskiem.

LinkedInWięcej o autorzeUmów konsultację