Live

Quando usarlo

Ricorri a /impeccable live quando vuoi iterare su qualcosa visivamente come faresti in uno strumento di design, ma mantenendo il codice produzione come output. Il flusso simile-a-canvas di Figma senza il giro di implementation step.

Usalo per:

• Esplorare direzioni su un elemento reale. Una sezione hero, una card newsletter, un tier di pricing. Tre interpretazioni genuinamente diverse, affiancate, sulla pagina effettiva con il contesto effettivo.
• Rifinire un pezzo di UI che è quasi giusto. Sai cosa sembra fuori ma non riesci a dirlo esattamente. Seleziona l’elemento, scrivi “più giocoso” o disegna un tratto sulla parte che ti disturba, premi Go.
• Un rapido A/B tra due direzioni su cui il tuo team sta dibattendo. Genera varianti, non accettare nulla, chiudi. Il punto era il confronto.

NON è per nuove funzionalità greenfield (usa /impeccable craft) o redesign di intere pagine (usa /impeccable o un comando di rifinitura specializzato).

Come funziona

Un comando richiama un overlay picker sopra il tuo dev server in esecuzione. Selezioni qualsiasi elemento. Una piccola barra contestuale appare accanto. Scrivi una descrizione libera o seleziona uno dei chip azione (bolder, quieter, distill, polish, typeset, colorize, layout, animate, delight, overdrive). Opzionalmente lascia prima dei pin di commento o disegna tratti direttamente sull’elemento, e la skill li legge come intento.

Premi Go. Tre varianti di qualità produzione vengono generate, ciascuna ancorata a un archetipo di design genuinamente diverso (non tre variazioni sul colore) e scambiate a caldo nella pagina tramite l’HMR del tuo framework. Scorri tra loro con i tasti freccia. Accettane una e la variante viene scritta nel sorgente. Scarta tutte e tre e l’originale rimane.

Supporta Vite, Next.js (inclusi monorepo), SvelteKit, Astro, Nuxt e HTML statico. Se il tuo dev server ha una Content Security Policy rigida, la configurazione al primo avvio la rileva e offre una patch una-tantum, solo per il dev, così il picker può caricarsi. DESIGN.md vince sulle decisioni visive, PRODUCT.md vince sulla voce: se hai entrambi, le varianti rimangono on-brand senza che venga detto.

Provalo

/impeccable live

Apri l’URL del tuo dev server, seleziona la card di iscrizione alla newsletter, clicca il chip delight, premi Go. Riceverai tre varianti che variano attraverso le dimensioni di personalità (un feel francobollo-e-cartolina, una versione sorpresa-tipografica, una con accento illustrato), non tre variazioni dello stesso trattamento.

Oppure seleziona un hero, scrivi “più editoriale, meno SaaS”, premi Go. Le tre varianti si ancorano a diversi archetipi editoriali (masthead di broadsheet, righe di specifiche in stile catalogo, poster con glifo oversize) invece di tre sfumature della stessa idea.

Ferma la live mode quando hai finito: dì “stop live mode”, chiudi la tab o premi il pulsante di uscita sulla barra del picker.

Insidie

• Eseguirlo su una pagina ancora scritta a metà. La generazione di varianti live ha bisogno di contesto. Se l’elemento ha copy segnaposto, Lorem ipsum generico o formattazione predefinita pre-stylesheet, le varianti rifletteranno quello. Riempi prima il contenuto.
• Aspettarsi che prenda decisioni macro. La live mode itera su un singolo elemento selezionato. Per “rifai l’intera pagina pricing”, ricorri a /impeccable o /impeccable craft.
• Ignorare i messaggi di fallback. Se l’elemento si trova in un file generato (un template compilato, un output di build), il picker lo dice esplicitamente e offre di instradare l’accettazione nel vero sorgente. Non forzare l’accettazione nel file generato: la prossima build lo cancellerà.
• Eseguirlo senza PRODUCT.md o DESIGN.md quando ti importa della coerenza brand. Live genererà comunque, ma le varianti tenderanno verso valori predefiniti generici. Esegui prima /impeccable teach e /impeccable document se il risultato deve suonare come il tuo prodotto.