A Habyt app megtervezése – A hat tervezési kérdés
Ez a lecke a kurzus második, komolyabb projektjének, a Habyt szokáskövető webes applikációnak a tervezési fázisát mutatja be. Megismered azt a hat alapkérdést, amelyeket érdemes megválaszolni minden szoftverprojekt indítása előtt, és végigkövetjük, hogyan épül fel ezekből egy konkrét, Claude-nak szánt kezdő prompt – egészen addig, amíg az AI el nem készíti a részletes fejlesztési tervet.
A projekt előkészítése és a tervezési megközelítés
A munkamappa létrehozása
Az első lépés a projekt számára egy dedikált mappa létrehozása. Egy új session-ben, a Cloud mappán belül hozz létre egy „Habyt” nevű mappát, majd nyisd meg – ebben a mappában fogsz dolgozni a továbbiakban.
Miért kell ezt komolyabban venni?
A Habyt app több mozgó részből áll, mint az első projekt. Éppen ezért a tervezési fázist sem szabad kihagyni vagy elsietni. A Claude-ot plan módba kell állítani, és az Extra High teljesítményszintet érdemes választani, hogy a lehető legjobb tervezési eredményt kapjuk.
A hat tervezési kérdés
A tervezés során hat alapkérdésre érdemes válaszolni, mielőtt bármilyen fejlesztési promptot elindítanál:
- Mit akarsz építeni?
- Milyen funkciói legyenek?
- Kinek szól az applikáció?
- Hogyan nézzen ki?
- Mit ne csináljon?
- Milyen technológiákat használjon?
Ezeket a kérdéseket és a rájuk adott válaszokat közvetlenül a kezdő promptba kell beépíteni – ez adja az AI számára a szükséges kontextust.
Az első kérdés: Mit akarsz építeni?
Ez a legegyszerűbb pont, de fontos, hogy szerepeljen a promptban, mert azonnal meghatározza a kontextust. A válasz tömören:
„Egy szokáskövető applikációt szeretnék építeni.”
Ez az egyetlen mondat is elegendő ahhoz, hogy a Claude azonnal értse, miről van szó.
A második kérdés: Milyen funkciói legyenek?
Ez már jóval összetettebb terület. A cél az MVP (Minimal Viable Product) – vagyis a funkcionálisan legegyszerűbb, de már élhető verzió – megtervezése. A következő funkciókat érdemes meghatározni:
- A felhasználó pozitív és negatív szokásokat egyaránt beállíthat.
- Legyenek előre meghatározott szokások, amelyeket listából lehet kiválasztani, de legyen lehetőség egyedi szokás létrehozására is.
- Naponta, lefekvés előtt vagy reggel, egyszerű pipálással lehessen rögzíteni, hogy mi valósult meg és mi nem.
- A felhasználó visszanézhesse a haladását listán, naptárnézeten vagy diagramon.
- Legyen streak-számláló (stríkszámláló), amely megmutatja, hány napja sikerült az adott szokást tartani.
- Legyen bejelentkezési lehetőség: a felhasználók regisztrálhassanak, és a saját haladásukat privátban nézhessék.
A harmadik kérdés: Kinek szól?
A célcsoport meghatározása ebben az esetben nem kritikus szempont. Az app olyan embereknek szól, akik a szokásaikat szeretnék követni – nincs egyetlen tipikus célcsoport, amelyre rá lehetne húzni a dizájnt vagy a kommunikációt.
Ez a pont akkor válik igazán fontossá, ha van egy jól körülhatárolt, kiemelt felhasználói csoport. Ennél a projektnél ez nem áll fenn, ezért nem szükséges részletesen kidolgozni.
A negyedik kérdés: Hogyan nézzen ki?
A design-tudás szerepe
A vizuális megjelenés meghatározása az a pont, ahol minden szaktudás előnyt jelent. Ha értesz a designhoz, marketinghez, szövegíráshoz vagy fejlesztéshez, az mind hozzájárul a jobb végeredményhez. Ha viszont egyik területen sem rendelkezel különösebb tudással, akkor is működik a vibe coding – csak a józan paraszti észre támaszkodva is el lehet indulni.
A jó hír: a Claude nagyon jól tud dolgozni meglévő dizájnokból és vizuális inspirációkból.
Dizájn inspirációs oldalak
Vizuális ötleteket a következő helyekről érdemes gyűjteni:
- Dribbble – portfólió oldal, ahol designerek mutatják be munkáikat
- Behance – szintén portfólió jellegű platform
- Mobbin – egy cég által gyűjtött, mobil applikációs screenshotok gyűjteménye; kiváló forrás konkrét UI-megoldásokhoz
A kiválasztott design
A leckéhez előre ki lett gyűjtve egy Behance-en talált dizájn, amely a következő stílusjegyekkel rendelkezik:
- Zöldes és sötét színvilág
- Viszonylag egyszerű, modern megjelenés
A promptba a következőképpen kerül be ez az információ:
„Dizájn szempontjából Behance-ről betettem egy dizájnt, ahol mockupokon és különböző képeken keresztül bemutatja a dizájnt. Szeretném, hogy ezt visszabontsd dizájnrendszer-elemekre, és ezeket használjuk fel – szinte ugyanilyen legyen a mi dizájnunk is. Ha esetleg nem éred el az oldalon a képeket, szólj, és letöltöm.”
A képek kezelése
Ha a Claude nem tudja elérni a Behance oldalt, a képeket le kell tölteni és a projektmappába kell helyezni. Ehhez a Habyt mappán belül hozz létre egy „dizájn inspiráció” almappát, és ide töltsd be az összes letöltött képet. Ha a Claude kérdezi, hogy hol találja a képeket, elegendő annyit mondani: „Betettem a mappába, a dizájn inspiráció mappába.”
Az ötödik kérdés: Mit ne csináljon?
Ez a pont azért fontos, mert a Claude néha túl akarja építeni a szoftvert, és olyan funkciókat is belerak, amelyekre nincs szükség. Ha előre meghatározod a korlátokat, nem fog felesleges irányban gondolkodni.
Az MVP-ből ki kell hagyni a következőket:
- Ne mobilapp legyen – webes applikációt szeretnénk
- Ne legyen fizetős funkció
- Ne legyen push notification
- Ne legyen csapatfunkció – ezek később hozzáadhatók, de az MVP-be nem kerülnek bele
A hatodik kérdés: Milyen technológiákat használjon?
Ez az a pont, amelyen a legtöbb vibe coder a legkevésbé otthonos. Ha nem értesz a technológiákhoz, a legegyszerűbb megközelítés:
„Technikailag adj javaslatokat, hogy milyen ingyenes és ismert eszközökkel lehet ezt a webes applikációt a leghatékonyabban lefejleszteni.”
A Claude egy modern stack-et fog ajánlani, amely lefedi a következő rétegeket:
- Frontend – amit a felhasználó lát és használ
- Backend – a háttérben futó logika
- Adatbázis – ahol a felhasználói adatok tárolódnak
- Autentikáció – a bejelentkezési rendszer
- Biztonság és élesítés – a biztonságos működés és a közzététel
Tippek a tervezési fázishoz
Ne ess neki azonnal a fejlesztésnek
Ha hirtelen kiugrik egy ötlet a fejedből, ne kezdj el azonnal fejlesztési promptot írni. Szánj időt arra, hogy ezt a hat pontot végiggondold – még ha nem is tudod mindet tökéletesen megválaszolni. Ezzel rengeteg tokent és időt spórolsz, és sokkal jobb eredményt érsz el.
Inspirálódj valódi megoldásokból
Valódi projektfejlesztésnél érdemes más szokáskövetőket is megnézni – ez segít a legjobb felhasználói élmény és funkcionalitás kialakításában. Ez a lecke egy tanulóprojekt, ezért most az inspiráció összegyűjtése előre megtörtént, de a valóságban több keresgélésre van szükség.
A multitasking természetes
A Claude tervezési folyamata akár 20-30 percig is eltarthat – különösen egy ilyen összetett plan file esetén. Ez teljesen természetes. Miközben a rendszer dolgozik, nyugodtan végezz más feladatokat is – ez a vibe coding normális velejárója.
A Claude által elkészített terv tartalma
Miután a prompt elindult, a Claude a következő részletes tervet állítja össze:
Vizuális megjelenés
- Frontend stílus és UI komponensek meghatározása
- Színpaletta a dizájn inspiráció alapján
- Tipográfia – beleértve az ingyenes alternatívákat a fizetős fontok helyett
- Ikonrendszer meghatározása
Adatmodell
Az adatbázis tervezése azért szükséges, mert az app dinamikusan változó adatokat kezel – például minden egyes kipipált szokást el kell menteni az adott felhasználóhoz rendelve. Az adatmodell tartalmazza:
- Felhasználói profilok tárolása
- Szokások és napi bejegyzések struktúrája
- Előre definiált szokáslista
- Streak-számítás logikája
Projektstruktúra
- Milyen mappák és fájlok jönnek létre
- A fejlesztés hat fázisra bontva, lépésről lépésre
- Hogyan fog a Claude tesztelni és verifikálni az elkészült részeket
Ez a terv jóval összetettebb, mint az első projekt egyszerű HTML-alapú rendszere – de a Claude mindent megtervez, amit egy tapasztalt programozó is végiggondolna.
A lecke végén tehát rendelkezésre áll egy teljes, részletes fejlesztési terv a Habyt apphoz. A hat tervezési kérdés megválaszolása és a dizájn inspiráció beadása elegendő volt ahhoz, hogy a Claude önállóan felépítse a fejlesztés menetét – beleértve az adatmodellt, a projektstruktúrát, a vizuális rendszert és a fejlesztési fázisokat. A következő lépés ennek a tervnek az alapján a tényleges fejlesztés elindítása.