80/20 Mérnökség: Így Építettem Újra a Weboldalamat Egy Hétvége Alatt

Elárulok egy titkot: nem azért írtam újra a személyes weboldalamat egy hétvége alatt, mert különösen gyors vagyok a kódolásban. Azért tettem, mert alig írtam kódot.

Inkább az időm nagy részét arra fordítottam, amit a legtöbb fejlesztő kerüli, mint a pestist — előkészítésre. Dokumentálásra. Amit le lehet írni, azt leírtam. Amikor végül megnyitottam a szerkesztőt és elkezdtem dolgozni az OpenAI Codex-szel, a tényleges megvalósítás szinte varázslatszerűen, gyorsan zajlott le.

Ez egy történet arról, hogy hogyan végeztem el az idő 80%-át a kód első sorának megírása előtt, és hogy ez hogyan változtatott meg mindent.

Miért Írtam Újra a Weboldalt?

A weboldalam Qwik v3-on futott. Stabil technológia, jó hangulat, de többre vágytam—főleg a routing rugalmassága miatt. Átváltottam React Routerre framework módban. Teljes újraépítés, nem csak refaktorálás. Új architektúra, tiszta fájlszerkezet, frissített stílus (üdvözlöm Tailwind v4), és tiszta lap.

De ami meglepett: a tényleges kódolás kb. 2-3 órát vett igénybe. Az elejétől a végéig. És elsőre működött.

Szóval mi történt a többi 5 órában?

Az 80%: Codex Előkészítése, Mint Egy Konzultáns, Aki Prezentációt Készít

A munka nagy része egy "mega prompt rendszer" kiépítésére ment el—nem valami csilli-villi UI-ban, hanem közvetlenül a projektmappámban. Ezt tettem meg mielőtt Codex-nek egyáltalán megkértem volna, hogy írjon bármilyen komponenst:

• Letöltöttem a teljes React Router dokumentációt, és elmentettem a /guides könyvtárba.

• Ugyanezt tettem a Tailwind CSS v4-ével is, a legfontosabb oldalakat markdown formátumba konvertálva a Firecrawl segítségével.

• Írtam egy PROMPT.md fájlt, ami tartalmazott egy projekt áttekintést:

  • "A legacy kód a / könyvtárban él, az új kód az /app-ba kerül."
  • "Csak minimális UI, fókusz az üzleti logikán."
  • "Tailwind v4 használata. Maradni a React Router framework módban."
  • És így tovább.

Ez nem volt felesleges. Ez volt az operatív kontextus — az a részletes brief, amit egy új csapattagnak adnál az első napon. Codex nem csak találgatta, mit akarok. Megvolt a dokumentáció a repo-ban. Pontos szabályok egyértelmű angol nyelven. Megvoltak a korlátok.

Amikor végül beírtam:

"Olvasd el a PROMPT.md-t. Először migráld az összes route-ot az új appba."

Codex úgy reagált, mintha egész életében erre a feladatra várt volna.

Mega Prompts, Minimális Hallucinációk

Az eredmények elképesztőek voltak. Codex ragaszkodott az utasításokhoz. Nem talált ki dolgokat. Nem "hallucinált". Tiszteletben tartotta a "ne fókuszálj az UI-ra" direktívát. A szerverlogika precízen migrálódott. A route konfiguráció úgy nézett ki, mintha én magam írtam volna—ha nekem volna egy fordító türelmem.

Ez nem csak "prompt mérnökség" volt. Ez a Codex földelése volt a valós és aktuális specifikációkban. Nem egy homályos feladatlista. Nem egy kívánságlista funkciókról. Hanem strukturált bemenet, világos példák és helyi hozzáférés a szükséges dokumentációhoz.

Mi Vette Igénybe Az Időt? Nem a Kód

Miután az alapokat leraktam, a munka két tiszta fázisra oszlott:

1. Codex mód – Gyors, strukturált, ismételhető végrehajtás. Átment a migráción, logikán és még némi layout vázlaton is közel tökéletes pontossággal.
2. Design felfedező mód – Lassú, manuális és nyitottabb. Ez volt az emberi rész: kinézet választás, layoutok próbája, komponensek kísérletezése. Amint megvolt a működő vizuális stílus, Codex újra belelendült, hogy propagálja a design mintákat.

Az egyetlen igazi lassulást az okozta, hogy én nem tudtam pontosan, hogy valami hogyan nézzen ki — nem az, hogy hogyan működjön.

A Valódi Tanulság: Codex Olyan Jól Működik, Amilyen Jó az Előkészítés

Ez a hétvége megerősített egy váltást, amit már észrevettem a munkámban:

A kódolás lesz a könnyű rész. A tervezés a nehéz és a legfontosabb rész.

Kis- és középprojektek esetén mostantól az implementációt 20%-os feladatnak tekintek. Az 80% előrefelé töltődik: dokumentáció összegyűjtése, körülhatárolt feladatok írása, kontextuális promptok készítése.

Codex ezt a fajta struktúrát szereti. Ha bizonytalanságot adsz neki, bizonytalanságot fog adni vissza. De ha tudatosan építed az környezeted — doksik, korlátok, egyértelmű leírások — akkor úgy teljesít, mint egy senior fejlesztő tökéletes memóriával és egó nélkül.

Továbblépés: Kezeld az AI-t, Mint Egy Csapattársat, Nem Mint Egy Dzsinnt

A tanulság egyszerű: kezeld az AI kódoló eszközöket, mint kollégákat. Adj nekik ugyanazokat az anyagokat, amiket egy valódi mérnöknek adnál. Készítsd elő a kontextust. Légy specifikus. Legyél alapos.

Legközelebb, egy nagyobb projekt esetén még tovább megyek:

• Egy mesterterv dokumentum, amely meghatározza a teljes projekt terjedelmét.
• Egyéni feladatspecifikációk rendszer- vagy komponensenként.
• Egy működő markdown dokumentáció- és példaállomány készlet helyi referencia gyanánt.

Codex-nek nem kellenek mágikus szavak — neki struktúra kell.

Gyorsabban akarsz építeni? Kezdd azzal, hogy nem kezdesz építeni. Először tervezz. Aztán promptolj komolyan.

A Design Evolúciója: Egy Vizualizált Utazás

Idővel a weboldalam több átalakuláson ment keresztül — mindegyik az új ötletek, eszközök és tanulságok tükre. Íme egy gyors vizuális túra, hogyan fejlődött:

1. Verzió: A Kiindulópont

2. Verzió: Egy Határozottabb Hang

2.1 Verzió: Finomítások és Polírozás

3. Verzió: A Qwik Korszaka

4. Verzió: Koncentrált Egyszerűség Remix-szel

Minden verzió új felismeréseket hozott arról, hogy mi tesz egy oldalt hatékonnyá — nem csak esztétikában, hanem érthetőségben, használhatóságban és karbantarthatóságban is. A design útja hasonlóan reflektált a fejlesztési folyamatra: szándékos, iteratív és mindig előre tekintő.