Vytvoření webu s AI: praktický průvodce prompt-inženýrstvím pro vývojáře

Vytvoření prezentační stránky za víkend s pomocí AI asistenta: praktický průvodce pro vývojáře

Vývoj jednostránkové stránky s využitím AI asistenta Claude Code představuje nový přístup k webovému vývoji. Tato metoda umožňuje vytvořit plně funkční projekt v omezeném čase bez zapojení externích specialistů, pouze s využitím základních znalostí HTML/CSS a dovedností prompt inženýrství.

Přípravná fáze: obsah a struktura

Před zahájením kódování je nutné připravit obsah a promyslet architekturu projektu. AI asistent může pomoci s generováním textového obsahu, pokud mu poskytnete dostatečný kontext: historii korespondence, materiály z prezentací, popisy projektů. Pro tvorbu životopisu můžete požádat o tři varianty: stručnou, střední a rozšířenou, což výrazně urychlí proces přípravy obsahu.

Struktura stránky musí být detailně zpracována před napsáním prvního promptu. Doporučená architektura pro prezentační stránku řečníka zahrnuje:

• Pevný postranní panel šířky 300px
• Hlavní obsah s sekcemi
• Hero sekci s fotkou a základními údaji
• Blok životopisu
• Karty témat prezentací
• Sekci úspěchů s čísly
• Galerii fotek a videí
• Kontaktní informace

Formulování promptů: od kostry k detailům

Klíčový princip práce s AI asistentem – popsat konečný výsledek, nikoli proces. První prompt by měl vytvořit základní kostru projektu se správnou strukturou a sémantikou.

Příklad efektivního startovacího promptu:

Vytvoř jednostránkovou prezentační stránku řečníka.

Vzhled: tmavý motiv (pozadí #0a0a0a), písmo Raleway přes Google Fonts, akcentní barva #3182CE.

Rozložení: dva sloupce. Levý – přilepený postranní panel 300px: kulatá fotka, jméno, pozice, sociální sítě. Pravý – hlavní obsah s sekcemi: Bio, Témata přednášek (karty), Úspěchy (čísla), Galerie (mřížka fotek), Kontakty.

Požadavky: pouze HTML, CSS a vanilla JS. Žádné frameworky a externí závislosti kromě Google Fonts.

Po získání základní kostry začíná iterační proces vylepšování. Každá iterace by měla řešit konkrétní úkol:

• Typografie a barevné schéma
• Responzivní design
• Interaktivní prvky
• Animace a mikrointerakce

Technické aspekty implementace

Responzivní layout a křížová prohlížečová kompatibilita

Mobilní adaptace vyžaduje zvláštní pozornost. Po desktopových iteracích je třeba explicitně požádat o mobilní verzi:

Na mobilních zařízeních (obrazovka < 768px) se layout rozpadá: postranní panel a obsah stojí vedle sebe, obsah přesahuje obrazovku. Potřeba: postranní panel umístit nahoru, horizontálně (fotka a kontakty v řadě), hlavní obsah níže na celou šířku.

Důležité body křížové prohlížečové kompatibility:

• Kontrola v několika prohlížečích (Chrome, Safari, Firefox)
• Zohlednění prefixů pro CSS vlastnosti
• Testování na tabletech (768-1024px)

Optimalizace výkonu

Po dokončení vizuální části je nutné provést optimalizaci. Typické problémy a jejich řešení:

• Optimalizace obrázků:

- Konverze PNG na WebP

- Změna velikosti na potřebné rozměry

- Použití lazy loadingu

• Optimalizace načítání zdrojů:

- Asynchronní načítání Google Fonts

- Preload pro kritické zdroje

- Opožděné načítání iframe

• Metriky výkonu:

- LCP (Largest Contentful Paint)

- FID (First Input Delay)

- CLS (Cumulative Layout Shift)

Příklad promptu pro optimalizaci:

Stránka vykazuje 38 bodů v PageSpeed Insights. Hlavní problémy: velké obrázky (12 MB profilová fotka), blokující zdroje, absence lazy loadingu pro videa. Optimalizuj načítání: převeď obrázky na WebP, přidej preload pro hlavní fotku, implementuj opožděné načítání iframe.

Deployment a infrastruktura

Možnosti hostingu

• Netlify/GitHub Pages – zdarma, jednoduché nastavení
• Vlastní VPS – plná kontrola, vyžaduje nastavení

Problémy při deployi na VPS

• Velikost písmen v názvech souborů (Linux je citlivý na velikost)
• Absolutní a relativní cesty
• Práva přístupu a izolace uživatelů
• Organizace struktury projektů

Doporučení pro vyhnutí se problémům:

• Používat malá písmena v názvech souborů
• Vyhýbat se mezerám a speciálním znakům
• Dokumentovat infrastrukturu
• Používat systém pro správu verzí (Git)

Co je důležité

• Iterační přístup: Rozdělte vývoj na malé úkoly, každá iterace by měla řešit konkrétní problém
• Kontrola kvality: Kontrolujte kód v několika prohlížečích, používejte nástroje pro analýzu výkonu
• Dokumentace: Zaznamenávejte změny a architektonická rozhodnutí pro možnost návratu
• Optimalizace: Výkon – samostatný úkol, vyžadující zvláštní pozornost po dokončení vizuální části

Práce s kódem: osvědčené postupy

Struktura projektu

Organizujte soubory podle logických skupin:

project/
├── index.html
├── styles/
│   ├── main.css
│   ├── mobile.css
│   └── animations.css
├── scripts/
│   └── main.js
├── images/
│   ├── optimized/
│   └── original/
└── assets/
    └── fonts/

CSS metodologie

Používejte smysluplné názvy tříd podle metodologie BEM:

.speaker-card {
    /* styly karty */
}

.speaker-card__image {
    /* styly obrázku uvnitř karty */
}

.speaker-card__image--rounded {
    /* modifikátor pro zaoblený obrázek */
}

JavaScript pro interaktivitu

Implementujte základní interaktivitu bez frameworků:

// Animace zobrazení prvků při skrolování
const observerOptions = {
    threshold: 0.1,
    rootMargin: '0px 0px -50px 0px'
};

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.classList.add('animate-in');
        }
    });
}, observerOptions);

// Aplikace na všechny prvky s třídou .animate-on-scroll
document.querySelectorAll('.animate-on-scroll').forEach(el => {
    observer.observe(el);
});

Časté chyby a jejich řešení

• Příliš obecné prompty – neuronová síť generuje šablonovitý kód
• Absence omezení – AI přidává zbytečné závislosti
• Přeskočení fáze optimalizace – krásný, ale pomalý web
• Ignorování mobilní verze – ztráta významné části publika

Nástroje pro kontrolu kvality

• PageSpeed Insights – analýza výkonu
• Lighthouse – komplexní kontrola
• BrowserStack – křížové prohlížečové testování
• Git – správa verzí a možnost návratu

— Editorial Team