Vibe coding

Ötletből tesztelhető webalkalmazás

Az ötlet leszűkítésétől a felépítésen és az első működő funkción át a tesztekig és az élesítés előtti ellenőrzésig.

5 lépés60–100 perc

Amire szükséged lesz
Az alkalmazás ötlete és az eszköz, amivel építenéd.
Amit a végén kapsz
Az első változat specifikációja, felépítési terv, az első működő funkció terve, tesztesetek és élesítési ellenőrzőlista.

Nyiss egy új beszélgetést a kedvenc AI-csevegődben. Az első lépésnél másold be a promptot, és írd utána a saját helyzetedet. A további lépéseket ugyanabban a beszélgetésben küldd el, a válasz után, így a modell az előzőekre épít. A jegyzeteidet és a pipákat csak ez a böngésző tárolja.

  1. Mi készül el?

    Az első változat specifikációja

    Tapasztalt terméktervezőként dolgozz. Az ötletemből írd meg az első, még éppen használható változat (MVP) specifikációját: kinek készül, mi az a három dolog, amit el tud vele intézni, mi kell bele mindenképp, mi marad ki, és mi az az öt feltétel, amelynek teljesülnie kell, hogy késznek mondhassuk. Ne tegyél úgy, mintha ismernéd a tárhelyemet vagy a használt API-kat; sorold fel, milyen technikai kérdésekben kell még döntenem.

  2. Felépítés

    Részek és adatok

    Az elfogadott specifikáció alapján tervezd meg az alkalmazás felépítését úgy, hogy egyszerű és könnyen karbantartható legyen. Írd le, milyen részekből áll, hogyan jutnak el az adatok egyiktől a másikig, hol tároljuk őket, ki mihez férhet hozzá, mi romolhat el, és mi az a néhány külső csomag, amire tényleg szükség van. Indokold meg, miért nem kell ennél bonyolultabb megoldás.

  3. Megvalósítás

    Az első működő funkció

    A felépítés alapján írj pontos megvalósítási tervet az első működő funkcióhoz. Fájlonként add meg, mit kell módosítani, hogyan ellenőrizzük a bevitt adatokat, mi történjen hiba esetén, és hogyan próbáljam ki. Csak ezt az egy funkciót építsd meg, ne tegyél mellé semmi mást. Ha kódot írsz, az futtatható legyen, ne vázlat.

  4. Teszt

    Tényleg működik?

    Írj legalább nyolc tesztesetet ehhez a funkcióhoz: szokásos használat, üres mező, hibás adat, jogosulatlan kérés, kétszer elküldött művelet, mobilos nézet és szélső esetek. Mindegyiknél szerepeljen az előfeltétel, a lépések és az elvárt eredmény. Világosan válaszd szét, mit futtattál le ténylegesen, és mit csak javasolsz.

  5. Átadás

    Élesítés előtti ellenőrzés

    Készíts élesítés előtti ellenőrzőlistát: beállítások, jelszavak és kulcsok kezelése, jogosultságok, naplózás, biztonsági mentés és visszaállítás, mobilos megjelenés, dokumentáció. Írj rövid README-vázlatot, és sorold fel, miről kell döntenem a következő kör előtt. Amíg nem ismered a tesztek eredményét, ne állítsd, hogy a projekt élesíthető.

A lépések külön, részletesebben

Promptkönyvtár

Ha egy lépésnél elakadnál, ezek a promptok ugyanazt a feladatot kitölthető mezőkkel és példával mutatják meg.

Első prompt egy új alkalmazáshoz

Az ötletedből olyan indító promptot készít, amelyet beírhatsz a Lovable-be, a Boltba, a Replitbe vagy a Cursorba: mi készüljön el elsőre, mi maradjon ki, és hogyan nézzen ki.

Vibe coding

Adatok megtervezése az alkalmazáshoz

Mielőtt az AI kódolni kezd: mit tároljon az alkalmazás, mi mihez tartozik, és ki mit láthat. Táblázatos terv hétköznapi nyelven, amelyet bemásolhatsz a kódoló eszközbe.

Vibe coding

Új funkció kérése úgy, hogy semmi ne törjön el

A kívánságodból pontos, kicsi feladatot ír a kódoló AI-nak: mit változtasson, mihez ne nyúljon, és miből látod, hogy kész. Így nem romlik el az, ami eddig működött.

Vibe coding

Biztonsági átnézés élesítés előtt

Mielőtt idegenek is használják, amit AI-jal építettél: ellenőrzőlista a leggyakoribb hibákra, a kulcsoktól a jogosultságokon át a mentésig, súlyosság szerint rendezve.

Vibe coding

Alkalmazás élesítése lépésről lépésre

A gépeden működik, de hogyan lesz belőle elérhető weboldal? Személyre szabott ellenőrzőlista tárhelytől a saját domainen át az első mentésig, a költségekkel együtt.

Vibe coding

További munkafolyamatok

Mind a 12