Aistory: l'editor con l'assistente a sinistra, l'anteprima della homepage al centro e l'ispettore a destra

Case study

Aistory: il builder di contenuti che non esce dal design system

Aistory è un builder di contenuti editoriali per ecommerce: pagine, template e moduli costruiti su un design system a token, con anteprima responsive reale, lingue e mercati, variabili condivise ed export in HTML con Tailwind. Ogni documento ha un assistente basato su Claude che lavora sul contenuto aperto e non può uscire dal design system.

Ho seguito tutto: product design, UX/UI, modello dei dati, comportamento dell'assistente, sviluppo frontend e backend, fino al deploy su Vercel con Supabase.

Il problema

In un ecommerce i contenuti editoriali, hero, banner, griglie, fasce promozionali, passano ancora da uno sviluppatore. Il CMS offre template rigidi, chi scrive i testi non può toccare il layout, e ogni mercato vuole la sua lingua e le sue regole di visibilità. I generatori di pagine con AI fanno l'opposto: producono qualcosa di bello e fuori brand, con colori e font inventati, che poi nessuno riesce a correggere.

Quello che serviva:

Un design system che sia la fonte di tutto, per chi edita e per l'assistente, non una guida PDF da ricordare
Un'anteprima che non menta: lo stesso HTML e lo stesso Tailwind che finiranno nel sito, alla larghezza vera del dispositivo
Un'AI che modifica solo ciò che le chiedi, spiega cosa ha fatto e non può uscire dal brand

Tre livelli, un solo design system

La navigazione ha quattro voci: Pagine, Template, Moduli e Design. Un modulo è un blocco editoriale riutilizzabile, un template è una sequenza di moduli, una pagina è il documento finale con testi reali, immagini e traduzioni. Moduli e template non hanno mai immagini vere, solo segnaposto: le foto si caricano nella pagina, dove hanno un senso.

Il design system è la fondazione: colori, font, scala tipografica fluida, varianti di bottone con i quattro stati, spaziature, griglia e breakpoint. Ogni valore è un token con il prefisso $, e cambiarlo qui lo cambia ovunque. Le variabili come la soglia di spedizione gratuita si scrivono nei testi come segnaposto e si aggiornano in un punto solo.

Lingue e mercati sono separati di proposito: nell'editor c'è solo il selettore della lingua, mentre il paese serve ad anteprima delle regole di visibilità. Il sito esportato riconosce da sé lingua e paese del visitatore.

L'assistente modifica solo ciò che gli chiedi e resta nel brand

L'assistente lavora sul documento aperto: si seleziona un modulo e si chiede «cosa cambio qui», oppure si descrive un modulo nuovo e lo si trova in fondo alla pagina, già nei colori, nei font e nei bottoni del design system. Tocca solo ciò che gli viene chiesto e lascia intatto il resto, e ogni risposta inizia con una o due frasi su cosa ha fatto. Ha memoria per documento, e si possono allegare un'immagine o un PDF per farsi replicare la struttura di un layout con i token del brand, mai i colori copiati dall'immagine.

Le regole del brand non sono un consiglio: l'assistente può usare solo i token del design system. Colori, tipografie e bottoni fuori dal brand, larghezze fisse, prezzi o immagini inventati non sono ammessi, e ogni proposta viene verificata e corretta in automatico prima di entrare nel documento. Le correzioni vengono dichiarate nella conversazione, così chi lavora sa cosa è stato sistemato.

L'ultima verifica è umana: il modulo generato è un modulo come gli altri, si apre nell'ispettore e si modifica a mano.

L'ispettore: auto layout, non CSS

Chi usa Aistory non scrive CSS. L'ispettore ragiona come Figma: flusso in riga o in colonna, larghezza che si adatta al contenuto o riempie il genitore, allineamento, spazio con i token, padding, altezza minima, posizione tra nove punti della sezione. Desktop è la base; tablet e mobile contengono solo le differenze, e un modulo si può nascondere per dispositivo.

