Vibe coding
Pilíř A · Koncept 02
3 min čtení

Přehled nástrojů a co každý dělá

Vibe coding a vývoj aplikací obecně se skládá z interakce mezi několika typů nástrojů. Tady je mapa „kdo dělá co", abys neztratil přehled, když narazíš v některém workshopu na jméno nástroje, který jsi ještě neviděl.

AI služby (mozek operace)#

Nástroje, se kterými konverzuješ. Generují kód, design, text, návrhy.

  • Claude (Anthropic) — hlavní AI v NMS - klasický Claude v prohlížeči/aplikaci, default volba pro promptování, brainstorming a delší úlohy. Aktuálně Claude Opus 4.8, Sonnet
  • ChatGPT (OpenAI) — širší ekosystém, GPT-5.5, Codex CLI součástí placeného plánu.
  • Gemini (Google) — solidní alternativa, výborná pro multimodální (obrázky, video).

V tomto průvodci se primárně používá Claude, ale principy jsou přenositelné.

Vibe coding platformy#

Online nástroje, které z promptu generují kompletní webovou aplikaci. Platformy běží v prohlížeči a obvykle mají integrovaný hosting. Často bude v průvodci zmíněno Lovable jako synonymum pro Vibe coding platformy, přestože jde jen o jednu z podobných služeb.

Plný přehled je v kapitole Vibe coding platformy.

Claude Code#

Samostatný produkt od Anthropic - šikovnější sourozenec klasického Claude - konverzačního chatbota. Claude code je schopen přímo upravovat existující soubory i mimo izolované okno jedné konverzace. Klasický Claude jak ho známe je schopen také napsat krátký kus kódu, který si můžeme klidně stáhnout. Není schopen ale zasahovat do existujících věcí a v nich dělat úpravy. To umí Claude Code.

S Claude Code se dnes setkáme v několika variantách:

  • v prohlížeči
  • v desktop aplikaci Claude
  • jako rozšíření ve VS code
  • přímo v terminálu

GitHub - paměť projektu#

GitHub je služba, která umožňuje uchování tvého kódu v cloudu. I když přijdeš o počítač, pokud máš projekt na GitHubu, je kód v bezpečí. Kromě jiného GitHub umožňuje verzování kódu a případné vracení se zpět v čase do předchozí verze (pokud se např. nějaká úprava nepovede, pomocí pár kliknutí dostaneme projekt opět do funkčního stavu).

Kromě výše uvedeného funguje GitHub jako uzel či most mezi ostatními nástroji. Je integrovaný do Vibe coding platforem, poskytovatelům hostingu, komunikuje s ním Claude Code apod.

V základní verzi se s GitHubem komunikuje prostřednictvím příkazů v příkazové řádce. Pro začátečníky je ale uživatelsky přívětivější počítačová aplikace, která umožňuje spravovat kód bez nutnosti práce s terminálem - je to GitHub Desktop — desktopový klient pro klikání místo příkazové řádky.

VS Code#

bezplatný nástroj pro editaci kódu, de facto standard mezi vývojáři po celém světě. Funguje tak, že si otevřeš složku se svým projektem (=repozitář na GitHub), ve VS Code můžeš přepínat mezi jednotlivými soubory projektu a dělat v nich úpravy. Kromě jiného je v editoru integrovaný tzv. terminál - ten využiješ např. pro lokální testování tvého kódu.

Sám o sobě AI nemá, ale je možné nainstalovat rozšíření Claude Code, Codex i další.

Databáze (kam se ukládají data)#

Pokud pracuješ na komplikovanějších projektech, jejichž součástí je práce s daty (vkládání, úprava a mazání záznamů), u kterých je potřeba, aby byla dostupná napříč zařízeními, je potřeba řešit databázi. V dnešní době existuje řada cloudových služeb, kde si uživatel vytvoří vlastní databázi během pár kliknutí a zdarma. Vibe coding platformy umožňují napojení na databáze nativně - ty nemusíš vůbec opustit platformu. Pro začátek a menší projekty je to nejpohodlnější cesta.

Konkrétní postup a možnosti databází budou popsány v samostatném článku.

Hosting (kde aplikace běží)#

Hosting umožňuje publikovat tvůj projekt veřejně na web - aby byl dostupný odkudkoliv. Bez hostingu se k aplikaci dostaneš pouze ty na svém počítači. Dnes existuje několik služeb, které hosting nabízejí v základním rozsahu zdarma.

Detaily budou v samostatném článku.

Doména (adresa pro lidi)#

Abys dostal svůj projekt na "hezkou" adresu, potřebuješ si koupit doménu (=např. learnvibe.eu) - bez koupě domény je možné hostovat na free doménách hosting poskytovatelů - pak ale adresa tvého projektu bude vypadat něco jako projektabc.webnode.cz

Registrátoři: Wedos, Forpsi, Active24 (české), Cloudflare Registrar, Namecheap (zahraniční levné).

Detaily budou v samostatném článku.

Integrace (co dál umíš přidat)#

Až bude aplikace stát, typicky budeš chtít:

Vizualizace#

flowchart LR
  Idea([Nápad]) --> AI[AI služby<br/>Claude / ChatGPT]
  AI -->|prompt| Platform[Vibe coding<br/>platforma]
  Platform --> Repo[GitHub repo]
  Repo --> Editor[Editor s AI<br/>Claude Code / Codex]
  Repo --> Hosting[Hosting<br/>Vercel / Lovable]
  Hosting --> Domain[Vlastní doména]
  Repo --> DB[(Databáze<br/>Supabase)]
  Repo --> Integrations[Integrace<br/>Auth / Email / Platby / AI]

Každý uzel v té mapě je jeden nástroj, jedna kapitola, jedna část tvé pracovní plochy.