Šárovo bistro: jak jsem bratrovi u Berounky postavila web za týden přes vibe coding

Holky, dneska budu vyprávět příběh. O mém bráchovi, o cyklistech a o Googlu, kterému bylo úplně jedno, že u Berounky stojí bistro, kde vaří poctivý guláš a čepují Plzeň.

Můj brácha Petr má bistro. Přímo u řeky, hned vedle jedné z nejoblíbenějších cyklotras v Česku. Přes den kolem projede stovka kolařů. V sezoně stovky. A přesto Petr počítal každou korunu, protože přes internet ho nikdo nenacházel. Ti, co ho znali z okolí, chodili dál. Ti, co jeli z Prahy na kole, projeli kolem a nevěděli, že o padesát metrů dál mají poctivé jídlo.

Popíšu ti, co jsme za týden udělali. A hlavně proč jsme šli právě přes vibe coding s Claude, ne přes klasického ajťáka nebo přes Wix. Bude to poučný příběh, kterým si tvůj podnik možná projde taky.

Bratr měl web, ale Google ho nenacházel

Petr přišel na začátku léta a řekl mi, že má problém. Bistro je otevřené, jídlo vaří, hosté ho chválí v Google recenzích, ale nových lidí přichází málo. „Marcelo, mám tam web, platím za něj, ale nikdo nás nenajde. Kamarád mi to zkoušel vygooglit z Prahy a nezobrazilo se to."

Znala jsem ten problém. Ne jednou. Napsala jsem k tomu i samostatný článek o tom, proč Google často Wix weby přehlíží a co s tím dělat. Ale u Petra to bylo o něco horší. Jeho starý web nebyl jen „vlažný" pro Google. Byl to statický jednoduchý web z volné šablony, který neuměl nic. Neuměl responsivní menu na mobilu (a cyklisté na kole mají v ruce hlavně mobil, ne notebook). Neuměl otevírací hodiny podle dnů. Neuměl ani ukázat fotky jídla, které Petr denně vaří.

V tu chvíli jsem musela rozhodnout. Buď mu spravím ten starý web, nebo mu postavíme nový. Rozhodla jsem se pro nový.

Proč nový web, ne oprava starého

Petrův případ byl jasný. Web už na konci své životnosti nebyl. Chyběla funkcionalita, kterou moderní bistro potřebuje.

Konkrétně:

• Denní menu. Petr chce každý den ukázat nabídku dne. Cyklista přijede unavený, chce vědět, co bude k obědu, než sesedne z kola.
• Fotky jídla. Guláš, cibulačka, grilované makrely, bramboráčky. Bez fotek to nefunguje. Cyklista se rozhodne podle obrázku.
• Otevírací hodiny podle dnů. V týdnu jinak, o víkendu jinak (od devíti ráno kvůli snídaním). Statický web to nezvládá.
• Mapa a doprava. Cyklista musí okamžitě vidět, kde bistro je a jak k němu z hlavní cyklostezky odbočit.
• Google Business Profile propojený s webem. Otevírací hodiny, adresa, recenze, kategorie, všechno musí sedět.
• LocalBusiness schema.org. Bez toho Google nezařadí bistro do lokálního indexu a nebude ho zobrazovat v Google Mapách.

Kdybych opravovala starý web, tohle všechno bych musela doprogramovat. Trvalo by mi to skoro stejnou dobu jako postavit nový. A nový bude držet dalších pět let bez nutnosti údržby.

Co je vibe coding s Claude

Tady začíná moje oblíbená část. Vibe coding je způsob práce, který jsem si za posledních dvanáct měsíců zamilovala. Diktuju do Claude česky, co chci mít, a Claude mi to postaví. Ne z volné šablony. Vlastní kód, přesně pro Petrovo bistro.

Konkrétně vypadal začátek takhle. Sedla jsem k počítači a napsala Claudovi:

„Bráchovo bistro u Berounky. Cyklisté, rodiny, místní. Klasická česká kuchyně: guláš, cibulačka, grilované ryby, hranolky u řeky. Otevřeno každý den, o víkendu od devíti. Chci web, který ho najde cyklista na cestě z Prahy. Jasné menu s fotkami. Otevírací hodiny podle dnů. Google mapa. Kontakt. Rezervace přes zprávu. Design teplý, přírodní, u vody, ne studený minimalismus. Cormorant serif pro nadpisy, pískově krémové pozadí."

