DarwinAI · Vibe Coding training
Az ötletből működő szoftver – kódolás nélkül
Megértjük, hogyan építi az AI a szoftvert – és végigcsinálunk egyet együtt.
Készíts egy cégértékelő eszközt:feltöltöm a mérleget, te elemzed.
Nyereség
14,2%
Likviditás
1,8
Adósság
0,46
Budaházy Szabolcs◆DarwinAI
Mi a Vibe Coding?
A programkód is csak egy nyelv
A nyelvi modellek magyarul, angolul – és programozási nyelveken is „beszélnek”. Te leírod, mit szeretnél, az AI megírja a kódot.
Te mondod
„Írj egy kis programot, ami egy nettó összegből kiszámolja a bruttót, 27% ÁFÁ-val.”
Az AI megírja
Python1# ÁFÁ-kalkulátor2def brutto(netto, afa=0.27):3 return round(netto * (1 + afa))4 5netto = 100006print(brutto(netto))Lefut
$ python afa.py
12700
10 000 + 27%
A kód ugyanúgy egy prompt eredménye, mint egy levél vagy egy összefoglaló.
Vibe Coding: az AI írja a kódot, te a működést és a célt adod meg.
Vibe Coding Eredmény
Egy óra alatt teljes termékoldal
Egy specifikációból és két látványtervből készült – kb. egy óra aktív munkával.
- kb. 1 óra
- aktív munka
- 10
- blokk az oldalon
- 45
- felugró ablak
- 20
- diás prezentáció
A rendszer tervezett – elkészült a bemutató oldala, a kipróbálható szimulátora és a prezentációja.
Vibe Coding Lehetőségek
Nem csak weboldal – szinte bármi
Valódi projektjeinkből. Kattints egy csempére!
Vibe Coding eszközök
Platform, ami tud kódolni
Kódot a sima chat is ír – de a munkát a vibe coding platform viszi végig.
- Szerep
- Tapasztalt Python-fejlesztő vagy.
- Cél
- A kisvállalkozásom árait gyorsan szeretném bruttósítani.
- Feladat
- Írj egy ÁFA-kalkulátort, amely a nettó árból kiszámolja a bruttót.
- Formátum
- Egyetlen, rövid Python-függvény, magyarázó kommentekkel.
- Eredmény
- 10 000 Ft nettóra 12 700 Ft bruttó; módosítható ÁFA-kulcs.
def brutto(netto, afa=0.27):
return round(netto * (1 + afa))- index.html
- app.js
- style.css
- teszt.js
ÁFA-kalkulátor
- Fájlok létrehozva
- Lefuttatva
- Tesztek rendben
- Hiba javítva, újra tesztelve
Direkt kódolásra készült: a fájlokat is ő kezeli, futtatja a programot, tesztel, javít.
Miért jó?
Specifikáció
A specifikáció dönti el, mit kapsz
Emberi nyelven, átgondoltan leírva: mit tudjon a szoftver, kinek készül, és mitől lesz jó az eredmény.
- 1Mi a cél?Cél
- 2Kinek készül?Célcsoport
- 3Mi a folyamat?Folyamat
- 4Mi megy be, mi jön ki?Bemenet → kimenet
- 5Mit tudjon?Funkciók
- 6Mitől jó az eredmény?Mitől jó?
- 7Mi nem cél?Határok
Homályos kérés
„Csinálj egy cégértékelő appot.”
→ az AI találgat
Átgondolt specifikáció
7 kérdésre ad választ
azt kapod, amit akartál
Kattints egy példára
Vibe Coding folyamat
Sokféle workflow van – mindenki kialakíthatja a magáét
Ez egy lehetséges megközelítés.
Saját vázlat
1–2 napNapokig emésztem, iterálom, kiegészítem.
- Nem igazán strukturált – de a lényeg benne van
- A fő funkciók, a célcsoport, mit kell tudnia
- Bármilyen formában jöhet: jegyzet, pár mondat, hangüzenet
Tipp: Nem kell tökéletesre írni: a következő lépésben az AI rendbe teszi.
- 1
Saját vázlat
1–2 napNapokig emésztem, iterálom, kiegészítem.
- Nem igazán strukturált – de a lényeg benne van
- A fő funkciók, a célcsoport, mit kell tudnia
- Bármilyen formában jöhet: jegyzet, pár mondat, hangüzenet
Tipp: Nem kell tökéletesre írni: a következő lépésben az AI rendbe teszi.
1–2 nap
Vibe Coding gyakorlat
Most együtt: vigyünk végig egy ötletet
Válasszunk egyet a példák közül – vagy hozzatok sajátot. A szöveg egy kattintással másolható.
Elemzés, dokumentumok, folyamatok
Standard promptok
- ①Vázlat → specifikációAlább egy tervezett rendszer vázlata. Strukturáld, tedd jobbá, és egészítsd ki bármilyen funkcióval, ami szerinted kellene.
- ②UI-tervekTervezd meg a most létrehozott rendszer néhány képernyőjét, a core designját. Csinálj 4 kifejezetten eltérő megközelítést.
- ③Indító prompt
Saját ötlet
Esettanulmány
Így készült: Leonardo
Amíg a projektünk fut: egy kész projekt folyamata, lépésről lépésre.
+1 AI ADVISOR
AI meeting- és board tanácsadó rendszer
- 1. A KONCEPCIÓ
- A +1 AI Advisor management meetingekhez, board meetingekhez, stratégiai workshopokhoz és egyéni vezetői megbeszélésekhez készült mesterséges intelligencia alapú tanácsadó rendszer.
- 2. A RENDSZER ALAPVETŐ ÉRTÉKE
- FELKÉSZÜLÉS → HALLGATÁS → ELEMZÉS → KUTATÁS → ÉRTÉKELÉS → REAKCIÓ → PREZENTÁCIÓ → DÖNTÉSTÁMOGATÁS
1. Vázlatból specifikációA saját vázlatot ChatGPT-vel rendbe rakatom: kész a részletes specifikáció, letöltöm a gépemre.
Emulált képernyők – illusztráció
↓ következő lépés · ← → dia
1Vázlatból specifikáció
ChatGPTerős modellvazlat.txtAlább egy tervezett rendszer vázlata. Strukturáld, tedd jobbá, és egészítsd ki bármilyen funkcióval, ami szerinted kellene.+1 AI ADVISOR
AI meeting- és board tanácsadó rendszer
- 1. A KONCEPCIÓ
- A +1 AI Advisor management meetingekhez, board meetingekhez, stratégiai workshopokhoz és egyéni vezetői megbeszélésekhez készült mesterséges intelligencia alapú tanácsadó rendszer.
- 2. A RENDSZER ALAPVETŐ ÉRTÉKE
- FELKÉSZÜLÉS → HALLGATÁS → ELEMZÉS → KUTATÁS → ÉRTÉKELÉS → REAKCIÓ → PREZENTÁCIÓ → DÖNTÉSTÁMOGATÁS
rtfLeonardoSpec.rtf42 pont · kb. 2 800 szóLetöltésLetöltve a saját gépreA saját vázlatot ChatGPT-vel rendbe rakatom: kész a részletes specifikáció, letöltöm a gépemre.
2UI-tervek
ChatGPTképgenerálásTervezd meg a most létrehozott rendszer néhány képernyőjét, a core designját. Csinálj két kifejezetten eltérő megközelítést.Kész – itt a két irány. Melyiket mentsem?
✓
Irány 1↓ mentve a gépre ✓
Irány 2↓ mentve a gépre Képgenerálással látványterveket kérek, kiválasztom a jókat, és letöltöm őket.
3Projektmappa
AiMeetingLeonardoProjektek › AiMeetingLeonardoÚj mappa: AiMeetingLeonardo
- rtfLeonardoSpec.rtf
- Leonardo_ Intelligens megbeszélések jövője.png
- DarwinAI_ Stratégiai intelligencia minden megbeszéléshez.png
Új mappa a projektek között: a specifikáció és a látványtervek bemásolva.
4Általános elvárások
AiMeetingLeonardoProjektek › AiMeetingLeonardoA mappába kerül minden, amit az AI-nak tudnia kell:
- rtfLeonardoSpec.rtf
- Leonardo_ Intelligens megbeszélések jövője.png
- DarwinAI_ Stratégiai intelligencia minden megbeszéléshez.png
- mdRULES.mdáltalános elvárások
- api-kulcsok.txthozzáférések – a gépen marad
Skillekweboldal-építő skillprezentáció-építő skillA minden projektre érvényes elvárások, a skillek és a hozzáférések is a mappába kerülnek.
5Indítás
Claude Code~/AiMeetingLeonardo› A mappában megtalálod egy tervezett rendszer specifikációját és két látványtervet. Magát a rendszert még nem kell megcsinálnod, csak az azt bemutató termék-weboldalt – szellőset…- ✔Skillek ellenőrzése: mindkettő elérhető
- ✔Képgeneráló API: működik
- ▸Specifikáció és látványtervek beolvasása
- ▸Tartalom: build/content.mjs (magyar)
- ▸10 blokk, 45 felugró ablak, szimulátor
- ▸14 kép generálása, 75 ikon szétvágása
- ▸20 diás prezentáció az oldal widgeteiből
- ✔8 szélesség, JS nélkül: nincs hiba
Codex~/AiMeetingLeonardo› Hozd létre a mappában található rendszert (spec.md) a szintén ott lévő design (design.png) alapján.- ✔Mappa beolvasva: spec, 2 látványterv
- ▸Terv: oldalszerkezet és prezentáció
- ▸Fájlok létrehozása…
- ▸Teszt: oldal megnyitása, ellenőrzés
- ✔Kész – összefoglaló a változásokról
Mindkét platformon megnyitom a mappát, és kiadom az indító promptot – utána dolgoznak.
6Elkészült projekt
leonardo.darwinai.huélő oldalSzimulátor 20 diás prezentáció - kb. 1 óra
- aktív munka
- 10
- blokk az oldalon
- 45
- felugró ablak
- 20
- diás prezentáció
Kb. egy óra aktív munka után kész a teljes termékoldal, a szimulátor és a prezentáció.
- Emulált képernyők – illusztráció
Egy friss projekt
AI Giants – az AI-korszak alakjainak galaxisa
Interaktív csillagtérkép 101 AI-szereplő karrierjéről és kapcsolatairól – egyetlen HTML fájlban.
A szervezetek „országok”, az ágazatok „kontinensek”: akadémia, frontier laborok, techcégek, startupok.
Számokban
- 1 óraaktív munka, egy nap alatt
- 5finomító kör a kezdőprompt után
- 1 fájlkb. 180 KB, külső függőség nélkül
- 101+154szereplő és szervezet
A kezdőprompt – részlet
- ›Cél: Építs egy önálló, egyszerű HTML/JS webalkalmazást, amely az AI-korszak meghatározó alakjainak karrierjét és szakmai kapcsolatait jeleníti meg interaktívan.
- ›egy év csúszka is kellene, lássuk, hogy mozogtak, mentek át egyikből a másikba
- ›a színek, pont nagyságok, vonalanimációk, vonal stílusok mind mind üzennek valamit
- ›az egész egy nagyon cool experience – egy canvas, mint egy galaxis, Hubble távcsővel, amivel be lehet nagyítani
Egyetlen, nagy kiinduló prompt – utána öt finomító kör.
Vibe Coding Next
Amiről nem beszéltünk – de tudni érdemes
Ha tovább megyünk, ezekről lesz szó. Kattints egy témára!
Az alkalmazás képességei
Az AI-ügynök környezete
Élesbe állítás
Összefoglalás
Takeaway
Négy gondolat és három lépés holnapra.
- Saját vázlat
- AI-s vázlat-upgrade
- UI-terv
- Projekt létrehozása
- Indítás
- Kis figyelés
- Magára hagyom
- 1
Szándék: az AI írja a kódot, te a működést és a célt adod meg.
- 2
Használj kódoló platformot, ne sima chatet.
- 3
A specifikáció dönti el, mit kapsz – emberi nyelven, átgondoltan.
- 4
Folyamat: saját vázlat – AI-upgrade – UI-design.
Holnaptól
- 1Válassz egy kicsi, saját feladatot, ami rendszeresen visszatér.
- 2Írj róla tíz mondatos vázlatot, és kérd az AI-t: strukturáld, egészítsd ki.
- 3Indítsd el egy platformon, és figyeld az első öt percet.
Köszönöm
Kérdések? – és kezdd el holnap!
Minden, amit ma láttál, egy helyen van: a folyamat pipálható listája, a szabálykönyv és a szabály-összeállító.
Budaházy Szabolcs ◆ DarwinAIszbudahazy@arworks.com+36 30 99 00 336
Léptetés a nyílbillentyűkkel vagy a szóközzel. Teljes képernyő: F.