Používáme cookies

Tento web používá cookies pro zajištění správné funkčnosti a analýzu návštěvnosti. Kliknutím na „Přijmout vše" souhlasíte s jejich používáním. Více info

Jak jsem s pomocí AI postavil e-shop Hlavouni.cz

11 minut čtení

📌 Co se v článku dočtete

  • Jak jsme za pár dní postavili e-shop s 494 produkty a co při tom dělala umělá inteligence.
  • Co se na e-shopu děje samo, od skladu až po faktury.
  • Kde to bez člověka nešlo.
  • Co si z toho vzít, když chystáte vlastní e-shop.

Co je Hlavouni.cz

Hlavouni.cz je e-shop s čepicemi, kšiltovkami, klobouky, batohy a taškami. Tvářemi značky jsou tři kreslení panáčci, kterým říkáme hlavouni. Jeden nosí černou kšiltovku, druhý oranžový kulich a třetí olivový klobouček.

Zboží bereme od českého velkoobchodu a objednáváme ho, až když si ho zákazník koupí. Nemáme tak žádný sklad ani peníze zavřené ve zboží, které se možná nikdy neprodá.

Chtěl jsem dvě věci. Aby e-shop vypadal jako značka, a ne jako další šablona. A aby se z velké části staral sám o sebe. Zároveň jsem si chtěl na vlastním projektu vyzkoušet, kolik takové práce dnes zvládne umělá inteligence. Základní údaje o projektu najdete i v referenci Hlavouni.cz.

494produktů v katalogu
2 060variant podle barvy a velikosti
24článků na blogu
96bodů v Lighthouse na mobilu

Kdo co dělal

Pracovali jsme na tom ve třech. Jenže dva z nás nejsou lidé.

Já jsem zadával práci, rozhodoval a všechno kontroloval. Každý návrh jsem viděl a buď ho schválil, nebo poslal zpátky k přepracování.

Claude Code, AI asistent od firmy Anthropic, psal kód a texty, zpracovával data, nahrával web na server a kontroloval, jestli všechno funguje. Pracoval přímo v projektu na mém počítači a v mém prohlížeči.

ChatGPT kreslil. Fotky na web, bannery, ilustrace k článkům i obrázky na sociální sítě.

Hned na začátku řeknu, co pro mě bylo nejdůležitější. Rozhodovat za mě AI nemohla. Ušetřila mi ale hodiny mravenčí práce, kterou bych jinak dělal ručně.

Úplně od nuly jsem ovšem nezačínal. Základem byl můj vlastní e-shopový systém z jednoho dřívějšího projektu. AI z něj převzala všechny funkce a pro Hlavouny udělala nový vzhled, obsah i katalog.

Jak to šlo den po dni

  • 21. září: první fotky a ilustrace z AI, načtení nákupních cen.
  • 22. září: hotový design, převod do kódu a spuštění na ostré doméně.
  • 23. září: bezpečnostní kontrola, všechno, co e-shop v roce 2026 musí splnit podle zákona, a tašky s batohy v katalogu.
  • 24. září: rychlost webu a SEO, ruční kontrola fotek všech barev.
  • 25. září: vlastní statistiky návštěvnosti, vlastní jména produktů, katalog pro reklamy na Facebooku a Instagramu.
  • 26. a 27. září: chytřejší vyhledávání a hledání hlasem.
  • 29. září: sklad a nákupní ceny automaticky z dat dodavatele, podrobný nákupní trychtýř.
  • 30. září: úpravy podle připomínek UX specialistky a lepší čitelnost.
  • Říjen: plán příspěvků na Facebook a Instagram do konce roku.

Web běžel už druhý den. Zbytek času padl na věci, kterých si zákazník na první pohled nevšimne. Bez nich ale e-shop dlouho nevydrží.

Design: místo ikonek hlavouni

Grafický návrh vznikl nejdřív jako obrázek. AI ho pak přepsala do kódu a hlídala, aby web vypadal podle návrhu i na mobilu. U každé větší změny jsem chtěl nejdřív vidět dvě nebo tři varianty. Teprve pak jsem vybíral.

Úvodní fotka e-shopu Hlavouni.cz s postavičkami hlavounů a dřevěným rozcestníkem
Úvodní fotka webu. Cedule na rozcestníku jsou klikací odkazy do kategorií. Fotku vytvořila AI.

Hlavouni jsou všude, kde by na jiném e-shopu byla obyčejná ikonka. U výhod nákupu, jako je doprava, vrácení zboží nebo věrnostní program, nenajdete piktogramy. Místo nich tam jsou hlavouni v akci. Jeden letí s balíkem jako superhrdina, další si lupou prohlíží kvalitu. Když kliknete na hledání, vykoukne hlavoun s lupou a zeptá se: „Co dneska hledáme?“

