Tvorba webů pomocí AI nástrojů

S nástupem AI se usnadnil svět v mnoha odvětvích a tvorba webů či programování není výjimkou. V tomto článku bych vám rád představil několik AI nástrojů. Osobně je na tvorbu webů používám nebo jsem je alespoň vyzkoušel. Samozřejmě, existuje i několik klasických nástrojů na tvorbu webů, ale s AI je to mnohem jednodušší. Například Webflow do svého nástroje již AI implementovali, a to poměrně nedávno.

 

Jak fungují AI nástroje na tvorbu webů?

V úvodu si představíme, jak takové AI nástroje na tvorbu webů fungují. Většina z nich má jednoduché ovládání a většina první „práce“ spočívá v tom, že danému nástroji popíšete jak má váš web vypadat a co nejdůkladněji popíšete, jaké elementy by na webu měly být.

Typicky první zadání může vypadat takto:

Typ webu: Jednoduchý prezentační web (tzv. „one-page“)
Jazyk: Čeština
Cíl webu: Představit službu podnikatele, který nabízí instalatérské práce v Praze
Design: Moderní, responzivní, přehledný
Barevné schéma: Světlé barvy (např. bílé pozadí, modré a šedé prvky)
Fonty: Bezpatkové, čitelné (např. Open Sans, Roboto)

Struktura webu (sekce)

Úvodní sekce (hero)
– Velký nadpis (např. „Spolehlivý instalatér z Prahy“)
– Krátký popis služby
– Tlačítko „Kontaktujte mně“

O nás / O mně
– Krátké představení (např. kdo jste, co děláte, proč to děláte)

Služby / Co nabízím
– 3–4 bloky se službami, ikonami a krátkým popisem

Reference
– Ukázky projektů

Kontakt
– Kontaktní formulář
– E-mail, telefon
– Odkazy na sociální sítě

Patička
– Copyright, základní odkazy, kontakt

Toto zadání pak v rámci psaní článku vyzkouším na jednotlivých nástrojích, abych porovnal rozdíly mezi nimi a především finální vzhled webů. Podívejte se na jednotlivé AI nástroje na tvorbu webů, které pravidelně používám při své práci. Vybral jsem Lovable, Bolt.new a český nástroj Macaly.

Lovable

Lovable.dev je AI nástroj, který umožňuje vytvářet plnohodnotné webové aplikace a webové stránky pouhým zadáním popisu, jako jsem uvedl výše. Je navržen tak, aby usnadnil vývoj jak technickým uživatelům, tak i těm bez programátorských znalostí. Já osobně jej používám nejvíce a díky němu snadno vytvořím jednoduché webové stránky, ale poradí si i se složitějšími systémy. V Lovable jsem si vyzkoušel vytvořit docházkový systém zaměstnanců, úpravu WordPress pluginů a šablon a vytvoření aukčního portálu. Lovable je univerzální nástroj, s jehož pomocí dokážete upravit a vytvořit v podstatě jakoukoliv webovou aplikaci. Samozřejmě při správném používání.

Výhody nástroje Lovable

Velkou výhodou nástroje Lovable je propojení s Github účtem a vaším repozitářem (pro zkušenější uživatele). Další výhodou Lovable je integrace s nástroji jako Supabase a Stripe, což umožňuje snadné napojení na databázi nebo k platebnímu systému. Velice se mi líbí i jedna z posledních funkcí, která se nazývá „Security Scan“. Tato funkce pomáhá identifikovat bezpečnostní zranitelnosti před nasazením aplikace. Mezi další funkce patří například podpora týmových workspace a možnost spolupráce až 20 uživatelů v rámci jednoho projektu

Lovable je sice primárně v angličtině, ale zadávat a komunikovat s tímto nástrojem můžete samozřejmě v češtině.

Web od Lovable

Nyní se pojďme podívat, jak vypadá výsledný web z našeho zadání přímo od Lovable.

Demo verze: https://praha-instalater-web.lovable.app/

Bolt.new

