Ugrás a tartalomhoz
DarwinAI

Vibe Coding tankönyv

Vibe Coding · Tankönyv

Az ötlettől a működő szoftverig – egy könyvben

A DarwinAI Vibe Coding tankönyve gyakorlati gyorstalpaló felnőtteknek, akik saját eszközt, alkalmazást vagy rendszert építenének AI-val – programozói tudás nélkül. 19 leckében vezet végig a teljes folyamaton: a saját vázlattól és a specifikációtól a coding agenttel végzett építésen, a terminálon, a tesztelésen és a Giten át az API-ig, az adatbázisig, a telefonra telepíthető alkalmazásig és a publikálásig. Ingyenesen letölthető, és itt az oldalon is végiglapozható.

A DarwinAI Vibe Coding tankönyv borítója
PDF letöltése · 7.7 MBLapozz bele▶ Videók a leckékhez
A DarwinAI Vibe Coding tankönyv borítója
19lecke
4rész
63oldal
5melléklet
165 percolvasás

Lapozd végig itt

Az egész könyv, oldalról oldalra

Pont úgy, ahogy a PDF-ben: borító, tartalomjegyzék, négy rész, mellékletek. Ugorj egy leckére a listából, vagy lapozz a lap szélére kattintva.

Borító|Bevezető és tartalom

A tankönyv Borító

Lapozz a nyilakkal, a ← / → billentyűkkel, telefonon húzással – vagy kattints a lap szélére.

Mit tanulsz?

4 rész, 19 lecke

A leckék egymásra épülnek: az első kettő után már érted a teljes folyamatot. Minden kártyán ott a lecke három kulcsgondolata – egy kattintással a könyv megfelelő oldalára vagy a videóhoz ugorhatsz.

  1. Minden lecke · 1Ebben a leckébenMit fogsz megtanulni – három pontban.
  2. Minden lecke · 2Magyarázat és példákÁbrák, valódi képernyők, másolható promptok.
  3. Minden lecke · 3KulcsgondolatokA lényeg, amit érdemes megjegyezni.
  4. Minden lecke · 4Próbáld kiEgy kis feladat a saját projekteden.
I.

Alapok

– Mi ez az egész – és mivel dolgozunk?
  • 01

    Mi a programozás?

    A program is egy nyelv – és az AI beszéli

    • A program utasítások pontos sorozata – mint egy nagyon szigorú recept.
    • A programnyelv is nyelv, és a mai AI-modellek folyékonyan beszélik.
    • A te nyelved a magyar: a feladatod a pontos leírás és az ellenőrzés.
    Videó · 3:068 perc olvasás
  • 02

    Mi a vibe coding?

    Te mondod meg, mit – az AI megcsinálja, hogyan

    • Vibe coding: az AI írja a kódot, te adod meg a működést és a célt.
    • Valódi, működő termékek készülnek így – órák vagy napok alatt.
    • Te vagy a megrendelő és az ellenőr; az eredmény a leíráson múlik.
    Videó · 2:419 perc olvasás
  • 03

    Az eszközök

    Sima chat vagy coding agent – és melyik platform?

    • Igazi szoftverhez coding agent kell, nem sima chat.
    • Az agent a projekt fájljaiban dolgozik: létrehoz, futtat, tesztel, javít.
    • Kezdéshez jó a Lovable; saját gépes, komolyabb munkához Claude Code vagy Codex.
    Videó · 2:3510 perc olvasás
  • 04

    Modell és erőfeszítés

    Melyik „agy” dolgozzon – és mennyit gondolkodjon?

    • Modell = ki dolgozik; erőfeszítés = mennyit gondolkodik.
    • Az első nagy építéshez a legerősebb modell kell, magas erőfeszítéssel.
    • Apró módosításhoz elég a gyorsabb, olcsóbb beállítás; független feladathoz új beszélgetés.
    Videó · 2:097 perc olvasás
II.

Tervezés

