Dal design al sito con l'AI senza perdere i dettagli

Se dai a un agente AI solo l'immagine del tuo design, ottieni una pagina che a prima vista sembra uguale, ma perde i dettagli: il font esatto, gli spazi, le ombre, le forme piccole. Aggiungi mezza pagina di numeri veri e la regola "i numeri vincono", e l'agente li azzecca quasi tutti al primo colpo. Ti servono circa dieci minuti per schermata, e qui trovi la scheda e i prompt pronti.

Cos'è

È un modo di consegnare un design a un agente AI che scrive codice. Non solo l'immagine, ma l'immagine più una scheda: font con lo spessore esatto, codici dei colori, dimensioni del testo, spazi, angoli e ombre. La scheda dice all'agente quello che un'immagine non può dire con precisione.

Alek l'ha messo alla prova con un solo design e Claude Code. Il design è la parte alta della home di un'app inventata per le mattine, Morrow: logo e tre link, un titolo grande con una parola in verde e in corsivo, un paragrafo, due pulsanti, una fila di cerchietti colorati e una card verde con un sole, due colline e due etichette bianche. Esportato come immagine a 1280 per 760 pixel, come faresti dal tuo programma di design.

Poi l'ha consegnato in tre modi diversi e ha sovrapposto ogni risultato al design, colorando di rosa ogni pixel fuori posto.

Perché serve

Nel passaggio dal design al sito la qualità si perde quasi mai nelle cose grandi. Si perde nelle piccole.

Prova 1, solo l'immagine. All'agente l'immagine e una frase: costruisci questo design come pagina web, in un unico file. Dopo circa un minuto la pagina c'era, e ci andava vicino: stessa impaginazione, stesse parole, card, sole ed etichette.

Sovrapposta al design, però, quasi tutto il testo era rosa: ogni elemento spostato di qualche pixel o disegnato con una versione un po' diversa del font. Circa il 3,2% dei pixel non coincideva.

L'agente, messo a confrontare la sua pagina con il design, ha trovato 36 differenze. Cadono in cinque gruppi:

• Il font è giusto, la versione no. Titolo con spessore 700 invece di 600 e uno stile diverso. Stesso nome, effetto diverso: sembra urlare.
• I piccoli spazi si sommano. 2 pixel in più sopra il titolo e 2 sotto: i pulsanti finiscono 4 pixel più in basso.
• I colori sono quasi giusti. Sfondo #F5F0E6 invece di #F6F1E7, due grigi diversi invece di uno. Non sai dire cosa non va, ma la pagina sembra meno calma.
• Le ombre vengono indovinate. L'ombra del pulsante principale era più chiara e più larga. In un'immagine un'ombra è difficile da leggere, quindi l'agente ne inventa una.
• Le forme piccole vengono semplificate. Il logo a foglia è diventato un arco. Un'etichetta semitrasparente è diventata grigia piena.

Nessuna di queste è una cosa che l'agente non sa fare. Ha dovuto indovinare, e un'ipotesi fatta guardando un'immagine è sempre un po' sbagliata.

Prova 2, prima i numeri. Cartella pulita, stessa immagine più una scheda di mezza pagina, e un prompt che dice: la scheda vince sull'immagine. Risultato: circa lo 0,7% di pixel diversi, meno di un quarto della prima prova. Restavano tre link spostati di lato, qualche scritta fuori di un pixel e le curve delle colline.

Prova 3, correggere dopo. Si riparte dalla prima pagina: all'agente il design, uno screenshot della sua pagina e la scheda, con la richiesta di elencare le differenze e correggerle. Migliora, ma si ferma a circa il 2,0%. Probabilmente perché ogni correzione è un ritocco sopra una struttura nata da ipotesi, e alcune ipotesi restano.

La lezione: i numeri vanno dati prima, non dopo. Costano dieci minuti e ti risparmiano i giri di "rendilo più simile".

Come si fa

1. Esporta la schermata come immagine alla sua dimensione reale, così l'agente vede l'impaginazione.
2. Scrivi accanto la scheda. Font con spessore esatto, ogni colore con il suo codice, dimensioni del testo, spazi principali, arrotondamento degli angoli, ombre. Copiali dal pannello di ispezione del tuo programma di design, quello dove clicchi un elemento e vedi font, dimensione, colore e spaziatura. Basta mezza pagina.
3. Scrivi che la scheda vince. Se immagine e scheda non coincidono, si segue la scheda.
4. Rendi disponibili i font. Installali o indica dove sono i file, e chiedi all'agente di usarli con il loro nome. La versione sbagliata del font giusto è l'errore che si nota di più.
5. Chiedi su cosa non era sicuro. Quella lista ti dice quali numeri mancano nella scheda.
6. Fagli vedere il risultato. Dagli un modo per fare uno screenshot della pagina, oppure fallo tu e passaglielo. Chiedi la lista delle differenze prima di qualsiasi correzione, e correggi con i numeri, non con un generico "rendila più simile".

Pronto da copiare, la scheda da riempire (cancella le righe che non servono):

Pronto da copiare, il prompt da dare insieme all'immagine e alla scheda:

E quello per il controllo, quando la pagina c'è:

Prova piccola

Prendi una schermata che hai già disegnato, la più semplice. In dieci minuti scrivi la scheda copiando i numeri dal pannello di ispezione. Dai all'agente immagine, scheda e prompt. Poi apri la pagina accanto al design, alla stessa larghezza, e guarda tre cose: il titolo ha lo stesso peso? I pulsanti sono alla stessa altezza? Il colore di sfondo è lo stesso codice? Se tutte e tre tornano al primo colpo, il metodo funziona. Se l'agente ti segnala dei valori incerti, quelli sono i numeri da aggiungere alla scheda la prossima volta.

Attenzione a

• La nostra scheda era perfetta. Il design della prova era costruito con valori esatti. In un progetto vero copi i numeri a mano, e un numero copiato male diventa un errore che l'agente segue fedelmente.
• Quello che descrivi solo a parole resta incerto. Le colline erano descritte a parole, l'agente le ha indicate come il punto meno sicuro, ed è proprio lì che ha sbagliato. Se una forma conta, dalle misure o un file.
• L'agente spesso non vede la sua pagina. In queste prove poteva solo leggere e scrivere file, e l'ha detto lui stesso: non poteva controllare il risultato. Senza uno screenshot lavora alla cieca.
• Le percentuali sono indicative. Il 3,2% o lo 0,7% di pixel diversi servono a confrontare le prove tra loro, non sono un voto alla qualità della pagina.

Il passo dopo: scrivi oggi la scheda di una schermata e guarda quanto si avvicina la prima versione. Se invece devi rifare un'app che esiste già, leggi come fare un redesign con l'AI senza rompere il codice. Per partire da un riferimento vero con il prompt già scritto c'è la galleria di prompt di design.

Questa pillola nasce da un articolo di Alek su Medium. Prompt scritti per non perdere i dettagli li trovi anche su MagpUI, la galleria che Alek sta costruendo: ogni pezzo appartiene al suo autore e rimanda all'originale.

In breve: Un'immagine da sola porta l'AI vicina al design; immagine più mezza pagina di numeri veri, con la regola che i numeri vincono, porta quasi tutto al primo colpo.