07 Építés és iterálás (31:06)

Az építés és iterálás fázisa – Claude Code használata

Ez a lecke az alkalmazásfejlesztés építési és iterálási fázisát mutatja be a Claude Code segítségével. Megismered a különböző engedélyezési módokat (permissions), megtanulod, hogyan fogadd el a tervet és indítsd el az építést, majd látod, hogyan zajlik a valódi iteratív fejlesztés: hibák javítása, új funkciók hozzáadása, dizájn módosítása – mindezt egyszerű szöveges és képes visszajelzésekkel.

Az építési fázis elindítása

Miután a tervezési fázisban elkészült a terv, a Claude felajánlja, hogy elkezd dolgozni rajta. Fontos megjegyezni, hogy a Claude tud tervezési fázis nélkül is dolgozni, de a projekt elején mindenképpen ajánlott a plan módot használni. Érdemes plan módban dolgozni akkor is, ha egy már meglévő projekt egy nagyobb új funkcióját szeretnéd beépíteni.

A plan mód két előnye:

Tokent spórolsz vele.
Jobb eredményt kapsz, mert átgondolhatod a feladatot, mielőtt a Claude elkezd dolgozni.

Ha kész a tervezési fájl és elfogadod a tervet, a Claude elkezdi az építést. A terv elfogadásának két módja van:

Simán elfogadod (Accept) – a Claude az úgynevezett ask módban folytatja a munkát.
Elfogadod és auto-módot indítasz – engedélyezed a szerkesztéseket, és a Claude szabadabban dolgozhat.

A Claude engedélyezési módjai (Permissions)

Ask mód

Ha simán elfogadod a tervet, a Claude az ask permissions módban dolgozik. Ez a legszigorúbb mód: minden fontosabb fájlmódosítás, parancs futtatása vagy mappába lépés előtt megkérdezi, hogy elvégezheti-e az adott műveletet.

Biztonsági szempontból ez tűnhet a legjobb megoldásnak, de a gyakorlatban két komoly hátránya van:

A kérdések programozói nyelven érkeznek, és ha nem vagy fejlesztő, nem fogod pontosan érteni, mit kérdez – így csak elfogadni tudod.
Mindig engedélyezni akarod ezeket a kéréseket, így az állandó megállások csak lassítják a munkát.

Accept Edits mód

Ez egy fokkal szabadabb az ask módnál: bizonyos változtatásokat a Claude magától elvégez, és csak a kockázatosabbakhoz kér engedélyt.

Ha ebben a módban dolgozol, a Claude az első kérdésnél megkérdezi, hogy megírhatja-e például az fájlt. Ilyenkor két lehetőséged van:

Egyszer engedélyezed az adott műveletet.
Mindig engedélyezed ugyanezt a típusú kérdést.

Tipp: Alapvetően mindig az „Always Allow” (mindig engedélyezés) gombra kattints, mert ha elutasítod a Claude kéréseit, nincs értelme vele dolgozni – kivéve, ha pontosan tudod, mit akarsz helyette csinálni.

Egy fájl létrehozása nem veszélyes művelet, mindenki számára érthető. Komplikáltabb fájlrendszerekben is, ahol a Claude fájlok módosítását vagy törlését kéri, valójában nem kell aggódni – de ezt a következő részben részletesebben is megmagyarázzuk.

Auto mód és Bypass Permissions mód

Az auto mód egy fokkal szigorúbb a bypass-nél: több mindent megkérdez. A bypass permissions mód ezzel szemben semmit nem kérdez a mappán belüli munkáknál – ez a legszabadabb és leghatékonyabb mód.

A bypass permissions mód beállításához a Settings menübe kell menni, a Claude Code résznél engedélyezni kell az „Allow Bypass Permissions” opciót. Visszatérve a munkaterületre, megjelenik a bypass permissions gomb, amelyre kattintva a Claude megerősítést kér, hogy valóban engedélyezed-e az összes műveletet – és igen, ezt szeretnéd.

Fontos: Csak arra a mappára adj engedélyt, amelyben a Claude tényleg dolgozhat. Ne az egész meghajtóra, mert akkor elméletileg tönkretehet fájlokat is.

