2026-10-29 · 6 min čtení
„AI vám postaví web za dvě hodiny“ funguje jen tehdy, když jí dáte pořádné zadání. Rozdělili jsme práci na devět kroků, jak by ji dělal tým: architekt, designér, copywriter, vývojář a tester. Ke každému prompt ke zkopírování pro Claude, ChatGPT i nástroje jako Lovable nebo Figma Make.
Když AI napíšete „udělej mi web pro kadeřnictví“, dostanete hezkou, ale obecnou šablonu. Profesionální tým postupuje jinak: nejdřív struktura, pak vzhled, texty, chování a nakonec kontrola. Stejně můžete vést AI. Každý krok dělejte v Claudovi nebo ChatGPT a výstup si uložte. Na konci máte specifikaci, kterou vložíte do nástroje na stavbu webu (Lovable, v0, Framer, Figma Make) nebo do Cursoru.
Kdo chce jednoduchý web za odpoledne bez specifikací, má kratší cestu v návodu Web pro živnostníka za odpoledne. Tady jde o web, na kterém vám záleží víc.
Jsi zkušený webový architekt. Navrhni web typu [typ webu, např. web
kadeřnictví s rezervacemi].
Cílovka: [kdo jsou návštěvníci]. Funkce: [3–5 hlavních funkcí].
Požadavky: funguje na mobilu, rychlé načítání, dobré SEO.
Dodej: mapu stránek (hierarchie), tři hlavní cesty návštěvníka
(odkud přijde, co chce, kde skončí) a seznam dat, která web potřebuje.Jsi designový ředitel. Vytvoř vizuální systém pro značku [název].
Charakter: [minimalistický / odvážný / luxusní / hravý].
Vygeneruj: barevnou paletu (hlavní, doplňková, barvy pro chyby
a úspěch, tmavý režim) s kódy barev, typografickou škálu (9 velikostí),
mezery v mřížce po 8 px a popis tlačítek, karet a formulářů.Jsi copywriter, který píše texty na prodej. Napiš texty pro [typ webu].
Tón: [profesionální / neformální / odvážný]. Cílovka: [kdo].
Cíl: [poptávky / rezervace / prodej].
Pro každou stránku: hlavní titulek do 6 slov, podtitulek do 15 slov,
tlačítko s výzvou, tři bloky s výhodami, sekci s referencemi.
Piš česky, bez frází typu „jsme tu pro vás“.Jsi frontendový vývojář. Popiš chování těchto částí webu:
vícekrokový formulář (kontrola polí, ukazatel postupu, chybové stavy),
cenová kalkulačka počítající v reálném čase, vyhledávání s filtry
a řazením, přihlášení a obnova hesla. U každé uveď stavy a chybové hlášky.Použijte jen to, co web opravdu potřebuje. Kadeřnictví vyhledávání s filtry nemá.
Převeď tuto specifikaci na 5 promptů pro [Lovable / v0 / Figma Make]:
[vložte výstupy z kroků 1–4].
Každý prompt začni výsledkem, ne postupem, a přidej kontext značky.Vzor jednoho takového promptu:
Postav web [typ] v [nálada] stylu. Hlavní barva [barva], písmo [font].
Obsahuje: 1) úvodní sekci s [prvky], 2) mřížku výhod s [efekt při
najetí myší], 3) sekci [rezervace / poptávka]. Plně responzivní,
jemné animace při posouvání.AI nástroje rozumí animacím, když je popíšete přesně:
Navrhni interakce pro [sekce webu]: pořadí načítání prvků
(zpoždění, délka, plynulost), chování při posouvání (paralaxa,
přichycení, postupné odhalení) a stavy při najetí myší.
Popiš je slovy, např.: „Při posunu se navigace zmenší z 80 na 60 px
za 300 ms. Titulek vyjede o 20 px zdola za 0,6 s, řádky se zpožděním 0,1 s.“
Animace nesmí zpomalit web na slabém telefonu.Naplánuj chování webu [název] na šířkách 375 px (mobil),
768 px (tablet) a 1440 px (počítač). Pro každou sekci popiš,
jak se změní rozvržení: z mřížky do sloupce, z bočního menu
do vysouvacího, co se na mobilu skryje.Většina návštěv malých českých webů přichází z mobilu, tenhle krok nevynechávejte.
Navrhni datovou část webu [typ]. Zdroj dat: [redakční systém /
tabulka / databáze, např. Supabase]. Uveď datové modely, potřebné
operace (čtení, vytvoření, úprava, smazání) a způsob přihlašování.
Upozorni, kde web zpracovává osobní údaje.Formulář, který ukládá jména a telefony, znamená povinnosti podle GDPR. Texty k tomu pomůže připravit článek o obchodních podmínkách a GDPR na web.
Jsi tester webů. Zkontroluj tento web nebo specifikaci: [vložte].
Projdi: rychlost (Core Web Vitals), přístupnost (WCAG 2.2 AA:
kontrast, popisky obrázků, ovládání klávesnicí), SEO (titulky,
popisy, strukturovaná data, nadpisy) a texty (překlepy, nejasné výzvy).
Výstup: seznam problémů seřazený od nejvážnějšího, s návrhem opravy.Hotový web navíc otevřete na svém telefonu a projděte ho jako zákazník. Odešlete testovací poptávku a zkontrolujte, že dorazila.
Základní orientaci, jaký nástroj na stavbu zvolit, najdete v článku Jak s AI vytvořit web pro živnost.
Redakční návod AI v češtině, inspirováno karuselem „9 promptů pro Claude + Figma“ ze sociálních sítí. Prompty přeloženy a upraveny pro malé české weby, stav k 26. 10. 2026. Výsledný web vždy zkontrolujte v prohlížeči na telefonu i počítači.
Téma: Claude a Anthropic · AI pro podnikatele a živnostníky