30 promptů pro vibe coding ke zkopírování (přehled)

Nejlepší prompty pro vibe coding jsou krátké, konkrétní a o chování: kdo aplikaci používá, co v ní může dělat, co uchovává a jak vypadá. Níže je 30 promptů ke zkopírování a vložení, seskupených podle fáze, ve které jste, od první stavby po publikování. Části v [hranatých závorkách] nahraďte svými vlastními údaji.

Fungují v jakémkoli AI nástroji pro tvorbu aplikací nebo kódovém agentovi. Pokud chcete důvody, které za nimi stojí, náš delší průvodce jak psát prompty pro AI nástroje na tvorbu aplikací vysvětluje principy. Tato stránka je přehled.

Jak používat tento přehled

• Začněte jedním promptem pro první stavbu, potom používejte ostatní jeden po druhém.
• Testujte po každém promptu. Než pošlete další, proklikejte změnu.
• Ponechte to, co funguje. Většina navazujících promptů zde končí větou „ostatní ponech stejné“ a je k tomu důvod.
• Vkládejte přesný text. Chybové hlášky, popisky tlačítek a slova na obrazovce jsou vždy lepší než popisy.

Prompty pro první stavbu

Tyto určují tvar aplikace. Každý pojmenovává uživatele, akce, data a vzhled.

1. Jednoduchý tracker

Postav mi tracker [návyku]. Můžu přidat [návyk] s názvem a barvou, označit ho jednou denně a vidět mřížku za 30 dní a svou aktuální sérii. Ulož vše tak, aby to zůstalo po obnovení stránky. Čistý, minimalistický design, který funguje na telefonu.

2. Rezervační stránka pro malou firmu

Postav rezervační stránku pro můj [kadeřnický salon]. Zákazníci vyberou službu ([střih 30 min, barvení 90 min]), datum a volný časový termín mezi [9:00 a 18:00], pak zadají jméno, telefon a e-mail. Dva lidé nesmějí rezervovat stejný termín. Potřebuji soukromou administrátorskou stránku za přihlášením, která vypisuje nadcházející rezervace podle dne.

3. Interní nástroj

Postav interní nástroj pro můj tým na sledování [výpůjček vybavení]. Každá položka má název, kód a stav (dostupné, vypůjčené, rozbité). Zaměstnanci se přihlásí, můžou si položku vypůjčit a vrátit ji. Zobraz tabulku s filtry podle stavu a historii, kdo položku měl.

4. Přistávací stránka s čekací listinou

Postav jednostránkový web pro [můj produkt: aplikaci na plánování jídelníčku pro zaneprázdněné rodiče]. Hero s nadpisem, jednověťovým podnadpisem a registrací e-mailem. Pak tři výhody, krátká sekce jak to funguje a FAQ. Ulož e-maily z registrací do databáze a ukaž mi seznam na soukromé administrátorské stránce.

5. Klientský portál

Postav klientský portál pro mé [designové studio]. Každý klient se přihlásí a vidí jen své projekty se stavem, soubory, které jsem nahrál, a vlákno komentářů. Přihlásím se jako administrátor a vidím všechny klienty. Klienti nikdy nesmí vidět data jiných klientů.

6. Kalkulačka nebo nástroj pro cenové nabídky

Postav kalkulačku cenových nabídek pro můj [úklidový servis]. Vstupy: počet ložnic, koupelen, extra služby (trouba, okna, lednice) a frekvence (jednorázově, týdně, měsíčně). Zobrazuj cenu podle toho, jak se volby mění, s rozpisem. Ceny: [vlož svůj ceník]. Přidej tlačítko, které pošle žádost o nabídku mně e-mailem.

Prompty pro plánování

Použijte je před velkou funkcí nebo kdykoli si nejste jisti, jak něco popsat.

7. Naplánuj před stavbou

