Jak vytvořit web s pomocí AI svépomocí: nástroje, postup a úskalí

Ještě před pár lety jste se kvůli webu museli naučit programovat, nebo zaplatit vývojáře. Dnes AI píše kód, texty a web dokonce zveřejní na internetu. Zdá se, že web teď zvládnete za jeden večer. Zčásti je to pravda. Je tu ale háček, o kterém reklamy na AI nástroje mluví jen zřídka.

Weby s AI vyvíjím každý den, a tak se v tomto článku podělím o skutečný pracovní postup: jaké nástroje použít, kde jsou silné a kde selhávají, a postup krok za krokem s hotovými prompty, podle kterého web postavíte sami.

Co se změnilo: auto už máme, ale řidičák je potřeba

AI nástroje se opravdu naučily psát kvalitní kód, přizpůsobit web pro mobily, připojit formuláře a zveřejnit web na hostingu. Co dřív trvalo týdny, teď zvládnete za dny.

Nastala doba, kdy si web můžete udělat sami. Ale je to zároveň doba, kdy musíte umět řídit.

Auto taky umí jet po dálnici samo, ale kam jet, jak objet díru a kde odbočit, rozhoduje řidič. S AI je to stejné: splní jakýkoli příkaz, ale kvalitu výsledku určuje ten, kdo příkazy zadává.

S jakými AI nástroji lze vytvořit web

V článku rozeberu přístup s Claude Code: právě ten používám v práci a dává nejvíc svobody — web není svázaný s editorem, kód patří vám a změnit můžete cokoli.

Výhody a nevýhody přístupu

Hlavní past: AI dělá „průměrný“ web

Jazykový model se učil na milionech webů. Když ho požádáte „udělej web pro zubní kliniku“, sestaví to nejtypičtější řešení: modrý přechod, fotku usměvavé pacientky, tři karty výhod. Technicky vše funguje, ale takový web vypadá jako u desítek konkurentů — a zákazník nemá důvod vybrat si právě vás.

• Chybí positioning. AI neví, v čem jste lepší, pokud jste to nezformulovali.
• Chybí vizuální nápad. Bez inspirace AI volí nejbezpečnější, tedy nejnudnější variantu.
• Chybí prodejní logika. Bloky jsou seřazené „jako všude“, ne v pořadí, ve kterém se zákazník rozhoduje.

Postup krok za krokem: web s Claude Code

Nejdůležitější princip — stavět web obrazovku po obrazovce, ne chtít „udělej celý web najednou“. Proč to funguje, vysvětlím za postupem.

Krok 1. Struktura a texty — v běžném chatu s AI

Nezačínejte kódem, ale tím, co na webu bude. Požádejte AI, ať s vámi udělá rozhovor o podnikání a sestaví strukturu stránky. Více o promptech pro texty v článku „AI pro texty webu“.

Jsi marketér a copywriter, který připravuje jednostránkový web pro firmu.

Moje podnikání: [čím se zabýváte, město, pro koho]
Hlavní akce návštěvníka: [poslat poptávku / objednat se / zavolat]

1. Polož mi 7–10 otázek o podnikání, zákaznících, výhodách, cenách a námitkách — vždy jednu.
2. Po odpovědích sestav strukturu webu: seznam obrazovek (bloků) a cíl každé z nich.
3. Napiš texty pro každou obrazovku: nadpis, podnadpis, hlavní text, text tlačítka.

Piš česky, stručně a konkrétně, bez klišé typu „kvalitní“ nebo „individuální přístup“.
Nevymýšlej čísla — pokud chybí fakta, napiš [NUTNO UPŘESNIT].

Krok 2. Inspirace pro každou obrazovku

Ke každému bloku ze struktury najděte 1–2 příklady, které se vám líbí: první obrazovka, blok služeb, recenze, poptávkový formulář. Hledejte na Awwwards, Dribbble, Pinterestu nebo na webech silných firem ve vašem oboru. Dělejte screenshoty a ukládejte je do jedné složky s názvy podle pořadí bloků.

Krok 3. Vytvořte projekt v Claude Code

Nainstalujte Claude Code (funguje v terminálu, v editorech kódu i v aplikaci Claude pro počítač) a vytvořte prázdnou složku pro web. Potřebujete předplatné Claude nebo přístup přes API. První zpráva se týká technologií a obecných pravidel projektu:

Vytvoř v této složce nový web na Next.js s TypeScriptem a Tailwind CSS.

Obecná pravidla projektu:
- jazyk webu — čeština;
- responzivita: nejdřív mobilní verze, pak tablet a počítač;
- barvy: [hlavní barva], [akcentní barva], pozadí [barva];
- písmo: [název písma z Google Fonts];
- každý blok je samostatná komponenta, aby šla znovu použít na dalších stránkách.

Zatím udělej jen prázdnou úvodní stránku s hlavičkou a patičkou a spusť web lokálně, abych se na něj mohl podívat.

