Vibe coding példák: 10 valódi appfajta, promptok és amik elromlottak

A leggyakoribb vibe coding példák kicsi, hasznos webappok: követők, foglalási oldalak, belső eszközök, ügyfélportálok, céloldalak, kvízek, irányítópultok és egyszerű AI-eszközök. Alább tíz ilyet mutatunk be. Mindegyiknél látod, ki építi, mi az első prompt, mi romlik el jellemzően, és a javító prompt, amely megoldja.

Ezek a gyakori projektek összevont mintái, nem egyetlen ember esettanulmányai. A promptok másolhatók. A hibák azok, amelyek újra és újra előjönnek, ezért ezek a hasznos részek. Ha maga a vibe coding új számodra, kezdd a mi a vibe coding oldallal.

1. Személyes költségvetés-követő

Ki építi: magánszemélyek, akik már kipróbálták a táblázatokat, és feladták.

Első prompt:

Építs havi költségvetés-követőt. Kiadásokat veszek fel összeggel, kategóriával (étel, lakás, közlekedés, szórakozás, egyéb), dátummal és megjegyzéssel. Mutasd az aktuális havi összeget kategóriánként oszlopdiagramon, és a legutóbbi kiadások listáját. Kategóriánként állíthatok be keretet, és láthatom, mennyi maradt.

Mi romlott el: a diagram minden valaha rögzített kiadást számolt, nem csak az aktuális hónapot, így a második hónapra minden kategória túllépettnek látszott. Emellett a vesszővel írt összegek („1,200”) 1-ként mentődtek el.

Javító prompt:

A diagramnak és az összegeknek csak a kiválasztott hónap kiadásait kell tartalmazniuk. Adj hozzá tetején egy hónapválasztót, amely alapértelmezetten az aktuális hónapot mutatja. Fogadd el a vesszővel vagy szóközzel írt összegeket is, és számként tárold őket.

Tanulság: a „ebben a hónapban” egy szabály. Mondd ki a szabályokat.

2. Foglalási oldal egy kis szalonnak

Ki építi: kisvállalkozók, akik megunták, hogy telefonon vagy DM-ben foglalnak.

Első prompt:

Építs foglalási oldalt a szalonomnak. Az ügyfelek kiválasztanak egy szolgáltatást, egy dátumot és egy szabad időpontot, majd megadják a nevüket és telefonszámukat. Van egy privát adminoldalam, bejelentkezés mögött, amely napi bontásban mutatja a foglalásokat.

Mi romlott el: két ügyfél egy percen belül lefoglalta ugyanazt a 10:00-s időpontot, mert az oldal csak az első betöltéskor ellenőrizte a szabad helyeket. Egy 90 perces színezés pedig nem blokkolta az utána következő időpontokat.

Javító prompt:

Amikor az ügyfél elküldi a foglalást, a szerveren ellenőrizd, hogy minden általa lefedett időpont még szabad-e, és utasítsd el „Ez az időpont éppen most foglalódott le” üzenettel, ha nem. Egy szolgáltatás a teljes hosszát blokkolja, így a 10:00-kor kezdődő 90 perces foglalás a 10:00, 10:30 és 11:00 időpontokat blokkolja.

Tanulság: bármit, amit két ember egyszerre tehet meg, a szerveren kell ellenőrizni. Lásd hogyan építs foglalási appot a teljes változatért.

3. Éttermi menü QR-kóddal

Ki építi: kávézó- és étteremtulajdonosok, akik túl gyakran nyomtatnak új menüt.

Első prompt:

Építs mobilbarát menüoldalt a kávézómnak. Szekciók reggelire, ebédre, italokra és desszertekre, minden tételnél név, ár, rövid leírás és étrendi címkék (vegán, gluténmentes). Kell egy adminoldal a tételek szerkesztéséhez, és a kifogyott tételek megjelölése. Mutass egy kinyomtatható QR-kódot, amely a menübe visz.

Mi romlott el: semmi nem romlott el, de a menü lassú volt a kávézó Wi-Fijén, mert minden tételnél teljes méretű telefonfotók töltődtek be.

Javító prompt:

A menüfotók túl nehezek. Az feltöltött képeket méretezd át legfeljebb 800 px szélességre, tömörítsd őket, és görgetéskor töltsd be késleltetve.

Tanulság: teszteld lassú kapcsolaton, ne csak az irodában.