Na úvodní fotce stojí dřevěný rozcestník s cedulemi Kšiltovky, Čepice, Batohy a Doplňky. Nápisy ale nejsou součástí obrázku. Jsou to skutečné odkazy a web si sám spočítá, kam je posadit, podle toho, jak se fotka na daném displeji ořízne.

Rozcestník je i na stránce 404. Hlavouni na ní zabloudili, ale cedule vedou do kategorií. Kdo se ztratí, nemusí z webu odejít.

Stránka 404 na Hlavouni.cz se zabloudilými hlavouny u rozcestníku
I stránka „nenalezeno“ je součást značky. Cedule rozcestníku jsou odkazy do kategorií.

Katalog: 494 produktů a 2 060 variant

Katalog AI načetla z dat velkoobchodu i s fotkami, barvami, velikostmi a parametry. Rozměry tašek a batohů v datech chyběly, a tak je vytáhla z technických listů výrobce v PDF.

Každý produkt má vlastní jméno

Všechny produkty dostaly česká jména. Třeba Kšiltovka Otýlie, Batoh Apolena nebo Zimní čepice Rebeka. Krátké popisky jsou hravé. Hlavouni se v nich objeví, jen když to sedí ke skutečné vlastnosti výrobku. Vzorem byl popisek, který jsem sám přepsal u kšiltovky Otýlie: „Je nastavitelná, ale prakticky menší, spíše pro menší hlavouny.“

Dodavateli se nedá věřit všechno

U spousty produktů měl dodavatel fotky u špatných barev. Zákazník by si vybral černou kšiltovku a na fotce viděl žlutou. AI sice umí barvu na fotce změřit a navrhnout opravu, jenže u podobných odstínů se plete. Fotky jsme proto prošli ručně u 377 produktů. V 80 z nich jsme opravili celkem 239 barev. Když správná fotka nějaké barvy neexistuje, web si ji nevymýšlí. Napíše, že barvu ukazuje jen vzorek.

Dodavatel taky občas zařadil zboží do špatné kategorie. Mezi kšiltovkami se tak objevila zimní čepice nebo klobouček bez kšiltu. Všechno jsme přeřadili podle toho, co výrobek opravdu je.

Pomoc s výběrem

Filtrovat můžete podle barev, velikostí i velikosti tašky. U čepic a kšiltovek web ukáže velikost, obvod hlavy a čím se kšiltovka nastavuje. Pod popisem jsou nejčastější otázky. Web je skládá jen z údajů o produktu, třeba z rozměrů a materiálu. Odpoví, jestli se do batohu vejde notebook nebo kdy zboží dorazí. Nic z toho si AI nevymýšlí.

Vyhledávání rozumí normální češtině. Najde „batohy na notebook“ v jakémkoli pádě, ví, že kulich je zimní čepice, a poradí si i s dotazem „čepice na běhání do 500 Kč“. Hledat můžete i hlasem.

Od košíku po fakturu

Když přidáte zboží do košíku, ukáže se potvrzení s fotkou barvy, kterou jste vybrali. Košík hlídá minimální objednávku a připomene, kolik zbývá do dopravy zdarma.

Zásilkovna je napojená se vším všudy. Zákazník si na mapě vybere výdejní místo. Já pak v administraci jedním kliknutím zásilku odešlu a vytisknu štítek.

Dárkový poukaz se kupuje jako každé jiné zboží. Po zaplacení přijde zákazníkovi e-mailem v PDF.

Fakturu vystaví Fakturoid sám, jakmile je objednávka zaplacená, a rovnou ji označí jako uhrazenou. Slevový kód je na faktuře jako samostatná položka. U každé objednávky pak v administraci vidím, kolik na ní doopravdy vydělám po odečtení nákupu, poštovného od dodavatele, štítku pro dopravce i daně.

Rychlost a vyhledávače

Hned po spuštění byl web hezký, ale pomalý. Úvodní stránka měla na mobilu přes 5 MB. Po úpravách to vypadá takhle:

Úvodní stránka na mobilu Před Po
Skóre Lighthouse7196
Načtení hlavního obsahu12,3 s1,9 s
Velikost stránky5,1 MB0,7 MB
Písma301 kB171 kB

Nejvíc pomohlo zmenšit obrázky a převést je do formátu WebP. Menu s fotkami se teď načte, až když na něj najedete myší. Z písem jsme nechali jen znaky, které web opravdu používá. Všechny styly jsme sloučili do jednoho souboru.

