30 promptów do vibe coding, które można skopiować (ściąga)

Najlepsze prompty do vibe coding są krótkie, konkretne i dotyczą zachowania: kto używa aplikacji, co może zrobić, co przechowuje i jak wygląda. Poniżej znajdziesz 30 promptów do skopiowania i wklejenia, pogrupowanych według etapu, na którym jesteś, od pierwszej wersji po publikację. Zastąp części w [nawiasach] własnymi szczegółami.

Działają w każdym kreatorze aplikacji AI i każdym agencie kodującym. Jeśli chcesz poznać uzasadnienie, nasz dłuższy przewodnik jak pisać prompty dla kreatorów aplikacji AI tłumaczy zasady. Ta strona to ściąga.

Jak korzystać z tej ściągi

• Zacznij od jednego promptu pierwszej wersji, a potem używaj reszty pojedynczo.
• Testuj po każdym prompcie. Przeklikaj zmianę, zanim wyślesz następną.
• Zachowuj to, co działa. Większość promptów poprawkowych kończy się sformułowaniem „zachowaj resztę bez zmian” nie bez powodu.
• Wklejaj dokładny tekst. Komunikaty błędów, etykiety przycisków i słowa na ekranie biją opisy za każdym razem.

Prompty pierwszej wersji

Te ustalają kształt aplikacji. Każdy nazywa użytkowników, akcje, dane i wygląd.

1. Prosty tracker

Zbuduj dla mnie tracker [nawyku]. Mogę dodać [nawyk] z nazwą i kolorem, odhaczać go raz dziennie i zobaczyć siatkę 30 dni oraz moją bieżącą serię. Zapisuj wszystko, żeby było nadal tam po odświeżeniu. Czysty, minimalistyczny design, który działa na telefonie.

2. Strona rezerwacji dla małej firmy

Zbuduj stronę rezerwacji dla mojego [salonu fryzjerskiego]. Klienci wybierają usługę ([strzyżenie 30 min, koloryzacja 90 min]), datę i wolny termin między [9:00 a 18:00], potem podają imię, telefon i e-mail. Dwie osoby nie mogą zarezerwować tego samego terminu. Potrzebuję prywatnej strony administratora za logowaniem, która wyświetla nadchodzące rezerwacje według dnia.

3. Narzędzie wewnętrzne

Zbuduj wewnętrzne narzędzie dla mojego zespołu do śledzenia [wypożyczeń sprzętu]. Każda pozycja ma nazwę, kod i status (dostępna, wypożyczona, zepsuta). Pracownicy się logują, mogą wypożyczyć pozycję sobie i ją zwrócić. Pokaż tabelę z filtrami po statusie i historię tego, kto miał każdą pozycję.

4. Strona lądowania z listą oczekujących

Zbuduj jednostronicową stronę dla [mojego produktu: aplikacji do planowania posiłków dla zapracowanych rodziców]. Nagłówek, jednozdaniowy podtytuł i zapis e-mailem. Potem trzy korzyści, krótka sekcja „jak to działa” i FAQ. Zapisuj e-maile do bazy danych i pokaż mi listę na prywatnej stronie administratora.

5. Portal dla klientów

Zbuduj portal dla klientów mojego [studia projektowego]. Każdy klient się loguje i widzi tylko swoje projekty, ze statusem, plikami, które wgrałem, i wątkiem komentarzy. Loguję się jako administrator i widzę wszystkich klientów. Klienci nigdy nie mogą widzieć danych innych klientów.

6. Kalkulator lub narzędzie wyceny

Zbuduj kalkulator wyceny dla mojej [firmy sprzątającej]. Dane wejściowe: liczba sypialni, łazienek, dodatkowe usługi (piekarnik, okna, lodówka) i częstotliwość (jednorazowo, co tydzień, co miesiąc). Pokazuj cenę, gdy zmieniają się opcje, z podziałem. Ceny: [wklej swój cennik]. Dodaj przycisk, który wysyła prośbę o wycenę na mój e-mail.

Prompty planowania

Użyj ich przed dużą funkcją lub wtedy, gdy nie wiesz, jak coś opisać.

7. Plan przed budową