4. Készlet- vagy eszközkövető egy csapatnak

Ki építi: üzemeltetési munkatársak, akik egy közös táblázatot cserélnek le.

Első prompt:

Építs készletkezelő eszközt a raktári csapatunknak. A tételeknek van neve, cikkszáma (SKU), mennyisége, helye és minimumszintje. A munkatársak bejelentkeznek, hozzáadhatnak készletet, levehetnek készletet indokkal, és a minimum alatti tételek pirosan kiemelve látszanak. Tarts meg minden változást és azt, aki végezte.

Mi romlott el: az előzményekben „3-as felhasználó” állt a nevek helyett, és ha több készletet vettek ki, mint ami elérhető volt, a mennyiség negatív lett.

Javító prompt:

Az előzményekben a személy nevét mutasd, ne az azonosítóját. Ne engedj olyan kivételezést, amely a mennyiséget nulla alá vinné; ehelyett mutasd, hogy „Csak 4 van készleten”.

Tanulság: írd le, mi legyen lehetetlen, nem csak azt, mi legyen lehetséges. A készletkezelő app építéséről szóló útmutatónk a többit is lefedi.

5. Ügyfélportál egy szabadúszónak vagy stúdiónak

Ki építi: tervezők, könyvelők, tanácsadók és ügynökségek.

Első prompt:

Építs ügyfélportált. Az ügyfeleket e-mailben hívom meg. Minden ügyfél bejelentkezik, és csak a saját projektjeit, fájljait és számláit látja, és hozzászólhat. Adminként bejelentkezem, és mindent látok.

Mi romlott el: ez a legfontosabb hiba a listán. Az oldalak csak az ügyfél saját projektjeit mutatták, de a szerver bármely projektet visszaadta, ha az URL-ben megváltoztattad a számot. Egy ügyfélként való kattintgatás sosem derítette ki.

Javító prompt:

Ellenőrizd minden szerveri útvonalat, amely projekteket, fájlokat, hozzászólásokat vagy számlákat ad vissza. Mindegyiknél igazolni kell, hogy a bejelentkezett ügyfél birtokolja a rekordot, különben „nem található” választ kell adnia. Ezután teszteld: jelentkezz be Az ügyfélként, és próbáld megnyitni B ügyfél projektjét az azonosítójával.

Tanulság: valami elrejtése a képernyőn nem ugyanaz, mint a védelme. Részletesebben: biztonságos-e a vibe coding?.

6. Céloldal várólistával

Ki építi: alapítók, akik az ötletüket építés előtt tesztelik.

Első prompt:

Építs céloldalt egy olyan appnak, amely segít korrepetálóknak órákat ütemezni és díjat beszedni. Főcím, alcím, e-mailes feliratkozás, három előny, egy „hogyan működik” szakasz és egy GYIK. Mentsd a feliratkozásokat dátummal egy adatbázisba, és engedd, hogy egy privát oldalról CSV-ként letöltsem őket.

Mi romlott el: néhány nap alatt a lista botok által küldött szemét feliratkozásokkal telt meg, az oldalnak pedig nem volt címe vagy leírása, így a megosztott linkek üres előnézetet mutattak.

Javító prompt:

Adj alapvető botvédelmet a feliratkozási űrlaphoz (egy rejtett csalimező és IP-címenként óránként legfeljebb 5 feliratkozás). Adj oldalcímet, meta-leírást és közösségi megosztási képet.

Tanulság: a nyilvános űrlapot megtalálják. Lásd hogyan építs várólista-oldalt.

7. Kvízapp tanárnak

Ki építi: tanárok és oktatók, akik valami könnyebbet szeretnének egy LMS-nél.

Első prompt:

Építs kvízappot az osztályomnak. Feleletválasztós kérdésekkel készítek kvízeket, mindegyiknél egy helyes válasszal. A diákok kóddal és keresztnevükkel csatlakoznak, megválaszolják a kérdéseket, és a végén látják a pontszámukat. Kvízenként látok egy eredménytáblázatot.

Mi romlott el: a helyes válaszok a kérdésekkel együtt a böngészőbe kerültek, így egy kíváncsi diák az oldal forrásában elolvashatta őket. A diákok addig küldhették be újra, amíg 100%-ot nem értek el.

Javító prompt:

