Zpět na reference
BUILD//Kořínek Real//2025-01-31//12 min

Kořínek Real: Kompletní značka a web

Web za týden, 300 Kč/rok provoz
Kořínek Real: Kompletní značka a web

Petr Kořínek je realitní makléř. Jeden z tisíců. Prodává byty a domy v Brně, Prostějově a Vyškově - stejně jako desítky dalších v těchto městech.

A přesně tohle byl problém, který jsme řešili.


Od Sprintu k buildu

Tenhle projekt začal jako AI Sprint - čtyři hodiny intenzivní práce, kdy jsme hledali jak propojit práci realiťáka a umělou inteligenci, jak s těmito nástroji budovat osobní značku, získat výhodu před ostatními a hromady leadů. Ale když jsme viděli, kam to směřuje, rozhodli jsme se jít dál. Ze sprintu se stal kompletní build.

Co jsme vlastně budovali

Tohle nebyl projekt „uděláme web". Tohle byl projekt kompletní osobní značky:

  1. Strategie - Kdo je Petr? Čím se liší? Proč by si ho měl klient vybrat?
  2. Vizuální identita - Barvy, typografie, styl komunikace, design system
  3. Web - Místo, kde to všechno žije a pracuje pro něj 24/7

Tři rovnocenné části. Každá postavená na té předchozí. Žádnou nelze přeskočit.


Část 1: Osobní značka

Proč vůbec osobní značka?

Realitní trh je přesycený. Každý makléř má vizitky, každý má „profesionální přístup" a „individuální péči". Všichni říkají totéž, vypadají stejně, a klient si nakonec vybírá podle toho, koho mu doporučí tchýně.

Jenže osobní značka není logo a hezké barvy. Je to odpověď na otázku: Proč zrovna ty?

U Petra jsme tu odpověď hledali - a našli ji tam, kde bych ji sám nehledal. Ne v jeho zkušenostech nebo certifikátech, ale v jeho přístupu k lidem. V tom, jak mluví, jak vysvětluje, jak zvládá stres prodávajících.

Tohle je práce, kterou dělám už roky. Strategický marketing, budování značek, hledání toho, čím se člověk nebo firma odlišuje. Normálně bych s klientem strávil několik hodin rozhovorů, psal si poznámky, hledal vzorce v tom, co říká.

Ale tentokrát jsem měl jinou situaci.

Čtyři realiťáci, jedna místnost, dvě hodiny

Pracoval jsem v té době se čtyřmi realiťáky najednou. Doslova - seděli v jedné místnosti a já měl dvě hodiny na to, abych z každého z nich dostal základ osobní značky.

Čtyři různí lidé. Čtyři různé příběhy. Čtyři různé silné stránky. A já jediný.

Klasický přístup by nefungoval. Nemůžu vést čtyři hloubkové rozhovory paralelně.

Takže jsem vytvořil chatbota.

V ChatGPT jsem postavil asistenta, do kterého jsem nahrál:

  • Strukturu rozhovoru, který bych vedl já sám
  • Otázky na motivaci, hodnoty, na to co je baví a co ne
  • Návod, jak klást doplňující otázky
  • Šablonu výstupu - jak má vypadat návrh osobní značky

Každý z realiťáků dostal odkaz a začal „konverzovat" s botem. Já jsem chodil mezi nimi, pomáhal když někdo nevěděl jak odpovědět, vysvětloval kontext.

Po dvou hodinách měl každý z nich první návrh své osobní značky.

Proč to fungovalo lépe než klasický přístup:

  • Nikdo nečekal, až na něj přijde řada
  • Každý mohl přemýšlet vlastním tempem
  • Nikdo se necítil pod tlakem „živého" rozhovoru
  • Dostal jsem konzistentní strukturu od všech čtyř
  • A hlavně - lidi jsou překvapivě otevření, když mluví s botem

Výstup nebyl dokonalý. Ale byl to solidní základ, se kterým jsem pak pracoval dál - upravoval, zpřesňoval, hledal to, co v textu rezonovalo a co ne.

Tohle je pro mě esence toho, co dělám. Tech meets human. Technologie mi umožnila škálovat práci, která by jinak byla časově neúnosná. Ale finální rozhodnutí, úpravy, cit pro to co funguje - to jsem dělal já.


Část 2: Vizuální identita a prototyp

Když jsem měl Petrovu značku - jeho tón, jeho hodnoty, jeho diferenciátor - potřeboval jsem to převést do vizuálu.