Kvůli vyhledávačům má každý produkt vlastní titulek a popis, strukturovaná data a správnou kanonickou adresu. Texty mají dost velké písmo a kontrast i pro lidi, kteří hůř vidí.

Zákony a bezpečnost

E-shop musí v roce 2026 splnit spoustu pravidel. AI je prošla jedno po druhém:

  • tlačítko „Objednat s povinností platby“,
  • obchodní podmínky v PDF v potvrzení objednávky,
  • odstoupení od smlouvy přes formulář na webu,
  • u slev nejnižší cena za posledních 30 dní,
  • oficiální oznámení EU o zákonné záruce, povinné od 27. září 2026,
  • údaje o výrobci podle nařízení o bezpečnosti výrobků,
  • měřicí a marketingové cookies až po souhlasu.

Druhý den po spuštění pak AI prošla celý kód, jako by web chtěla napadnout, a hledala slabá místa. Co našla, jsme hned opravili.

E-shop, který se stará sám

Sklad se aktualizuje každou hodinu podle dat dodavatele. Když se nějaká barva vyprodá, web ji sám označí a zákazník si může zapnout hlídacího psa. Jakmile je zboží zase skladem, barva se na web vrátí.

Nákupní ceny web kontroluje každý den. Když dodavatel zdraží, upraví se i prodejní cena, abychom žádný kus neprodávali se ztrátou. Při každé objednávce, zprávě nebo recenzi mi navíc přijde upozornění do mobilu.

Statistiky návštěvnosti si e-shop počítá sám a počítá jen lidi. Ukázalo se totiž, že velkou část „návštěv“ dělali roboti. Třeba Google prochází stránky i se skripty, takže vypadá jako běžný návštěvník. Teď se počítá jen ten, kdo na stránce opravdu něco udělal.

Nákupní trychtýř mi krok za krokem ukáže, kolik lidí došlo do košíku a do pokladny, kde odešli a proč případně objednávka neprošla. Úvodní stránku navíc testujeme ve dvou verzích textu. Web mi řekne, kdy je rozdíl mezi nimi opravdu průkazný.

Marketing: blog a sociální sítě

Na blogu je 24 článků. Třeba jak vybrat velikost čepice, jak prát kšiltovky nebo jaký batoh si vzít do letadla. Každý má vlastní ilustraci s hlavounem a odkazuje na produkty, o kterých píše.

Na Facebook a Instagram chodí příspěvky třikrát týdně a plán je hotový do konce roku. Postup je pokaždé stejný:

  1. AI vybere produkt, který se hodí do sezóny. Musí být skladem a mít vlastní fotku dané barvy.
  2. ChatGPT nakreslí obrázek s přesně tím produktem a k němu hlavouna ve scéně, která sedí k datu. V říjnu je to podzimní les, v prosinci vánoční trhy.
  3. AI napíše text jen z ověřených vlastností produktu a uloží ho jako návrh.
  4. Já návrh schválím, upravím, nebo zahodím. Bez mého souhlasu nevyjde nic.
Příspěvek na sociální sítě se zimní čepicí a hlavounem na saních
Prosincový příspěvek se zimní čepicí.
Příspěvek na sociální sítě s červeným batohem na letišti
Tip na vánoční dárek, batoh do letadla.

Instagram nového firemního účtu nešel propojit s Facebookem, protože Meta propojení zablokovala. Místo čekání jsme ho napojili přímo přes oficiální rozhraní Instagramu do mého plánovače příspěvků. Katalog pro reklamy na Facebooku a Instagramu se aktualizuje každou hodinu, takže reklama ví, co je zrovna skladem.

Kdo chce Hlavouny doporučovat, může se přidat do partnerského programu. Dostane vlastní odkazy, slevové kódy a sadu bannerů ve všech běžných rozměrech.

Jak spolupráce s AI vypadala v praxi

Žádné technické zadání jsem nepsal. S AI jsem mluvil normálně česky, jako s kolegou. Třeba takhle: „Udělej chytřejší vyhledávání, včera jsem hledal čepici na běhání a našlo mi to vánoční čepice.“ Většinou to pak šlo takhle:

  1. Napíšu, co mi vadí nebo co chci.
  2. AI projde kód a data a zjistí, kde je problém. U větších změn mi ukáže náhledy několika variant.
  3. Vyberu jednu. AI ji udělá, napíše k ní automatický test a vyzkouší ji na kopii webu v mém počítači.
  4. Než změnu nahraje, porovná soubory s ostrým webem, aby nepřepsala nic, co se mezitím změnilo. Pak udělá zálohu.
  5. Po nahrání změnu ověří přímo na hlavouni.cz. Napíše mi, co přesně udělala a co se ověřit nepodařilo.