Ne küldj helyes válaszokat a böngészőnek. A válaszokat a beküldés után a szerveren ellenőrizd. Kvízenként egy beküldést engedj diáknevenként, és ha valaki újra próbálkozik, mutasd ezt a tanárnak.

Tanulság: a böngésző a felhasználóé. Ami ott van, azt el lehet olvasni.

8. Kis AI-eszköz

Ki építi: marketingesek, írók és alapítók, akiknek egy célzott AI-segítő kell.

Első prompt:

Építs eszközt, amely egy termékleírásból öt közösségi médiás bejegyzést készít különböző hangnemekben (barátságos, szakértő, játékos, rövid, hosszú). Használj AI API-t. Beillesztem a leírást, választok platformot, és a bejegyzéseket másológombokkal kapom meg.

Mi romlott el: az első változat közvetlenül a böngészőből hívta az AI-szolgáltatást, az API-kulccsal együtt az oldalon, ahol bárki kimásolhatta és a számlát növelhette.

Javító prompt:

Vidd át az AI-hívást a szerverre. Az API-kulcsot titokként tárold, soha ne a frontend kódban. Látogatónként napi 20 generálásra korlátozz.

Tanulság: a kulcsok titkokként a szerveren élnek. Lásd hogyan őrizd biztonságban az API-kulcsokat és hogyan adj AI-funkciókat az appodhoz.

9. Arab és angol üzleti weboldal

Ki építi: vállalkozások az Öböl-államokban és a szélesebb arab világban, amelyek két nyelven szolgálnak ki.

Első prompt:

Építs weboldalt a belsőépítész-cégemnek arabul és angolul, nyelvváltóval. Oldalak: főoldal, szolgáltatások, portfólió, rólunk és kapcsolat. Az arab legyen teljesen jobbról balra.

Mi romlott el: az arab szöveg jobbra volt igazítva, de az elrendezés nem lett tükrözve: a nyilak rossz irányba mutattak, a menü pedig rossz oldalon volt. A telefonszámok helyenként visszafelé jelentek meg.

Javító prompt:

Arabul tükrözd az egész elrendezést: az oldal iránya legyen jobbról balra, a menü a jobb oldalon legyen, fordítsd meg az irányjelző ikonokat, a telefonszámokat és e-maileket pedig tartsd balról jobbra az arab szövegen belül.

Tanulság: a jobbról balra nem igazítás, hanem elrendezés. A Mythex kezeli az arab és más jobbról balra író elrendezéseket, és arabul is közvetlenül promptolhatsz.

10. Követő, amely telefonappá válik

Ki építi: edzők, konditermek és közösségek, akiknek a felhasználói telefonon élnek.

Első prompt:

Építs edzésnaplót a személyi edzésem ügyfeleinek. Minden ügyfél bejelentkezik, látja a számára kiosztott heti tervet, kipipálja a gyakorlatokat és rögzíti a súlyokat. Egy diagramon látom minden ügyfél fejlődését.

Mi romlott el: a webappon működött, de telefonon a gombok túl kicsik voltak edzés közben, a diagram pedig olvashatatlan volt.

Javító prompt:

Tervezd egykezes használatra telefonon: nagy érintési felületek a képernyő alján, egy gyakorlat képernyőnként, nagy Következő és Kész gombokkal, és egy egyszerű heti fejlődési diagram.

Tanulság: ha telefonon fogják használni, telefonra tervezz először. Mythex Pro csomagon a publikált app Android-appá válhat a Google Playre, és iPhone-appá a TestFlightba; a telefonos app a publikált appodat nyitja meg, így minden közzététel frissíti. Lásd a mobilappkészítő oldalt.

A példák mögötti minták

Mind a tíz példában a hibák néhány csoportba sorolhatók:

Ezek egyikéhez sem kell kódot olvasnod. Úgy kell tesztelned, mint egy kíváncsi, kissé ellenséges felhasználó, és pontosan leírnod, amit látsz.

Próbálj ki egyet magad

Válaszd ki a legközelebbi példát az ötletedhez, másold az első promptját, és cseréld ki a részleteket. Utána a javító promptot használd ellenőrzőlistaként, mielőtt megosztanád. A vibe coding promptok puskájában még 30 van, a hogyan építs appot vibe codinggal pedig egy projektet visz végig az ötlettől a publikált appig. Ha készen állsz, indítsd az AI app-építőben, vagy nézd meg a sablonokat, hogy gyorsabban indulj.

Kérdések