Live

Cand se foloseste

Apelati la /impeccable live cand doriti sa iterati pe ceva vizual asa cum ati face intr-un instrument de design, dar pastrati codul de productie ca iesire. Fluxul de tip canvas al Figma fara calatoria dus-intors catre un pas de implementare.

Folositi-o pentru:

• Explorarea directiilor pe un element real. O sectiune hero, un card de newsletter, un nivel de pret. Trei variante cu adevarat diferite, side by side, pe pagina actuala cu contextul actual.
• Finisarea unei bucati de UI care este aproape corecta. Stiti ce se simte nepotrivit dar nu puteti spune exact. Alegeti elementul, scribeti “mai jucăus” sau trageti o linie prin bucata care va deranjeaza, apasati Go.
• Un A/B rapid intre doua directii despre care echipa dezbat. Generati variante, nu acceptati nimic, plecati. Scopul a fost comparatia.

NU este pentru functionalitati noi de la zero (apelati la /impeccable craft) sau redesignari de pagina intreaga (apelati la /impeccable sau o comanda de rafinare specializata).

Cum functioneaza

O singura comanda aduce un overlay de selector peste serverul de dezvoltare in executie. Alegeti orice element. O mica bara de context apare langa el. Tastati o descriere libera sau alegeti unul dintre chip-urile de actiune (bolder, quieter, distill, polish, typeset, colorize, layout, animate, delight, overdrive). Optional adaugati pin-uri de comentariu sau trageti linii direct pe element mai intai, iar skill-ul le citeste ca intentie.

Apasati Go. Trei variante de calitate de productie sunt generate, fiecare ancorata la un arhetip de design cu adevarat diferit (nu trei variatii pe culoare) si interschimbate la cald in pagina prin HMR-ul framework-ului. Navigati printre ele cu tastele sageata. Acceptati una si varianta este scrisa in sursa. Respingeti-le pe toate trei si originalul ramane.

Suporta Vite, Next.js (inclusiv monorepo-uri), SvelteKit, Astro, Nuxt si HTML static simplu. Daca serverul de dezvoltare are o Politica de Securitate a Continutului stricta, configuratia de prima rulare o detecteaza si ofera un patch o singura data, doar pentru dev, astfel incat selectorul sa se poata incarca. DESIGN.md castiga la decizii vizuale, PRODUCT.md castiga la voce: daca aveti ambele, variantele ramane on-brand fara sa li se spuna.

Incercati

/impeccable live

Deschideti URL-ul serverului de dezvoltare, alegeti cardul de abonare newsletter, faceti click pe chip-ul delight, apasati Go. Veti primi trei variante care variaza pe dimensiuni de personalitate (un simtimat de stamp-and-postcard, o versiune cu surpriza tipografica, una cu accent ilustrat), nu trei variatii pe acelasi tratament.

Sau alegeti un hero, tastati “mai editorial, mai putin SaaS”, apasati Go. Cele trei variante se ancoreaza la arhetipuri editoriale diferite (masthead broadsheet, randuri de specificatie stil catalog, poster cu glyph supradimensionat) mai degraba decat trei nuante ale aceleasi idei.

Opriti modul live cand ati terminat: spuneti “opriti modul live”, inchideti tab-ul sau apasati butonul de iesire pe bara selectorului.

Capcane

• Rularea pe o pagina care este inca pe jumatate scrisa. Generarea de variante live are nevoie de context. Daca elementul are copy placeholder, Lorem ipsum generic sau formatare implicita pre-stylesheet, variantele vor reflecta asta. Completati continutul mai intai.
• Asteptarea sa faca decizii macro. Modul live itereaza pe un singur element ales. Pentru “refaceti intreaga pagina de preturi”, apelati la /impeccable sau /impeccable craft in schimb.
• Ignorarea mesajelor de fallback. Daca elementul se afla intr-un fisier generat (un sablon compilat, o iesire de build), selectorul spune asta explicit si ofera sa directioneze acceptarea in sursa adevarata. Nu fortati acceptarea in fisierul generat: urmatorul build o va sterge.
• Rularea fara PRODUCT.md sau DESIGN.md cand va pasa de potrivirea brandului. Live va genera in continuare, dar variantele vor tinde spre valori implicite generice. Rulati /impeccable teach si /impeccable document mai intai daca rezultatul trebuie sa sune ca produsul dumneavoastra.