06 Tervézés fázis (29:01)

A Claude Code felülete, beállítások és a tervezési fázis

Ez a lecke bevezet a Claude Code tényleges használatába: megismered az alkalmazás felületét, megtanulod hogyan hozd létre a munkamappádat, beállítod a modellt és az effort szintet, majd végigmegyünk a tervezési fázison — a Plan módón és a PRD (Product Requirements Document) keretrendszeren keresztül. A lecke végére egy kész, elfogadható terved lesz a sorsoló alkalmazáshoz, amelyet a következő leckékben fogunk megépíteni.

A Claude Code felületének megismerése

Az alkalmazás elindítása és alapelrendezése

A Claude Code alkalmazást a számítógépeden kell elindítani — mindegy, hogy Mac-et vagy Windows-t használsz, a felület nagyjából ugyanúgy néz ki mindkét platformon (bár bizonyos részletek, funkciók és elrendezések idővel változhatnak).

Amikor megnyitod az alkalmazást, egy minimalista felületet látsz, amely csak azt jeleníti meg, amire tényleg szükséged van. Ez egy csetes (chat-alapú) felület, ahol a bal oldalon egy navigációs sáv található. Ezen a sávon belül:

A Recent (Legutóbbi) szekcióban látod a korábbi beszélgetéseidet és munkameneteidet.
Lehetőség van kedvencek jelölésére is.
Egyéb funkciók is elérhetők lesznek itt, amelyekről a későbbi leckékben lesz szó.

Fontos: a Claude Code csetes felülete nem ugyanaz, mint a sima Claude AI webes felülete — ez egy fejlesztői környezet, amelyben kódot is tudsz majd futtatni.

A Claude Code-on belül a különböző nézetek között gyorsbillentyűkkel lehet váltani — Mac-en például a Command+1 és Command+3 kombinációkkal lehet a különböző panelek között ugrálni.

A munkamappa létrehozása

Lokális munkavégzés és a mappastruktúra

A Claude Code lokálisan dolgozik a számítógépeden — ez azt jelenti, hogy a fájlok a saját gépeden jönnek létre, nem valamilyen felhőben. Ezért az első és legfontosabb lépés, hogy létrehozd azt a mappát, amelyben dolgozni fogsz.

A felületen látható egy „Select Folder” (Mappa kiválasztása) gomb. Erre kattintva ki tudod választani azt a mappát, amelyben a projekted el fog helyezkedni.

Ajánlott mappastruktúra

Az ajánlott megközelítés a következő:

Navigálj a felhasználói mappádba (pl. a példában a felhasználó neve „oktató”).
Ne menj bele mélyen egymásba ágyazott almappákba, mert a projekten belül is lesznek majd saját almappák.
Hozz létre egy „Claude” nevű mappát — ez lesz az összes Claude-os projekted gyűjtőhelye.
Ezen belül hozd létre a konkrét projekt mappáját — a mi esetünkben ez a „sorsoló” mappa.
Lépj be a sorsoló mappába, majd kattints a „Megnyitás” gombra.

Ezzel megadtad a Claude Code-nak, hogy melyik mappában fog dolgozni.

A Git telepítése

Mi az a Git és miért kell?

A Git egy verziókövető rendszer, amelyre a Claude Code-nak szüksége van ahhoz, hogy nyomon kövesse, mit változtatott a fájlokban menet közben. Ez általában az első ijesztő lépés az embereknek, de valójában nem kell aggódni miatta.

A jó hír: nem kell magadnak kitalálnod, hogyan telepítsd a Gitet — egyszerűen csak mondd meg a Claude-nak, hogy nézze meg, van-e fent a gépen, és ha nincs, telepítse fel.

Hogyan ellenőrizd és telepítsd a Gitet

Írd be a Claude Code chatjébe: „Nézd meg, hogy van-e a gépen Git, és ha nincs, telepítsd fel.”

A Claude Code megkérdezi, hogy megbízol-e ebben a workspace-ben (azaz a kiválasztott mappában) — válaszolj igennel.
Ezután a rendszer futtat egy Git-parancsot, hogy ellenőrizze a telepített verziót — ezt engedélyezned kell.
Ha a gépen már telepítve van a Git, a Claude jelzi, hogy nincs szükség további teendőre.
Ha nincs telepítve, a Claude elvégzi a telepítést, vagy útmutatást ad hozzá.

Ha szakzsargonba ütközöl

Előfordulhat, hogy a telepítés során olyan kifejezések jelennek meg, mint:

Homebrew
Command Line Tools

Ha ezek megjelennek és nem tudod, mit jelentenek, egyszerűen kérdezz vissza a Claude-tól: „Mi ez, és hogyan csináljam?” — és meg fogod tudni ugrani ezt a részt.