A bypass mód azért szükséges, mert a Claude lényege, hogy hagyd magának dolgozni. Képes észrevenni, ha hibát csinál, és 5, 10, 20, 30 percig is tud önállóan dolgozni – nem kell hozzányúlni. Ha állandóan megállítják engedélykérésekkel, ez a hatékonyság ellen dolgozik.

A mappán belüli munkánál a kockázat minimális: ha csak a projekt mappájára adtál engedélyt, a Claude nem tud nagy problémát okozni. Verziókövetéssel (erről később lesz szó) pedig az esetleges véletlen törlések is kezelhetők. Előfordulhat, hogy a Claude egy külső eszközhöz – például a Notionhoz – kapcsolódva töröl valamit, amit nem kellett volna, de ez ritka és kezelhető.

Az első verzió elkészítése és tesztelése

A létrejött fájlok

Miután a Claude befejezte a munkát, a projekt mappájában a következő fájlok jöttek létre:

a weboldal HTML kódja
a stíluslap
a JavaScript logika

Ezek mind weboldalas fájlok, mivel ebben az esetben egy webalkalmazást (szerencsekerék sorsolót) készítettünk.

A weboldal megnyitása és kipróbálása

Az fájlra kattintva megnyílik az elkészült oldal a böngészőben. Fontos: ez nem az interneten van, hanem csak a saját gépeden fut – az URL-ben látható az útvonal, hogy a sorsoló mappán belüli HTML fájl van megnyitva.

Az interneten ez úgy működne, hogy egy tárhelyszolgáltatón fel vannak rakva ezek a fájlok, és ha valaki beírja a domain nevet (pl. ), a rendszer ráirányítja a tárhelyre és megnyitja a fájlokat.

A sorsoló funkciói

A Claude a megadott funkciók mellett olyan funkciókat is beépített, amelyeket nem kértünk:

Kért funkciók:

Nevek hozzáadása a kerékhez (pl. Anna, Béla, Fanni, Bence, Dani, Szandi)
Pörgetés gomb a közepén
A nyertes kiírása
Konfetti és hang a nyertes megjelenésekor

Nem kért, de automatikusan hozzáadott funkciók:

A résztvevők számának kiírása (pl. „6 résztvevő”)
CSV fájl betöltési lehetőség
A nyertes kizárása a listából a következő körre
Törlés gomb (mindenki törlése)

A Claude tehát nemcsak a megadott feladatot teljesíti, hanem logikusan kapcsolódó extra funkciókat is hozzáad – ez az egyik nagy előnye az AI-alapú fejlesztésnek.

Hibák az első verzióban

Az első verzió nem tökéletes – ez teljesen normális. Például: a pörgetés gomb alatt egy szöveg látható, amelyet valószínűleg át kellene helyezni. Ezeket a hibákat az iterálási fázisban javítjuk.

Az iterálás folyamata

Mi az iterálás?

Az iterálás lényege: kipróbálsz valamit, megnézed az eredményét, változtatsz rajta, és ezt folyamatosan ismételgeted.

Az iterálás egy körfolyamat: visszajelzést adsz a Claude-nak, ő elkészít egy új verziót, te megnézed, és így megy tovább – mintha egy szakértővel dolgoznál együtt.

Az első verzió soha nem lesz a végső verzió – ezt el kell fogadni. Ahogy egyre jobban beleraksz ebbe a munkamódszerbe (vibe coding), természetes, hogy egyre gyorsabb megoldásokat akarsz, de türelmesnek kell lenni, és folyamatosan fejleszteni a saját hatékonyságodat.

A Claude belső iterálása

A Claude maga is iterál: menet közben észreveszi, ha hibát csinált, és automatikusan javítja. Például írhatja, hogy „ezt nem így kellett volna megcsinálni, mert nem jön ki az eredmény, kijavítom”. Ez a belső kör – a Claude saját önkorrekciója.

A te külső visszajelzéseid

Ezen felül te mint ember is folyamatosan visszajelzéseket adsz – ez a külső kör. Hogy milyen gyakran kell visszajelezned, az több tényezőtől függ:

Mennyire okos modellel dolgozol
Mennyire jól terveztétek meg a rendszert
Mennyire komplikált az egész projekt
Az elején mennyire tisztán fogalmaztad meg a feladatot

Hogyan adj visszajelzést?

A visszajelzés többféle formában történhet:

1. Szöveges visszajelzés