– Mielőtt egy sor kód is készülne – itt dől el a minőség.
  • 05

    A folyamat térképe

    Kilenc lépés az ötlettől a működő programig

    • Kilenc lépés: vázlat → AI-upgrade → UI-terv → mappa → indítás → figyelés → magára hagyás → átadás → publikálás.
    • A tervezés a legfontosabb: olcsóbb a terven gondolkodni, mint a kódot javítani.
    • A részletes, pipálható változat a darwinai.hu/vibe-coding/folyamat oldalon van.
    Videó · 2:287 perc olvasás
  • 06

    Vázlatból specifikáció

    A saját szavaidtól az átadható tervig

    • Az első vázlat lehet rendezetlen – a lényeg, hogy benne legyen, amit tudsz.
    • A hét kérdés: cél, célcsoport, folyamat, bemenet–kimenet, funkciók, mitől jó, mi nem cél.
    • Az AI sima chatben specifikációt csinál belőle – kódolás nélkül. Az eredmény: SPEC.md.
    Videó · 4:1012 perc olvasás
  • 07

    UI-terv: így fog kinézni

    Négy irány, egy választás – még kód nélkül

    • A látványterv az ízlésedet adja át az AI-nak – nélküle sablonos felület lesz.
    • Kérj négy kifejezetten eltérő irányt ugyanabban a chatben, ahol a specifikáció készült.
    • Válassz vagy keverj, és mentsd el design.png néven.
    Videó · 2:067 perc olvasás
  • 08

    A projektmappa

    Egy mappa, benne minden, amit az AI-nak tudnia kell

    • Minden projektnek saját mappa jár – és csak ezt a mappát kapja meg az agent.
    • Építés előtt a mappában van: SPEC.md, design.png, RULES.md és a mintafájlok.
    • A RULES.md a minden projektedre érvényes elvárásaid gyűjteménye – egyszer állítod össze.
    Videó · 2:238 perc olvasás
III.

Építés

– Az AI dolgozik, te irányítasz – és megtanulod használni, amit kaptál.
  • 09

    Indítás és közös munka az agenttel

    Az első prompt, az első öt perc – és a jó visszajelzés

    • Indítás: agent → projektmappa → modell → indító prompt, a végén „csak akkor kész, ha mindent ellenőriztél”.
    • Az első öt percben figyelj: kérdések, irány, engedélykérések. Utána hagyd dolgozni.
    • Iterálj konkrét visszajelzéssel: mit csináltál, mit vártál, mi történt – plusz képernyőkép.
    Videó · 3:3011 perc olvasás
  • 10

    Elkészült – mit kaptál?

    Az átadás, a README és a localhost titka

    • Három külön állapot: kész a kód → fut a program → mások is elérik.
    • Kérj laikusoknak szóló átadási útmutatót, és mentsd a README.md-be.
    • A localhost = a saját géped. A link másnál nem működik – ahhoz publikálni kell.
    Videó · 3:019 perc olvasás
  • 11

    A terminál, félelem nélkül

    Amikor az AI parancsot ad, és neked kell beírnod

    • A terminál egy egyszerű eszköz: cd, ls/dir, Enter, Ctrl + C – ennyi elég.
    • Az AI parancsait kódblokkból, pontosan, soronként másold be; várd meg, amíg végez.
    • Hibánál ne próbálgass: add vissza az üzenetet az AI-nak, és kérd a következő lépést.
    Videó · 3:1611 perc olvasás
  • 12

    Tesztelés és hibajavítás

    A „Kész.” még nem kész

    • A „Kész.” nem kész: kérd az AI-t, hogy a specifikáció alapján tesztelje végig a rendszert.
    • Te is próbáld ki a fő útvonalat – hat egyszerű kérdéssel.
    • Ha körbe-körbe javít: állj meg, új munkamenet, erősebb modell, vagy vissza egy működő változathoz.
    Videó · 2:348 perc olvasás
IV.

Tovább