A modell és az effort beállítása

Mielőtt elkezdesz dolgozni, két fontos beállítást kell elvégezned: a modell és az effort kiválasztását.

A modell kiválasztása

A modell lényegében a Claude „agya” — azt határozza meg, hogy mennyire okos és képes a rendszer.

Fontos megjegyzés: a videó felvételekor elérhető modellek az Opus, a Sonnet és a Haiku voltak, mindegyiknek saját verziószámával. Ezek folyamatosan fejlődnek, ezért előfordulhat, hogy nálad már újabb modellek érhetők el.

Szoftverfejlesztéshez általában a legerősebb modellt érdemes használni — ez jelenleg az Opus.
Az Opusból két verzió érhető el; mi az 1M-es (1 milliós token ablakú) verziót fogjuk használni.
Az 1 millió token azt jelenti, hogy elvileg ekkora mennyiségű szöveget képes egyszerre a kontextusában kezelni — erről részletesebben egy későbbi leckében lesz szó.
A két verzió közötti különbség: az 1M-es verzió tovább tud emlékezni, ezért ezt érdemes választani.

Az effort (erőfeszítés) beállítása

Az effort azt befolyásolja, hogy mennyit gondolkodik a rendszer, mielőtt válaszol.

Ez nem azt jelenti, hogy minden kérdésnél ugyanannyit gondolkodik, hanem azt, hogy amikor úgy érzi, érdemes gondolkodni, milyen mélységig menjen.
Magasabb effort:
Több részletre figyel
Alaposabban átnézi a tudását
Jobban átgondolja az összefüggéseket
Cserébe lassabb és több tokent használ
Alacsonyabb effort:
Gyorsabb
Kevesebb tokent használ
Kevesebbet gondolkodik

Mikor mit érdemes használni:

Komplex programépítésnél → magasabb effort
Gyors, egyszerű módosításoknál → alacsonyabb effort

A rendszer bizonyos szinten adaptív — maga is érzékeli, hogy melyik feladathoz kell többet gondolkodni. Ezért nem szükséges minden egyes üzenet előtt átállítani.

A legtöbb esetben az Extra High effort ajánlott, ha elegendő tokennel rendelkezel. Ha még az elején jársz, a Medium beállítással is teljesen ugyanolyan eredményeket érhetsz el.

A mi beállításaink:

Modell: Opus, 1M token ablak
Effort: Extra High

A Plan mód és a tervezési fázis

Miért fontos a tervezés?

Mielőtt nekiállnánk a tényleges kódolásnak, érdemes egy tervezési fázison átmenni. Ez igaz bármilyen projektre — legyen az szoftverfejlesztés, weboldalkészítés, marketingkampány vagy akár egy bútor összeszerelése.

Egy jó terv célja, hogy lerövidítse az építés folyamatát, és minőségibbé tegye az egész megvalósítást.

A hagyományos szoftverfejlesztésben ezt specifikációírásnak hívják — ez nagy munka, mert biztosítja, hogy a programozók ne olyan dolgokat kódoljanak le, aminek semmi értelme.

A Plan mód bekapcsolása

A Claude Code-ban van egy beépített Plan mód (tervezési mód). A felületen az üzenetküldési mód átállítható:

Accept Edits — a Claude szerkeszti a fájlokat
Ask Permissions — engedélyt kér minden módosítás előtt
Plan — csak tervez, nem kódol

A Plan módban a rendszer:

Nem épít és nem kódol
Utánanéz a saját tudásában és az interneten
Más fájlokba is belenéz
Logikailag összerakja az ötleteket
Konkrét kérdéseket tesz fel, amelyekre te válaszolsz

A prompt engineering mítosza

Sokan hallottak már a prompt engineering fogalmáról — arról, hogy nagyon pontosan és strukturáltan kell megfogalmazni az utasításokat az AI-nak. A Claude Code esetében ez nem így van.

A Claude Code pont azért készült, hogy kényelmes legyen használni — struktúrálatlanul, egyszerű beszélgetés formájában is el tudod mondani, mit szeretnél, és a rendszer jól lefordítja magának.

Nem kell minden mondatot nagyon pontosan megírni.
Minél komplikáltabb a szoftver, annál jobban érdemes figyelni az első utasításra — de az alapszabály egyszerű: mondd el, amit akarsz.

Diktálás mint beviteli módszer

A Claude Code-ban lehetőség van hangos diktálásra is — ez sokkal gyorsabb, mint gépelni, és közben át is tudod gondolni a mondanivalódat.

Beépített diktálás: A felületen van egy mikrofon ikon, de jelenleg nem támogatja a magyar nyelvet.

Ajánlott külső eszköz: Whisper Flow

