Ugrás a tartalomhoz
DarwinAI

A folyamat 1.0

Vibe Coding · Folyamat 1.0

Az ötlettől az éles rendszerig – lépésről lépésre

A DarwinAI Vibe Coding folyamat 1.0 egy kipróbált, tizenkét lépéses munkamenet azoknak, akik AI-asszisztált szoftverfejlesztést tanulnak: az ötlet leírásától a specifikáción, a coding agenttel végzett építésen, az API-kulcsok, az adatbázis és a Git kezelésén, valamint a teszteléshez át az éles publikálásig. Egy javaslat, nem szentírás – pipálható checklisttel, mintapromptokkal és animált magyarázatokkal.

Kezdjük a lépésekkelPipálható checklist (.html)

Mielőtt belevágsz

Haladj végig a saját példádon

A folyamat akkor marad meg igazán, ha közben csinálod. Nyisd meg ezt az oldalt az egyik ablakban, a projektedet a másikban – és pipáld, ami kész.

  1. 1

    Két ablakban

    Itt olvasod a lépést, a másik ablakban megcsinálod. A bal oldali lista mutatja, hol tartasz.
  2. 2

    Egy kicsi, valódi példán

    Válassz egy apró, tényleg használható feladatot – ilyeneket szoktam javasolni:

    ÜgyfélkezelőExcel-elemzőWeboldalSaját projekt

  3. 3

    Pipáld, ami kész

    A pipák a böngésződben maradnak, nem küldjük el sehova. Ha inkább offline követnéd, letöltheted checklistként is.

A folyamat

Tizenkét lépés, három szakasz

Balra a teljes sorrend, jobbra a részletek, a tippek és az animált magyarázatok. A szaggatott körös lépések elágazások: csak akkor kellenek, ha a projektedre igaz.

0%

Hol tartasz?

0 / 12 lépés kész · 0/54 pipa

01. lépésI. Mit akarsz?

Í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.

Szemléltetés

Mit csinálj

0 / 5

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.

02. lépésI. Mit akarsz?

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.

Szemléltetés

Mit csinálj

0 / 5
Mintaprompt a kidolgoztatáshoz

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.

03. lépésI. Mit akarsz?

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.

Szemléltetés

Mit csinálj

0 / 4

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.

04. lépésII. Építsd meg

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.

Próbáld ki

Mit csinálsz éppen?

Modellerősebb modell
Reasoning / effortmagasabb effort
Új chat / sessionnem szükséges

Itt dől el a projekt szerkezete – érdemes erősebb modellt és magasabb reasoning / effort beállítást használni.

Irányelv, nem szabály – mindig az aktuálisan elérhető modellek közül válassz.

Mit csinálj

0 / 5

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.

05. lépésII. Építsd meg

Az első prompt

Innentől a coding agent már a projektfájlokkal dolgozik. Az első prompt akár egészen egyszerű is lehet.

Szemléltetés

Mit csinálj

0 / 4
Az első prompt

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.

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.

06. lépésII. Építsd meg

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.

Szemléltetés
Nálad működik: a kód a te gépeden fut.Elküldöd a linket – a barátod a saját gépén próbálja megnyitni.Publikálva: bárhonnan elérhető.

Mit csinálj

0 / 4
Kérd így

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.

07. lépésII. Építsd meg

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.

Próbáld ki
terminál – kattints egy sorra

Mit csinál?Elindítja a helyi szervert – jellemzően ez ad localhost-címet. A pontos parancs projektenként más lehet, az agent megmondja.

Mit csinálj

0 / 5
Ha elakadsz

Í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.

08. lépésII. Építsd megHa az alkalmazás futás közben is használ AI-t

API-kulcs

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Ő.

Szemléltetés

Mit csinálj

0 / 5
Kérd így

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.

09. lépésII. Építsd megHa tartós adattárolás kell

Adatbázis

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.

Próbáld ki

Melyik igaz a programodra?

Nem kell adatbázis

Egy egyszerű kalkulátor, prezentációs oldal vagy lokális tool működhet nélküle.

Mit csinálj

0 / 4

  • SupabaseKezdő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 szerverHaladó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.

10. lépésIII. Haladj biztonságban

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.

Szemléltetés

Mit csinálj

0 / 4
Mentési pont kérése