Než napíšeš jakýkoli kód, popiš běžnými slovy obrazovky, které postavíš, data, která budeš ukládat, a rozhodnutí, která potřebuješ ode mě. Počkej na můj souhlas.

8. Z chaotického nápadu první verze

Tady je můj nápad: [vlož poznámky]. Navrhni nejmenší první verzi, která je ještě užitečná, v 5–8 odrážkách. Vypiš, co necháš na později, a proč.

9. Zeptej se, co chybí

Na jaké otázky by se mě vývojář zeptal, než by tohle postavil? Ptej se po jedné, pak shrň mé odpovědi jako krátkou specifikaci.

10. Nejdřív zkontroluj velkou změnu

Chci přidat [týmové účty, kde více lidí sdílí jeden pracovní prostor]. Vysvětli, co se musí změnit v datech, obrazovkách a oprávněních, a co se může rozbít. Zatím nic neměň.

Prompty pro design

11. Nastav jasný styl

Předělej vzhled aplikace: teplé pozadí barvy smetany, tmavý text, jedna akcentová barva [#1F6F50], zaoblené rohy, velkorysé mezery a moderní bezserifové písmo. Ponech rozložení a každou funkci přesně tak, jak jsou.

12. Zkopíruj pocit z reference

Udělej z dashboardu klidnou finanční aplikaci: hodně bílého prostoru, čísla velká a tučná, popisky malé a šedé, nahoře jeden jednoduchý graf. Nekopíruj logo ani text žádné značky.

13. Oprav rozložení na telefonu

Na telefonu širokém 375 px se tabulka na [stránce Objednávky] posouvá do stran a tlačítka se překrývají. Na malých obrazovkách promění každý řádek v zastohovanou kartu. Desktopové rozložení nemění.

14. Prázdné, načítací a chybové stavy

Přidej správné stavy do [seznamu projektů]: přátelský prázdný stav s tlačítkem pro přidání prvního projektu, načítací kostru, zatímco se data načítají, a jasnou zprávu s tlačítkem pro opakování, když načtení selže.

15. Podpora zprava doleva

Přidej arabskou verzi rozhraní s plným rozložením zprava doleva. Ikony ukazující směr se mají otočit; čísla a data mají používat formát místního nastavení. Angličtina zůstává výchozí.

Prompty pro data a funkce

16. Ulož data trvale

Teď mi data po obnovení stránky zmizí. Ulož je místo toho do skutečné databáze a nech stávající obrazovky fungovat stejně jako dosud.

17. Přidej přihlášení

Přidej registraci a přihlášení e-mailem a heslem. Každý uživatel smí vidět a upravovat jen své vlastní [záznamy]. Zobraz e-mail uživatele v horní liště s tlačítkem pro odhlášení.

18. Přidej role

Přidej dvě role: správce a člen. Správci mohou přidávat, upravovat a mazat [produkty]; členové je mohou jen prohlížet. Vynucuj to na serveru, ne jen skrýváním tlačítek.

19. Přidej vyhledávání a filtry

Přidej vyhledávací pole nad [seznam kontaktů], které při psaní hledá podle jména, firmy nebo e-mailu, plus filtr pro [stav]. Zachovej současné řazení.

20. Přidej nahrávání souborů

Nech uživatele připojit až [5] obrázků ke každému [inzerátu], maximálně [5 MB] každý. Na inzerátu zobraz náhledy a po kliknutí větší zobrazení. Smazat své obrázky smí jen vlastník.

21. Import z tabulky

Přidej tlačítko Import, které načte CSV se sloupci [jméno, e-mail, telefon, poznámky], ukáže náhled prvních 10 řádků a nechá mě potvrdit před uložením. Přeskoč řádky bez e-mailu a řekni mi, kolik jich bylo přeskočeno.

Prompty pro opravy

22. Jasně nahlas chybu

Když [kliknu na Uložit ve formuláři úprav], vidím „[přesný text chyby]“ a změna se neuloží. Očekávám: změna se uloží a vrátím se na seznam. Najdi příčinu, vysvětli ji v jedné nebo dvou větách a pak ji oprav.

23. Zastav smyčku oprav

Třikrát jsme se to snažili opravit a pořád to nefunguje. Přestaň měnit kód. Vypiš tři nejpravděpodobnější příčiny, jak každou ověřit, a které si myslíš, že je ta pravá.

24. Vrať vedlejší efekty

Tvoje poslední změna opravila výběr data, ale [postranní panel] zmizel. Vrať postranní panel přesně tak, jak byl, a ponech opravu výběru data.

25. Vysvětli před změnou

Vysvětli krok za krokem, jak se teď počítá [celková částka v pokladně], a ukaž na zapojené soubory. Nic neměň.

Prompty pro testování a kontrolu

26. Okrajové případy

Vypiš 10 způsobů, jak by skutečný uživatel mohl rozbít [rezervační formulář]: prázdná pole, velmi dlouhý text, dvojité kliknutí, dva lidé najednou, špatná časová pásma. Otestuj každý a oprav, co selže. Napiš, co jsi změnil.

27. Shrnutí nedávných změn

Shrň každou změnu, kterou jsi udělal v posledních [pěti] krocích, běžnými slovy, a označ cokoli, co by mohlo ovlivnit stávající data.

Prompty pro bezpečnost

Spárujte je s naší stránkou o tom, zda je vibe coding bezpečný.

28. Zkontroluj přístup k datům

Zkontroluj serverový kód: může přihlášený uživatel číst nebo měnit [záznamy] jiného uživatele tím, že změní ID v požadavku? Ukaž mi, kde se přístup kontroluje, a oprav mezery.

29. Zkontroluj, zda neunikají tajné údaje

Vypiš každý API klíč, heslo nebo token, který tato aplikace používá, a kde je každý uložen. Zajisti, aby žádný nebyl v kódu běžícím v prohlížeči nebo v souborech v repozitáři. Pokud ano, přesuň je do tajných hodnot.

Prompty pro publikování

30. Kontrola před spuštěním

Chystám se to publikovat pro skutečné uživatele. Projdi to jako recenzent: rozbité odkazy, chybějící titulky a popisy stránek, formuláře bez validace, pomalé stránky, chyby v konzoli a cokoli, co na telefonu vypadá nedodělaně. Dej mi seznam seřazený podle důležitosti a pak oprav prvních pět.

Prompty, kterým se vyhnout

Některé prompty spolehlivě vedou k horším výsledkům:

• „Udělej to lepší.“ Lepší jak? Pojmenujte obrazovku a změnu.
• „Oprav všechno.“ AI změní hodně a vy nebudete vědět, co se pohnulo.
• „Použij [knihovnu] a [framework] a [vzor].“ Pokud k tomu nemáte důvod, popište chování a nechte nástroj vybrat technologie.
• „Tady je můj API klíč: …“ Nikdy nevkládejte tajné údaje do chatu. Použijte nastavení tajných hodnot nástroje.
• Deset funkcí v jedné zprávě. Rozdělte je.

Z promptů se stává návyk

Po několika projektech budete mít vlastní verze těchto promptů. Uložte si je do poznámky a znovu používejte ty, které fungují. Mythex si také pamatuje, kdo jste a jak pracujete napříč projekty, takže preference, které opakujete, například váš obvyklý styl nebo technologie, se přenesou bez opakovaného psaní.

Když se zaseknete u prvního promptu, bezplatný generátor promptů pro aplikace promění jednořádkový nápad v plnější výchozí prompt. A abyste viděli, co tyto prompty ve skutečnosti vytvoří, přečtěte si naše příklady vibe codingu, nebo vložte prompt 1 do AI nástroje pro tvorbu aplikací a změňte závorky na svůj vlastní nápad.

Otázky