A Claude začal stavět. Za hodinu jsem měla první verzi hlavní strany, kterou jsem s Petrem procházela. On mi říkal, co se mu líbí a co ne. Já jsem to říkala Claudovi zpátky česky. Claude opravoval. Nemusela jsem znát HTML, CSS ani React. Diktovala jsem hlasem přes Willow (můj oblíbený nástroj na české diktování Claudovi), Claude tvořil.

Neděla to jsou umělkyně jako Petruška z Holzmoode nebo bratr Petr sami. Vibe coding je způsob, jak si najít technického partnera bez toho, aby ses ho naučila najímat. Claude je ten technický partner. Já jsem produktová manažerka. Klient je klient. Trojúhelník, který funguje.

Postup krok za krokem

Pro tebe, kdo přemýšlí, jak by ses do toho pustila sama nebo jestli si mě máš najmout, ti řeknu, jak to celé vypadalo.

Den 1: Brief a wireframe

Poslouchala jsem Petra hodinu u kávy. Co bistro dělá, komu vaří, co chce dosáhnout. Poslouchala jsem, ne prezentovala. Sepsala jsem si to a diktovala Claudovi zadání. Claude mi za pár minut vygeneroval strukturu webu, jaké stránky bude mít, co bude na hlavní straně.

Den 2 a 3: Hlavní strana

Hero foto s cyklistou u řeky (natočila jsem si ho z Petrových fotek). Nadpis „Šárovo bistro u Berounky". Podnadpis „Poctivé jídlo přímo na cyklotrase". Denní menu box, který si Petr sám aktualizuje. Rychlé kontaktní info. Diktovala jsem Claudovi vzhled a barvy. Cormorant serif pro nadpisy, aby to sedělo na letní vodní atmosféru. Sytá terracotta jako akcent (barva pálených cihel z ateliéru brácho, přenesená do webu).

Den 4: Menu a fotky

Menu jsem strukturovala jako JSON soubor, který Petr sám aktualizuje. Přidala jsem osmnáct jídel a nápojů se stručnými popisy, které mi Petr diktoval. Fotky jídla jsem zpracovala v AI retuši (moje standardní workflow) a zoptimalizovala pro rychlé načítání i na 4G připojení cyklisty.

Den 5: LocalBusiness schema, GBP, otevírací hodiny

Nejdůležitější SEO den. Přidala jsem strukturovaná data schema.org LocalBusiness, aby Google věděl, že je to restaurace, kde je, kdy má otevřeno a co vaří. Propojila jsem s Google Business Profile (Petr tam už měl profil, jen zanedbaný). Sladila jsem otevírací hodiny na obou místech, kategorii nastavila na „Bistro / česká kuchyně / u vody". Přidala jsem českou verzi sitemap.xml a poslala do Google Search Console.

Den 6: Kontakt, mapa, rezervace

Adresa, telefon, e-mail, Google mapa. Rezervační formulář, který posílá Petrovi zprávu do WhatsAppu (protože ten kontroluje průběžně, na e-mail se dostane až večer).

Den 7: Testování a spuštění

Kontrola mobilu (protože cyklista přijede s mobilem). Kontrola rychlosti. Kontrola SEO. Kontrola Google Business Profile. Petr si to prošel, schválil, spustili jsme.

Co jsme řešili technicky

Aby web fungoval, musel splnit několik technických podmínek, které by si laik nikdy nezajistil sám. Tady je vypíšu, aby ses orientovala:

• Vlastní doména (Petr ji už měl, jen web na ni ukazoval na starý hosting)
• Cloudflare CDN a HTTPS certifikát
• Optimalizace obrázků (fotky jídla ve WebP formátu, ne PNG)
• Lazy loading pod fold (rychlejší first paint)
• Meta tagy: title, description, Open Graph pro sdílení na Facebooku
• Structured data: LocalBusiness, Restaurant, Menu, OpeningHoursSpecification
• Sitemap.xml a robots.txt
• Google Search Console (property ověřená)
• Google Analytics 4 (aby Petr viděl, kdo chodí)
• Napojení na Google Business Profile

Tohle všechno Claude uměl. Já jsem mu jen říkala, co potřebujeme. On to napsal jako čistý kód, ne jako slepený z pluginů.

Co ukázaly první výsledky

Web spustil brácha na začátku července. Během prvních dnů jsem sledovala Google Search Console a Google Analytics. Co jsem viděla:

