Toto nie je návod na prototyp, ktorý ti pobeží v prehliadači a o hodinu ti zmizne.
Na konci budeš mať skutočnú webovú aplikáciu na vlastnej adrese: landing page, ktorá appku predá, registráciu a prihlásenie, sprievodcu pre nových používateľov, samotnú appku a vlastnú databázu, do ktorej sa dáta naozaj ukladajú. Programovať pritom nemusíš vôbec.
Celé to spraví jeden skill, ktorý som pripravil a ktorý si stiahneš nižšie. Skill je vlastne návod pre AI: nainštaluješ ho raz a Claude podľa neho vie presne, čo má robiť, v akom poradí a ako to má vyzerať.
Čo budeš potrebovať
- Claude s prístupom do sekcie Code (Pro plán a vyššie)
- Účet na Verceli, tam bude appka bežať. Zadarmo.
- Databázu cez Neon, tú vytvorí AI sama počas nasadenia. Tiež zadarmo.
Hosting aj databáza sú reálne na nula eur. Jediné, čo platíš, je Claude.
1. Stiahni si Claude appku
- Stiahni si Claude aplikáciu na počítač z https://claude.com/download a nainštaluj ju.
- Prihlás sa a hore klikni na záložku Code. To je časť Claude, ktorá vie pracovať priamo s priečinkami a súbormi na tvojom počítači.
- Ak máš Windows, appka ťa pri prvom otvorení Code požiada o inštaláciu Git for Windows. Stiahni ho z https://git-scm.com/downloads/win, nainštaluj (všade stačí klikať Next) a reštartuj Claude appku.
2. Vytvor si účet na Verceli
Choď na https://vercel.com a zaregistruj sa, najrýchlejšie cez GitHub alebo Google. Bezplatný Hobby plán stačí, kreditku nepýta.
Tu bude tvoja appka bežať a odtiaľto dostaneš odkaz, ktorý budeš môcť poslať komukoľvek.
3. Pripoj Vercel do Claude
V Claude appke klikni na tlačidlo + pri okne, kde píšeš správy, choď do Connectors, nájdi Vercel a klikni Connect. Otvorí sa prehliadač, kde prihlásenie potvrdíš.
Vďaka tomu Claude vidí tvoje projekty na Verceli, vie kontrolovať, či sa appka správne nahrala, a vie si prečítať chyby, keď niečo zlyhá.
Dôležité: samotný connector na celý proces nestačí. Nevie vytvoriť databázu ani nastaviť prístupové heslá k nej. Tie kroky sa robia cez Vercel CLI, čo je nástroj, ktorý sa ovláda príkazmi. Ty s ním robiť nič nemusíš, skill ho použije sám a stiahne si ho automaticky. Spomínam to preto, aby ťa neprekvapilo, keď uvidíš, že Claude okrem connectora používa aj príkazy.
4. Stiahni a nainštaluj skill
Stiahnutý súbor rozbaľ. Dostaneš priečinok vlastna-appka a v ňom súbor SKILL.md.
Nainštalovať sa dá dvoma spôsobmi, vyber si ten, ktorý ti je príjemnejší.
Spôsob A: nech si to nainštaluje Claude sám
Toto je najjednoduchšie. Otvor si v Claude appke sekciu Code, začni novú session v hocijakom priečinku, pretiahni doň stiahnutý zip súbor a napíš:
Nainstaluj mi tento skill do ~/.claude/skills
Claude ho rozbalí a uloží tam, kam patrí.
Spôsob B: ručne
Rozbalený priečinok vlastna-appka presuň sem:
- Mac: v Finderi stlač
Cmd + Shift + G, napíš~/.claude/skillsa potvrď - Windows: do adresného riadku v Prieskumníkovi napíš
%USERPROFILE%\.claude\skills
Ak taký priečinok neexistuje, vytvor ho.
Výsledok musí vyzerať takto: .claude/skills/vlastna-appka/SKILL.md
Overenie
Zavri Claude a otvor ho znova. Potom v sekcii Code napíš lomítko a začni písať vlastna. Ak sa ti v ponuke ukáže /vlastna-appka, máš hotovo.
Reštart je dôležitý hlavne vtedy, ak si priečinok skills vytváral prvýkrát. Claude ho hľadá pri štarte.
Malá poznámka na okraj: v nastaveniach Claude na webe je tiež sekcia na nahrávanie skillov, ale tá platí pre bežný chat, nie pre sekciu Code. Pre tento návod potrebuješ tú cestu vyššie.
5. Priprav si priečinok pre appku
Na ploche si vytvor nový prázdny priečinok, napríklad moja-appka. V Claude appke choď do sekcie Code, otvor novú session a vyber v nej tento priečinok.
Tu bude appka vznikať.
6. Spusti skill
Do okna napíš:
/vlastna-appka
A teraz to najdôležitejšie z celého návodu.
7. Prvá otázka rozhoduje o všetkom
Claude sa ťa ako prvé spýta, o čom má appka byť. Nedá ti možnosti na výber, chce, aby si to napísal vlastnými slovami. To je zámer.
Napíš toho čo najviac. Desať viet, dvadsať, koľko vládzeš. Nesnaž sa to skracovať ani formulovať technicky. Toto je jediný moment, kedy vieš ovplyvniť, či dostaneš appku presne pre seba, alebo generickú appku, aká sa dá spraviť z jednej vety.
Keď napíšeš "appka na úlohy", dostaneš zoznam úloh, aký si videl už stokrát.
Keď napíšeš, komu to je, čo ťa na dnešnom riešení hnevá, čo tam človek spraví ako prvú vec po prihlásení, čo tam bude vidieť o týždeň a čo by ťa naštvalo, keby to appka nevedela, dostaneš niečo, čo naozaj používaš.
Ak nevieš, kde začať, opri sa o tieto otázky:
- Pre koho to je a čo ten človek robí dnes namiesto toho
- Čo ťa na tom najviac hnevá
- Čo tam človek spraví hneď po prihlásení
- Čo tam uvidí o týždeň, keď to používa denne
- Čo by ťa naštvalo, keby to appka nevedela
- Používaš to na mobile v ruke alebo na počítači
Potom sa ťa Claude bude ešte chvíľu vypytovať. Na detaily k tomu, čo si napísal, na to, čo sa má ukladať, na dizajn, na appky, ktoré sa ti páčia, na náladu, farbu a názov. Ber to vážne, tento rozhovor je celá príprava.
Na záver ti napíše zadanie a spýta sa, či sedí. Kým nepovieš áno, stavať nezačne. Toto je posledný moment, kedy sa dá lacno niečo zmeniť, tak si to prečítaj poriadne.
8. Čo ti postaví
Keď zadanie schváliš, Claude už maká sám. Ide v tomto poradí:
- Dizajnový systém. Písma z Google Fonts, vlastná farebná škála, zaoblenia, tiene, rozostupy, animácie. Až potom sa stavia čokoľvek viditeľné.
- Landing page. Hero s nadpisom, ukážka appky, sekcia s tým, čo rieši, ako to funguje, odpovede na časté otázky, pätička.
- Účty. Registrácia, prihlásenie, odhlásenie, chránená časť len pre prihlásených.
- Onboarding. Sprievodca na pár krokov, ktorý appku prispôsobí a rovno v nej vytvorí prvý reálny záznam, aby si nespadol do prázdnej obrazovky.
- Samotná appka. To, čo si opísal.
- Nastavenia a doladenie: prázdne stavy, načítavanie, chybové hlášky, mobil, prístupnosť.
Skill má v sebe aj zoznam vecí, ktoré má zakázané robiť. Fialové gradienty, anglické marketingové frázy, výplňový text, emoji namiesto ikon, nezmenený default vzhľad komponentov. Presne tie veci, po ktorých je na prvý pohľad vidieť, že appku klepla AI.
9. Nasadenie na internet
Toto si spraví Claude tiež sám. Prihlási ťa do Vercelu (otvorí sa ti prehliadač, len potvrdíš), vytvorí projekt, vytvorí databázu na Neone a pripojí ju, nastaví prístupy, vytvorí tabuľky a appku nasadí.
Potom si na živej adrese sám overí, že sa dá zaregistrovať, prejsť onboardingom a appku používať. Testovací účet po sebe zmaže.
Na konci dostaneš odkaz na svoju appku. Ten už môžeš poslať komukoľvek.
10. Ako si appku vylepšíš
Žiadny zložitý postup. Otvoríš si ten istý priečinok v sekcii Code a napíšeš, čo chceš zmeniť:
Pri úlohách chcem aj termín a nech mi zvýrazní tie po termíne.
Claude to naprogramuje a znova nasadí na tú istú adresu. Ty nerobíš nič technické.
Časté otázky
Je to naozaj zadarmo? Hosting na Verceli aj databáza na Neone áno, na bezplatných plánoch. Platíš iba Claude, sekcia Code je od Pro plánu.
Ako dlho to trvá? Rozhovor desať až dvadsať minút, podľa toho, koľko toho napíšeš. Stavba a nasadenie potom väčšinou pol hodiny až hodinu, podľa veľkosti appky.
Nie sú takéto appky deravé? To je oprávnená obava, pri appkách naklikaných cez AI nástroje sa to stáva. Skill preto stavia prihlasovanie cez better-auth, teda poriadnu overenú knižnicu, a má v sebe pravidlo, že prístup k údajom sa kontroluje na serveri pri každom čítaní aj zápise, nie iba schovaním tlačidla. Ak appku plánuješ dať von medzi ľudí, aj tak si na ňu daj spraviť bezpečnostnú kontrolu.
Čo keď niečo spadne? Skill má na konci zoznam najčastejších problémov aj s riešeniami a Claude ich vie odchytiť sám. Keď sa zasekneš, napíš mu jednoducho, čo vidíš.
Môžem si skill upraviť?
Pokojne, je to obyčajný textový súbor. Otvor si SKILL.md a prepíš, čo chceš. Napríklad zoznam zakázaných vecí alebo poradie stavby.
Chceš si skill najprv prečítať?
Celý jeho text je otvorený, nič v ňom nie je skryté: pozri si SKILL.md
Ak ho radšej vytvoríš ručne než zo zipu, stačí založiť priečinok vlastna-appka, v ňom súbor SKILL.md, vložiť doň tento text a priečinok presunúť podľa kroku 4.