Live

Kdy pouzit

Siahnete po /impeccable live, kdyz chcete iterovat na necem vizualne tak, jak byste to delali v designovem nastroji, ale zachovat produkci kod jako vystup. Pruchod podobny platne Figma bez cesty zpet k implementacnimu kroku.

Pouzijte pro:

• Průzkum smeru na realnem prvku. Hero sekce, newsletterova karta, cenova uroven. Tri skutecne odlisne navrhy, vedle sebe, na skutecne strance ve skutecnem kontextu.
• Leyteni UI, ktere je temer spravne. Vite, co vypada spatne, ale nemuzete to presne rici. Vyberte prvek, naskicujte “vice hrave” nebo nakreslete caru pres cast, ktera vas otravuje, a stisknete Go.
• Rychly A/B test mezi dvema smerovy, o kterých se vas tym hada. Vygenerujte varianty, nic nepotvrdte, odejdete. Bodem bylo srovnani.

Neni pro nove zelene louky (siahnete po /impeccable craft) ani celostrankove redesigny (siahnete po /impeccable nebo specializovanem prikazu pro rafinaci).

Jak to funguje

Jeden prikaz zobrazi vyberovy prekryv nad bezicim dev serverem. Vyberte jakykoli prvek. Vedle neho se zobrazi maly kontextovy panel. Napisete volny popis nebo vyberete jeden z akcnich chipu (bolder, quieter, distill, polish, typeset, colorize, layout, animate, delight, overdrive). Volitelne muzete nejprve umistit pin s komentarem nebo nakreslit tahy primo na prvku a dovednost je precte jako umysl.

Stisknete Go. Tri varianty produkce kvality se vygeneruji, kazda ukotvena ke skutecne odlisnemu designovemu archetypu (ne tri variace na barve) a hot-swapped do stranky pres HMR vaseho frameworku. Projizdetejte sipkami. Potvrdte jednu a varianta se zapise zpet do zdrojoveho kodu. Zahodte vsechny tri a original zustava.

Podporuje Vite, Next.js (vcetne monorepos), SvelteKit, Astro, Nuxt a plain static HTML. Pokud ma vas dev server striktni Content Security Policy, nastaveni pri prvním spusteni to detekuje a nabidne jednorazovou, dev-only opravu, aby se vyberovaci nastroj mohl nacist. DESIGN.md ma prednost u vizualnich rozhodnuti, PRODUCT.md ma prednost u hlasu: pokud mate oboji, varianty zustavaji ve znacke bez toho, aby jim to bylo receno.

Vyzkousejte to

/impeccable live

Otevrete URL vaseho dev serveru, vyberte kartu pro prihlaseni k newsletteru, kliknete na chip delight a stisknete Go. Ziskate tri varianty, ktere se lisi napric dimenzemi osobnosti (pocit znacky a pohlednice, typograficke-prekvapeni verze, ilustrovany-akcent), ne tri variace na stejne uprave.

Nebo vyberte hero, napisete “vice editorialne, mene SaaS”, stisknete Go. Tri varianty se ukoti k ruznym editorialnim archetypum (zahlavi broadsheet, katalogove radky spec, poster s prehnanymi glyfy) misto trech odcieniu stejneho napadu.

Zastavte live mode, az budete hotovi: reknete “stop live mode”, zavrete kartu nebo stisknete tlacitko ukonceni na panelu vyberu.

Na co si dat pozor

• Spusteni na strance, ktera je jeste napul rozepsana. Generovani variant v live rezimu potrebuje kontext. Pokud ma prvek zastupny text, obecny Lorem ipsum nebo prednastavene formatovani pred stylesheetem, varianty to odrazi. Nejprve vyplnte obsah.
• Ocekavani, ze udelá makro rozhodnuti. Live mode iteruje na jednom vybraném prvku. Pro “predelat celou cenovou stranku” siahnete po /impeccable nebo /impeccable craft.
• Ignorovani zaloznich zprav. Pokud prvek lezi v generovaném souboru (zkompilovana sablona, vystup sestavení), vyberovaci nastroj to rekne explicitne a nabidne presmerovani potvrzeni do skutecneho zdroje. Nevynucujte potvrzeni do generovaneho souboru: pristi sestaveni to smaze.
• Spusteni bez PRODUCT.md nebo DESIGN.md, kdyz vam zalezi na souladu se znackou. Live stale generuje, ale varianty se prikloni k obecnym vychozim hodnotam. Spustte nejprve /impeccable teach a /impeccable document, pokud ma vysledek zni jako vas produkt.