Hasonló szoftverek is léteznek, de ez az ajánlott megoldás.
15 napig ingyenesen használható — ha most kezded el a tanfolyamot, az ingyenes időszak elegendő lesz.
Be kell állítani egy gyorsbillentyűt (pl. az FN billentyű), amelynek lenyomva tartásával elindítod a diktálást.
A szoftver egy kis ikonnal jelzi, hogy éppen rögzít.
Valószínűleg hamarosan megérkezik a magyar nyelv támogatása is.

A diktálás előnye: A nagy nyelvi modellek elképesztően jól megértik, amit mondani akartál, még akkor is, ha nem teljesen jól strukturáltan mondtad el — felismerik a mintákat és értelmet adnak a szövegednek, bármilyen „katyvaszos” is volt.

Az első prompt és a tervezés elindítása

A mi esetünkben az első prompt így hangzott:

„Egy olyan sorsoló applikációt szeretnék, amivel különböző nyertes lehetőségű emberekből kisorsolja random módon a győztest, és az egészet vizuálisan, audio-vizuálisan egy izgalmas élménnyé varázsolja.”

Ezt beírva (vagy bediktálva), majd Entert nyomva elindul a tervezési folyamat. A Claude:

Létrehozza a projektet (amelynek neve átírható — mi „sorsoló”-ra neveztük át).
Megnézi a memóriát és a korábbi preferenciákat.
Átgondolja, milyen kérdéseket kell feltennie.
Konkrét kérdéseket tesz fel, amelyekre te válaszolsz.

A tervezési kérdések megválaszolása

A Claude négy kérdést tett fel a sorsoló alkalmazással kapcsolatban:

1. kérdés: Milyen platformon fusson?

Webes (ajánlott) — sima HTML, CSS, JS
Desktop
Terminál
Egyéb

Választásunk: Webes (1-es opció)

2. kérdés: Hogyan kerüljenek be a résztvevők?

A Claude ötleteket is adott a lehetséges funkcionalitásokra:

Kézi bevitel
CSV/TXT fájl feltöltése
Google Sheets integráció

Választásunk: CSV/TXT fájl feltöltés is legyen (mivel a mi adataink Google Sheetsben vannak, és onnan exportálni tudjuk)

3. kérdés: Milyen vizuális sorsolási stílus?

Szerencsekerék
Slot machine
Gyorsan villanó nevek
Eliminációs, egyenkénti kiesés

Választásunk: Szerencsekerék

4. kérdés: Mit várjon a végén az élménytől?

Hangok, dob pergés és fanfár
Konfetti részecskék
Fullscreen / projektormód
Több nyertes egymás után

Választásunk: Hangok + konfetti, böngészőben (projektormód nélkül)

A kész terv értelmezése

Hogyan néz ki a terv?

A válaszok megadása után a Claude elkészíti a tervet. Ez egy szöveges dokumentum ( kiterjesztésű Markdown fájl), amelynek neve például . A terv tartalmazza:

Projekt összefoglalója: Zöldmezős projekt, webes sorsoló alkalmazás, amely névlistából véletlenszerűen választ nyertest, és látványos hangélménnyé varázsolja.
Döntések: A megadott válaszok alapján.
Megközelítés: Egyetlen statikus webes alkalmazás, build lépés és külső dependency nélkül.

Technológia:
A kerék egy canvas elemen rajzolódik ki.
Az audio a böngésző beépített Web Audio API-jával generálódik — nincs külső MP3 fájl.

Fájlstruktúra:
a fő fájl
a külső megjelenés
a funkcionalitás (résztvevők kezelése, kerék, sorsolás, animáció, hang, konfetti, vezérlés)

Animáció: Több teljes körű forgás után ease out lassulással áll be a kerék a kisorsolt szegmensre — látványos és izgalmas.
Véletlen választás: Egyenletes, manipulálhatatlan algoritmussal.
Moduláris felépítés: Ha a kód futás közben kényelmetlenül hosszúvá válna, a Claude külön modulokra szedi szét — addig egyben tartja.
Manuális tesztelési forgatókönyv: Leírja, hogy neked mit kell majd ellenőrizni, hogy az alkalmazás valóban úgy működik-e, ahogy szeretnéd.

Hasznos funkció: szöveg kijelölése kommenthez

Ha a terv olvasása közben valamivel nem értesz egyet, vagy szeretnél valamit módosítani, ki tudod jelölni a szöveg adott részét, és közvetlenül ahhoz fűzhetsz megjegyzést. A Claude megérti, hogy melyik szövegrészt kommentáltad, és így sokkal könnyebb visszajelezni.

Fontos: a Plan módban még nem keletkeznek fájlok

A Plan mód lényege, hogy a Claude csak tervez — nem kódol, nem hoz létre fájlokat a mappádban. Ha megnézed a sorsoló mappát, még teljesen üres.

