Pomoc! Ujíždí mi vlak jménem vibe coding.
Ve chvíli kdy píšu tento příspěvek, vibe coding už snad ani trend LinkedInu. Je to už samozřejmý skill této doby. Proto jsem se rozhodla pokusit se naskočit do rozjetého vlaku.
Hraju si na programátorku a stavím generátor customizovaného diáře/kalendáře pro tisk na domácí tiskárně.
Kontext & výběr projektu
O vibe codingu nevím zhola nic. Proto pro mě byla výzva vhodně zvolit projekt, abych si na něm nevylámala zuby, ani nebyl příliš triviální.
Zavrhla jsem:
Zavrhla jsem původně plánovanou aplikaci na učení akademické angličtiny, protože jsem nevěděla, jak ji uchopit a taky s postupujícím semestrem ztratila aktuálnost.
Dále jsem zavrhla časovač ve stylu pomodoro, protože by šlo o příliš jednoduchý projekt a namísto toho jsem si na něm vyzkoušela první projekt pro pochopení vibe codingu. Navíc existuje už lepší Pomofocus.
Jako poslední jsem zavrhla aplikaci pro snížení scrollování na mobilu, která by zamkla obrazovku po předem nastavenou dobu a na spořiči obrazovky by běžela formou tapety jako motivace činnost, kterou chci místo času u obrazovky dělat. Tento projekt byl naopak příliš složitý, protože by řešil přístup k aplikacím 3. stran a jejich blokování. Navíc existuje už lepší One Sec.
Zvolila jsem
Vzpomněla jsem si na jeden ze svých dávných projektů Diář snů a jak jsem tenkrát v prehistorických dobách bez AI snila o tom, že si každý člověk nakliká svůj vysněný diář a pak už ho jen vytisknout.
Rozhodla jsem se proto postavit generátor customizovaného diáře/kalendáře.
To se nakonec ukázalo jako vhodně zvolený projekt, který kombinuje přesné stavění vizuálu i tak akorát složité kalendářové logiky za ním.
Pro první vibe coding jsem zvolila Claude. Popravdě za tím nestojí žádné dlouhé promyšlené rešerše, ale prostá sympatie a dojem, že je v danou chvíli nejlepším dostupným nástrojem. A taky nám ho Vojta (tutor) víckrát ukazoval, tak nemám takový strach v něm klikat.
Nástroje
Digitální
Claude Code (desktopová aplikace) – Sonnet 5
Claude – Opus 4.8 (přepla jsem ze Sonnet, který mi nevyhovoval)
Fyzické
Pravítko (do doby nalezení metr), děrovačka, tiskárna, zápisníky a diáře pro referenci.
Postup
Řídila jsem se pravidlem: když nevíš, jak použít AI, neptej se AI.
Založila jsem si v Claude Projekt a v několika chatech jsem řešila vše, co jsem nevěděla:
- Jaké modely používat
- Jak šetřit kredity
- Jak verzovat kód
- Jak nastavit projekt
Co jsem se obecně o vibe codingu naučila popisuju více tady.
Ve vedlejším tabu dektopové aplikace </>Code jsem pak už jen promptovala kód a stavěla jednotlivé verze.
S Claude jsem vždy konzultovala prompty (nastavila jsem ho tak, že se chci učit a on mě vybízel k vlastnímu psaní) a dávala mu nazpět výsledky, aby mi vysvětlil, kde mám udělat úpravy pro kýžený výsledek.
Verze
Následující souhrn verzí jsem vygenerovala pomocí Claude.
Verzování jsem si zavedla jako pravidlo, že nová verze vzniká vždy až po dokončeném smysluplném kroku, ne po každém jednotlivém promptu. Během jednoho kroku jsem tedy klidně poslala i deset oprav za sebou, ale všechny šly do téhož souboru, a teprve když jsem byla s výsledkem spokojená, verzi jsem zamrazila jako zálohu a založila další.
v1 — první funkční výstup
Cílem bylo vyzkoušet rozložení stránky, navrhnout ho na milimetry a zjistit, jak se výsledek generuje do PDF. Výsledkem byla nedatovaná týdenní stránka, dvě A5 na arch A4, kterou už šlo vytisknout a změřit. Tady se také ukázal první rozpor mezi zadáním a realitou tisku, protože jsem počítala s 5 mm nepotisknutelného okraje, ale reálně vyšlo 10 mm do začátku obsahu.
v2 — okraje a zrcadlení stránek
Ladila jsem odsazení obsahu od vnějšího kraje i od děrovací zóny u hřbetu, protože v předchozí verzi se obsah tiskl až ke kraji a část se ořízla. Výsledkem byly obě A5 stránky zrcadlově souměrné, s děrovací zónou 15 mm u hřbetu a s obsahem, který do ní nezasahuje. Vnější okraj jsem po tisku ještě zvětšila z 5 na 7–8 mm.
v3 — vzhled
Tady šlo čistě o estetiku, tedy tenčí linky, jemnější a světlejší tečky a užší rámeček na datum. Poslala jsem do téhle verze několik promptů za sebou, protože ladění vzhledu se dělá okem a po jednotlivých korekcích. Výsledkem byla stránka, která už vypadala tak, jak jsem si ji představovala.
v4 — přepočet celé stránky na mřížku 5 mm
Nejrizikovější krok celého projektu, protože se měnila struktura, ne vzhled. Svislé rozvržení jsem nechala přepočítat tak, aby dávalo přesný součet (7,5 mm okraj + 20 mm hlavička + 7 dnů po 25 mm + 7,5 mm okraj = 210 mm) a aby tečky ležely na jedné průběžné mřížce přes celou stránku, ne aby se počítaly v každém dni zvlášť. Napoprvé to nevyšlo — v každém dni byly jen čtyři řady teček místo pěti a mřížka měla vlastní odsazení. Doladila jsem to a zároveň zúžila rámeček data na 10 mm a doplnila chybějící sloupec teček vpravo. Výsledkem byla stránka, kde tečky lícují mezi dny i uvnitř dne.
v5 — hlavička na mřížce
Dvě řady teček v hlavičce zarovnané na stejnou mřížku a stejné sloupce jako tečky ve dnech, plus rámečky na čísla týdnů 5 mm nad nimi. Výsledkem byla hotová v1 celé aplikace, tedy nedatovaná týdenní stránka připravená na domácí tisk, se všemi rozměry, okraji, děrovací zónou a mřížkou vyladěnými. Tuhle verzi jsem si zazálohovala i mimo pracovní složku.
v6 — první přepínač
Přidala jsem volbu plochy na psaní se třemi variantami: tečky, linky (po 5 mm, na stejné mřížce) a prázdno. Přepínač je nahoře vedle tlačítka na stažení PDF a platí pro celou stránku. Výsledkem byla aplikace, ve které si uživatel poprvé může něco zvolit, místo aby dostal jednu pevnou variantu.
v7 — diagnostika rozměrů
Tahle verze nepřinesla novou funkci, ale odpověď na otázku, jestli se mi layout rozsype, když zvětším některé políčko. Nechala jsem si vysvětlit, jak jsou rozměry v kódu zapsané, a to výslovně bez jakékoliv úpravy kódu. Ukázalo se, že by se mřížka při změně okrajů tiše rozjela, aniž by aplikace nahlásila chybu. Výsledkem bylo rozhodnutí, jak dál, a poznatek, že se rozměry mají počítat obráceně: výška dne je pevná a okraje se dopočítají ze zbytku.
v8 — datování
Datování jsem dělala po vrstvách, protože kdyby přišlo najednou, nepoznala bych, která část počítá špatně. Nejdřív čísla dnů a názvy dnů z jednoho data zadaného natvrdo v kódu, včetně správného přechodu přes konec měsíce. Potom číslo týdne a den v roce ve tvaru „293/72″. U dne v roce jsem ještě opravovala zarovnání, aby bylo na obou stránkách vpravo, ale na levé stránce nezasahovalo do děrovací zóny. Výsledkem byla stránka s reálnými daty, jen zatím pro jeden pevně zadaný týden.
v9 — volba data a dva navazující týdny
Přidala jsem pole na výběr data, ze kterého se dopočítá pondělí daného týdne, a nahradila jím pevně zadanou hodnotu v kódu. Zároveň jsem opravila, že se obě A5 stránky do té doby zobrazovaly tentýž týden, což by v reálném diáři nedávalo smysl. Výsledkem je aktuální verze, ve které si vyberu datum a dostanu dvě po sobě jdoucí týdenní stránky připravené k tisku.
Co to umí
V aktuální verzi 9 si můžete přes generátor:
- nastavit datum od kterého se vypíšou 2 týdny (počínající pondělím) na dvě A5 stránky vedle sebe připravené na tisk na A4
- zvolit, jestli chcete mít v diáři linky, tečky, nebo nic
- stáhnout do pdf a vytisknout na své domácí tiskárně
Html soubor pro vyzkoušení generátoru vám ráda poskytnu na vyžádání, stačí napsat na: 385770@mail.muni.cz
Reflexe
Pochopila jsem, že je mnohem cennější něco zkusit a pak to ladit, než overthinkovat proces.
Claude mě tím dobře provedl a zároveň mě naučil uvažovat v malých celcích.
Je klíčové najít projekt, na kterém mě bude bavit pracovat. A není to vůbec tak lehké, jak jsem si myslela.
Dopamin z toho, když to funguje dokáže zahrat frustraci předchozích několika nefungujících verzí.
Nestihla jsem všechny své megalomanské plány (verzi se sloupci, generování celého diáře od určitého data, přidání jmenin, …) a nevím, jestli je ještě uskutečním. Ale pro vyzkoušení, jak vibe coding funguje to považuji za dostatečné.
„Vynalezla“ jsem komponenty, když mi došlo, že některé prvky budou neměnné a přenosné mezi verzemi. Udělalo mi radost objevit něco zase z jiné strany.