Nei moduli custom l'ispettore entra anche nei contenitori del codice: si seleziona un contenitore nell'anteprima o nella Struttura e si cambia il layout senza aprire l'HTML. La vista Codice resta sempre disponibile per chi vuole vederlo o modificarlo a mano.

La tipografia è fluida per costruzione: ogni stile ha un minimo sugli schermi piccoli e un massimo sui grandi, e non servono breakpoint per i testi.

Ispettore, tab Stile: auto layout con flusso, allineamento, spazio a token, padding e altezza minima

Un'anteprima che non mente, un export pronto per il sito

L'anteprima esegue lo stesso codice dell'export, alla larghezza reale del dispositivo scelto, 1440, 768 o 390 pixel, con i font e le immagini responsive che finiranno nel sito. Quello che si vede è quello che si pubblica. Un clic seleziona il modulo e, se c'è, l'elemento.

L'export produce HTML pronto per il sito: traduzioni per ogni lingua, riconoscimento del paese, immagini responsive con caricamento progressivo, visibilità per dispositivo. Il CSS contiene solo le classi usate e non tocca gli stili del sito ospite; chi ha già Tailwind v4 esporta le sole classi. Le traduzioni si esportano e si reimportano in Excel, e il progetto intero si scarica come zip.

Stack e sviluppo

Next.js e React in TypeScript, Tailwind, componenti shadcn, deploy su Vercel, database Postgres, storage e autenticazione su Supabase, Claude API per l'assistente. Ruoli admin ed editor, salvataggio protetto dalle sovrascritture e quota giornaliera per l'AI. Circa 11.500 righe di TypeScript e 36 test automatici su modello, export e import/export Excel.

La scelta di architettura più importante è quella che non si vede: modello, token, export, editor, anteprima e ispettore non sanno su cosa girano. Database, storage e autenticazione vivono in uno strato separato: si possono cambiare senza toccare il prodotto.

Cosa ho imparato

Un design system serve a un'AI solo se è un dato, non un documento. Finché i token erano una guida da ricordare, il modello li ricordava a metà. Quando sono diventati l'unico modo per dichiarare un colore o una tipografia, le generazioni hanno smesso di uscire dal brand.

Un'AI che tocca solo ciò che le chiedi è più facile da controllare: si legge il messaggio, si guarda il modulo, si apre l'ispettore. Tutto quello che non ha toccato è ancora com'era.

E un'anteprima vale quanto la sua fedeltà. Mostrare un'approssimazione e scoprire la differenza nel sito è il modo più rapido per perdere la fiducia di chi pubblica: per questo l'anteprima esegue lo stesso codice dell'export, e non un'imitazione.

In sintesi

Aistory è un builder di contenuti editoriali per ecommerce: pagine, template e moduli costruiti su un design system a token, con anteprima responsive reale, lingue e mercati ed export HTML con Tailwind. L'assistente basato su Claude modifica solo ciò che gli si chiede e può usare solo i token del design system. L'ho progettato e sviluppato per intero, dal modello dei dati al comportamento dell'assistente.

Domande frequenti

Cos'è Aistory?

È un builder di contenuti editoriali per ecommerce: pagine, template e moduli su un design system a token, con anteprima responsive, lingue e mercati, variabili condivise ed export in HTML con Tailwind. Ogni documento ha un assistente basato su Claude.

Come fa l'assistente AI a restare dentro il design system?

Può usare solo i token del design system: colori, tipografie e bottoni fuori dal brand non sono ammessi, e ogni proposta viene verificata e corretta in automatico prima di entrare nel documento. Le correzioni vengono dichiarate nella conversazione, e il modulo generato si apre nell'ispettore come tutti gli altri.

L'HTML esportato funziona su un sito che non usa Tailwind?

Sì. Il CSS esportato contiene solo le classi usate e non tocca gli stili del sito ospite; chi ha già Tailwind v4 può esportare le sole classi. L'export include traduzioni per lingua, riconoscimento del paese, immagini responsive e visibilità per dispositivo.

← Torna ai progetti