Vibe coding česky: kompletní průvodce pro netechničku

Ahoj holky. Když jsem před rokem řekla klientkám, že si postavím vlastní web bez agentury a bez programátora, koukaly na mě jako na blázna. „Vždyť to nezvládneš, to je pro programátory." Zvládla jsem. A dnes vám ukážu jak. Říká se tomu vibe coding a je to nová cesta, jak si postavit funkční web s AI, i když jsi netechnička.

Co je vibe coding česky

Vibe coding = tvoříš web (nebo aplikaci) tím, že AI popíšeš vlastními slovy, co chceš. Ne kód. Ne šablonu z Wixu. Prostě slovy. AI (u mě Claude) ti postaví celou stránku, upraví ji podle tvé zpětné vazby, a když se ti něco nelíbí, řekneš to a AI to opraví.

Jméno „vibe coding" pochází od Andreje Karpathyho (bývalý šéf AI v Tesla), který popisoval jak on sám programuje s AI: „jenom cítím vibe a mluvím s AI." A přesně tak to funguje pro netechničku. Necítíš syntax, cítíš, co chceš, aby web dělal. AI zbytek zařídí.

Proč to funguje i pro tebe (netechničku 40+)

Nemusíš umět HTML. Nemusíš rozumět CSS. Nemusíš vědět, co je JavaScript. Musíš umět jen tři věci:

1. Popsat, co chceš. „Chci web pro moje bistro. Nahoře fotka, dole rezervační formulář, informace o menu."
2. Ukázat inspiraci. Přiložíš screenshot jiného webu, který se ti líbí. AI podle něj postaví ten tvůj.
3. Říct, co upravit. „To tlačítko je moc velké. Menu ať je fialové."

To je vše. Programování dělá Claude. Ty děláš rozhodnutí. Cca jako když si necháváš stavět dům. Nemíchá cement architekt, ale říká zedníkům, co má vzniknout.

Co potřebuješ začít

Nástroje (celkem cca 500 Kč):

• Claude Code od Anthropic. Placené (dá se i free, ale s limitem). Cca 500 Kč měsíčně za Pro plán, který stačí.
• Notebook. Jakýkoli. Já mám MacBook, funguje to i na Windows.
• Doména. Kupuješ jednou, cca 200 Kč rok (bh-jméno.cz atd.).
• Hosting. Doporučuju Railway nebo Vercel. Zadarmo do začátku (pro malý web).

Čas: Reálně 3 dny, když děláš vedle jiné práce. Intenzivně 8-12 hodin celkem. Není to sprint. Dělej to postupně.

Co NEpotřebuješ: IT vzdělání, angličtinu (Claude umí česky), programátorské zkušenosti, agenturu za 30 000 Kč.

Krok 1: Rozhodni téma webu (30 minut)

Ještě před tím než pošleš Claude první zprávu, si napiš na papír:

• Pro koho web dělám? (Klientky pro focení? Hosté pro bistro? Studentky pro kurz?)
• Co má web dělat? (Ukázat menu? Rezervovat termín? Prodat kurz? Sbírat kontakty?)
• Jak má vypadat? (Elegantní feminine? Rustikální? Minimalistický? Najdi si 3 weby, co se ti líbí.)

Tenhle krok holky obvykle přeskočí a pak pár dní ztratí, protože Claude „nedělá to, co chci." Claude dělá to, co mu popíšeš. Když popíšeš nejasně, dostaneš nejasný web.

Krok 2: Řekni Claude, co chceš (2 hodiny)

Otevři Claude Code a napiš první zprávu. Přesně toto jsem napsala pro Šárovo bistro:

„Ahoj Claude. Chci postavit web pro bistro v malém městě (Šárov). Cílovka jsou místní lidi, kteří tam chodí na oběd nebo poslední kávu odpoledne. Web má mít:

1. Homepage s velkou fotkou bistra a nadpisem "Šárovo bistro - poctivé jídlo a káva"
2. Sekci "Dnešní menu" (statická, budeme aktualizovat 1× týdně)
3. Rezervační formulář (jméno, telefon, počet lidí, čas)
4. Kontakt (adresa, otevírací doba, telefon)

Design: teplé barvy (krémová, terracotta), font jako v editorial magazínu. Bez modré, bez neonů. Přiložím screenshot 2 webů, co se mi líbí (jeden vinný bar, jeden malá kavárna).

Použij Next.js + Tailwind. Pusť dev server, ať vidím výsledek."

