# DarwinAI Vibe Coding folyamat 1.0 **Az ötlettől az éles rendszerig – lépésről lépésre** > A folyamat egy javaslat, nem szentírás: mindenkinek lehet a sajátja. Haladj végig rajta egy konkrét, kicsi példán, és jelöld a kész lépéseket (`- [x]`). > > Az interaktív változat: https://darwinai.hu/vibe-coding/folyamat © 2026 DarwinAI · Budaházy Szabolcs – darwinai.hu Saját (és a szervezeted) projektjeihez és oktatási célra szabadon felhasználhatod és átszabhatod. Továbbadáskor, közzétételkor vagy átdolgozott változatnál a forrás megjelölése kötelező: „DarwinAI – darwinai.hu”. --- ## I. Mit akarsz? *Előkészítés – még egy sor kód sem készül.* ### 1. Írd le, mit szeretnél A Vibe Coding eredménye nagyrészt azon múlik, milyen inputot adsz az elején. Nem technikai specifikáció kell – az kell, hogy pontosan leírd, MIT szeretnél. - [ ] **A cél és a környezet** – Mire való a rendszer, kik használják és mire, mi az üzleti vagy használati kontextusa? - [ ] **A folyamatok** – Milyen folyamatokat kezel? Mit csinál a szoftver, és mit csinál a felhasználó? - [ ] **Az adatok** – Mik a fő inputok és outputok? Milyen fájlokkal, adatokkal kell dolgoznia? - [ ] **A képernyők és a hozzáférés** – Milyen képernyők és fő funkciók kellenek? Kell-e bejelentkezés, felhasználókezelés? - [ ] **A végső mérce** – Minek kell mindenképpen működnie a végén? > **Tipp:** Nem kell szépnek lennie: Wordben, jegyzetben, felsorolásban – bárhogy. A következő lépésben az AI rendbe teszi. > > **Jó tudni:** A MIT a lényeg. Adatbázis-táblákat és technikai architektúrát nem neked kell meghatároznod – ha szükséges, később a coding agent megtervezi. ### 2. Dolgoztasd ki AI-val A vázlatodat add oda egy AI-nak sima chatben – lehetőleg erősebb modellel, magasabb reasoning/effort beállítással. Még NE kódoljon. - [ ] **Add oda a vázlatot egy AI-nak** – ChatGPT vagy Claude, sima chatben; erősebb modell, magasabb reasoning/effort. - [ ] **Csatolj példafájlokat** – Ha a kész szoftvernek fájlokkal kell majd dolgoznia: mintadokumentum, minta Excel, PDF stb. - [ ] **Kérd: rendszerezze, és jelezze a hiányokat** – Strukturálja a leírást, jelezze az ellentmondásokat és a hiányzó pontokat. - [ ] **Kérd: egészítse ki a szükséges funkciókkal** – Tegye hozzá azokat, amelyek szerinte kellenek a cél eléréséhez. - [ ] **Kérj átadható specifikációt – kódolás nélkül** – Olyat, amit közvetlenül át tudsz adni egy vibe coding eszköznek. És: NE kezdjen még kódolni. **Mintaprompt a kidolgoztatáshoz:** ```text Az alábbi vázlatot egy szoftverről írtam, amit egy coding agenttel szeretnék elkészíttetni. 1. Strukturáld és rendszerezd a leírásomat. 2. Jelezd az ellentmondásokat és a hiányzó pontokat – ha kell, kérdezz vissza. 3. Tedd hozzá azokat a funkciókat, amelyek szerinted szükségesek a cél eléréséhez. 4. Készíts belőle Markdown formátumú specifikációt, amelyet közvetlenül át tudok adni egy vibe coding eszköznek. NE kezdj még kódolni. Adatbázis-táblákat és részletes technikai architektúrát nem kell meghatároznod – azt később a coding agent megtervezi. A vázlatom: [ide másold be a vázlatodat] ``` > **Tipp:** Az AI visszakérdezései a legértékesebb rész. Válaszolj rájuk, és az eredmény kerüljön be a specifikációba. > > **Figyelj:** Ebben a lépésben még ne kódoltass. Előbb legyen kész a specifikáció – az építés a következő szakasz. ### 3. Projektmappa és SPEC.md Mentsd a specifikációt egyszerű szöveges vagy Markdown fájlba, és másold az újonnan létrehozott projektmappába – ez lesz a projekt egyik első dokumentuma. - [ ] **Hozz létre külön mappát a projektnek** – Minden projekthez külön projektmappa kell. - [ ] **Mentsd a specifikációt SPEC.md néven** – A Markdown (.md) kifejezetten jó formátum: egyszerű szöveg, de megmaradnak a címek, a listák és a struktúra. Egy sima leiras.txt is megteszi. - [ ] **Másold be a projektmappába** – Ez lesz a projekt egyik első dokumentuma. - [ ] **Tedd mellé a szabályfájlt (opcionális, de ajánlott)** – Az összeállítóban kiválaszthatod, mit várj el a rendszertől; a kész RULES.md ugyanide kerül. > **Figyelj:** Ne adj hozzáférést a teljes Dokumentumok mappádhoz, vagy olyan könyvtárhoz, ahol több független projekt van. A coding agent abban a mappában módosíthat, létrehozhat és akár törölhet is. > > **Tipp:** Jó szerkezet: egy „AI Projects” mappa, benne külön mappában minden projekt – Ugyfelkezelo, ExcelElemzo, Weboldal, SajatProjekt. Kapcsolódó: [Szabály-összeállító](https://darwinai.hu/vibe-coding/szabaly-osszeallito) – Válaszd ki, mit várj el a rendszertől – és töltsd le RULES.md-ként. ## II. Építsd meg *Munka a coding agenttel – és a fogalmak, amik elsőre idegenek.* ### 4. Eszköz és modell Ha tényleges szoftvert fejlesztesz, általában sokkal célszerűbb coding agentben – például Claude Code-ban vagy ChatGPT Codexben – dolgozni, mint sima AI-chatben. - [ ] **Válassz coding agentet** – Claude Code vagy ChatGPT Codex. Az agent hozzáfér a projekt fájljaihoz, látja a kódot, fájlokat hoz létre és módosít, parancsokat futtat, tesztel, hibát keres. - [ ] **Indíts új projektet / sessiont, és válaszd ki a projektmappát** – Innentől az agent abban a mappában dolgozik. - [ ] **Az első nagy építéshez erősebb modell, magasabb effort** – A projekt első nagy felépítése a legfontosabb – itt érdemes erősebb modellt használni. - [ ] **A későbbi, körülhatárolt módosításokhoz gyorsabb, olcsóbb modell is elég** – Jól körülhatárolt feladathoz általában bőven elég. - [ ] **Független funkciókhoz külön chat / session** – Átláthatóbb a munka, és egy korábbi, már nem releváns kontextus nem zavarja össze a fejlesztést. > **Tipp:** Mindig az aktuálisan elérhető modellek közül válassz. Jó kiindulópont a legnagyobb modell alatti kategória, a maximumnál eggyel alacsonyabb effort-tal; a legnagyobb kategória az extra komplex, nagyon hosszú vagy nehéz feladatoknál indokolt. > > **Jó tudni:** Példa, 2026. októberből: a komplexebb fejlesztésekhez a Claude Opus 5.5 jó választás, a Sonnet 5.5 gyorsabb és olcsóbb. A modellek gyorsan változnak – nézd meg az aktuális kínálatot. > > **Figyelj:** Claude-ban a modellt chatenként választod. Ha utólag módosítod, újraépíti a kontextust – ez tokenbe kerül. ### 5. Az első prompt Innentől a coding agent már a projektfájlokkal dolgozik. Az első prompt akár egészen egyszerű is lehet. - [ ] **Nyisd meg a coding agentet a projektmappában** - [ ] **Add ki az első promptot** – A lényeg a végén van: csak akkor tekintse késznek, ha a specifikáció minden pontját végigellenőrizte. - [ ] **Figyeld, mit kérdez vissza, és mit kér jóváhagyásra** – Fájlírás vagy parancsfuttatás előtt az agent engedélyt kérhet – olvasd el, mit csinálna. - [ ] **Kész: ha az agent a spec minden pontját végigellenőrizte** **Az első prompt:** *Csak a specifikációval:* ```text A projektmappában megtalálod a SPEC.md vagy SPEC.txt fájlt. Olvasd el teljes egészében, és készítsd el a benne leírt rendszert. Csak akkor tekintsd késznek, ha a specifikáció minden pontját végigellenőrizted. ``` *Szabályfájllal együtt:* ```text A projektmappában megtalálod a SPEC.md fájlt (a rendszer leírása) és a RULES.md fájlt (a projekt alapkövetelményei). Olvasd el mindkettőt teljes egészében, és készítsd el a SPEC.md-ben leírt rendszert a RULES.md követelményei szerint. Csak akkor tekintsd késznek, ha mindkét fájl minden pontját végigellenőrizted. ``` > **Tipp:** A coding agent nem a chatablakban „beszél” a kódról: a projektfájlokat módosítja. Nem neked kell követned, melyik kódrészletet kell átírni. Kapcsolódó: [Szabály-összeállító](https://darwinai.hu/vibe-coding/szabaly-osszeallito) – A második változathoz itt állíthatod össze a RULES.md-t. ### 6. Nézd meg: localhost Amit vibe codinggal építesz, az első körben NINCS fent az interneten. A kód a saját gépeden van, és általában egy helyi webszerver futtatja. - [ ] **Kérd: „Indítsd el és mutasd meg.”** – Az agent jellemzően elindítja a szükséges helyi szervert. - [ ] **Nyisd meg a megjelenő címet a böngészőben** – Például localhost:3000, localhost:5173 vagy 127.0.0.1:3000. A szám változhat, nincs különösebb jelentősége. - [ ] **Ne küldd el a localhost linket másnak** – Az ő gépén a „localhost” az ő saját számítógépét jelenti – azon nincs ott a kódod. - [ ] **Ha mások is használják: külön publikálni kell (→ 12. lépés)** **Kérd így:** ```text Indítsd el és mutasd meg. ``` > **Figyelj:** A localhost csak a saját gépedről érhető el. Ha el akarod érhetővé tenni másoknak, publikálni / deployolni kell valamilyen internetes szolgáltatásra. ### 7. Terminál, félelem nélkül Az a jellemzően fekete vagy sötét ablak, ahol villogó kurzor után szöveges parancsokat írhatsz be: programot indíthatsz, fájlokat kezelhetsz, szoftvert telepíthetsz, szervert indíthatsz. - [ ] **Tudd, hol van a terminál** – Macen a Terminal alkalmazás. Windowson Windows Terminal, PowerShell vagy Command Prompt – a PowerShell egy parancsértelmező, amit például a Windows Terminalban is futtathatsz. - [ ] **Hagyd, hogy az agent maga futtassa a parancsokat** – Vibe coding közben sok terminálparancsot ő maga is képes futtatni. - [ ] **Ha tőled kéri, pontosan azt másold be, amit megad** - [ ] **Ismeretlen parancsot ne másolj be gondolkodás nélkül** – Egyes parancsok fájlokat törölhetnek vagy komoly változtatást végezhetnek. Ha admin / sudo jogosultságot kér, különösen nézd meg, mit fog csinálni. - [ ] **Ha nem tudod, hogyan indítsd el: kérdezd meg** **Ha elakadsz:** ```text Írd le pontosan, milyen parancsot kell bemásolnom a terminálba. ``` > **Tipp:** A terminálon keresztül telepíthetsz programokat, letölthetsz csomagokat, elindíthatod az alkalmazást, teszteket futtathatsz, Git-parancsokat hajthatsz végre. > > **Figyelj:** Ha rendszergazdai (sudo) jogosultságot kér, állj meg egy pillanatra, és olvasd el, mit fog csinálni. ### 8. API-kulcs *Ha az alkalmazás futás közben is használ AI-t* Attól, hogy egy programot AI-val készítettél, a kész programnak nem feltétlenül kell AI-t használnia. Az AI lehetett kizárólag a FEJLESZTŐ. - [ ] **Döntsd el: kell-e futás közben AI a programba?** – Például: e-mail megírása, dokumentum összefoglalása, szövegértelmezés, képelemzés, adatok kategorizálása, chatbot, természetes nyelvű keresés. Ha nem kell, ez a lépés kimarad. - [ ] **Hozz létre API-kulcsot a szolgáltatónál** – OpenAI: platform.openai.com · Anthropic: platform.claude.com. Az API használata általában külön számlázódik az előfizetéstől. - [ ] **Tedd .env fájlba – és legyen a .gitignore-ban** – Nem egyszerű szövegfájlba (pl. OpenAIAPI.txt) a projektmappában. - [ ] **Soha ne a böngészős (frontend) kódba** – Azt a felhasználó ki tudja olvasni. Publikált appnál szerveroldalon vagy a hosting titkos környezeti változói között tárold. - [ ] **Projektenként külön kulcs, költési limittel** **Kérd így:** ```text Hozd létre a szükséges .env fájlt és a .env.example fájlt, és gondoskodj róla, hogy a .env szerepeljen a .gitignore-ban. ``` > **Figyelj:** Az API-kulcs egy jelszónak megfelelő titkos adat. Nem szabad elküldeni másnak, vagy nyilvánosságra hozni. > > **Jó tudni:** A fizetés jellemzően használatalapú; szolgáltatónként eltérhet az elszámolás: lehet prepaid credit, automatikus bankkártyás terhelés vagy vállalati számlázás. > > **Tipp:** A .env tartalma például: OPENAI_API_KEY=ide_kerul_a_kulcs. A .gitignore azért fontos, hogy a titkos kulcs véletlenül se kerüljön fel GitHubra. Kapcsolódó: [Szabálykönyv: Biztonság és jog](https://darwinai.hu/vibe-coding/szabalykonyv#biztonsag) – Mire figyeljen még egy kész rendszer. ### 9. Adatbázis *Ha tartós adattárolás kell* Nem minden programhoz kell adatbázis. Egy egyszerű kalkulátor, prezentációs oldal vagy lokális tool működhet nélküle is. - [ ] **Döntsd el: kell-e adatbázis? (a jelenet segít)** – Ha tartósan tárolsz adatot, több felhasználó dolgozik ugyanazzal, van bejelentkezés, több eszközről kell elérni, vagy publikus webalkalmazás – akkor általában kell háttérrendszer és adatbázis. - [ ] **Válassz szolgáltatót** – Saját adatbázis-szerver vagy valamilyen felhőszolgáltatás – lásd lent. - [ ] **Hozd létre, és add meg az agentnek a hozzáféréseket** – A hozzáféréseket .env fájlban, ne chatben vagy szövegfájlban add át. - [ ] **Innentől az agent úgy dolgozik vele, mint a kód többi részével** **Lehetőségek:** - **Supabase** (Kezdőknek) – PostgreSQL adatbázist, felhasználókezelést, fájltárolást és több egyéb backend funkciót ad. Nagyon elterjedt vibe coding projektekhez. - **Neon · AWS · Prisma Postgres** – Több szolgáltatás közvetlenül integrálható a Vercel rendszerébe – lásd a 12. lépést. - **Saját szerver** (Haladóknak) – Például Hetznernél bérelt virtuális szerver. Erre PostgreSQL, a webalkalmazás és más szolgáltatások is telepíthetők – nagyobb szabadság, több üzemeltetési feladat. > **Tipp:** Kezdőként a Supabase / Vercel típusú megoldások általában egyszerűbbek, mint a saját szerver. Ha mégis kell, a coding agent végig tud vezetni rajta. > > **Jó tudni:** A Supabase jelenleg két aktív projektet ad ingyenesen, korlátokkal. Fizetős használatnál szervezeti előfizetés és projektenkénti erőforrásköltség is lehet – az aktuális árakat mindig a szolgáltató oldalán nézd meg. Kapcsolódó: [Szabálykönyv: Üzemeltetés](https://darwinai.hu/vibe-coding/szabalykonyv#uzemeltetes) – Séma, migráció, backup, restore. ## III. Haladj biztonságban *Mentési pontok, tesztelés, publikálás – hogy bátran lehessen kísérletezni.* ### 10. Mentési pontok: Git és GitHub A GitHub a projekted verziókövető és együttműködési központja. Segítségével követheted a verziókat, és bármikor visszatérhetsz egy korábbi, működő állapothoz. - [ ] **Legyen GitHub repository a projektnek** – A projektnek így gépedtől független, távoli példánya is lesz. - [ ] **Nagy módosítás előtt kérj commitot** – Ha valami nagyon félremegy, sokkal könnyebb visszatérni az előző verzióhoz. - [ ] **Töltsd fel (push) a commitokat a GitHubra** - [ ] **Fontos projektnél legyen külön backup is** – A GitHub nem klasszikus backup szolgáltatás. **Mentési pont kérése:** *Nagy módosítás előtt:* ```text Mielőtt elkezded ezt a nagy módosítást, készíts egy Git commitot a jelenlegi működő állapotról. ``` *Új funkció előtt:* ```text A jelenlegi verzió működik. Commitold ezt az állapotot, és csak utána kezdd el az új funkció fejlesztését. ``` **Alapfogalmak:** - **Repository / repo** – Maga a Git által kezelt projekt. - **Commit** – A projekt egy elmentett, névvel és időponttal ellátott állapota / módosításcsomagja. - **Push** – A helyi commitok feltöltése a GitHubra. - **Pull** – A GitHubon lévő új változások letöltése a saját gépedre. - **Branch** – A projekt egy külön fejlesztési ága. > **Tipp:** A GitHub összekapcsolható Vercellel, Coolifyjal és más deployment rendszerekkel, és több projektedet is rendezetten látod egy helyen. > > **Jó tudni:** GitHub Pages: statikus weboldalakhoz (HTML, CSS, böngészős JavaScript). Beállítása jellemzően Settings → Pages; a cím például https://felhasznalonev.github.io/projektnev/. Nem általános backend vagy webszerver. Kapcsolódó: [Szabálykönyv: Üzemeltetés](https://darwinai.hu/vibe-coding/szabalykonyv#uzemeltetes) – GitHub, build, CI/CD, visszaállítható verziók. ### 11. Teszteltesd az AI-val Az első működő képernyő még nem jelenti, hogy a rendszer valóban kész. Ne csak azt mondd az agentnek, hogy „Kész.” – kérj tesztet. - [ ] **Kérd a teljes rendszer végigtesztelését a specifikáció alapján** - [ ] **Hagyd, hogy megkeresse és kijavítsa a hibákat** - [ ] **Kérd az újraellenőrzést** – Javítás után mindig újra kell nézni – egy javítás újabb hibát hozhat. - [ ] **Próbáld ki te is a fő útvonalat, úgy, mint a felhasználó** **Kérd így:** ```text Most teszteld végig a teljes rendszert a specifikáció alapján. Ellenőrizd minden funkcióját, keresd meg a hibákat, javítsd ki őket, majd ellenőrizd újra. ``` > **Figyelj:** Az első működő képernyő még nem jelenti azt, hogy a rendszer valóban kész. Kapcsolódó: [Szabálykönyv: Minőség és átadás](https://darwinai.hu/vibe-coding/szabalykonyv#minoseg) – Mit teszteljünk, és mikor kész egy projekt. ### 12. Tedd ki az internetre *Ha mások is használják* Ha azt szeretnéd, hogy mások is használják a rendszert, azt külön publikálni / deployolni kell valamilyen internetes szolgáltatásra. - [ ] **Döntsd el, kinek kell elérnie** – Ha csak neked, a localhost elég. - [ ] **Válaszd ki a hostingot a projekt jellege szerint** – Statikus oldalhoz GitHub Pages is jó; szerveroldali kódhoz, adatbázishoz, saját API-hoz Vercel, Coolify vagy más hosting kell. - [ ] **Kösd össze a GitHubbal** – Vercelnél ha új verziót pusholsz GitHubra, automatikusan elkészítheti és publikálhatja az új verziót. - [ ] **Az API-kulcsok a hosting titkos változóiba kerüljenek** - [ ] **Teszteld az élő oldalt is** – Ismételd meg a 11. lépést élesben. **Lehetőségek:** - **Vercel** (Webalkalmazás) – Elsősorban webalkalmazások publikálására és futtatására való. Automatikus címet ad (sajatprojekt.vercel.app), saját domain is köthető hozzá, domaint is lehet rajta vásárolni. - **GitHub Pages** (Statikus oldal) – HTML, CSS és böngészőben futó JavaScript. Nincs szerveroldali kód, adatbázis vagy saját API. - **Saját szerver · Coolify** (Haladóknak) – Például Hetznernél bérelt virtuális szerver. Több szabadság és több üzemeltetési feladat – kezdőként a Vercel / Supabase típusú megoldások egyszerűbbek. > **Jó tudni:** A GitHub Pages nem általános backend: ha a programnak szerveroldali Node.js / Python kódja, adatbázisa vagy saját API-ja van, inkább Vercel, Coolify vagy más hosting kell. > > **Tipp:** Innen a ciklus: kérés → teszt → mentési pont → publikálás. Nagy módosítás előtt mindig legyen visszaállási pont. Kapcsolódó: [Szabálykönyv: Láthatóság és bemutatkozás](https://darwinai.hu/vibe-coding/szabalykonyv#lathatosag) – Hogy valódi emberek meg is találják. --- Tedd a projektmappába a specifikáció mellé a projekt szabályfájlját is – állítsd össze itt: https://darwinai.hu/vibe-coding/szabaly-osszeallito © 2026 DarwinAI · Budaházy Szabolcs – darwinai.hu Forrás: DarwinAI – darwinai.hu/vibe-coding