Krok 4. Stavte web obrazovku po obrazovce: inspirace + text

Teď ke každému bloku pošlete do Claude Code screenshot inspirace a hotový text. Jedna obrazovka — jedna zpráva. Podívali jste se na výsledek, opravili, pokračujete další.

Vytvoř na úvodní stránce blok „[název bloku, např. První obrazovka]“.

Inspirace je na přiloženém screenshotu: převezmi z ní kompozici, hierarchii a dojem, ale nekopíruj ji jedna ku jedné. Použij barvy a písmo našeho projektu.

Texty pro blok:
"""
[vložte nadpis, podnadpis, text a text tlačítka z kroku 1]
"""

Požadavky:
- na telefonu musí blok vypadat úhledně, bez vodorovného posouvání;
- tlačítko „[text tlačítka]“ otevírá poptávkový formulář;
- po změnách ukaž, co přesně jsi udělal, a spusť web k náhledu.

Proč je postup po obrazovkách důležitý

• Chyby opravujete jednou. Když se v bloku objeví chyba — třeba text na telefonu přetéká přes okraj —, opravíte ji v jedné komponentě, ne na všech stránkách.
• Z bloků se stávají šablony. Hotovou a vyladěnou obrazovku (karty služeb, recenze, FAQ) pak použijete na dalších stránkách bez předělávání.
• Úspora limitů. Krátké přesné úkoly spotřebují mnohem méně z předplatného než prosba „předělej celý web“.
• Kvalitu máte pod kontrolou. Každá obrazovka projde vaší kontrolou, místo aby se objevila spolu s desítkou dalších.

Web postavený po obrazovkách je jako dům z prověřených cihel. Web „jedním promptem“ je dům, ve kterém prasklinu najdete až po nastěhování.

Krok 5. Kontrola: telefon, rychlost, texty

• Otevřete web na telefonu — většina návštěvníků přijde právě z něj.
• Požádejte Claude Code o kontrolu rychlosti a optimalizaci obrázků.
• Přečtěte si texty nahlas: pokud byste to zákazníkovi osobně takhle neřekli, přepište to.

Krok 6. SEO základ a poptávkový formulář

Připrav web na spuštění:

1. SEO: unikátní title a description pro každou stránku, jeden H1 na stránce, alt u všech obrázků, sitemap.xml a robots.txt, strukturovaná data Schema.org pro firmu.
2. Poptávkový formulář: posílej mi poptávky do Telegramu přes bota. Vysvětli krok za krokem, jak bota vytvořit a kde získat token a chat id, a ulož je jako tajné proměnné, ne do kódu webu.
3. Ochrana formuláře před spamem a omezení počtu odeslání.

Po každém bodu stručně vysvětli, co jsi udělal.

Krok 7. Doména a zveřejnění

Kupte si doménu u registrátora a pak Claude Code jednoduše napište: „Chci web zveřejnit“. Navrhne hosting, krok za krokem vysvětlí, co ve vašem účtu kliknout, a technickou část udělá sám. Vám zbude potvrzovat akce, připojit doménu a ověřit, že se web otevírá.

Krok 8. Změny po spuštění

Dál je to jednoduché: otevřete projekt v Claude Code, napíšete, co změnit — „přidej novou recenzi“, „změň cenu landing page“ — a požádáte o zveřejnění změn. Tip: požádejte rovnou o nastavení zálohy na GitHubu, abyste se mohli vždy vrátit k předchozí verzi.

Kolik času to opravdu zabere

Pokud se už v designu orientujete a chápete, jak má web fungovat, pár dní. Pokud to děláte poprvé, připočtěte čas na:

• strukturu a texty — na ty obvykle padne nejvíc času;
• hledání inspirace a rozhodování, co z ní převzít;
• desítky iterací „tohle ne — předělat“, než se naučíte úkoly formulovat;
• pochopení registrátorů, hostingu, DNS, botů a analytiky;
• kontrolu na telefonech, rychlost, SEO.

Kdy to udělat sami a kdy objednat

Závěr: každý ať dělá svou práci

AI zpřístupnila tvorbu webů — a to je skvělé. Nástroj ale nenahradí zkušenost: k řízení AI potřebujete vizuální rozhled, pochopení UI, struktury a toho, jak se návštěvník rozhoduje. Bez toho vám i ten nejlepší nástroj vydá web podobný stovkám jiných.

Pokud jste podnikatel, vaším hlavním zdrojem je čas a soustředění na firmu. Zkoumat inspiraci, prompty, DNS a boty je další práce, která vás odvádí od zákazníků. S AI pracuji každý den, takže spojuji rychlost neuronových sítí se zkušeností designéra: dostanete web na klíč — od struktury a textů po spuštění a SEO —, aniž byste na tom strávili týdny.

AI je skvělý nástroj. Výsledek ale vždy závisí na tom, kdo ho drží v ruce.