A Claude začal pracovat. Za 15 minut mi ukázal první verzi. Otevřela jsem si ji v prohlížeči na localhost:3000. Bylo to skoro to, co jsem chtěla. Skoro.

Krok 3: Iteruj (celkem cca 8 hodin za 2-3 dny)

Tady se to stává reálné. První verze nikdy není finální. Řekneš Claude, co upravit. On to udělá. Znovu se koukneš. Řekneš další věc.

Konkrétní iterace, které jsem dělala pro Šárovo bistro:

1. „Nadpis je moc velký. Zmenši na půl."
2. „Fotka bistra je vzhůru nohama. Otoč ji."
3. „Rezervační formulář ať má tlačítko "Rezervovat" místo "Odeslat"."
4. „Přidej sekci "O nás" nad kontakt. Napiš tam odstavec o historii bistra (informace ti pošlu za chvíli)."
5. „Menu ať se dá aktualizovat z admina, aby to nemusela paní za pultem měnit v kódu."

Každou iteraci Claude zvládne za 3-10 minut. Ty mezitím děláš čaj, koukáš na Insta, cokoli. Pak se vrátíš, koukneš, další věta. Celkem jsem tak strávila za 2 dny cca 8 hodin. Byla to práce, ale méně stresu než 30 hodin v Photoshopu.

Krok 4: Nasaď (2 hodiny)

Když je web hotový, potřebuješ ho dostat na internet. Pro tebe (netechničku) je nejjednodušší Vercel nebo Railway. Řekneš Claude:

„Nasaď to na Vercel. Doména bude sarovo-bistro.cz, kterou jsem koupila na WEDOSu. Nastav SSL a přesměruj www → non-www."

Claude ti řekne přesně, co udělat. Kde kliknout, jaké klíče vygenerovat, jak nastavit DNS. Během 2 hodin (většina času je čekání na DNS propagaci) je web živý.

Reálný příběh: Šárovo bistro

Web pro Šárovo bistro (bratrovo bistro v malém městě) jsem postavila za 3 dny. Kompletně. Bez agentury, bez programátora. Rezervační formulář funguje, menu se dá aktualizovat, Google si to našel do 2 týdnů. Bistro dnes bere rezervace přímo z webu.

Kdybych to dala agentuře, cena by byla 30 000 - 60 000 Kč (mínimum). Rezervační systém jako Reservio dalších 500 Kč měsíčně. Za rok dohromady 36 000 - 66 000 Kč. Reálně jsem stála ~1 000 Kč (Claude Pro subscription za měsíc + doména + hosting free).

Kompletní příběh videem: Vibe coding funguje. Web s Claude AI bez programování

Chyby, kterých se vyhnout

Chyba 1: Nedostatek popisu. Když napíšeš Claude jenom „udělej mi web pro bistro," dostaneš generic web. Popiš přesně, co web má dělat, komu je určený, jak má vypadat.

Chyba 2: Neschválené design bez inspirace. Ukaž Claude 2-3 weby, které se ti líbí. Screenshoty stačí. On je nevidí, ale ty popíšeš, co se ti na nich líbí.

Chyba 3: Chtít vše naráz. Postav nejdřív homepage. Až funguje, přidej rezervace. Až funguje, přidej menu. Když chceš vše naráz, Claude se ztratí.

Chyba 4: Nedávat zpětnou vazbu. První verze nikdy není finální. Řekneš, co změnit, Claude to udělá. Neboj se říct „to je špatně, uděl to jinak."

Chyba 5: Nepoužívat český jazyk. Claude umí česky. Nemusíš anglicky. Piš normálně, jak mluvíš.

Co když se zaseknu?

V Marcelin dílně máš 7 dní zdarma na zkoušku. Uvnitř najdeš:

• Recepty krok za krokem pro každou typickou situaci (web pro bistro, web pro ateliér, web pro konzultace)
• Střední Q&A každou středu 17:30, kde odpovídám na tvoje otázky přímo
• Komunita žen, které to jdou stejnou cestou
• Archiv webinářů ke sledování

Co dál číst

• Šárovo bistro case study: web za týden krok za krokem
• Google tě nenajde? 3 chyby webu (a jak je opravit sama)
• Jak začít s AI bez angličtiny (pilíř)
• Claude Code česky: asistentka na desktopu

Píše Marcela Kramářová, fotografka a AI konzultantka. Provozuje BabičkaHackuje.cz a Fotoatelier-Brno.cz. Bez IT vzdělání, přesto sama postavila 4 weby s Claude AI.