Un file solo, e l'AI smette di disegnare a caso

L'AI non ha gusto. Se non le dai un riferimento, ti restituisce la media di internet: font di sistema, azzurrino, tutto uguale. Qui c'è il file che le dà il tuo, e i quattro passi per caricarlo una volta sola.

Perché le pagine fatte con l'AI si somigliano tutte

Chiedi a Claude di costruirti una landing e viene fuori una cosa che funziona ma non sembra tua. Poi scrivi «fallo più premium», e cambia due ombre. Il problema non è il modello: è che «premium» non è un'istruzione. È un desiderio.

Un modello che non ha un riferimento visivo fa l'unica cosa sensata: la media. Prende tutto quello che ha visto e ti restituisce il centro esatto. Il centro esatto di internet è grigio.

La differenza tra una pagina che sembra fatta da un designer e una che sembra fatta da un'AI non è il talento. È che la prima ha delle regole — questo font, questa scala di spazi, questi sei colori, i bottoni fatti così — e le rispetta su ogni sezione. La seconda le reinventa ogni volta.

Sotto ci sono i quattro passi. La prima volta ti costano mezz'ora. Dalla seconda in poi, zero: il file è già caricato.

I 4 passi

1. Scegli lo stile da un sito che ti piace davvero

Vai su Refero Styles: è una libreria di oltre duemila design system estratti da siti veri e già smontati pezzo per pezzo — colori, tipografia, spaziature, componenti.

Non scegliere «il più bello». Scegli quello più vicino a quello che vendi. Un sito editoriale pieno di testo e una landing con tre righe e un bottone hanno bisogno di due sistemi diversi: se prendi lo stile sbagliato, l'AI lo applicherà benissimo alla cosa sbagliata.

2. Copia il file DESIGN.md

Ogni stile ha il suo DESIGN.md: un unico file di testo che descrive il sistema in modo che un modello lo possa leggere. Dentro ci sono i valori veri — i codici colore, la scala tipografica, i passi di spaziatura, come sono fatti bottoni e card.

È tutto qui il trucco: non stai mandando uno screenshot da imitare. Stai mandando le regole, scritte.

3. Caricalo come skill

Non incollarlo nella chat. Se lo incolli, vive quanto quella conversazione e poi sparisce.

Caricalo come skill (o come file di progetto, se preferisci lavorare a progetti): così resta disponibile in ogni chat futura, e non devi rispiegare niente. Si fa una volta. Vale per Claude e vale per Codex.

4. Attiva la skill e costruisci a sezioni

Da qui in poi, prima di chiedere qualsiasi pagina, attivi la skill. Il modello non parte più dal foglio bianco: sa già che carattere usi, quanto spazio lasciare, che colori, che forma hanno i bottoni.

E costruisci una sezione alla volta — prima l'header, poi la sezione sopra la piega, poi le altre. Non è pignoleria: una pagina intera in un colpo solo è dove il modello ricomincia a improvvisare, perché sta tenendo insieme troppe cose contemporaneamente.

Il prompt

Questo è quello che uso io dopo aver attivato la skill. Vale per ogni sezione: cambi solo il nome nella prima riga — «hero», «prezzi», «footer», quello che ti serve.

L'ultima riga è quella che conta. Costringendolo a dichiarare le regole prima di scrivere, ti accorgi subito quando sta per andare per conto suo — e lo correggi prima, non dopo aver visto la pagina storta.

Cosa non fare

Perché ti sto dando questa guida

Perché il sito che stai leggendo è fatto così. La home, la pagina dello Stack AI, l'indice delle guide: pagine diverse, stessa faccia. Non le ho disegnate io — le ha costruite l'AI seguendo un file di regole, e io ho corretto.

Io il mio file me l'ero già scritto, ed è il pezzo che mi ha portato via più tempo. Quelle duemila librerie servono esattamente a saltare quel pezzo: parti da un sistema che funziona già invece di costruirtene uno da zero.

Non è una cosa da designer. È una cosa da chi ha una landing, una pagina della guida e un blog, e non ha voglia che sembrino tre siti diversi.

Fonte del dato: Refero Styles (styles.refero.design), libreria consultata il 01/09/2026.