Použil jsem Gemini Canvas k vygenerování statického webu. Popsal jsem, co chci - barvy, styl, strukturu. A pak jsem iteroval. Znovu a znovu, dokud design nezapadal do toho, co Petr reprezentuje.

Výsledkem byla hezká jednostránka. Moderní, responzivní, s Petrovým příběhem a kontaktem. A hlavně - s vizuální identitou, která je jeho. Barvy, typografie, ilustrační styl s ručně psaným fontem pro akcenty.

Pro většinu lidí by tohle stačilo. Hodit na hosting, připojit doménu, hotovo.

A upřímně - kdyby Petr nebyl kamarád a kdyby neměl větší ambice, skončili bychom tady. Hostuju podobné statické stránky na Váš Hosting, kde to stojí pár stovek ročně a funguje to spolehlivě. (Je to affiliate link - pokud se na základě tohoto článku rozhodnete tam jít taky, použijte ho prosím.)

Ale Petr chtěl víc. A já jsem chtěl zkusit, kam až to můžu dotáhnout.


Část 3: Produkční web

Proč WordPress přestal stačit

Roky jsem dělal weby na WordPressu. Je to klasika - obrovská komunita, tisíce šablon, plugin na všechno.

Jenže právě to „plugin na všechno" se postupně stalo problémem.

Chci kontaktní formulář? Plugin. Chci galerii? Plugin. Chci SEO? Plugin. Chci rychlejší načítání? Plugin. A najednou mám web s dvaceti pluginy, které se navzájem bijí, potřebují aktualizace, a já trávím víc času správou infrastruktury než tvorbou obsahu.

A pořád nemůžu mít věci přesně tak, jak chci. Jsem limitovaný tím, co někdo naprogramoval. Každá úprava mimo šablonu znamená hrabat se v PHP kódu, který je starý dvacet let.

Hledal jsem alternativu už delší dobu. A tenhle projekt byl příležitost ji najít.

Enter Claude

Tady začíná ta zajímavá část.

Sedl jsem si ke Claude a řekl: „Potřebuju udělat web pro realitního makléře. Ne šablonu, ale něco, co bude opravdu fungovat. Co bys doporučil?"

A Claude udělal rešerši.

Prošel, co dělají nejlepší realitní weby. Jakou mají strukturu. Co funguje pro SEO. Jak řeší lead generation. Jaké technologie používají a proč.

Já jsem kontroloval, ptal se, diskutoval. Některé věci jsem zamítl, některé rozvedl. Ale základní strategická práce? Tu udělal Claude.

Výsledek rešerše:

Realitní web potřebuje:

  • Dynamické nabídky nemovitostí (které se mění)
  • Reference klientů (které přibývají)
  • Články a rádce (pro SEO a důvěryhodnost)
  • Lokální SEO stránky (pro každé město zvlášť)
  • Kalkulačky a nástroje (pro lead generation)
  • Rychlost a mobilní optimalizaci (Core Web Vitals)

Statická stránka z Gemini tohle neumí. Potřeboval jsem něco robustnějšího.

Technologie, které Claude vybral

Budu upřímný: O Next.js jsem před tímhle projektem nevěděl prakticky nic.

Claude navrhl tech stack a já mu důvěřoval. Ale ne slepě - nechal jsem si vysvětlit, proč právě tohle.

Next.js (framework)

React framework od Vercelu. Proč zrovna tohle?

  • Server-side rendering - stránky se generují na serveru, takže jsou rychlé a SEO-friendly
  • App Router - moderní způsob organizace kódu, který dává smysl
  • Automatická optimalizace - obrázky, fonty, vše se optimalizuje samo
  • Vercel deployment - nahraju kód a za minutu běží na produkci

Alternativy byly Astro, Remix, nebo klasický React. Claude vysvětlil trade-offs a pro realitní web s dynamickým obsahem dával Next.js největší smysl.

Tailwind CSS (styling)

Utility-first CSS framework. Místo psaní vlastních CSS tříd používám předpřipravené utility.

Zní to jako krok zpátky, ale v praxi je to brutálně rychlé. A hlavně - konzistentní. Neřeším, jestli margin má být 16px nebo 18px. Tailwind má design system zabudovaný.

Sanity (CMS)

Headless CMS pro správu obsahu. Tohle je game-changer.

Tradiční CMS (WordPress) má obsah i zobrazení pohromadě. Sanity odděluje data od prezentace. Petr může přidávat nemovitosti přes přehledné rozhraní, a web si je sám natáhne přes API.

