Embedded Files
Úvod k projektu
Úvod k projektu
Náš tým ve složení Magdalena, Daniela, Romana, Kateřina a Eva se rozhodl prozkoumat možnosti, jak pomocí nástrojů umělé inteligence vytvořit vlastní webové stránky – a to bez předchozích zkušeností s programováním nebo designem. Cílem bylo nejen si prakticky vyzkoušet nástroje generativní AI, ale především si zábavnou formou osvojit celý kreativní proces tvorby webu.
Zadání bylo jednoduché: vytvořit jednostránkový web (tzv. landing page) pro imaginární knihu žánru young adult romantické fantasy. Každá z nás přispěla do projektu svými dovednostmi a zájmy, přičemž jsme si rozdělily role v souladu s našimi silnými stránkami:
Magdalena - připravila návrh obálky knihy, včetně rešerše knižních trendů a vygenerované anotace pomocí AI nástrojů.
Daniela - vytvořila další scény a galerie ilustrací podle zadání a využila AI ke generování vizuálů i popisů.
Eva - vytvořila web o tvorbě webu.
Kateřina a Romana - přispěly zejména při úpravě obsahu a testování celkové estetiky a použitelnosti stránky.
Celý web je vytvořen v HTML a stylován pomocí CSS. Žádné z použitých vizuálů nebo textů nevznikly ručně – všechny texty, ilustrace i jména postav generovala AI na základě našich přesně formulovaných promptů. Výsledkem je plně funkční jednostránkový web propagující smyšlenou knihu Thorns of Crimson and Bone od fiktivní autorky Seraphine Cross, který obsahuje anotaci, ukázku scény, charakterové profily, vizuální prvky i nákupní výzvy.
Tímto projektem jsme si ověřily, že pomocí generativní AI lze během několika hodin vytvořit nejen vizuálně přitažlivý web, ale i celý "marketingový svět" okolo neexistujícího produktu – a to zcela bez programátora nebo grafika.
Jak vzniká náš web: spolupráce, AI a Google Disk
Jak vzniká náš web: spolupráce, AI a Google Disk
Od začátku jsme chtěly pojmout projekt tvorby webu nejen jako technický úkol, ale jako experiment s umělou inteligencí a zároveň příležitost k týmové spolupráci v kreativním duchu. Abychom si proces usnadnily, rozdělily jsme si role a zavedly jednoduchý systém sdílení výstupů přes Google Disk, rozdělený do čtyř složek:
Texty a produktový design – vymyšlený svět, anotace, jména postav i návrh fiktivní knihy.
UX + wireframy – drátěné modely webu, prvotní návrhy rozvržení, inspirace pro strukturu.
Vygenerování a úprava kódu – HTML, CSS, později i jednoduché interakce v JavaScriptu.
Prezentace – podklady k výstupu a popis celého procesu tvorby.
Komunikujeme přes Discord, kde sdílíme prompty, výsledky a navzájem si radíme. Neformální styl a rychlá odezva se ukázaly jako velmi efektivní.
Daniela & Magdalena: AI jako grafik a kodér
Na HTML a grafiku se zaměřily hlavně Daniela a Magdalena. Pomocí ChatGPT a Gemini nástrojů si nechaly vygenerovat základní kostru webu, která je:
plně responzivní (funguje na mobilu i počítači), napsaná čistě v HTML a CSS, s minimem JavaScriptu, strukturovaná podle jednoduchého zadání typu:
„Vytvoř mi jednostránkový web pro deskovou hru pomocí HTML, CSS a JavaScriptu.“ *
* pozn. původní záměr byl prezentovat deskovou hru, později změna na knihu
„Trochu začínám mít pocit, že při velmi specifickém promptování a následné úpravě by i na code mohl stačit chatGPT… Jediná nutnost je to mít dostatečně specifické, případně si nechat dogenerovat nějaké části.“
— Discord chat
To nám potvrdilo, že AI je dostatečně výkonný nástroj i pro technickou část webu, pokud víme, co chceme a umíme správně zadat požadavek. Samozřejmě, výstupy bylo třeba ručně doladit, ale základy se generovaly překvapivě rychle.
Tento přístup nám nejen ušetřil čas, ale umožnil soustředit se více na kreativní stránku projektu – tedy vyprávění příběhu, výtvarné zpracování postav a atmosféru fiktivní knihy.
Tvorba kódu: Když HTML, CSS a ChatGPT tvoří spolu
Tvorba kódu: Když HTML, CSS a ChatGPT tvoří spolu
Jednou z nejzajímavějších a zároveň nejrychlejších částí našeho projektu bylo testování možností AI v oblasti front-end kódování. Naším cílem bylo vytvořit jednoduchý, ale responzivní jednostránkový web – bez použití šablon nebo redakčních systémů, čistě jen pomocí HTML, CSS a případně lehkého JavaScriptu.
První pokusy
První pokusy
Začaly jsme tím, že jsme si nechaly vygenerovat základní kostru webu od ChatGPT. Prompt byl velmi jednoduchý, například:
„Vytvoř mi jednostránkový web pro knihu pomocí HTML, CSS a JavaScriptu.“
Výsledek překvapil – funkční struktura s přehledným rozvržením, sekcemi a responzivním chováním bez nutnosti dalších zásahů.
Tuto fázi jsme si zaznamenaly jako první prototyp, se kterým jsme dále pracovaly. Viz. obrázky níže.
Spolupráce s editorem kódu
Spolupráce s editorem kódu
Na kódování jsme využívaly i integrované AI nástroje v online editorech (např. editor v ChatGPT nebo lze i Replit), které umožňují:
upravovat HTML přímo ve struktuře stránky,
měnit styly v reálném čase v CSS,
rychle přidat nebo odebrat sekce (např. celé scény bez tlačítka „Read More“),
vkládat obrázky, anotace nebo postavy jen zadáním cesty k souboru.
„Magic is real! 🤣 Už nějakou dobu se zajímám o vibecoding a tak, ale o týhle funkci jsem nevěděla. Ono to pak asi bude schopný i generovat do zvláštních souborů a přidat JS a tak, ale zatím je čistý HTML a CSS a to by i na tohle úplně stačilo upřímně.“
— Discord chat
Výhody tohoto přístupu
Výhody tohoto přístupu
Rychlost – základní verze webu vznikla během několika minut.
Flexibilita – struktura se snadno měnila podle potřeb
Nízký práh vstupu – i bez hlubších znalostí kódování jsme byly schopné tvořit.
Učení za pochodu – každou úpravou jsme se učily víc o HTML, CSS i webové architektuře.
Nevýhody tohoto přístupu
Nevýhody tohoto přístupu
Rozhodně to nevrátí čistý a udržitelný kód - je to prostě slepenina všeho.
Předchozí bod vám značně stíží jakýkoliv lidský debugging (a to i u tak jednoduché věci jako je HTML). O ostatních jiných toolech, které jsem zkoušela ani nemluvím, s JS frameworkem je to ještě horší.
Nelze nahrát obrázky přímo do prototypu, takže je nutné je přidat po stažení kódu.
Díky AI jsme si mohly vyzkoušet, jaké to je být webdeveloperem bez předchozí zkušenosti. Tvorba nebyla o slepém kopírování kódu, ale o experimentování, učení a radosti z výsledku, který se postupně skládal před očima.
Ilustrace a scény: Jak vznikaly obrazy z říše temné romantické fantasy
Ilustrace a scény: Jak vznikaly obrazy z říše temné romantické fantasy
Vizuální stránka projektu hrála klíčovou roli. Naším cílem nebylo jen vytvořit textovou anotaci fiktivní knihy, ale oživit její svět pomocí AI generovaných ilustrací – od obálky až po scény plné napětí a emocí.
Vytváření obálky knihy
Vytváření obálky knihy
Magdalena začala celý proces důkladnou rešerší trendů v oblasti romantické fantasy. Pomocí ChatGPT zjistila, jaké prvky se nejčastěji objevují na obálkách (např. ornamenty, barevné kontrasty, absence postav) a jaké tituly aktuálně dominují žánru.
„Chtěla jsem spíš ornamentální obálky bez postav. Prompt jsem proto upravila a nechala si AI vygenerovat návrh obálky na základě stylu knihy jako To Bleed a Crystal Bloom.“
— Magdalena
Finální obálku následně upravila v GIMPu pro vyšší kontrast a čistší vzhled.
Anotace, synopse, postavy – vše z AI
Anotace, synopse, postavy – vše z AI
Ve stejném duchu vznikla celá literární kostra knihy:
název knihy: Thorns of Crimson and Bone
autorka: Seraphine Cross (vygenerované jméno)
anotace, synopse, charakteristiky postav, svět – vše vytvořeno postupně v chatu s AI.
Prompty byly formulovány velmi přirozeně, ale v angličtině, která je při tvorbě obrázků stále výhodnější
„Please give me an annotation of a romance fantasy book...“
„Would you like a synopsis, character profiles, or a sample scene?” – Yes.”
Výsledkem byl ucelený obsah pro web – propracovaný svět, dvě hlavní postavy (Vireya a Kaelen), dramatické scény a poetické repliky.
Scény a jejich vizualizace
Scény a jejich vizualizace
Daniela poté převedla vygenerované scény do podoby vizuálních ilustrací:
Nejprve si nechala pomocí AI vygenerovat detailní popis prostředí a interakce postav (např. v trůnním sále nebo knihovně).
Poté použila AI nástroje k vytvoření obrázků podle těchto scén, přičemž v promptu specifikovala nejen obsah, ale i styl, výraz, emoci:
“Create picture of Kaelen and Vireya based on sample scene...”
“Let her look him in the eyes.”
Obrázky byly doladěny v editoru, aby lépe odpovídaly emočnímu náboji a ladily se stylem celé stránky.
Co jsme si z toho odnesly?
Co jsme si z toho odnesly?
AI je nejen pomocník, ale i spoluautor. Pokud víme, co chceme, zvládne vytvořit celý fantasy svět.
Obrázky nemusí být realistické, stačí, když navodí atmosféru – přesně to ilustrace našich scén splnily.
Promptování je kreativní proces – správné zadání rozhoduje o kvalitě výsledku.
Díky těmto postupům se nám podařilo vizuálně propojit text a design webu tak, aby uživatel vnímal celou stránku jako nahlédnutí do světa knihy.
Tvorba UX: Jak se navrhovalo uživatelské prostředí
Tvorba UX: Jak se navrhovalo uživatelské prostředí
Tato část popisuje návrh UX pro webovou stránku knihy Thorns of Crimson and Bone. Využily jsme k tomu AI nástroje, zejména ChatGPT, a postupovaly krok za krokem – od promyšlení uživatelského toku až po wireframe a kódování.
🎯 Cíle UX a zadání
🎯 Cíle UX a zadání
Prvním krokem bylo definovat, co by mělo být na landing page pro romanticko-fantasy titul.
Pomocí promtu:
"What should be on the one-page web landing page for new bestselling young adult romantasy title?"
jsme získaly návrh typické struktury úspěšné stránky. Cíle byly jasné:
Zaujmout do 5 vteřin
Vytvořit atmosféru temné romance
Postupně odhalit příběh, svět a postavy
Vyvolat akci (koupit, přihlásit se k odběru)
🧭 Uživatelský tok (User Journey)
🧭 Uživatelský tok (User Journey)
Navrhly jsme cestu uživatele stránkou:
+--------------------+----------------------------+----------------------------------------------------------+
| Fáze Uživatelský cíl |UX prvek
+--------------------+----------------------------+----------------------------------------------------------+
| 1. Landing Zájem, atmosféra Hero banner s obálkou a tagline
| 2. Scrollování Získání informací Blurb, citáty, "Proč si ji zamilujete"
| 3. Rozhodování Koupě knihy Tlačítka s odkazy na knihkupectví
| 4. Ponoření Poznání světa a postav Interaktivní karty a sekce o magii
| 5. Navázání kontaktu Připojení se ke komunitě Newsletter, sociální sítě, bonusy
+--------------------+----------------------------+----------------------------------------------------------+
🧱 Struktura stránky
🧱 Struktura stránky
Web funguje jako jednostránková (one-page) prezentace:
Hero sekce – Obálka, tagline a CTA tlačítka
Hook/Blurb – Úvodní popis knihy
Proč si ji zamilujete – Výčet hlavních prvků příběhu
Postavy – Karty postav s citáty a profily
Ukázková scéna – Psaná jako vizuální zážitek
Svět – Interaktivní sekce o říších a magii
Proroctví – Citát ve stylu starého pergamenu
Recenze – Stylizované texty od "čtenářů"
Koupě knihy – Tlačítka Amazon, B&N, IndieBound
Footer – Odkazy, sociální sítě, kontakt
🛠️ Implementace pomocí AI
🛠️ Implementace pomocí AI
Wireframe
GPT nám po dotazu nabídlo možnost vygenerovat wireframe, který odpovídal rozvržení výše.
Prototyp
Na základě dodaných informací GPT vytvořilo HTML/CSS prototyp. Bylo možné:
kód upravovat přímo v chatu (vibe coding)
testovat změny okamžitě
snadno požádat o opravy a návrhy
Stylování (CSS)
Zvolily jsme:
barvy: #8B0000 (krvavá červeň), #1C1C1C (popelavá čerň), #F5F5F5 (kostní bílá)
fonty: Playfair Display a Open Sans
gotické motivy: trny, stíny, pergameny
✔️ Co fungovalo a co ne
✔️ Co fungovalo a co ne
Výhody:
UX se ladilo "naživo"
Možnost okamžitých úprav
GPT generovalo HTML i CSS
Výsledkem byla funkční stránka
Nevýhody:
Kód není čistý a přehledný
Obrázky bylo nutné nahrát ručně
Pokročilé chování (např. JavaScript) je složitější přidat
Interaktivní prototyp již nelze snadno opakovat
📍 Výsledek: Webová stránka vznikla rychle, design odpovídá žánru knihy a stránka vede uživatele plynule od první emoce až po akci. AI zde fungovala jako designér, kodér i UX konzultant
📍 Výsledek: Webová stránka vznikla rychle, design odpovídá žánru knihy a stránka vede uživatele plynule od první emoce až po akci. AI zde fungovala jako designér, kodér i UX konzultant
Finální umístění webu
Finální umístění webu
🌐 Hotový web byl nahostován prostřednictvím služby Tiiny.site, která umožňuje jednoduché a rychlé sdílení statických webových stránek zdarma.
Vytvořený web je dostupný na adrese: 👉 https://booklandingpageproject.tiiny.site/
🧰 Praktické informace
Stránka byla vygenerována jako statický HTML + CSS projekt.
Hostování probíhá přes autorský e-mail, ale aby byla stránka znovu využitelná i ostatními, byl výstup uložen jako ZIP archiv na sdílený Google Disk. Tento ZIP obsahuje: HTML soubor, CSS , optimalizované obrázky (zmenšené pro limity služby)
Kdokoli s tímto ZIPem může stránku nahrát na Tiiny.site. Stačí:
Přejít na https://tiiny.site/
Přihlásit se svým Google účtem
Přetáhnout ZIP do formuláře
Potvrdit vytvoření stránky
Web slouží jako ukázka – jedna stránka na jeden e-mail by měla být zdarma, bez nutnosti další konfigurace.
Checklist_landing_page.pdfPage updated
Google Sites
Report abuse