Som dizajnér a low-coder, ktorý sa prvýkrát rozhodol vyskúšať vibe coding cez Codex. Dôvod bol jednoduchý – rád sa učím nové veci a v poslednom čase o AI programovaní počujem naozaj všade. Tak som si povedal, že je čas vyskúšať Codex na vlastnej koži.
Keďže robím dizajn a low-code, viem si pripraviť aplikáciu vo Figme a rozumiem základom CSS, HTML a trochu aj JavaScriptu. Prvá otázka teda nebola či, ale čo vlastne vytvorím. Chcel som niečo zmysluplné, ale zároveň nie príliš komplikované.
Vibe coding je spôsob vývoja aplikácií, pri ktorom človek pomocou AI opisuje, čo chce vytvoriť, a AI následne generuje veľkú časť kódu, návrhu aj funkcionality.
Vibe coding je spôsob vývoja aplikácií, pri ktorom človek pomocou AI opisuje, čo chce vytvoriť, a AI následne generuje veľkú časť kódu, návrhu aj funkcionality.
Prvý nápad a jeho rýchle overenie
Ešte z čias, keď som sa intenzívne venoval fotografii, som mal v hlave nápad na aplikáciu pre fotografov. Mal som ju dokonca čiastočne navrhnutú vo Figme, a tak som si povedal, že práve na nej si vibe coding vyskúšam.
Zadal som AI základné pokyny a zrazu sa začali diať veci, ktoré ma úprimne prekvapili. Výsledok ma ohúril. V tej chvíli som pochopil, že to môže fungovať veľmi dobre a že vibe coding má naozaj veľký potenciál.
Zároveň som si však uvedomil, že táto aplikácia pre mňa nemá až taký praktický význam. A tak prišiel nový nápad.
Smart aplikácia na správu... receptov
Potreboval som projekt, ktorý bude mať jasný problém, konkrétneho používateľa a zároveň nebude príliš zložitý na prvé testovanie Codexu. Preto som sa nakoniec rozhodol vytvoriť aplikáciu na recepty.
Moja manželka má veľa vegetariánskych receptov, no sú roztrúsené po papieroch, screenshotoch, správach a rôznych poznámkach. Keď niečo hľadala, často to nebolo o varení, ale o pátraní. Zároveň som si uvedomil, že podobný problém rieši veľa ľudí. Chcú variť bez mäsa, ale často nevedia, kde začať, čo skombinovať alebo ako si recepty udržať prehľadne pokope.
A práve v tom začala dávať aplikácia zmysel. Nešlo len o digitálny zoznam receptov, ale o jednoduchý nástroj, ktorý vie spraviť poriadok v obsahu, uľahčiť rozhodovanie a umožniť recepty jednoducho zdieľať s ostatnými.
Dizajn ako prvý krok
Prvá fáza bola jasná – návrh aplikácie. Pripravil som si ju vo Figme:
- úvodnú obrazovku so 4 kategóriami,
- zoznam receptov,
- detail receptu.
Sekcie ako obľúbené, o nás a nastavenia som nechal na neskôr, pretože pre prvú verziu neboli kritické.
Nechcem tu rozpisovať celý dizajnový proces, keďže pointou článku je skôr vývoj samotnej aplikácie, ale spomeniem aspoň, že vizuálne som chcel ísť smerom moderného mobilného rozhrania v štýle nového iOS.
Na úvod som potreboval 4 obrázky kategórií. Aj keď je moja manželka ilustrátorka, rozhodli sme sa použiť AI (Gemini), obrázky som potom upravil vo Illustratore.
V sekcii „O nás“ som testoval aj lokálny AI model Flux (cez Stability Matrix a ComfyUI), kde som zo zdrojovej fotky spravil vizuál v štýle Pixar. Pre mňa to bol zaujímavý experiment aj z pohľadu toho, ako sa dá AI zapojiť nielen do kódu, ale aj do tvorby vizuálneho obsahu.
Prečo práve Codex?
Samozrejme som si položil otázku: Ktorú AI použiť na programovanie?
Aktuálne je veľmi silný Claude, ale keďže veľa ľudí používa GPT, rozhodol som sa pre Codex od OpenAI. Výhoda bola aj v tom, že je dostupný v rámci GPT a kredity sú oddelené – počas celého projektu ich nebolo potrebné dokupovať.
Začiatok vývoja
Vytvoril som nový projekt, vybral adresár a otvoril sa klasický chat.
Zadanie bolo jednoduché:
- chcem PWA aplikáciu (primárne pre mobil)
- bude to aplikácia na správu receptov
- úvod so 4 kategóriami
- zoznam receptov a detail
- admin na pridávanie a úpravu receptov
Ku každej obrazovke som pridal aj link na dizajn vo Figme. To bolo všetko. Codex sa okamžite pustil do práce.
Navrhol mi dve možnosti:
- jednoduchšie riešenie: Vanilla JS
- škálovateľnejšie: React + Vite + TypeScript
Ako dizajnér som nevedel s istotou posúdiť, ktorá cesta je správna. Tu mi pomohol kolega, programátor, ktorý mi odporučil React. Dáva totiž väčší zmysel, ak má aplikácia časom rásť a pribúdať v nej viac funkcií.
Prečo PWA?
Rozhodnutie ísť do PWA bolo pomerne rýchle a pragmatické.
- nemusel som riešiť distribúciu cez App Store ani Google Play,
- neplatím za developerské účty,
- aplikácia funguje na všetkých platformách (mobil, tablet, desktop),
- dá sa nainštalovať ako klasická appka,
- funguje aj offline alebo s obmedzeným internetom a má rýchle načítanie vďaka cache,
- podporuje push notifikácie.
Z pohľadu experimentu s Codexom to bola ideálna voľba, a teda najrýchlejší spôsob, ako dostať aplikáciu do použiteľného stavu bez zbytočných komplikácií okolo distribúcie.
Ladenie: realita práce s Codexom
Prvý výsledok bol veľmi dobrý. Codex vedel z Figmy pochopiť fonty, layout, tiene, blur aj celkový vizuál. Samozrejme, veľa vecí nesedelo, ako logo, obrázky alebo detaily. Ale na začiatok to stačilo.
V ďalšom kroku som túto prvú verziu začal postupne ladiť:
- cez prompty („zmenši“, „vycentruj“, „pridaj“),
- alebo priamo v kóde cez CSS.
Keď som narazil na limity Figmy, posielal som Codexu screenshoty. Bez problémov ich pochopil a vedel podľa nich upraviť dizajn.
Postupne som prechádzal stránku po stránke:
- upravoval veľkosti, farby a animácie,
- pridával kategórie vegan/vegetarian,
- doplnil filtre a zoradenie.
Kľúčový bol pre mňa detail receptu:
- veľká fotka s parallax efektom,
- ingrediencie,
- postup.
Codex najprv navrhol ingrediencie štýlom „jeden riadok = jedna položka“. Funkčne to dávalo zmysel, ale potreboval som väčšiu flexibilitu. Preto som ho upravil tak, aby sa dal text v admine formátovať, napríklad zvýrazniť tučným písmom alebo použiť odrážky.
Najťažšia časť: dostať aplikáciu online
Doteraz všetko bežalo lokálne na mojom počítači. Ak však mala mať aplikácia reálny zmysel, musela byť dostupná online. Ideálne zadarmo, keďže išlo stále o testovací projekt.
A práve tu prišla najväčšia výzva.
Najprv som skúšal kombináciu Firebase + Netlify, ale veľmi rýchlo som narazil na limity. Netlify mi po viacerých deployoch dokonca dočasne zablokoval projekt.
Nakoniec som skončil pri:
- Firebase – databáza a backend
- Cloudinary – správa obrázkov (optimalizované verzie)
- Cloudflare – frontend hosting
Najviac práce nebolo v samotnom kóde, ale v prepájaní jednotlivých častí:
- API kľúče,
- autentifikácia,
- konfigurácia služieb.
Codex mi pomáhal krok za krokom a vysvetľoval, čo kde nastaviť. Napriek tomu to bola najviac „manuálna“ časť celého projektu.
Bodka na záver: push notifikácie
Síce neboli nevyhnutné pre prvú verziu, ale pri PWA mi dávalo zmysel otestovať aj túto funkcionalitu.
Push notifikácie fungujú jednoducho:
- pridám nový recept cez admin rozhranie,
- zapnem možnosť odoslať notifikáciu,
- používateľom, ktorí majú notifikácie povolené, príde upozornenie.
AI sa s tým trochu trápila, ale nakoniec to zvládla. Zároveň sme museli riešiť aj bezpečnostnú stránku, aby sa notifikácie nedali zneužiť treťou stranou.
Záver
Môj prvý pokus o vibe coding hodnotím veľmi pozitívne. Vývoj trval približne 2 týždne, čo sa môže zdať veľa, no veľkú časť času som menil zadanie, skúšal nové možnosti a učil sa za pochodu.
Najviac ma prekvapilo, koľko vecí dokáže Codex domyslieť sám. Navrhol celé časti aplikácie (napríklad admin) a často pridal aj detaily, ktoré by mi v tej chvíli nenapadli.
Najväčším problémom nakoniec nebolo samotné programovanie, ale integrácie a prepojenie služieb. Práve tam sa ukázalo, že aj keď AI výrazne zrýchľuje vývoj, stále treba rozumieť kontextu a vedieť robiť rozhodnutia.
Dnes vidím, že projekt, ktorý som si zvolil na testovanie vibe codingu, bol na začiatok ideálny – ani príliš jednoduchý, ale ani extrémne komplexný. Pri väčších projektoch by som sa asi trápil viac, či dokonca by ma náročnosť mohla od ďalšieho skúšania odradiť.
Je dôležité povedať, že každým dňom sa AI modely zlepšujú a zdokonaľujú, čo posúva vibe coding ešte ďalej a robí ho (zatiaľ) dostupnejším.
Experimentovanie s vibe codingom ma presvedčilo o jednej veci:
dnes je oveľa jednoduchšie premeniť nápad na reálny produkt.
Ale stále platí, že bez rozmýšľania, kontextu a základného pochopenia to nepôjde.
