Když jsem poprvé slyšela o Vibe Codingu, byla jsem opatrná. Další AI nástroj, který slibuje zázraky? Ale po několika týdnech práce s ním musím říct – tohle mění hru pro malé weby. Nenahrazuje roli webdesignéra, ale dává nám superschopnosti. Pojďme si projít, jak na to.
Instalace a nastavení: překousat se začátkem
Popravdě začátek mě trochu potrápil. Nejdřív bylo třeba koupit Claude Pro, pak jsem podle návodu na You Tube rozběhla Claude Code v Terminálu. Poté jsem ho propojila s Visual Studio Code, psalo to nejdřív chybu, ale chat s Claudem mi skvěle pomohl. A konečně jsem mohla začít.
Malý vhled do kódování html/css se hodí
U Vibe Codingu za vás AI kóduje, ale vždy je lepší to, co za vás píše, umět aspoň přečíst, rozumět tomu, co se děje “pod kapotou”. Základy CSS a HTML znám a použila jsem Notebook LM, abych si osvěžila své znalosti včetně struktury webu v rootu.
Dobrý obsah: základ úspěšného webu
Tady přichází ta nejtěžší část – a není to kódování. Jak vést klienta k dobrým textům? Naučila jsem se klást správné otázky, vytahovat z klientů jejich příběh, jejich “proč”.
A i s tímto vám pomůže AI a její deep research. Když klient neumí formulovat, co dělá jeho byznys unikátním, nechám AI prozkoumat konkurenci a trh. Výsledky pak použijeme jako startovací bod pro diskusi. Funguje to skvěle.
Oko pro design: pravidla, která fungují
Design není jen o tom, aby to “vypadalo hezky”. Jde o UI pravidla, která vedou uživatele. Jde o branding, který vypráví příběh. A tady je místo, kde AI zatím nedokáže nahradit zkušeného webdesignera. Osobně využívám připravené Html/CSS šablony od profíků ze zahraničí. Grafiku, kterou potřebuju dotvořit, si uděláv v Canva Pro.
Vibe coding: Když kódování funguje na vlně
A teď začne ta zábava. Napíšete instrukce do .md souboru – popíšete, co chcete, jaký má být mood, struktura, obsah, funkce a uvedete šablonu, ze které má web vycházet.
A pak? Jděte si pro kávu. Claude Code pracuje sám.
Když se vrátíte, máte hotový funkční web. Ne dokonalý, ale fungující základ, se kterým můžete pracovat.
Odladění a spuštění: finální fáze
Nyní přichází část, kde se ukáže vaše zkušenost. Úpravy webu – tady Claude Code poslouchá vaše pokyny a mění, co potřebujete. Rychle. Efektivně.
Nezapomeňte na kontrolu responzivity a SEO základů. A pak ten nejlepší moment – spuštění.
