Ecco la traduzione in italiano del testo fornito, seguendo scrupolosamente tutte le linee guida specificate.
Le specifiche del design system di Vercel sono davvero un esempio da manuale di ciò che ho visto finora.
Oggi ho studiato a fondo il loro DESIGN.md. Con temi sia chiari che scuri, descrive in modo completo colori, font, spaziature, componenti, animazioni e regole di copywriting, trasformandoli in una metodologia di design eseguibile.
Sento di poter seguire questa strada per il design.md di tutti i miei prodotti futuri.
I dettagli sono qui:
Alcuni amici potrebbero non avere le idee chiare su cosa sia DESIGN.md. In parole povere, è una specifica di design pensata per essere letta dall'AI. Quando l'AI ci aiuta a scrivere codice, ha bisogno di sapere quali colori usare, quali dimensioni dei caratteri applicare e la spaziatura tra gli elementi.
Senza questo file, le interfacce prodotte dall'AI appaiono diverse ogni volta, con uno stile incoerente.
Dopo aver letto il DESIGN.md di Vercel, ho capito che un buon DESIGN.md è molto più che dire all'AI quali codici esadecimali o dimensioni dei caratteri usare. Rappresenta un intero modo di pensare al design. Ha decisamente stravolto la mia percezione.
Oggi analizzerò perché questo file è così valido.
1
Prima di tutto, parliamo del colore.
Quando ho iniziato a scrivere DESIGN.md, la sezione dei colori era in realtà molto semplice. Elencavo alcuni valori di colore, dicevo all'AI qual era il colore primario, secondario e d'accento, e basta.
Ma scrivendolo in questo modo, l'AI ancora non sa come questi colori corrispondono ai diversi stati di interazione.
Ad esempio, per un pulsante, di che colore dovrebbe essere lo stato predefinito? Quanto più scuro dovrebbe diventare al passaggio del mouse? Di che colore dovrebbe essere nel momento in cui viene cliccato? Se questi dettagli non sono definiti esplicitamente, i risultati generati dall'AI possono differire ogni volta.
L'approccio di Vercel risolve completamente questo problema.
Nel loro design system, ogni serie di colori è suddivisa in 10 gradienti da 100 a 1000, e ogni numero corrisponde a uno stato dell'interfaccia fisso.
100 è lo sfondo predefinito degli elementi, 200 è lo sfondo al passaggio del mouse e 300 è lo sfondo al clic. Salendo, 400 è il bordo predefinito, 500 è il bordo al passaggio del mouse e 600 è il bordo al clic.
700 è usato per blocchi di colore pieno, come tag o il pulsante stesso; 800 è lo stato al passaggio del mouse per questi blocchi. 900 è usato per testo secondario e icone, e 1000 è usato per testo primario e icone.
Sembra solo una numerazione, ma dietro c'è una logica di interazione completa.
Da 100 a 300 gestiscono gli stati di sfondo. Da 400 a 600 gestiscono gli stati dei bordi. 700 e 800 gestiscono gli stati dei blocchi di colore pieno. 900 e 1000 gestiscono la gerarchia delle informazioni.
In altre parole, Vercel sta in realtà dicendo all'AI che ci sono diversi stati qui. Il colore è solo la manifestazione di questi stati.
I vantaggi di questo sono molto diretti.
Quando l'AI scrive codice, non ha bisogno di indovinare quanto più scuro debba diventare un pulsante al passaggio del mouse, né deve indovinare come dovrebbe cambiare il bordo. Lo stato predefinito corrisponde a 100, il passaggio del mouse a 200 e il clic a 300; le regole sono predefinite.
Inoltre, su questa base, Vercel fornisce sia temi chiari che scuri, ma utilizza esattamente gli stessi nomi di Token.
Ad esempio, gray-1000. Nel tema chiaro, è #171717, vicino al nero puro. Nel tema scuro, diventa #ededed, vicino al bianco puro.
Per un design system, questi due colori sono in realtà la stessa cosa.
Entrambi rappresentano l'informazione più importante sulla pagina. Sviluppatori e AI, quando generano interfacce, si concentrano sul significato semantico di gray-1000 piuttosto che sul valore esadecimale specifico che c'è dietro. Quando il tema cambia, il sistema mappa automaticamente questo significato semantico al colore corrispondente.
2
Dopo aver risolto il problema del colore, un altro vincolo più importante è il ritmo della pagina.
Il sistema di spaziatura di Vercel si basa su multipli di 4px, fornendo solo 9 valori in totale: 4, 8, 12, 16, 24, 32, 40, 64, 96. Tutte le spaziature nell'intero prodotto sono scelte da questi numeri.
La mia prima reazione è stata che sembrava un po' limitato. E se avessi bisogno di 20px? E se avessi bisogno di 28px?
Ho chiesto a un amico designer, e lui ha detto che per la stragrande maggioranza dei prodotti, 9 stili di spaziatura sono sostanzialmente sufficienti.
Se ci sono troppe scelte di spaziatura, il ritmo della pagina si perde. Molti siti web terribili hanno progetti di spaziatura molto casuali. Questo è in realtà un grande tabù nel design del prodotto.
I sistemi di design eccellenti non danno infinite scelte; limitano attivamente le scelte.
Vercel fornisce direttamente una serie chiara di suggerimenti sul ritmo: mantenere 8px tra gli elementi all'interno di un gruppo, 16px tra i gruppi e da 32 a 40px tra le sezioni. Questo sta effettivamente definendo il ritmo respiratorio della pagina.
Gli utenti potrebbero non notare questi spazi, ma sentiranno naturalmente quali parti appartengono allo stesso insieme e dove inizia una nuova area di contenuto.
Spesso, una pagina ha un bell'aspetto non perché il designer abbia usato qualche tecnica avanzata, ma perché questo ritmo è mantenuto coerente in tutta la pagina.
La tipografia segue la stessa logica.
Il sistema di font di Vercel è identico alla logica del colore e della spaziatura.
Tutto il testo è categorizzato in diversi ruoli fissi: titolo, etichetta, corpo del testo e pulsante.
Sotto ogni ruolo, vengono forniti Token di diverse dimensioni, e ogni Token ha font, dimensione, peso, altezza della riga e spaziatura tra le lettere predefiniti.
In precedenza, quando si trovava di fronte a un testo, un designer poteva pensare se usare 14px o 15px e quale altezza della riga fosse appropriata.
Con un design system, il modo di pensare cambia. L'AI determina prima quale ruolo gioca questo testo. È un titolo, un corpo del testo o un'informazione secondaria? Una volta determinato il ruolo, viene determinato anche lo stile corrispondente.
Passare da una mentalità basata sulla dimensione del carattere a una basata sul ruolo. Passare da una decisione visiva a una decisione semantica. È qui che risiede il vero valore di un design system. Brillante.
Vedendo questo, ci si rende conto che, sia per la spaziatura che per i font, Vercel sta facendo la stessa cosa: ridurre il più possibile il margine di manovra durante la fase di esecuzione, con regole determinate in anticipo, in modo che l'esecuzione richieda solo la scelta di un ruolo.
Questo vale per i designer, per gli sviluppatori e per l'AI.
3
Inoltre, il copywriting è anche trattato come una parte importante delle specifiche di design di Vercel. Questa è la parte che manca più facilmente nella maggior parte dei file DESIGN.md.
Vercel definisce questi dettagli in modo molto specifico.
Ad esempio, il testo dei pulsanti deve essere un'azione più un oggetto. Come "Distribuisci Progetto" o "Elimina Membro". Non puoi scrivere parole vaghe come "Distribuisci", "OK" o "Elimina".
Il motivo è semplice. Quando vede "Elimina", l'utente deve ancora pensare a cosa viene esattamente eliminato. Con un'azione e un oggetto, l'utente può immediatamente formare una comprensione completa.
I messaggi di errore sono simili. Le regole di Vercel sono chiare. Prima, dì all'utente cosa è successo. Poi, dì all'utente cosa fare dopo.
Ad esempio, se una build fallisce perché il file del pacchetto supera il limite di dimensione, la soluzione è ridurre la dimensione o regolare il limite. Dopo aver letto tre frasi, l'utente sa immediatamente dov'è il problema e cosa fare dopo.
I messaggi di errore in molti prodotti sono "Operazione fallita, riprova più tardi". Il contenuto informativo di un tale messaggio è quasi zero. L'unica informazione che l'utente ottiene dopo averlo letto è che è fallita. Quanto al perché sia fallita e cosa fare dopo, devono ancora indovinare.
Le specifiche di copywriting in un design system servono essenzialmente a ridurre queste congetture.
Vercel ha anche standardizzato i messaggi di notifica dopo il completamento di un'operazione, che devono solo indicare quale cambiamento è avvenuto. Ad esempio, "Progetto eliminato", non "Progetto eliminato con successo".
Perché il fatto che la finestra di messaggio possa apparire indica già che l'operazione è completa. La parola "con successo" è informazione ridondante.
4
Poi c'è l'animazione.
Questa parte è particolarmente interessante perché è esattamente l'opposto della mia intuizione. Penserei che più animazione c'è, più il prodotto è raffinato.
Quindi, aggiungere un po' di animazione al passaggio del mouse su un pulsante o all'apertura di un menu sembra renderlo di alta qualità. Molti prodotti Vibe Coding ora sembrano andare in questa direzione.
Ma l'atteggiamento di Vercel è completamente diverso. Hanno addirittura scritto esplicitamente che in molti scenari di interazione, 0 millisecondi è spesso la scelta migliore. In altre parole, nessuna animazione, completato istantaneamente.
Se un pulsante passa da uno stato predefinito a uno stato al passaggio del mouse, questo cambiamento è già abbastanza chiaro. Il miglior feedback è che avvenga immediatamente; aggiungere un ulteriore livello di animazione renderà invece l'interfaccia lenta.
Naturalmente, alcuni scenari richiedono movimento.
Ad esempio, un popup che appare all'improvviso. Se non c'è alcuna transizione, le persone non sapranno da dove viene. È qui che l'animazione ha valore.
Vercel specifica persino la durata per diversi scenari. I cambiamenti di stato normali sono circa 150 millisecondi, i popover circa 200 millisecondi e i modali circa 300 millisecondi.
Più grande è il cambiamento, più tempo di reazione viene concesso. Più piccolo è il cambiamento, più diretto è il feedback.
La logica alla base è sempre la stessa: non muoverti se non necessario, e quando devi muoverti, mantienilo veloce, leggero e sobrio.
5
L'ultima parte che mi ha lasciato un'impressione profonda è l'accessibilità.
Ad essere onesto, raramente prestavo particolare attenzione a questa parte prima. Perché la maggior parte delle volte, finché l'interfaccia di un prodotto ha un bell'aspetto e le funzioni funzionano, sembra sufficiente. Ma Vercel ha scritto questa parte molto seriamente.
Richiedono un contrasto sufficiente tra testo e sfondo. I cambiamenti di stato non possono basarsi solo sul colore; devono essere abbinati a icone o descrizioni testuali.
Tutti gli elementi interattivi devono avere uno stato focus chiaro e non possono essere rimossi per motivi di pulizia visiva.
Queste regole significano che il design system serve tutti, incluse le persone con bassa sensibilità ai colori, quelle che navigano con la tastiera e quelle che guardano il telefono in piena luce.
Questo DESIGN.md è troppo professionale. Penso che quando tutti realizzeranno nuovi prodotti in futuro, potranno scrivere il proprio DESIGN.md basandosi sulle idee di questi due file MD.
