Landing page s pomocí AI krok za krokem: od zadání po nasazení

AI asistent dokáže vygenerovat landing page za pár minut. Rozdíl mezi stránkou, která „nějak vypadá”, a stránkou, která funguje, je ale v tom, jak ho vedete a co po něm zkontrolujete. Tady je postup, který se osvědčuje – na příkladu stránky pro malou kavárnu s rozvozem.

Krok 1: Připravte podklady dřív než prompt

AI nevymyslí vaši nabídku. Než začnete, sepište si:

• Pro koho je stránka a jaký jeden cíl má (objednávka, registrace, poptávka).
• Hlavní sdělení jednou větou.
• 3–4 výhody – konkrétní, ne „kvalita a profesionalita”.
• Skutečné údaje: ceny, otevírací doba, kontakt, adresa.
• Barvy a font, pokud máte logo nebo vizuální styl.
• Technické omezení: čisté HTML+CSS? Tailwind? Kam se bude nasazovat?

Krok 2: První zadání

Dobré zadání popisuje strukturu, obsah i technické požadavky:

Vytvoř jednostránkový web (landing page) pro kavárnu „Zrnko" v Brně,
která rozváží kávu a pečivo do kanceláří.

Cíl stránky: uživatel odešle poptávku pravidelného rozvozu.

Sekce:
1. Hero – nadpis „Čerstvá káva do vaší kanceláře každé ráno",
   podnadpis, tlačítko „Chci nabídku" (odkaz na formulář).
2. Jak to funguje – 3 kroky.
3. Výhody – 4 karty (pražíme sami, rozvoz do 9:00, fakturace měsíčně, bez závazku).
4. Ceník – 3 balíčky, ceny doplním, dej tam zástupné hodnoty „X Kč".
5. Formulář – firma, jméno, e-mail, telefon, počet osob, poznámka.
6. Patička – adresa, telefon, e-mail.

Technicky:
- jeden soubor index.html + style.css, bez frameworku a bez JS knihoven
- mobile-first, CSS Grid/Flexbox, CSS proměnné pro barvy
- barvy: tmavě hnědá #3b2a20, krémová #f6efe6, akcent #c9792b
- sémantické HTML, lang="cs", přístupný formulář s labely
- meta title, description a Open Graph tagy

Všimněte si: konkrétní texty, jasný cíl, technická omezení a výslovná instrukce, že ceny jsou zástupné. Bez toho si AI ceny klidně vymyslí.

Krok 3: Iterujte po sekcích

Celou stránku najednou předělávat nechcete. Opravujte cíleně:

V hero sekci: tlačítko je na mobilu moc malé, zvětši ho na plnou šířku pod 640 px.
Nadpis zmenši pomocí clamp() tak, aby se na 360 px vešel na 3 řádky.
Ostatní části neměň.

Věta „ostatní části neměň” výrazně snižuje riziko, že AI při opravě rozbije něco jiného. Když pracujete s projektem v ColdHost AI, AI upravuje soubory přímo (celým souborem nebo cílenými SEARCH/REPLACE úpravami), takže změny vidíte jako konkrétní zásah, ne jako novou kopii celé stránky.

Krok 4: Formulář, který opravdu něco odešle

Statický HTML formulář sám e-mail nepošle. Možnosti:

• jednoduchý backend endpoint (PHP, Node.js, Python), který data uloží nebo odešle e-mailem,
• služba třetí strany pro zpracování formulářů,
• mailto: odkaz – nejjednodušší, ale nespolehlivé (závisí na poštovním klientu uživatele).

Příklad minimálního endpointu v PHP, pokud máte hosting s PHP:

<?php
// poptavka.php
if ($_SERVER['REQUEST_METHOD'] !== 'POST') { http_response_code(405); exit; }

$email = filter_input(INPUT_POST, 'email', FILTER_VALIDATE_EMAIL);
$firma = trim($_POST['firma'] ?? '');
if (!$email || $firma === '') { http_response_code(422); exit('Neplatná data'); }

$text = "Firma: $firma\nE-mail: $email\nTelefon: " . ($_POST['telefon'] ?? '') .
        "\nOsob: " . ($_POST['osob'] ?? '') . "\nPoznámka: " . ($_POST['poznamka'] ?? '');

$ok = mail('[email protected]', 'Nová poptávka z webu', $text,
           ['From' => '[email protected]', 'Reply-To' => $email,
            'Content-Type' => 'text/plain; charset=UTF-8']);

if (!$ok) { http_response_code(500); exit('Odeslání selhalo'); }
header('Location: /dekujeme.html', true, 303);

Přidejte ochranu proti spamu – například skryté pole (honeypot), které člověk nevyplní, a odmítněte odeslání, když vyplněné je. Funkce mail() vyžaduje na serveru nastavené odesílání pošty; pro spolehlivé doručování je lepší SMTP přes knihovnu typu PHPMailer.

Krok 5: Co zkontrolovat ručně

AI generuje kód, který vypadá dobře, ale často má drobné chyby. Projděte:

Oblast	Kontrola
Texty	žádné vymyšlené recenze, čísla zákazníků, certifikáty ani ceny
Mobil	DevTools na 360 px, žádný horizontální scroll, čitelné písmo
Formulář	labely, type="email", required, chybové hlášky, test odeslání
Přístupnost	kontrast akcentní barvy na krémovém pozadí, fokus na tlačítkách, alt u obrázků
Výkon	obrázky ve WebP se zadanými rozměry, žádné zbytečné knihovny
SEO	unikátní title, description, jeden h1, OG obrázek
Odkazy	všechny kotvy (#formular) vedou na existující id

Obzvlášť pozor na první bod: pokud AI doplní „Důvěřuje nám 500+ firem” nebo smyšlenou recenzi, smažte to. Nepravdivá tvrzení na webu firmy vám mohou způsobit problém.

Lighthouse v Chrome DevTools vám dá rychlý přehled výkonu, přístupnosti a SEO. Cíl je mít všechno zelené.

Krok 6: Nasazení

Statická stránka se nasadí kamkoli. Na vlastním VPS s Nginx stačí:

sudo mkdir -p /var/www/zrnko
sudo rsync -av ./ /var/www/zrnko/ --exclude .git

server {
    listen 80;
    server_name zrnko.cz www.zrnko.cz;
    root /var/www/zrnko;
    index index.html;
}

sudo nginx -t && sudo systemctl reload nginx
sudo certbot --nginx -d zrnko.cz -d www.zrnko.cz

Certbot získá certifikát Let’s Encrypt a upraví konfiguraci pro HTTPS.

Pokud máte VPS připojené v ColdHost AI, může vám tohle navrhnout přímo AI v režimu Server a DevOps – příkazy se spustí až po vašem schválení kliknutím a výstup se vrací zpět, takže případnou chybu Nginxu hned vidí a navrhne opravu.

Shrnutí postupu

1. Podklady a jeden jasný cíl stránky.
2. Podrobné první zadání se strukturou a technickými požadavky.
3. Cílené úpravy po sekcích s „ostatní neměň”.
4. Funkční odesílání formuláře s ochranou proti spamu.
5. Ruční kontrola textů, mobilu, přístupnosti a výkonu.
6. Nasazení s HTTPS.