A terv egyelőre csak a beszélgetésben (sessionben) létezik. A következő lépés az lesz, hogy elfogadod-e a tervet, vagy szeretnél-e változtatni rajta.

A PRD keretrendszer: Product Requirements Document

Mi az a PRD?

A programozói világban van egy bevett keret a tervezésre, amelyet PRD-nek hívnak — Product Requirements Document, magyarul termékkövetelmény dokumentum. Nem kell megijedni tőle: nem technikai dokumentum, hanem egy rövid, természetes nyelven megírt összefoglaló arról, hogy mit építünk és kinek.

A PRD hat kulcskérdése

A tervezés előtt érdemes megválaszolni a következő hat kérdést:

Mit akarsz építeni?
Milyen funkciói legyenek?
Kinek készül?
Hogyan nézzen ki?
Mit ne csináljon?
Milyen tech stackkel? (milyen technológiával)

Példa a mi sorsoló alkalmazásunkra

Mit akarsz építeni? Egy szerencsekerék alkalmazást

Milyen funkciói legyenek? A beadott nevekből egyet kisorsol látványosan, és kiemeli a győztest

Kinek készül? Webinár előadáshoz, élőben pörgetve a nézők előtt

Hogyan nézzen ki? Extravagáns, modern, prémium érzésű dizájn

Mit ne csináljon? Ne legyen benne fizetés, regisztráció vagy felhasználókezelés; ne tároljon semmilyen adatot a háttérben

Milyen tech stackkel? Statikus weboldal, amely egy linken megnyílik

Miért hasznos a PRD?

Ha ezzel a tervvel indulsz neki a Claude-nak, kevesebbet kérdez tőled, mert már eleve jobb irányt adtál. Az is jó, hogy a Claude megkérdezi, amire szükség van — de még jobb, ha te terelgeted őt, nem ő téged.

Hogyan érdemes a PRD-t a gyakorlatban használni:

Nem kell szépen, strukturáltan leírni mindent.
Mondj el mindent, ami a fejedben van — akár 5-10 perces diktált monológ formájában is.
Kérd meg a Claude-ot, hogy amire nem magyaráztál el rendesen, arra kérdezzen rá.
A hat kérdést tartsd fejben, és ha nem jut eszedbe valami, nyisd meg és menj végig rajtuk.

Az alkalmazás architektúrájának hét pillére

Mielőtt továbblépünk, érdemes megismerni, hogy egy szoftver általában milyen főbb rétegekből épül fel. Ez az alkalmazás architektúrája — vagyis az, hogy milyen technológiával és hogyan épül fel a szoftver.

A hét pillér

Frontend — A kinézet: amit a felhasználó lát és használ. Gombok, formok, képek, animációk, minden, ami a böngészőben megjelenik.
Backend — A háttérben futó logika, amit a felhasználó nem lát közvetlenül: szabályok, számítások, döntések.
Adatbázis — Ha különböző adatokat, képeket, információkat kell megjegyezni vagy megjeleníteni, ezek itt tárolódnak.
Autentikáció — A bejelentkezés és jogosultságok rétege: ki léphet be, mit nézhet meg, mit változtathat.
Fizetések — Ha pénzt kell elfogadni az alkalmazásban (előfizetés, egyszeri vásárlás), ennek külön technikai rétege van, mert érzékenyebb és szabályozottabb terület.
Biztonság — Minden, ami a támadások és visszaélések ellen véd, plusz az érzékeny adatok megfelelő kezelése.
Élesítés — Hogyan kerül a szoftver az internetre (vagy más platformra), hogy mások is el tudják érni.

Hol tartunk most?

A mi sorsoló alkalmazásunkban csak a frontendről beszéltünk — és ez teljesen rendben van. Nem kell mindent egyszerre megérteni és megépíteni.

A cél az, hogy kis lépéseken keresztül haladjunk, és majd amikor olyan szoftvert készítünk, amelyhez szükség van adatbázisra, bejelentkezésre vagy fizetésre, akkor azon a projekten keresztül fogjuk megismerni ezeket a rétegeket.

Ebben a leckében elvégeztük az összes előkészületet a sorsoló alkalmazás megépítéséhez: megismertük a Claude Code felületét, létrehoztuk a munkamappát, beállítottuk a Git-et, kiválasztottuk a megfelelő modellt (Opus, 1M token) és effort szintet (Extra High), majd Plan módban elkészítettük az alkalmazás tervét. Megismerted a PRD keretrendszert, amely segít strukturáltan átgondolni, mit is szeretnél építeni, és megismerkedtél az alkalmazás architektúrájának hét pillérével is. A következő lépés az lesz, hogy elfogadod a tervet, és elkezded az alkalmazás tényleges megépítését.