– Mentés, kapcsolatok, adatok, telefon, internet – amikor a projekt komolyra fordul.
  • 13

    Mentési pontok: Git és GitHub

    Hogy bátran kísérletezhess – mindig legyen visszaút

    • A commit egy visszaállítható mentési pont; a GitHub a projekted felhőbeli otthona.
    • A Git-parancsokat az agent végzi – a te dolgod tudni, mikor kérj mentést.
    • Ami működik, azt elmented; utána jöhet a nagy változtatás.
    Videó · 2:229 perc olvasás
  • 14

    API, AI a programban és a titkok

    Amikor a programod más rendszerekkel beszélget

    • Az API egy kapu, amelyen át a programod más rendszerekkel beszélget.
    • A kész programnak nem kell AI – csak ha maga végez szöveges vagy képi „gondolkodó” munkát.
    • Az API-kulcs jelszó: .env fájlba, .gitignore mögé, projektenként külön, költési limittel.
    Videó · 2:2610 perc olvasás
  • 15

    Adatbázis

    A program tartós memóriája – és mikor kell

    • Az adatbázis a program tartós memóriája – nem minden programhoz kell.
    • Saját gépre SQLite, webalkalmazáshoz felhős adatbázis (pl. Supabase); a saját szerver haladóknak való.
    • Az adat értékesebb a kódnál: legyen róla mentés, és tudd, hogyan állítod vissza.
    Videó · 2:157 perc olvasás
  • 16

    PWA – app a telefonodon

    Weboldalból telepíthető alkalmazás, app store nélkül

    • A PWA telepíthető weboldal: ikon, teljes képernyő, offline indulás – app store nélkül.
    • Egy prompttal kérheted; a telepítéshez publikált, https-es cím kell.
    • A legtöbb saját eszközhöz bőven elég; különleges telefonos funkcióknál kérdezz rá.
    Videó · 2:086 perc olvasás
  • 17

    Publikálás: hogyan lesz belőle élő oldal?

    A képernyőképtől a saját domainig

    • Előbb azt döntsd el, mire van szüksége a másiknak: megnézni, helyben futtatni, linken használni vagy továbbfejleszteni.
    • Statikus oldalhoz GitHub Pages, webalkalmazáshoz Vercel – a GitHubról automatikusan frissül.
    • Hosting = ahol fut, domain = a címe, https = a biztonságos kapcsolat.
    Videó · 2:3111 perc olvasás
  • 18

    Haladó eszköztár

    Szabálykönyv, projektmemória, skillek és MCP

    • A haladó eszközök lényege: amit egyszer jól leírtál, azt az AI mindig magától használja.
    • RULES.md a közös elvárásokra, CLAUDE.md / AGENTS.md a projekt memóriájára, skill a módszeredre.
    • Az MCP csatlakozókkal az agent a külvilágot is eléri: naptár, adatbázis, böngésző.
    Videó · 2:048 perc olvasás
  • 19

    Az első saját projekted

    Az egész egy oldalon – és a terv a következő hétre

    • Szándék – platform – specifikáció – folyamat: ez a vibe coding négy alapköve.
    • A legjobb első projekt kicsi, a saját bosszúságodat oldja meg, és egy hét alatt kész.
    • Egy munkamenetet akkor zártál le jól, ha az eredményt meg tudod nyitni, ki tudod próbálni, és később újra tudod használni.
    Videó · 2:067 perc olvasás

Kézikönyv a gép mellé

Öt melléklet, amit nyitva tartasz munka közben

A technikai részletek szándékosan a könyv végére kerültek: a tanuláshoz nincs rájuk szükség, de jó, ha kéznél vannak.

Inkább nézed?

Minden leckéhez egy animációs videó

19 rövid rész, összesen kb. 50 perc – hang nélkül, feliratokkal és mozgó ábrákkal. A videó gyors áttekintés, a könyv a részletes, visszalapozható változat.

Az oktató videók →