Proč Sanity a ne jiné headless CMS?

  • Generózní free tier (10 000 API requestů měsíčně)
  • Skvělé rozhraní pro klienta
  • Real-time preview změn
  • Flexibilní struktura dat

Resend (emaily)

Služba pro odesílání transakčních emailů. Když někdo vyplní kontaktní formulář:

  1. Petr dostane notifikaci s detaily
  2. Klient dostane potvrzení, že jeho zpráva dorazila

Spolehlivější než posílat emaily přímo ze serveru, 100 emailů denně zdarma.

Vercel (hosting)

Platforma od tvůrců Next.js. Zero-config deployment - propojím GitHub repo a každý push do main větve automaticky nasadí novou verzi.

Free tier stačí pro většinu projektů. Platíte až když máte opravdu velký traffic.

Claude Code: Kde se to celé postavilo

Rešerše a plánování proběhly v klasickém Claude chatu. Ale samotnou implementaci jsem dělal v Claude Code.

Je to CLI nástroj, který má Claude přístup k souborům na disku. Může číst kód, psát kód, spouštět příkazy. A hlavně - vidí kontext celého projektu.

Workflow vypadal takhle:

  1. Popis, co chci - „Potřebuju komponentu pro kartu nemovitosti. Má zobrazit fotku, cenu, lokalitu a stav (aktivní/prodáno)."

  2. Claude napíše kód - Vytvoří soubory, importy, TypeScript typy.

  3. Kontrola - Podívám se, jestli to dává smysl. Ptám se na věci, kterým nerozumím.

  4. Iterace - „Přidej ještě badge s počtem fotek. A uprav spacing."

  5. Testování - Spustím lokálně, podívám se jak to vypadá.

  6. Další feature - Opakuju od kroku 1.

Klíčové je, že Claude viděl vždy celý projekt. Věděl, jaké komponenty už existují, jaký je design system, jaké jsou typy v TypeScriptu. Nový kód byl konzistentní s existujícím.

Já jsem dělal kreativní a strategická rozhodnutí. Claude dělal implementaci. A když jsem něčemu nerozuměl, vysvětlil mi to.


Výsledek

Web korinekreal.cz běží. Je rychlý, responzivní, a hlavně - je Petrův. Není to šablona s vyměněným logem. Je to web, který odráží jeho přístup, jeho osobnost, jeho způsob práce.

Co projekt zahrnuje

Strategická část:

  • Osobní značka a positioning
  • Diferenciace od konkurence
  • Tón komunikace a hodnoty

Vizuální část:

  • Barevná paleta a typografie
  • Design system s ručně kresleným fontem pro akcenty
  • Konzistentní vizuální jazyk napříč celým webem

Technická část:

  • Dynamické nabídky nemovitostí spravované přes CMS
  • Kalkulačka odhadu ceny (která zároveň sbírá leady)
  • Lokální SEO stránky pro každé město
  • Reference a články
  • Automatické emaily z kontaktního formuláře

Struktura webu

korinekreal.cz/
├── Hlavní stránka (hero, služby, reference, CTA)
├── /nabidky/ (aktivní nemovitosti)
├── /prodano/ (portfolio prodaných)
├── /radce/ (blog s články)
├── /reference/ (recenze klientů)
├── /lokalita/brno/ (lokální SEO)
├── /lokalita/prostejov/
├── /lokalita/vyskov/
└── /kalkulacky/odhad-ceny/ (lead generation)

Lighthouse skóre

Lighthouse skóre webu korinekreal.cz

Náklady na provoz

  • Vercel: 0 Kč (free tier)
  • Sanity: 0 Kč (free tier)
  • Resend: 0 Kč (100 emailů/den zdarma)
  • Doména: ~300 Kč/rok (.cz doména)

Celkem: ~300 Kč/rok - pouze doména


Co z toho plyne

Celý projekt trval týden. Ne proto, že bych pracoval šestnáct hodin denně, ale proto, že AI dramaticky zrychlila každou fázi.

Fáze 1: Osobní značka - ChatGPT bot umožnil škálovat práci, která by jinak zabrala násobně víc času.

Fáze 2: Vizuální identita - Gemini Canvas dal vizuální základ během hodin, ne dnů.

Fáze 3: Produkční web - Claude Code postavil web, který bych sám (bez znalosti Next.js) nedokázal napsat.

