Začínám čím dál víc věřit jedné věci: když mám dobrou představu, nemusím být nutně „dokonalý programátor“, abych z ní dostal funkční aplikaci. Vibe coding je přesně o tom. Místo psaní všeho od nuly popisuju, co chci, a systém mi pomáhá tu vizi přetavit do fungujícího produktu.
V tomhle článku ti ukážu, jak jsem si vytvořil aplikaci „My Closet“: retro inspirovaný virtuální šatník, který navrhuje outfity podle počasí v mojí lokalitě. A když se to zdálo zajímavé, přidal jsem ještě jeden krok navíc: virtuální zkoušení oblečení přímo v aplikaci pomocí image úprav a generování.
Nejde jen o „rekapitulaci postupu“. Ber to jako praktický návod, který můžeš zopakovat pro vlastní nápad. Pokud někdy přemýšlíš, že „určitě existuje aplikace pro tohle…“ a zároveň nemáš čas čekat, až ji někdo postaví, vibe coding ti dává rychlý startovní bod.
Obsah
- 🧠 Od jedné myšlenky k aplikaci: co vlastně chci postavit
- ✏️ Kresba a vibe: jak přenést estetiku do prototypu
- 🧩 Vytvoření struktury v AI Studio: první prompt jako základ aplikace
- 🧺 Z „demo“ na reálný šatník: přidání vlastních fotek oblečení
- 🌦️ Weather-aware doporučení: když aplikace začne „myslet“
- 🪞 Virtuální zkoušení v aplikaci: try-on přímo v AI Studio pomocí Nano Banana
- 💬 Proč je vibe coding spíš konverzace než programování
- 🛠️ Recept na vlastní aplikaci: jak postupovat, když chceš „něco jako tohle“
- 🎛️ Začínám rychleji: využij app gallery jako startovací bod
- 🚀 Kam to dál: remixuj a přidej vlastní twist
- ❓ Co je tvoje „app-worthy“ problémová situace?
- 📌 Shrnutí: jak jsem postavil My Closet krok za krokem
- ✨ Když to zní jednoduše, protože je to: první verze už je nejdůležitější
🧠 Od jedné myšlenky k aplikaci: co vlastně chci postavit
První věc, kterou dělám vždycky, je jasně pojmenovat cíl. Ne „udělám aplikaci o módě“, ale konkrétně:
- Název: My Closet
- Hlavní funkce: virtuální vyzkoušení (try-on) formou návrhů outfitů
- Co přidává inteligence: doporučování outfitů podle počasí v mé lokalitě
- Jak uživatel interaguje: prochází šatník (moje reálné fotky oblečení), dostává doporučení a může zkusit outfit „na sobě“ pomocí nahrané fotky nebo snímku
Tohle je základ. Jakmile mám odpovědi, můžu jít do návrhu a následně do AI Studio, kde to celé popisuju jedním uceleným zadáním.
✏️ Kresba a vibe: jak přenést estetiku do prototypu
Vibe coding se často popisuje jako „stačí napsat text“. Ano, ale estetika a struktura nejsou jen náhoda. V praxi se mi osvědčilo začít vizuálně.
Když jsem si představoval retro inspirovaný virtuální šatník, nejdřív jsem si namaloval rozvržení aplikace. Ne muselo to být umělecké. Stačilo zachytit, kde budou:
- prostor pro stylový board
- oblast pro doporučení outfitů
- sekce pro procházení šatníku
- nástroj pro try-on (virtuální zkoušení)
Pak jsem si našel design referenci, jejíž atmosféru jsem chtěl. Pokud nemáš po ruce přesnou referenci, můžeš použít cokoliv, co vystihuje vibe. V mém případě to byl obrázek, ale princip je stejný:
- screenshot
- fotka
- mood board
- cokoliv, co vystihuje styl, který chceš
Důležité je, že tím zrychlíš rozhodování. Místo nekonečných úprav „od oka“ máš vizuální kotvu, se kterou se systém i ty lépe chytáte přesného směru.
🧩 Vytvoření struktury v AI Studio: první prompt jako základ aplikace
Když mám v hlavě (a případně na papíře) strukturu, přecházím do AI Studio. Tam začínám v režimu, kde můžu pracovat s ukázkou a pak přejít do kódu.
Moje práce probíhala takhle:
- Otevřel jsem AI Studio a našel jsem cestu, kde jde přejít z náhledu do build módu s kódem.
- Ve svém zadání jsem popsal, co má aplikace dělat a jak má vypadat.
První prompt jsem cíleně postavil jako „programový popis“ aplikace. V zadání jsem shrnul:
- že chci vytvořit retro inspirovaný virtuální šatník s názvem My Closet
- že aplikace má fungovat jako virtuální try-on (nejprve ve formě doporučování outfitů)
- že součástí bude style tip board a návrhy outfitů podle počasí
- že mám přiložený design obrázek a layout referenci
Praktický tip: i když vibe coding zní jednoduše, největší rozdíl udělá, když prompt nepíšeš jen „v rovině přání“, ale popíšeš workflow aplikace. Tedy nejen styl, ale i to, co uživatel uvidí a co se bude dít v pozadí.
Po tomhle kroku jsem měl základní verzi aplikace: fungovala podle struktury, obsahovala stylový board a dokázala pracovat s weather-based doporučeními. A to bylo pro mě důležité: už to nebyla jen ideová skica. Bylo to pracovní rozhraní, které se dalo rozvíjet.
🧺 Z „demo“ na reálný šatník: přidání vlastních fotek oblečení
Nejrychlejší způsob, jak z projektu přestat být „cool ukázka“ a začít být „moje aplikace“, je vložit vlastní data. V tomhle případě šlo o fotky oblečení.
Postupoval jsem takto:
- Na desktopu jsem vytvořil složku a dal do ní všechny obrázky svých věcí.
- V AI Studio jsem přepnul na režim práce s kódem.
- Jednoduše jsem do pracovního prostoru vložil (drag and drop) svou složku.
- V zadání jsem doplnil instrukci typu: „mám tu všechny fotky oblečení; nahraď placeholdery těmito obrázky“.
Ten moment, kdy placeholdery zmizí a aplikace začne používat můj skutečný wardrobe, je zvláštní. Najednou to přestane být generický návrh a začne to být systém, který zná moje možnosti.
A ještě jeden detail, který v praxi hodně pomáhá: pokud máš fotky organizované a označené tak, aby s nimi šlo pracovat, aplikace se pak chová konzistentněji. V mém případě jsem chtěl, aby byly outfit možnosti „ready to work“.
🌦️ Weather-aware doporučení: když aplikace začne „myslet“
Moje motivace byla jednoduchá: žiju v New Yorku a počasí se mění pořád. Nejde o to, abych měl krásný vizuál. Chci, aby mi aplikace pomohla vybrat oblečení, které dává smysl pro dnešní podmínky.
Takže další krok byl: aby aplikace uměla vyhodnotit mé outfity v kontextu počasí v mé lokalitě.
V zadání jsem popsal následující funkcionalitu:
- Analyzovat mé outfit obrázky podle počasí v místě, kde se nacházím
- Auto-scrollovat skrz možnosti šatníku
- navrhovat pairings (kombinace kusů oblečení), které by dnes dávaly smysl
A tady jsem si všiml něčeho, co se mi líbí nejvíc. Není to jen „zobrazení“. Aplikace začne fungovat jako partner v rozhodování. Dívá se na to, co mám, bere v úvahu počasí a pak mi ukáže, co se podle ní hodí.
Pro mě to byla chvíle, kdy se celý projekt změnil z „vypadá to hezky“ na „pomáhá mi to reálně dnes“. A to je pro tvorbu produktů klíčové.
🪞 Virtuální zkoušení v aplikaci: try-on přímo v AI Studio pomocí Nano Banana
Po doporučeních jsem si položil otázku: co kdybych si to mohl rovnou vyzkoušet virtuálně uvnitř aplikace? Nejen vidět outfit jako doporučení, ale vidět, jak by vypadal na mně.
Tady přichází na scénu další část systému: Nano Banana. Je to nástroj od Googlu pro image úpravy a generování, který využívá to, co je v zadání a v obrázcích.
Co jsem chtěl přidat jako volbu v aplikaci:
- možnost nahrát obrázek nebo „snímat“ fotku
- následně nahradit outfit vybraným setem oblečení
- abych viděl, jak vypadám „v tom“
V praxi to celé nebyl dlouhý boj s implementací. Zkusil jsem návrh a výsledek fungoval: když jsem poslal fotografii a zadal vybraný outfit, systém jej dokázal do obrázku promítnout.
Tenhle krok byl pro mě nejvíc „aha“. Vibe coding se totiž neomezuje jen na UI a logiku. Umí jít i do generativních částí aplikace.
💬 Proč je vibe coding spíš konverzace než programování
Často se říká, že vibe coding je „rychlé“. Ano. Ale pro mě je ještě důležitější něco jiného: iterace je přirozená.
Když něco nefunguje přesně podle představ, není to jen o opravě řádku kódu. Je to o tom, že se vrátím k zadání, popíšu, co chci, a systém to přetvoří do další verze. Vzniká cyklus: představ, postav, zpřesni.
Popis procesu, který mi sedí, je podobný konverzaci:
Popíšu, co chci. Systém to postaví. Já zhodnotím, co sedí a co ne, a zopakuju to s upřesněním.
To je rozdíl oproti pocitu, že sedíš hodiny nad jednou částí kódu a pořád se snažíš uhodnout, proč se chová jinak, než očekáváš. Tady pracuješ s představou a přenášíš ji do reality krok za krokem.
🛠️ Recept na vlastní aplikaci: jak postupovat, když chceš „něco jako tohle“
Když chci postavit něco vlastního, používám podobnou mapu, jakou jsem měl u My Closet. Místo toho, aby sis kopíroval mou aplikaci, vezmi si postup. Přizpůsob obsah.
1) Začni rozvržením a referencí (vibe board)
Nepotřebuješ dokonalý design. Stačí vědět, kde mají být klíčové sekce. Pak si vyber vizuální inspiraci, která ti sedí.
2) Napiš prompt tak, aby obsahoval „workflow“
V prvním zadání jsem uvedl nejen vzhled, ale i to, že aplikace má navrhovat outfity podle počasí a pracovat s konkrétní strukturou.
U tvého projektu si polož tyhle otázky:
- Kdo je uživatel a co chce udělat jako první?
- Jaké vstupy aplikace použije (obrázky, data, nahrávky, počasí…)?
- Co je výstup (doporučení, generování, úpravy obrázku…)?
- Jak se bude aplikace chovat v dalším kroku (iterace, filtr, auto scroll…)?
3) Nahraj vlastní data a nahraď placeholdery
Dokud aplikace nepoužívá reálné obrázky a reálný obsah, pořád to může být jen ukázka. V mém případě to byly fotky oblečení uložené do složky. U tebe to můžou být třeba fotky produktů, skeny, tvoje data nebo cokoliv, co má mít aplikace „v rukou“.
4) Přidej inteligenci nad tím, co už máš
V My Closet to bylo weather-aware doporučování. V jiných nápadech to může být:
- osobní preference (například styl, barvy, tolerance)
- čas a kontext (dnešní úkoly, kalendář, lokace)
- analýza obsahu (co je na fotce, co je v dokumentu)
5) Pokud dávají smysl image úpravy, přidej try-on nebo generování
Tohle je nejkreativnější část. V mém případě šlo o virtuální zkoušení. Podobně můžeš přidat:
- náhled vzhledu produktu na fotce
- úpravy vizuálu na základě výběru
- transformace podle stylu, barev, scénáře
🎛️ Začínám rychleji: využij app gallery jako startovací bod
Jedna z nejpraktičtějších věcí, kterou jsem ocenil, je app gallery v AI Studio. Je plná příkladů toho, co jde vytvořit. Ne jako kopii, ale jako inspiraci a rychlý „odrazový můstek“.
Když začínám, často nechci vyhrávat od začátku. Chci se dostat do stavu, kdy vidím funkční základ, který pak upravím pro svůj use case.
To mi dává dvě výhody:
- méně času na blank page
- rychlejší představa, jak přesně má prompt a struktura vypadat
🚀 Kam to dál: remixuj a přidej vlastní twist
Jakmile mám aplikaci v použitelné podobě, další krok je remix. V mém případě to znamenalo posun od „hotového návrhu“ k „mému šatníku“. Ale stejný princip funguje vždy.
V praxi to může znamenat:
- změnit styl board podle jiného estetického směru
- dodat nové kategorie oblečení
- upravit způsob, jak aplikace doporučuje pairings
- vylepšit try-on volby (nahrání fotky, výběr outfitu, pořadí kroků)
A když jsem aplikaci dokončil, měl jsem pocit, že je to přesně ten typ věci, kterou je škoda držet jen pro sebe. Proto se dá taková aplikace vystavit v app gallery a nechat ostatní remixovat.
❓ Co je tvoje „app-worthy“ problémová situace?
Na konci mě vždycky napadá podobná otázka: co je ve tvém životě natolik opakující se, že by si zasloužilo vlastní aplikaci?
Moje My Closet vzniklo z jednoduché potřeby: vybírat outfit v proměnlivém počasí. Ale nápady mohou být úplně jiné. Něco, co můžeš vnímat jako „mě to pořád brzdí, kdyby to existovalo hotové“.
Pokud chceš, zkus to formulovat jednou větou:
- „Chci aplikaci, která udělá X, z Y vstupů, aby mi pomohla s Z.“
Pak je na čase přejít od vize k první verzi. Vibe coding je skvělý právě v okamžiku, kdy nechceš čekat, až se vše naučíš dokonale. Stačí popsat, poskládat základ a iterovat.
📌 Shrnutí: jak jsem postavil My Closet krok za krokem
Aby to bylo přehledné, shrnu hlavní kroky přesně v logice, podle které jsem šel já:
- Vyjasnil jsem vizi aplikace: retro virtuální šatník „My Closet“, který doporučuje outfity podle počasí.
- Navrhl jsem rozvržení a vybral si design referenci (mood board, screenshot, fotka).
- V AI Studio jsem vytvořil strukturu pomocí prvního promptu: layout, style tip board, weather-based outfit suggestions.
- Přidal jsem reálné fotky oblečení do aplikace: nahradit placeholdery vlastními obrázky ze složky.
- Doplnil jsem inteligenci nad daty: analýza outfitů podle počasí, auto-scroll přes možnosti a návrhy pairings pro daný den.
- Přidal jsem virtuální try-on přes Nano Banana: volba nahrát/snímat fotku a vyměnit outfit za vybraný set oblečení.
- Iteroval jsem: „popisuji, stavím, zpřesňuji“, dokud se aplikace nepřiblíží tomu, co jsem chtěl.
Výsledek není jen estetická mini aplikace. Je to funkční systém, který kombinuje moji garderobu, kontext počasí a generativní try-on do jednoho osobního nástroje.
✨ Když to zní jednoduše, protože je to: první verze už je nejdůležitější
Největší motivace pro mě byla okamžitá zpětná vazba. Jakmile se aplikace začne chovat podle zadání, je to jasné znamení, že cesta funguje. Pak už jen dolaďuješ detaily.
Jestli máš nějaký nápad, který by se dal popsat jako „aplikace pro problém v mém životě“, je to přesně moment, kdy má smysl začít. App gallery může dát rychlý start a vibe coding ti umožní proměnit skicu v něco, co má reálné použití.
Moje My Closet je jen jeden příklad. Ale princip je univerzální: vize z kresby, struktura v promptu, vlastní data, inteligentní doporučení a případně image try-on. Zbytek je tvoje představivost a iterace.