• Bistro se objevilo v Google Mapách pro dotaz „bistro u Berounky" a „obědové menu Beroun"
• První cyklistka napsala Petrovi přes rezervační formulář, že si našla bistro na Googlu, když jela z Prahy do Karlštejnu
• Web se načítá pod dvě sekundy i na 4G připojení
• Google Business Profile zobrazuje aktuální otevírací hodiny (dřív měl Petr zavřeno na obědě, což bylo špatně)
• Petr sám aktualizuje denní menu ze svého mobilu

To poslední je pro mě to nejdůležitější. Petr sám. Bez mého zásahu. Vibe coding neznamená, že klient je věčně závislý na developerovi. Znamená, že klient dostane přesně to, co potřebuje, a pak si to sám udržuje.

Co si z toho vezmeš pro sebe

Pokud provozuješ malý podnik, restauraci, ateliér, kavárnu, obchůdek, cokoli, tak si z tohohle případu vezmi tři věci.

1) Lokální SEO je pro tebe víc než globální. Ty nesoutěžíš s celou republikou. Soutěžíš ve svém městě, ve své oblasti, na své cyklotrase. Google Business Profile plus LocalBusiness schema.org je základ, který musíš mít. Bez toho tě Google nezařadí do místního vyhledávání a klientky projedou kolem.

2) Nový web není luxus, je to investice. Petr platil za starý web ročně několik tisíc korun a nic z toho neměl. Nový web mu vydělal peníze první týden. Pokud tvůj současný web nevydělává, není to jen ztráta peněz. Je to ztráta klientek, které nezískáš.

3) Vibe coding je cesta, kterou zvládneš i ty. Já jsem se před rokem nedokázala postavit ani jednoduchou stránku bez wixové šablony. Dnes stavím webové aplikace pro klienty. Ne proto, že bych se naučila programovat. Proto, že jsem se naučila diktovat Claudovi to, co chci. Ty to zvládneš taky. Podívej se na moje Recepty zdarma, kde ukazuju krok za krokem, jak s AI pracovat od nuly.

Časté otázky

Musím umět programovat, abych to zvládla?
Ne. Vibe coding s Claude znamená, že diktuješ česky, co chceš mít, a Claude to postaví. Musíš umět jen popsat, co chceš vidět a jak to má fungovat. Programování Claude umí za tebe.

Kolik za to platím Claudovi nebo AI?
Používám Claude Max, který stojí něco přes dva tisíce korun měsíčně. Za tu cenu si postavím prakticky cokoliv. Klientky by se ti mohly zdát velké peníze, ale je to zlomek toho, co bys platila klasickému developerovi za jeden web (běžně 50 000 až 150 000 Kč).

Co když se to celé nepovede a musíme začít znovu?
Vibe coding je hodně iterativní. Když se něco nepovede, Claude to během vteřin přepíše. Neinvestuješ týdny do jedné cesty. Zkoušíš, hodnotíš, měníš. Petrův web měl za týden pět verzí, než jsme se zastavili u té finální. Trvalo to jedno odpoledne rozhodování, ne měsíc přepisování.

Jak se to liší od Wix nebo Shopify?
Wix je šablona. Kolikrát ji upravíš, ona zůstane šablonou s omezeními. Vibe coding je vlastní kód od nuly. Uděláš přesně to, co potřebuješ, bez omezení, bez měsíčního poplatku šabloně. Hosting stojí pár set korun ročně.

Můžeš mi pomoct s webem přes vibe coding?
Ano, dělám to pravidelně. Napiš mi přes kontaktní formulář, popiš mi svůj podnik a co ti dnes web nedělá dobře. Domluvíme si půl hodiny na Zoom a řekneme si, jestli má smysl do toho jít.

Přečti si k tomu ještě

Pokud máš pocit, že tvůj Wix web ti nefunguje, ale nechceš zatím do nového, přečti si jak opravuju Wix weby na dálku. To je pro tebe, když máš ještě funkční šablonu a chceš z ní vytáhnout maximum.

Pokud tě víc zajímá, jak jsem se z fotografky stala i „vibe coderkou", přečti si moji cestu od fotoaparátu k AI. Dozvíš se, jak jsem se v padesáti pěti letech naučila stavět weby, aniž bych uměla anglicky nebo programovat.

Držím palce a těším se na tvůj příběh. Marcela.