Ale - a tohle je důležité - AI nenahradila myšlení.

Já jsem rozhodoval o strategii. O tom, co má značka komunikovat. O tom, které featury dávají smysl a které jsou zbytečné. O tom, kdy je něco „dost dobré" a kdy potřebuje víc práce.

AI mi dala superschopnosti v oblastech, kde jsem slabý (programování). Ale oblasti, kde jsem silný (strategie, marketing, komunikace) - ty zůstaly na mně.

Co se stalo potom

Web byl hotový. Lighthouse skóre skvělé. Klient spokojený. Mohl jsem to tady ukončit.

Místo toho jsem udělal něco, co nedoporučuju nikomu se slabými nervy: sdílel jsem to ve veřejné FB skupině o AI.

Vlna kritiky

Reakce přišly rychle. A nebyly všechny přátelské.

„To je jako dort za 50 Kč - ingredience stojí víc." „Student IT to udělá za 3 dny." „Design působí hrozně a nedůvěryhodně." „99 % AI projektů se sesype." „Free tier? To je přece podvod na klienta."

Někteří lidé četli původní příspěvek. Většina ne. Stavěli argumenty proti věcem, které jsem neřekl. Předpokládali byznys model, který neexistuje. Řešili problémy, které jsem nepopisoval.

A upřímně? Bolelo to.

I když víte, že kritika je od lidí, kteří váš kontext neznají. I když víte, že část z nich má vlastní agendu (programátoři cítící se ohrožení AI). I když víte, že většina z nich by nikdy nic podobného nezveřejnila, protože je jednodušší kritizovat než tvořit.

Pořád to bolí.

Jak jsem to zpracoval

Místo hádek v komentářích jsem udělal tohle:

  1. Zkopíroval jsem VŠECHNY komentáře - konstruktivní i ty druhé
  2. Hodil je do Claude s promptem: „Tohle je feedback od seniorních vývojářů, UX/UI designerů a právníků. Vytvoř mi plán, co opravit."
  3. Dostal jsem strukturovaný seznam - co je legitimní problém vs. co je šum
  4. Implementoval jsem změny - během jednoho odpoledne

Co jsem opravil

| Problém | Řešení | |---------|--------| | Chybí GDPR | Stránka ochrany osobních údajů + souhlas pod formuláře | | Chybí IČO | Přidáno do footeru | | Security headers D | 1 prompt → A rating | | Chybí sitemap | Dynamická sitemap + robots.txt | | Chybí favicon | Vygenerováno |

Co jsem NEopravil

  • Design - funguje u cílové skupiny (lidé, kteří zdědili nemovitost plnou krámů)
  • Tech stack - Next.js + Sanity dává smysl pro web s dynamickým obsahem

Co jsem změnil preventivně

Jeden z komentářů upozornil na možné problémy s Vercel free tier a komerčním využitím. I když jsem přesvědčený, že pro projekt této velikosti by to problém nebyl, rozhodl jsem se přejít na Cloudflare Pages - jejich free tier explicitně povoluje komerční projekty bez omezení. Nulové náklady, žádná právní nejistota.

Co jsem se naučil

1. Kritici vám udělají code review zadarmo.

Vážně. Místo placení konzultantů jsem dostal feedback od desítek lidí. Většina z nich by si za „bezpečnostní audit" nebo „UX review" účtovala tisíce. Já to měl zdarma - jen jsem musel přežít formu, jakou to přišlo.

2. AI umí oddělit signál od šumu.

Tohle bych ručně dělal hodiny. Která kritika je validní? Která je jen projekce? Která vychází z nepochopení kontextu? Claude to roztřídil za minuty.

3. Ustát hate je skill .

Není to příjemné. Ale je to nutné, pokud chcete dělat věci veřejně. První vlna bolí nejvíc. Pak zjistíte, že svět se nezhroutil, web pořád běží, a díky těm komentářům je lepší než předtím.

Tohle je tech meets human v praxi.

Nemusíte být programátor, abyste měli profesionální web. Nemusíte strávit měsíce učením se frameworků. Ale musíte vědět, co chcete. Musíte umět rozpoznat kvalitu. Musíte dělat rozhodnutí. A nespoléhat se jen na názory ostatních, protože polovina kritiky byly jen subjektivní pocity „je to nedůvěryhodný“.

Technologie je nástroj. Jako kladivo. Jako random komentující na Facebooku. Jako pero.

Důležité je, co s tím nástrojem uděláte.