Babičkahackuje
← Zpět na všechny návodyTvorba webuČlenství

Web pro bistro / restauraci / kavárnu — s Claude za pár dní

5-krokový postup, kterým si sama postavíš profesionální web pro bistro. Testováno na Šárovo bistro. Analýza klienta, brand identita, wireframe, design, deploy.

9 kroků · 8-14 h aktivní práce (rozděleno na 3-4 dny)
9 kroků
2 Claude Skilly do kódu

Takhle bude tvůj web vypadat

Náhled — Šárovo bistro

Tenhle web jsem postavila podle tohohle návodu. Tvůj bude vypadat jinak — jiná paleta, jiné fotky, jiný obor. Ale postup je stejný.

Náhled webu: Web pro bistro / restauraci / kavárnu — s Claude za pár dní

K návodu získáš + do svého kódu si uložíš

Claude Skilly — technické balíčky.

Během návodu si tyhle balíčky zkopíruješ do svého projektu (do složky .claude/skills/). Claude si je pak sám najde a použije, když ho o něco požádáš. Zůstanou u tebe navždy — použiješ je i na další projekty.

/zabezpeceni-webu

Bezpečnostní audit — 8-bodový hardening playbook

Claude sám uhlídá CSP nonce, HSTS, Stripe webhook, JSON-LD PII, Turnstile, security.txt. Nikdy neuděláš díru.

/seo-google-novy-web

SEO/GEO playbook — 6 fází od GSC auditu po týdenní report

Claude vede SEO za tebe: audit → pivot niche → pillar články → re-optimalizace title/meta → FAQ schema → Indexing API.

Tenhle Skill je Marcelin kompletní postup pro tvorbu webu bistra / kavárny / restaurace. Testovala jsem ho na Šárovo bistru (rodinné bistro na cyklostezce Praha–Karlštejn) — od úplné nuly ke funkčnímu webu na produkci za pár dní.

Není to o tom, aby AI vyplivla generický web. Je to o tom, jak vést AI koučovacím způsobem — cíl → vize → dovednosti krok po kroku. Přesně tak, jak sama postupuju s klientkami při koučování.

Co budeš umět

- Analyzovat svého klienta (persony, bolesti, cíle) přes Claude prompt - Nechat si Claudem navrhnout brand identitu (barvy, plochy, typografii) na míru oboru — s inspirací z Dribbble - Vytvořit strukturu webu s texty pro každou sekci - Rozhodnout se, kudy budeš mluvit s Claudem (claude.ai chat v prohlížeči, Cursor, nebo Claude Code) - Deployonout web přes Claude Code + Next.js (Railway / Vercel — máš na výběr)

Pro koho je

Fotografka, podnikatelka, konzultantka nebo živnostník, který chce vytvořit web pro klienta / rodinu / kamarádku a nechce platit agentuře desítky tisíc korun. Nebo si tvoří vlastní web.

Nemusíš umět programovat. Musíš umět mluvit česky s Claudem.

Kroky návodu

Co konkrétně budeš dělat.

Náhled kroků. Plný obsah — Claude prompty, checklisty, doplňující otázky pro Claude — je v Členství.

1

Průzkum klienta a trhu — persony, cílovka, konkurence

60-90 min · doptávání v chatu
+
Základ všeho. Claude ti udělá marketingový průzkum jako profík: 3-5 person klientů (kdo, věk, kde bydlí, co je trápí), analýzu konkurence (co dělají líp/hůř), cílovku (koho chceš přitáhnout, koho ne). Doptáváš se v chatu, dokud nemáš jasno. Bez tohohle kroku dál nechoď — brand ani stránky pak nemají koho oslovit.
2

Brand identita — logo, barvy, typografie (Everbot když nemáš logo)

30-45 min
+
Když nemáš vlastní logo/brand, Everbot ti vygeneruje první návrh. Pak s Claudem doladíš barvy, plochy, typografii na míru oboru + Vision workflow: najdeš 3-5 referenčních webů (Dribbble, Behance, konkurence), Claude vytáhne hex barvy, fonty, layout. Nebudeš mít generickou modrou od AI.
3

Wireframe struktura + texty

45 min
+
Claude ti navrhne sekce webu (Menu, Rezervace, O nás, Otevírací doba, Kontakt) s hotovými texty šitými na klientovu personu a bolesti z kroku 1. Nemusíš vymýšlet, jen si to přizpůsobíš.
4

Postavení webu s Claudem — 3 cesty

2-3 h
+
Postavíš funkční web v Next.js. Máš na výběr, kudy s Claudem mluvíš: claude.ai v prohlížeči (nic neinstaluješ), Cursor (Claude sám píše do souborů), nebo Claude Code (pro pokročilé). Ke každé cestě přesný postup. Nemusíš rozumět kódu — vibe coding = mluvíš, on píše.
5

Nasazení na doménu a hosting

1-2 h
+
Web na internetu, aby ho klientky viděly. Doména z Wedosu (190 Kč/rok), hosting Railway (120 Kč/měs) nebo Vercel (zdarma) — vybereš podle typu webu. HTTPS a mobilní verze automaticky.
6

Dashboard pro klienta — sám si spravuje web

2-3 h
+
Bráchovi (nebo tvému klientovi) postavíš vlastní admin: přihlášení, nahrávání fotek přes drag&drop, editace jídelníčku, nápojáku, denní nabídky, otevírací doby, rezervací. Veškerá komunikace k webu na jednom místě. Nemusíš mu psát, když chce něco změnit — udělá to sám z mobilu. Marcelin postup přímo ze Šárova bistra.
7

Bezpečnost + smoke testy — ať to nikdo neshodí

1-2 h
+
Reuse Marcelina playbooku /zabezpeceni-webu (8 bodů: CSP, HSTS, Turnstile, security.txt, GDPR PII…) + smoke testy Playwrightem (klíčové cesty svítí zeleně před každým pushem) + Marcelina 3-otázková brzda: Otestoval jsi? Smoke prošly? Otevři jako klientka. Bez toho ti klientovi web spadne první týden a přijdeš o důvěru.
8

Anglická verze webu + přeložený jídelák a nápoják

1-2 h
+
Bistro na cyklostezce = turisti. Claude ti přeloží celý web do angličtiny, včetně jídelníčku, nápojáku a denní nabídky. Nastavíš přepínač jazyků (CZ/EN), Claude si zapamatuje slovníček oboru (např. ‚svíčková‘ jde jako ‚Beef sirloin with cream sauce‘, ne generický překlad). Brácha v dashboardu edituje česky, angličtina se generuje automaticky.
9

Předání klientovi + údržba

30 min · pak měsíčně
+
Napojíš klientův e-mail na notifikace, ukážeš mu jeho dashboard (jak nahrát fotku, jak změnit menu, jak zveřejnit denní nabídku), dáš mu jednoduchou paměťovku pro časté úpravy. Pak měsíční check: bezpečnostní audit, Google indexace, Lighthouse mobil. Ne fire-and-forget — vztah, ne projekt.
Otevřít celý návod v Členství

7 dní zdarma · 490 Kč/měs · kdykoli zrušíš

Chceš tenhle návod aplikovat na svůj projekt?

Přihlas Členství (7 dní zdarma), otevři si všechny kroky s hotovými Claude prompty a začni.