Egyszerűen leírod, mi a probléma vagy mi az új igény. Ugyanúgy, ahogy az első promptot megírtad.

2. Képes visszajelzés (screenshot)

Nagyon hatékony módszer: csinálsz egy képernyőképet (print screen), és beilleszted a Claude-nak (Mac-en Command-C, Windows-on Ctrl-C / Ctrl-V). A Claude vizuálisan is jól érti a képeket, és gyorsan megérti, mi a probléma.

3. Preview-ban elem kijelölése

A Claude Code beépített preview nézetében ki lehet jelölni egy elemet az oldalon, és közvetlenül ráírni egy kommentet, hogy mi a probléma azzal az elemmel.

4. Hibaüzenet (error) másolása

Ha valami hiba keletkezik, az egész hibaüzenetet kimásolod és beilleszted – a Claude ebből általában megérti, mi a helyzet.

A Preview funkció és a fájlok összevonása

A beépített preview

A Claude Code-ban van egy beépített preview nézet, ahol meg lehet nézni az elkészült weboldalt. Ez akkor működik jól, ha minden kód egyetlen HTML fájlban van (beleértve a CSS-t és a JavaScript-et is).

Ha külön CSS és JS fájlok vannak, a preview csak az -t tudja megjeleníteni, a stílusok nélkül. Ilyenkor megkérheted a Claude-ot, hogy tegye egy fájlba az egészet (HTML, CSS, JavaScript együtt), hogy a preview megfelelően működjön.

Az elem kijelölő eszköz

A preview nézetben van egy „Select Element” funkció, amellyel rákattinthatsz egy adott elemre az oldalon. Ilyenkor a Claude kiemel egy canvas területet, ahová kommentet írhatsz – például: „a pörgetés gomb alatt, ha nincs megadva résztvevő, eltakarja az ‘Add meg a résztvevőket’ szöveget.”

Példa: hibajavítás a preview segítségével

A sorsolóban az volt a probléma, hogy a pörgetés gomb alatt megjelenő szöveg eltakarta az „Add meg a résztvevőket” feliratot, ha még nem volt senki a listában. A visszajelzés után a Claude úgy döntött, hogy elrejti a pörgetés gombot, amíg nincs legalább egy résztvevő. Ha egy név van, a gomb megjelenik, de nem aktív (nem kattintható), és kiírja, hogy kell még egy név. Ha két vagy több név van, a gomb teljesen aktív lesz.

Design módosítása külső inspiráció alapján

Design ötletek keresése

Nagyon sokszor fogsz dizájn ötleteket máshonnan szerezni. Erre kiváló eszköz például a Dribbble (dribbble.com), ahol landing page-ek, mobil applikációk és egyéb UI megoldások böngészhetők. Ha megtetszik valami, elég csak egy képet vagy néhány képet betenni a Claude-nak, és ő megérti a design-rendszert.

Stílusválasztó hozzáadása – gyakorlati példa

A sorsolóhoz egy stílusválasztót szerettünk volna hozzáadni, hogy a felhasználó többféle dizájn között válthasson. A folyamat lépései:

A Dribbble-ön kiválasztottunk egy tetszős dizájnt (egy Ascon-stílusú, fintech ihletésű megjelenést).
A képet elmentettük a projekt mappájába ( mappa), névvel.
A Claude-nak megadtuk az utasítást: „Betettem a mappába egy DIPA inspiráció képet, amilyen stílust szeretnék hogy felvegyen az applikáció. Nem azt akarom, hogy teljesen átváltozzon, hanem legyen egy stílusválasztó a fejlécben, hogy ki lehessen választani, milyen stílusú sorsolót szeretnénk. A funkciókat ne változtasd, csak a dizájn stílus változzon. Készítsd el a DIPA inspiráció képen lévő design-rendszer alapján.”

Megjegyzés: A képet nem muszáj a mappába menteni – simán le is mentheted magadnak, és Command-C / Ctrl-V-vel beillesztheted közvetlenül a Claude-nak, ahogy korábban is tettük.

A Claude vizuális értelmezése

A Claude megnyitotta a WebP képet, és a következő design-elemeket azonosította benne:

Ascon stílusú fintech dizájn
Mély smaragdzöld blokkok, krém alapon
Serif betűtípusú címek
Pill formájú (lekerekített) gombok
Lekerekített kártyák
Finom árnyékok