Zanim napiszesz jakikolwiek kod, opisz zwykłymi słowami ekrany, które zbudujesz, dane, które zapiszesz, i decyzje, których potrzebujesz ode mnie. Poczekaj na moje OK.

8. Zamień niejasny pomysł w pierwszą wersję

Oto mój pomysł: [wklej notatki]. Zaproponuj najmniejszą pierwszą wersję, która wciąż jest użyteczna, w 5–8 punktach. Wypisz, co zostawisz na później i dlaczego.

9. Zapytaj, czego brakuje

Jakie pytania zadałby mi programista, zanim zbuduje to? Zadawaj je pojedynczo, a potem podsumuj moje odpowiedzi jako krótką specyfikację.

10. Najpierw sprawdź dużą zmianę

Chcę dodać [konta zespołowe, w których kilka osób współdzieli jeden obszar roboczy]. Wyjaśnij, co musi się zmienić w danych, na ekranach i w uprawnieniach oraz co może się zepsuć. Jeszcze niczego nie zmieniaj.

Prompty designu

11. Ustal wyraźny styl

Przerób styl aplikacji: ciepłe, lekko kremowe tło, ciemny tekst, jeden kolor akcentu [#1F6F50], zaokrąglone rogi, duże odstępy i nowoczesna czcionka bezszeryfowa. Zachowaj układ i każdą funkcję dokładnie tak, jak są.

12. Skopiuj klimat wzorca

Spraw, by pulpit wyglądał jak spokojna aplikacja finansowa: dużo białej przestrzeni, liczby duże i pogrubione, etykiety małe i szare, jeden prosty wykres na górze. Nie kopiuj logo ani tekstu żadnej marki.

13. Napraw układ na telefonie

Na telefonie o szerokości 375 px tabela na [stronie zamówień] przewija się na boki, a przyciski się nakładają. Zamień każdy wiersz w ułożoną kartę na małych ekranach. Nie zmieniaj układu na komputerze.

14. Stany puste, ładowania i błędów

Dodaj właściwe stany do [listy projektów]: przyjazny stan pusty z przyciskiem dodania pierwszego projektu, szkielet ładowania podczas pobierania danych oraz wyraźny komunikat z przyciskiem ponowienia, gdy ładowanie się nie uda.

15. Obsługa języków od prawej do lewej

Dodaj wersję interfejsu w języku arabskim z pełnym układem od prawej do lewej. Ikony wskazujące kierunek mają się odwracać; liczby i daty mają używać formatu lokalnego. Angielski zostaje domyślny.

Prompty danych i funkcji

16. Spraw, by dane były trwałe

Teraz moje dane znikają po odświeżeniu. Zapisz je zamiast tego w prawdziwej bazie danych i niech obecne ekrany działają tak samo jak dotąd.

17. Dodaj logowanie

Dodaj rejestrację i logowanie e-mailem i hasłem. Każdy użytkownik ma widzieć i edytować tylko swoje [wpisy]. Pokaż e-mail użytkownika na górnym pasku z przyciskiem wylogowania.

18. Dodaj role

Dodaj dwie role: administrator i członek. Administratorzy mogą dodawać, edytować i usuwać [produkty]; członkowie mogą je tylko przeglądać. Egzekwuj to na serwerze, a nie tylko przez ukrywanie przycisków.

19. Dodaj wyszukiwanie i filtry

Dodaj pole wyszukiwania nad [listą kontaktów], które dopasowuje imię, firmę lub e-mail w trakcie pisania, plus filtr dla [statusu]. Zachowaj obecną kolejność sortowania.

20. Dodaj przesyłanie plików

Pozwól użytkownikom dołączyć do każdego [ogłoszenia] do [5] zdjęć, maks. [5 MB] każde. Pokaż miniatury w ogłoszeniu i większy podgląd po kliknięciu. Tylko właściciel może usuwać swoje zdjęcia.

21. Import z arkusza kalkulacyjnego

Dodaj przycisk Importuj, który przyjmuje CSV z kolumnami [imię, e-mail, telefon, notatki], pokazuje podgląd pierwszych 10 wierszy i pozwala mi potwierdzić przed zapisem. Pomiń wiersze bez e-maila i powiedz mi, ile ich pominięto.

Prompty poprawek

22. Opisz błąd jasno

Gdy [klikam Zapisz w formularzu edycji], widzę „[dokładny tekst błędu]” i zmiana się nie zapisuje. Oczekiwane: zmiana się zapisuje i wracam do listy. Znajdź przyczynę, wyjaśnij ją w jednym lub dwóch zdaniach, a potem ją napraw.

23. Zatrzymaj pętlę poprawek

Próbowaliśmy to naprawić trzy razy i nadal nie działa. Przestań zmieniać kod. Wypisz trzy najbardziej prawdopodobne przyczyny, jak sprawdzić każdą z nich i którą twoim zdaniem jest.

24. Cofnij efekty uboczne

Twoja ostatnia zmiana naprawiła wybieranie daty, ale [pasek boczny] zniknął. Przywróć pasek boczny dokładnie tak, jak był, i zachowaj poprawkę wyboru daty.

25. Wyjaśnij przed zmianą

Wyjaśnij, jak teraz jest obliczana [suma w kasie], krok po kroku, wskazując zaangażowane pliki. Niczego nie zmieniaj.

Prompty testowania i przeglądu

26. Przypadki brzegowe

Wypisz 10 sposobów, w jakie prawdziwy użytkownik mógłby zepsuć [formularz rezerwacji]: puste pola, bardzo długi tekst, podwójne kliknięcia, dwie osoby naraz, błędne strefy czasowe. Przetestuj każdy i napraw to, co zawodzi. Zgłoś, co zmieniłeś.

27. Podsumuj ostatnie zmiany

Podsumuj w prostych słowach każdą zmianę, jaką wykonałeś w ostatnich [pięciu] krokach, i zaznacz wszystko, co mogłoby wpłynąć na istniejące dane.

Prompty bezpieczeństwa

Zestaw je z naszą stroną o tym, czy vibe coding jest bezpieczne.

28. Sprawdź dostęp do danych

Sprawdź kod serwera: czy zalogowany użytkownik może odczytać lub zmienić [rekordy] innego użytkownika, zmieniając ID w żądaniu? Pokaż, gdzie sprawdzany jest dostęp, i napraw wszelkie luki.

29. Sprawdź, czy sekrety nie wyciekły

Wypisz każdy klucz API, hasło lub token, którego używa ta aplikacja, i gdzie każdy jest przechowywany. Upewnij się, że żaden z nich nie znajduje się w kodzie działającym w przeglądarce ani zatwierdzony w plikach. Jeśli są, przenieś je do sekretów.

Prompty publikacji

30. Przegląd przed startem

Zamierzam to opublikować dla prawdziwych użytkowników. Przejdź przez to jak recenzent: zepsute linki, brakujące tytuły i opisy stron, formularze bez walidacji, wolne strony, błędy w konsoli i wszystko, co wygląda na niedokończone na telefonie. Daj mi listę uporządkowaną według wagi, a potem napraw pierwszych pięć.

Prompty, których unikaj

Niektóre prompty regularnie dają gorsze wyniki:

• „Ulepsz to.” Ale jak? Nazwij ekran i zmianę.
• „Napraw wszystko.” AI zmieni dużo, a ty nie będziesz wiedzieć, co się przesunęło.
• „Użyj [biblioteki], [frameworka] i [wzorca].” O ile nie masz konkretnego powodu, opisz zachowanie i pozwól narzędziu wybrać stos.
• „Oto mój klucz API: …” Nigdy nie wklejaj sekretów do czatu. Użyj ustawień sekretów narzędzia.
• Dziesięć funkcji w jednej wiadomości. Podziel je.

Jak zamienić prompty w nawyk

Po kilku projektach będziesz mieć własne wersje tych promptów. Trzymaj je w notatce i używaj tych, które działają. Mythex zapamiętuje też, kim jesteś i jak pracujesz w różnych projektach, więc preferencje, które powtarzasz, np. ulubiony styl lub stos technologii, przenoszą się bez ponownego wpisywania.

Jeśli utknąłeś przy pierwszym prompcie, darmowy generator promptów do aplikacji zamienia jednozdaniowy pomysł w pełniejszy punkt startowy. A żeby zobaczyć, co te prompty dają w praktyce, przeczytaj nasze przykłady vibe coding albo wklej prompt 1 do kreatora aplikacji AI i zamień nawiasy na swój pomysł.

Pytania