Cue 01 · Aggancio all’intestazione · 0 → 0,6 schermi
Il CMS che gli studi di design consegnano ai clienti.
Costruisci nell’editor visivo, sul design system del sito; metti in scena il movimento con le scene GSAP; pubblica in tutte le lingue del sito. Il cliente cambia testi e immagini. Il design resta tuo.
Cue 04 · Lettura guidata · linea al 70%
Il lavoro migliore di uno studio si perde alla consegna. Il cliente apre il CMS, cambia un titolo e la griglia cede. Il movimento che è costato una settimana resta nel branch di uno sviluppatore. La versione inglese arriva in un PDF. Libretto tiene separate le parti: il design system è tuo, il movimento è messo in scena, e al cliente restano le parole, in tutte le lingue del sito.
Atto I
La partitura: un design system per ogni sito
Colori, caratteri, spazi e forme sono token del sito, con temi per le sezioni scure. Ogni componente ha le sue varianti, taglie e stati (al passaggio, premuto, disattivato), impostati per breakpoint in un’unica tabella. Cambi l’accento una volta e lo seguono tutti i pulsanti, i link e le schede che lo usano. Un salvataggio che porterebbe un testo sotto il contrasto AA viene rifiutato prima di arrivare al sito.
Nessun aspetto nei contenuti.
Una pagina conserva testi, immagini e la variante che usa, mai un colore o una misura.
Da eccezione a variante.
Uno stile nato su un solo elemento diventa una variante del componente, pronta ovunque.
I tuoi font, sul tuo sito.
I Google Fonts vengono ospitati sul sito con la licenza registrata, oppure carichi i tuoi WOFF2.
Inspector · i token di questa pagina
font.size.display-xl · Softcore Bold · 44→88 px · 0,9
font.size.display-l · Softcore Italic · 34→64 px · 1,02
font.size.body · Softcore Regular · 17→18 px · 1,55
font.family.mono · IBM Plex Mono · 12 px · +0,06em
paper #EDECE8
ink #141414 15.6:1
cue #B81F18 5.47:1
go #17703D 5.19:1
Atto II
La messa in scena: il movimento in scene, senza codice
Scegli un elemento, scegli una ricetta, regola i parametri. Libretto scrive la timeline GSAP con ScrollTrigger e la esegue sulla pagina pubblicata: fissata, legata allo scorrimento o al primo gesto. Ogni scena ha la sua versione a movimento ridotto: chi ha chiesto meno animazioni vede lo stato finale, non una pagina rotta.
Cue 05 · Sequenza allo scorrimento · 72 fotogrammi · fissata per 3 schermi · sei passi
- 01Una pagina vuota: niente intestazione, niente piè di pagina, ancora niente.
- 02Il marchio prende la misura dai token tipografici, un passo alla volta.
- 03Arriva l’intestazione del sito: contiene il posto dove si aggancerà il marchio.
- 04Titolo, testo d’apertura e pulsante, scritti nell’inspector.
- 05Aggancio all’intestazione, scelto tra le ricette di movimento.
- 06L’anteprima scorre la scena: il marchio viaggia fino all’intestazione.
Il programma
All’arrivo
Intro al primo gesto · Composizione al primo gesto · Aggancio all’intestazione · Menu che compaiono
Su tutta la pagina
Una parola per sezione · Inverti sulle foto · Aggancio ai pannelli
Allo scorrimento
Comparsa allo scorrimento · Parallasse · Lettura guidata · Chiusura che viene spinta via · Nascondi dopo lo scorrimento · Sequenza allo scorrimento
In scena, già pronti come componenti
Marquee · Scia di immagini · Rivelazione a riflettore · Sequenza di immagini · Scorrimento orizzontale · Prima e dopo · Pannelli espandibili · Carosello · Testo animato · Contatore · Mega menu
Scene e ricette nella guida →Atto III
Le parole: il cliente scrive, il design regge
Inviti il cliente come autore dei contenuti. Cambia testi e immagini nello stesso editor e non può toccare token, varianti o scene. L’attività registra chi ha cambiato cosa, e quando.
Prima e dopo · EN / IT · questa pagina. Trascina, o usa le frecce, per passare all’italiano.
Fino a dodici lingue per sito, affiancate nell’inspector. Un testo ancora da tradurre mostra quello della lingua principale finché qualcuno non lo scrive: nessuna pagina resta vuota. Ogni pagina dichiara ai motori di ricerca le sue versioni linguistiche con hreflang, nell’intestazione e nella sitemap.
Repertorio
Cue 07 · Indice dei progetti · anteprima
Siti in produzione su Libretto. Aprine uno, poi cerca nella guida come è fatto: ogni effetto è una ricetta che puoi impostare.
Atto IV
La prima: anteprima, pubblicazione, ritorno a una versione
Vedi la bozza come la vedranno i visitatori, a ogni breakpoint e in ogni lingua, da ospite o da membro. Pubblichi con una nota: ogni pubblicazione è una versione. Se una pagina ha un problema, la pubblicazione si ferma e indica l’elemento da sistemare. Riattivi una versione precedente ed è di nuovo online, mentre la bozza corrente viene messa da parte, non persa.
Le pagine sono generate sul server. L’HTML contiene già ogni parola, gli stili e l’immagine principale: la pagina si disegna prima che arrivino gli script, e i motori di ricerca la leggono tutta. La pagina di pubblicazione mostra i Web Vitals dei visitatori reali: LCP, INP e CLS al 75° percentile.
Pubblicazione e versioni →
Cue 08 · Rivelazione a riflettore · bozza sotto, pubblicata sopra
Il suggeritore
Il suggeritore: gli agenti lavorano accanto a te, con le stesse operazioni
All’opera il suggeritore passa le battute dalla buca; chi canta decide. In Libretto ogni modifica è un’operazione, e l’editor, la CLI e il server MCP eseguono le stesse.
Colleghi un agente a /api/mcp e riceve cinque strumenti. Vede solo le operazioni che il suo ruolo consente, può provare un insieme di modifiche senza applicarle, e ogni insieme lascia una riga nel registro. L’annulla vale per le sue modifiche come per le tue.
site_context
chi è l’agente, su quale sito, con quale ruolo
discover_operations
le operazioni che il suo ruolo può eseguire, con i loro input
read_resources
pagine, alberi, strutture, il design system
dry_run_ops
un insieme provato e annullato, con le sue segnalazioni
apply_ops
l’insieme applicato, una riga nel registro
Una sessione reale su questo sito, eseguita con la CLI e accorciata; le ultime due righe sono le sue righe nel registro.
agent > Tighten the manifesto's measure to 28ch. $ splash context site libretto · theme standalone · role admin $ splash apply batch.json --dry-run tree.commit set_style oqqzd0zj p:body { max-width: 28ch } dry run changed · tree revision 1 → 2 · rolled back findings a11y.heading-order (warning) · structure.empty-box-paint ×4 $ splash apply batch.json applied request d8e4dad6 · tree revision 2 audit #261 10:11:42 admin mcp:dry_run_ops dryRun true audit #262 10:11:51 admin mcp:apply_ops dryRun false
Dietro le quinte
- Membri
- Iscrizione, conferma e accesso sul sito. Sezioni e pagine riservate a membri o ruoli non arrivano agli ospiti, neppure nel codice sorgente.
- Moduli
- Una casella per ogni modulo, esportazione CSV, destinatari, consenso privacy, un campo che compilano solo i bot, un tempo minimo di compilazione.
- Componenti del sito
- Costruisci una parte una volta e la usi come istanze che mantengono le proprie modifiche.
- Menu
- Un solo menu alimenta il mega menu su desktop e il pannello sui telefoni.
- Parti pronte
- Ricerca, indice, schede, FAQ, timeline, tabella di confronto, calendario eventi, galleria con filtri: tutte con lo stile del design system del sito.
- Pacchetto del sito
- Esporti la bozza di un sito come pacchetto di pagine, componenti, menu e media, e lo importi in un sito nuovo.
Domande
È un CMS visivo come loro, costruito attorno a tre cose che gli studi chiedono di continuo: un design system per ogni sito che il cliente non può scavalcare, il movimento creato come scene GSAP nell’editor, e agenti che lavorano con le stesse operazioni tracciate che usi tu. Le pagine sono generate sul server e ospitate da Libretto.
Non dai contenuti. Una pagina conserva testi, immagini e la variante di ogni componente, mai un colore o una misura, e un autore dei contenuti non può aprire il design system né le scene. L’attività registra ogni modifica, e ogni versione pubblicata può tornare online.
No. Scegli un elemento e una ricetta (fissare, legare allo scorrimento, sequenza di immagini, lettura guidata, aggancio all’intestazione e altre) e ne regoli i parametri nel pannello del movimento. Ogni ricetta ha già la sua versione a movimento ridotto.
Testi, stili e immagine principale sono già nell’HTML del server: la pagina si disegna prima che arrivi il codice delle animazioni, e chi chiede movimento ridotto vede pagine ferme. La pagina di pubblicazione mostra LCP, INP e CLS dei visitatori reali, così vedi quanto costa ogni scena che aggiungi.
Fino a dodici lingue per sito. Ogni testo, compresi titolo e descrizione di ogni pagina, ha una casella per lingua; quello non tradotto mostra la lingua principale. Le pagine dichiarano hreflang nell’intestazione e nella sitemap, e i dati strutturati di FAQ e organizzazione vengono generati in automatico.
Solo quanto glielo consente il suo ruolo. Un agente si collega via MCP, vede solo le operazioni che il suo ruolo può eseguire, può provare un insieme di modifiche prima di applicarlo, e ogni insieme finisce nel registro. L’annulla vale per le sue modifiche come per le tue.
Sì: ogni sito può essere servito sul suo dominio, configurato insieme a noi.
La bozza di un sito si esporta come pacchetto di pagine, componenti, menu e media, importabile in un altro workspace Libretto.
L’accesso è su invito mentre accogliamo i primi studi; il prezzo lo concordiamo con ogni studio prima che il suo primo sito vada online.
La legge una persona e ti risponde per email entro 2 giorni lavorativi. Se è il caso, creiamo il workspace del tuo studio e ti mandiamo un invito per scegliere la password.
Cue 10 · Comparsa allo scorrimento
Porta un progetto. Apriamo la sala.
Richiedi l’accesso
Dicci chi sei e cosa costruiresti. Ogni richiesta la legge una persona. Niente newsletter: ti scriviamo solo per la tua richiesta.