Mielőtt elkezded ezt a nagy módosítást, készíts egy Git commitot a jelenlegi működő állapotról.

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.

11. lépésIII. Haladj biztonságban

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.

Szemléltetés

Mit csinálj

0 / 4
Kérd így

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.

12. lépésIII. Haladj biztonságbanHa mások is használják

Tedd ki az internetre

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.

Szemléltetés

Mit csinálj

0 / 5

  • VercelWebalkalmazá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 PagesStatikus oldal

    HTML, CSS és böngészőben futó JavaScript. Nincs szerveroldali kód, adatbázis vagy saját API.

  • Saját szerver · CoolifyHaladó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.

És utána

Innen a ciklus

Az első verzió után nincs „kész”: kis, körülhatárolt kérések következnek, mindegyik után teszt és mentési pont. Nagy módosítás előtt mindig legyen visszaút.

A ciklus

Ami a folyamat mellé való

Tedd mellé a szabályokat is

A specifikáció azt mondja meg, MIT építsen az agent. A szabályfájl azt, hogy MIT várj el tőle akkor is, ha nem kérted külön – mobil nézet, hibakezelés, mérés, biztonság, SEO. Mindkettő a projektmappába kerül.

Tanulj belőle

Szabálykönyv

Mit kérnek mindig utólag? Tizenkét terület, a sokadik körben előkerülő kérésekkel – hogy az elején kérd el őket.

Megnyitom

Használd

Szabály-összeállító

Pipáld ki, mi kell a projektedhez, és töltsd le RULES.md-ként – a specifikáció mellé, vagy az első promptba.

Megnyitom

Letölthető

Vidd magaddal a folyamatot

A pipálható checklist internet nélkül is működik; a Markdown-változat az agentnek is átadható.

Gyakori kérdések

Amit a legtöbben kérdeznek

Kell programozni tudnom a Vibe Codinghoz?
Nem kell részletes technikai specifikációt írnod: az a fontos, hogy pontosan leírd, MIT szeretnél. Az adatbázis-táblákat és a technikai architektúrát később a coding agent is meg tudja tervezni. Néhány alapfogalmat viszont érdemes ismerni – localhost, API-kulcs, adatbázis, terminál, Git –, ezekről szólnak a folyamat lépései.
Miért coding agentben dolgozzak, és miért nem sima AI-chatben?
A coding agent – például a Claude Code vagy a ChatGPT Codex – hozzáfér a projekt fájljaihoz, látja a meglévő kódot, létrehoz és módosít fájlokat, parancsokat futtat, tesztel és hibát keres. Nem neked kell követned, melyik kódrészletet kell átírni: a rendszer a meglévő projektet módosítja.
Elérik mások azt, amit vibe codinggal a gépemen készítettem?
Nem. Ami böngészőben fut, az első körben nincs fent az interneten: a kód a saját gépeden van, és a localhost cím csak onnan érhető el. Ha mások is használják, külön publikálni kell valamilyen internetes szolgáltatásra, például Vercelre vagy GitHub Pages-re.
Hova tegyem az AI API-kulcsomat?
Egy .env fájlba, amely szerepel a .gitignore-ban – ne egyszerű szövegfájlba a projektmappában, és soha ne a böngészőben futó frontend kódba. Publikált alkalmazásnál szerveroldalon vagy a hosting szolgáltató titkos környezeti változói között tárold. Projektenként külön kulcsot használj, költési limittel.
Mikor kell adatbázis a programomhoz?
Ha tartósan tárolsz adatot, több felhasználó dolgozik ugyanazzal az adattal, van bejelentkezés, több eszközről kell elérni, vagy publikus webalkalmazást készítesz. Egy egyszerű kalkulátor, prezentációs oldal vagy lokális tool adatbázis nélkül is működhet.
Mit tegyek, mielőtt nagy módosítást kérek az agenttől?
Készíts Git commitot a jelenlegi működő állapotról, és csak utána kezdd el az új funkciót. Így ha valami nagyon félremegy, könnyen visszatérhetsz az előző verzióhoz. A GitHub nem klasszikus backup, ezért fontos projektnél külön mentés is ajánlott.

Együtt gyorsabb

Workshopon, coachingon vagy egy közös fejlesztési projektben végigvisszük ezt a folyamatot – a te saját feladatodon.

Konzultáció kéréseAI oktatás és workshop