Ezek alapján hozzáadott egy témaválasztót a fejlécbe, és a CSS-t változókra építette, hogy a téma egyetlen kapcsolóval váltson. Ha előre tudtad volna, hogy stílusválasztót akarsz, már az elején változókra lehetett volna építeni a CSS-t – de a legtöbbször nem tudod előre, mit akarsz, és ezt el kell fogadni.

Az eredmény: a „Premium” témára váltva teljesen más megjelenést kap az oldal – más színek, betűtípus, lekerekítések –, miközben a funkciók változatlanok maradnak. Néhány kisebb funkcionális hiba is keletkezett (pl. a lekerekítés elrontott valamit), ezeket a következő iterációban kell javítani.

Ötletek kérése a Claude-tól

Ha nem tudod pontosan, mit fejlessz tovább, magát a Claude-ot is megkérdezheted. Például: „Adj ötleteket, mivel lehetne még sokkal jobbá alakítani ezt a sorsolót – legyen extrább, több funkció legyen benne, dizájnban is jobb legyen.”

A Claude-nak hatalmas rálátása van szoftverekre és funkciókra, tudja, mások miket szoktak összerakni. A sorsolóhoz például a következő ötleteket adta:

Funkcionális fejlesztések:

Súlyozás és ismétlések kezelése
Több nyertes egymás után
Csapatok és sorrendsorsolás
Előzmények (ki nyert korábban)
Megosztható link generálása
Időzített countdown

Dizájn és UX fejlesztések:

Audio-vizuális élmény javítása
Nyertesek betöltési lehetőségeinek bővítése
Eredmény exportálása
Billentyűzetes vezérlés (Space/Enter)
Sorsolás bizonyíthatósága (átláthatóság, hogy nem csaltunk)

Fontos: Az AI jól ad ötleteket, de az ember dolga eldönteni, hogy mi az, amire tényleg szükség van. A kritikus gondolkodás és a szakterületi tudás itt nélkülözhetetlen – az AI a legrosszabbul azt csinálja, hogy ő döntse el, mi a legjobb megoldás.

Valós példa: online sorsoló

Egy valós példa erre a megközelítésre: az oldal, amelyet egy kezdő vibe coder készített első projektjeként. Az oldal azóta napi ~50 látogatót vonz. Régebben az ilyen egyszerű online sorsoló appok hirdetési bevételt is termeltek – ma már nehezebb, mert sokan tudnak ilyen szoftvereket készíteni, de a lehetőség megvan.

A munka leállítása és folytatása

A Claude leállítása

Ha a Claude valamit rosszul csinál és felesleges munkát végez, le lehet állítani:

A stop gombbal az interfészen
Az Escape (Esc) billentyűvel

Ilyenkor a Claude abbahagyja, amit csinál, és egy „interrupt” jön létre – megáll ott, ahol éppen tartott. Ezután kérheted, hogy induljon újra a helyes irányba.

Közbeszólás futás közben

Futás közben is be lehet írni valamit a Claude-nak, de ilyenkor megvárja, amíg befejezi az aktuális feladatát, és csak utána veszi figyelembe az új utasítást. A legtöbbször az a jó, ha megvárod, amíg végigmegy, és csak utána módosítasz.

Visszatérés egy projekthez

Ha vissza kell térni a szoftver fejlesztéséhez, a Claude Code Recents listájában megtalálod a korábbi projektet (pl. a sorsolót), és folytathatod ugyanabban az ablakban, ahol abbahagytad.

Ez a lecke megmutatta az építés és iterálás teljes alapfolyamatát: a terv elfogadásától a permissions beállításán át az első verzió elkészítéséig, teszteléséig, hibák javításáig és új funkciók hozzáadásáig. Semmilyen komplikált dolgot nem csináltunk – csak beszélgettünk, mintha egy sima chat-es AI-jal kommunikálnánk, azzal a különbséggel, hogy a Claude valóban dolgozott a mappákban: fájlokat hozott létre, szerkesztett és futtatott. Ez az alapfolyamat a jövőben sem lesz sokkal másabb – csak több rétege lesz, és ezeket a rétegeket (hatékonyság, verziókövetés, internetre való kirakás stb.) a következő leckékben fogjuk megismerni.