Designer švédského vibecoding startupu Lovable Felix Haas na svých sociálních sítích nasdílel svoje zkušenosti s tím, jak nejlépe vyvíjet na platformě Lovable.dev. Jeho doporučení jsem prošel a upravil je pro české poměry, protože sám jsem Lovable v poslední době docela dost používal.
Základní principy práce s příkazy
Používejte popisná klíčová slova místo pouhých technických instrukcí. Namísto obecného “Vytvoř mi vstupní stránku / landing page” je efektivnější napsat “Vytvoř velkolepou vstupní stránku, která představí prémiovou wellness značku pomocí příběhových sekcí a špičkového vizuálního designu.” Klíčová slova jako “minimalistický, glassmorfní, plovoucí prvky” nebo “hravý, výrazný, jasné barvy, zaoblené rohy” dokážou okamžitě povýšit kvalitu návrhu, protože je jasné, jaký styl požadujete.
Okamžitě restartujte při neúspěšném prvním pokusu. Pokud první verze neodpovídá představám, neprocházejte dlouhým laděním. Přepište zadání, přeformulujte příkaz a spusťte jej znovu. Podle zkušeností většina nejlepších výsledků vznikla až při druhém pokusu. Nelaďte něco, co vám sežere hromadu času vyladit, nechte si představit jiný návrh a laďte až ten, který se blíží vašim představám.
Využívejte emocionální klíčová slova pro lepší atmosféru. Slova jako “hmatatelný”, “novinářský”, “sebevědomý” nebo “radostný” nejenže mění styl, ale kompletně transformují pocit a atmosféru celého projektu.
Práce s vizuálními prvky a komponentami
Lovable lépe rozumí obrázkům než čistému textu. Pro rychlé opravy pořiďte snímek obrazovky s chybou, zvýrazněte problémové místo a přidejte jednoduchou instrukci: “Toto rozložení působí nevyvážené, prosím udělej ho kompaktnější a čistší.” Pokud jde o drobnější opravy prvků nebo dokonce textů, má promptovací políčko Lovable ikonku zaměřovače označenou jako EDIT. Stiskem této ikonky můžete v prototypu vpravo vybrat patřičný prvek a buďto jej rovnou předělat změnou parametrů, které se objeví v chatovací levé části. Nebo můžete požádat o změnu v plovoucím okénku v prototypu, které vás rovnou vyzývá Ask for quick changes here… To, když nevíte, jak byste konkrétní žáležitosti docílili. A pozor: spuštění Edit chviličku trvá, dole na obrazovce se objevuje nápis Starting live preview - dokud nezmizí, klikání nepomůže a nic neoznačí..
Používejte osvědčené komponentové knihovny. Když výsledek působí obecně, nevynucujte si vlastní řešení. Použijte osvědčené UI knihovny:
- 21st(dot)dev - kolekce moderních UI komponentů
- Aceternity UI - knihovna s efektními, animovanými komponenty
- HyperUI - sbírka kopírovatelných HTML/CSS komponentů
Jak to konkrétně provést:
- Najděte vhodný komponent - Přejděte na jednu z těchto stránek a najděte komponent, který se vám líbí (například moderní pricing card, animované tlačítko, nebo stylový navbar)
- Zkopírujte kód - Na těchto stránkách obvykle najdete tlačítko “Copy” nebo “Copy code”, kterým zkopírujete HTML/CSS kód komponentu
- Vložte do Lovable - V Lovable napište příkaz typu: “Přidej tento komponent:” a vložte zkopírovaný kód, nebo napište: “Vytvoř komponent podle tohoto vzoru:” a vložte kód
- Přizpůsobte obsah - Řekněte Lovable, aby přizpůsobil barvy, texty a velikosti vašemu projektu
Příklad praktického použití: Místo: “Vytvoř cenovou kartu” Lépe: “Použij tuto cenovou kartu z Aceternity UI [vložíte kód] a přizpůsob ji našim barvám a cenám”
Tento přístup šetří čas a zajišťuje profesionálnější vzhled než základní komponenty, které Lovable generuje automaticky.
Přidejte jemné animace pro pocit vyšší kvality. Příkaz “Plynulé hover přechody, postupné zobrazování při posouvání, jemné vstupní animace” nebo “Animuj toto logo při najetí myší” výrazně zvyšuje vnímanou kvalitu produktu.
Optimalizační postupy
Mobilní optimalizaci vyřešte jedním příkazem. Stačí napsat “Udělej tuto stránku responzivní a optimalizovanou pro mobilní zařízení.” Lovable zvládne 80 procent úprav, pouze zkontrolujte obě verze před publikováním.
Používejte univerzální příkaz pro úpravu rozvržení: “Zachovej obsah stejný, ale vylepši rozložení, vizuální hierarchii a dodej pocit prémiového produktu.” Tento příkaz vyřeší 80 procent problémů s designem v jedné větě.
Systémový přístup k vývoji
Navrhujte globální styly před jednotlivými obrazovkami. Nejprve definujte typografii, barvy a logiku rozvržení. Teprve poté přejděte k jednotlivým stránkám a funkcím. Lovable se učí z vašeho systému a aplikuje jej konzistentně.
Poskytujte kontext místo instrukcí. Namísto “Přidej kartu s tlačítkem” napište “Přidej cenovou kartu, která působí prémiově a uklidňuje. Zvýrazni nejpopulárnější plán jemným svitem a stuhou.”
Odkazujte se na kvalitní design. Nevymýšlejte kolo. Použijte formulace jako “Nastyluj to jako cenovou mřížku Apple” nebo “Použij stejné rozvržení navigace jako Notion.”
Kontrolní seznam před publikováním
Před spuštěním aplikace nezapomeňte na tyto kroky:
- přidejte titulek a popis pro vyhledávače
- nahrajte favicon a obrázek pro sociální sítě
- připojte vlastní doménu … a poté publikujte.
Píšte příkazy jako byste instruovali talentovaného designérského stážistu - přesně, promyšleně, ale stále s prostorem pro kreativní interpretaci.
Tyto postupy vycházejí z praktických zkušeností s platformou Lovable, která umožňuje rychlý vývoj webových aplikací pomocí umělé inteligence. Metodiky jsou součástí vzdělávacího programu Lovable Shipped, který učí efektivní práci s touto platformou.
| 