Každé rozhodnutí se zapíše do souboru s pravidly projektu. Ten si AI přečte pokaždé, než začne pracovat. Díky tomu nezapomene, že do textů nepatří dlouhé pomlčky, že zboží vracíme do 30 dnů nebo že příspěvky na sociální sítě jdou vždycky jen jako návrh. Projekt má dnes přes 70 automatických testů. Hlídají, aby nová úprava nerozbila nic, co už funguje.

Kde to bez člověka nešlo

Tohle je pro mě z celé zkušenosti to nejcennější.

Vkus a odvaha

AI navrhla bezpečné řešení s ikonkami, jaké má každý druhý e-shop. Nápad nahradit je hlavouny musel přijít ode mě. Stejně tak jsem vracel tvrdé stíny, které neladily se zbytkem webu. Nebo první várku jmen produktů podle českých měst. „Taška Olomouc“ prostě zní divně.

Čeština, která nezní jako překlad

První texty příspěvků byly kostrbaté, jako by je někdo doslova přeložil z angličtiny. A byly plné parametrů. Pomohlo až konkrétní zadání: krátce říct, co z výrobku člověk má, a přidat jednu přirozenou větu o tom, co ho opravdu zajímá. Místo „Je z 600D RPET, rozměr 31 × 24 × 48 cm“ dnes text zní spíš takhle:

Znáte někoho, koho ani mráz neudrží doma? Batoh Zbyňka s ním zvládne celý den na horách. Otevírá se celý jako kufr, takže nic nehledáte.

Takové pravidlo si AI zapamatuje a drží se ho i v dalších textech.

Žádná vymyšlená čísla

AI ráda napíše „tisíce spokojených zákazníků“ nebo přidá hvězdičky s hodnocením. Na nový e-shop nic takového nepatří, takže to má zakázané. Do popisů, otázek i příspěvků smí brát fakta jen z parametrů výrobce. Když nějaký údaj chybí, nedoplní si ho.

Citlivé věci dělám sám

Hesla, přihlašování do služeb a přístupové klíče zadávám já. AI je do formulářů nevkládá. Když chce něco změnit v nastavení účtů na Facebooku nebo Instagramu, vždycky se zeptá. Je to bezpečnější a mám přehled, kam všude má přístup.

Co si z toho vzít pro vlastní e-shop

  • Začněte značkou, ne šablonou. Čas, který vám AI ušetří na výrobě, dejte do nápadu, kterým se odlišíte.
  • Chtějte vidět varianty. Vybrat ze tří hotových návrhů je rychlejší než popisovat, co chcete.
  • Kontrolujte data od dodavatele. Fotka u špatné barvy znamená vrácené zboží a naštvaného zákazníka.
  • Nechte provoz běžet samo. Sklad, ceny, faktury i doprava se dají nastavit tak, abyste na ně nemuseli myslet.
  • Počítejte jen skutečné lidi. Statistiky plné robotů vám budou lhát.
  • Zákony řešte hned od začátku. Dodělávat je později stojí víc peněz i nervů.
  • AI je výkonný tým, ale potřebuje šéfa. Rozhodnutí, vkus i odpovědnost zůstávají na vás.

A hlavouni? Ti jsou spokojení.

Chcete taky takový e-shop?

Postavím vám ho úplně stejně. Vy rozhodujete o značce a o tom, co budete prodávat. Já s pomocí AI udělám zbytek: design, katalog, napojení na dodavatele, dopravu a fakturaci, rychlost a SEO, všechno, co vyžaduje zákon, i blog a sociální sítě.

Napište mi a probereme, co potřebujete.

Nezávazně poptat e-shop

Bez rizika

U e-shopů začínáme návrhem zdarma

Nejdřív uvidíte, co byste kupovali — a teprve pak se bavíme o penězích. Nikdo nekupuje zajíce v pytli a nikdo nestaví stovky hodin naslepo.

  1. 1 Úvodní návrh zdarma Připravím vzhled e-shopu a rozpis funkcí. Nejdřív uvidíte, co byste kupovali, a teprve pak se bavíme o ceně.
  2. 2 Menší e-shop platíte až na konci Postavím ho celý na testovací adrese, projdete si ho a zaplatíte, až s ním budete spokojení.
  3. 3 U velkých se domluvíme na záloze Když jde o desítky až stovky hodin a funkce na míru, dohodneme po odsouhlasení návrhu zálohu podle rozsahu.
  4. 4 Doplatek před spuštěním Zbytek ceny platíte, teprve když e-shop funguje tak, jak jsme si řekli. Po úhradě ho nasadím na vaši doménu.