Bolt.new je AI asistent pro plnohodnotný vývoj webových a mobilních aplikací přímo v prohlížeči. Využívá technologii StackBlitz WebContainers pro běh Node.js, npm balíčků, serverů a browser konzole bez nutnosti lokálního nastavení. Stačí popsat appku („postav mi blog s nabídkou pro instalatéra“) a Bolt založí strukturu projektu, vygeneruje frontend i backend, databázi, integrace i nasazení.

Dokáže se napojit na následující systémy a aplikace:

• Figma (design→kód),
• Supabase (db+auth),
• Stripe (platební brána),
• Netlify (hosting/deploy),
• Expo (React Native),
• GitHub (verze & sdílení).

Bolt.new je sice v angličtině, ale stejně, jako v případě Lovable, můžete zadávat své požadavky v češtině.

Web od Bolt.new

Demo verze: https://tourmaline-gaufre-d8b2be.netlify.app/

Macaly

Macaly je český AI startup zaměřený na tzv. vibe coding – hlasově a textově řízený nástroj pro tvorbu webových a mobilních aplikací bez nutnosti psát kód. Produkt se dostal do ostrého provozu teprve před pár dny. Za projektem stojí zkušený tým vedený Petrem Brzkem, který zastává roli CEO.

Macaly si klade za cíl nahradit „běžné programátory“ ve vývoji jednoduchých až středně složitých aplikací. Svým přístupem a technologií by mohl zrychlit tvorbu MVP i interních nástrojů tím, že umožňuje připravit generický a funkční kód na základě přirozeného jazyka či hlasových instrukcí. To jazykové zadávání promptů (toho, co má nástroj udělat) se mi velice líbí a sám jsem si to několikrát vyzkoušel a výsledek byl super.

Macaly a jeho generování webů je sice pomalejší, než je tomu u Lovable či Bolt.new, ale i tak vám ušetří spoustu času.

 

Web od Macaly

Sodew

Pokud máte rádi redakční systém WordPress, tak můžete vyzkoušet jejich nový nástroj s názvem SODEW. Je to online nástroj, který slouží především k rychlé a snadné tvorbě webových stránek založených na systému WordPress bez potřeby programování či hlubších technických znalostí. Hlavní součástí je AI Builder, což je inteligentní tvůrce stránek poháněný umělou inteligencí, která na základě zadaných informací vytvoří moderní responzivní web během několika minut.

Součástí služby je také AI Hosting pro WordPress, tedy hosting, který se automaticky postará o technické aspekty jako instalaci WordPressu, výkon, zabezpečení a aktualizace, takže uživatel může bez starostí spravovat své stránky. Díky intuitivnímu editoru, šablonám a možnosti „zaplať, kolik chceš“ je Sodew vhodný zejména pro malé podnikatele, blogery, freelancery nebo začátečníky, kteří chtějí mít profesionální web rychle a levně, aniž by najímali programátora

Závěrečné hodnocení AI nástrojů

Jak jsem psal v úvodu, tak já nejčastěji používám Lovable, který mi pomáhá se složitějším programováním WordPress pluginů a šablon, náročnějších systémů a weby obecně. Nicméně jsem několikrát vyzkoušel i Bolt.new a české Macaly. U Bolt.new se mi líbí grafické návrhy a rychlost generování. U Macaly je zase super hlasové zadávání promptů na tvorbu webů. Co se týče samotných výsledků, tak se mi nejvíce líbí web o Bolt.new.

Všechny tyto nástroje lze napojit na Github s tím, že pak máte web ihned k dispozici ve svém účtu. Pro ty méně zkušenější je potřeba uvést, že se weby ve většině případů generují výstupy v React/Next.js a pro nahrání a běžné používání je toto potřeba ve finále zadat do promptu ve stylu: Nyní mi tento web vygeneruj pomocí HTML/PHP a styly v CSS. To všechny tyto nástroje zvládají a grafický design a celý web si pak můžete snadno nahrát například na FTP a začít používat.

Co číst dále: