Design system per founder:non ti serve un designer

Un design system per founder è il modo in cui un prodotto costruito con l'AI sembra professionale senza un designer: design token, una libreria di componenti di tua proprietà e regole che l'AI sa seguire. Ho costruito 1.480 componenti di produzione e non ne ho disegnato nemmeno uno da zero.

Dashboard, form, tabelle, modali, grafici, wizard a più passaggi. Ognuno sembra appartenere allo stesso prodotto. Ognuno funziona in dark mode. E niente di tutto questo viene da talento di design. Viene dall'aver preso ogni decisione di design esattamente una volta, e poi aver fatto riutilizzare all'AI quella decisione 1.480 volte.

Perché serve un design system per founder: le app costruite con l'AI scivolano nell'incoerenza

Ecco la parte più difficile del costruire con l'AI, e non è il codice. È la coerenza. L'AI può costruirti una schermata bellissima. Ma sarà in linea con le cento precedenti? Stessi colori, stessa spaziatura, stesse forme dei pulsanti?

Senza un sistema, no. Chiedi tre pulsanti in tre giorni diversi e ottieni tre blu diversi, tre padding diversi, tre raggi degli angoli diversi. Ognuno da solo va bene. Insieme gridano "prototipo". È debito di design, e si accumula esattamente come il debito tecnico: ogni nuova schermata è una nuova decisione di design, e ogni nuova decisione è una nuova occasione di deriva.

Un designer risolverebbe imponendo il gusto. Un design system risolve eliminando del tutto la decisione.

Design token: decidi una volta, riusa ovunque

I design token sono le costanti dell'aspetto del tuo prodotto: una breve lista di valori approvati che ogni schermata deve usare. Invece di "un certo blu", c'è il colore del brand. Invece di distanze arbitrarie, una scala di spaziature. Invece di dimensioni del testo a piacere, una scala tipografica.

Il punto non è l'estetica: è che i token trasformano il design da giudizio soggettivo a consultazione di una tabella. E l'AI è spettacolare nelle consultazioni. Una volta che i tuoi token esistono, "fallo bello" diventa "usa i token", che è un'istruzione che l'AI sa davvero seguire.

shadcn/ui: componenti professionali di tua proprietà

I token ti danno gli ingredienti. Per i componenti veri e propri uso shadcn/ui, e il motivo è specifico dello sviluppo con l'AI. Non è una libreria di componenti tradizionale da installare come scatola nera sigillata. Ti dà il codice vero di 77 componenti ben disegnati, pienamente accessibili e pronti per la produzione (pulsanti, form, dialoghi, tabelle, tab, toast) che copi nel tuo progetto. Sono tuoi. Puoi modificarli.

Perché conta: quando un componente è una scatola nera, l'AI non può guardarci dentro, quindi inventa i propri stili intorno ad esso. Quando il codice del componente vive nel tuo progetto, l'AI lo legge, impara lo schema e costruisce nuovi componenti coerenti: stessa struttura, stessi token, stesso comportamento. La configurazione mi ha richiesto 15 minuti. Quei 77 elementi base sono diventati la fondazione di tutti i 1.480 componenti delle funzionalità, con accessibilità e dark mode gestite fin dal primo giorno.

12 settimaneLa carriera aziendale non è mai stata il pianoCandidati al Solopreneur Accelerator.Candidati ora →

Varianti: insegna all'AI le tue regole

L'ultimo tassello sono le varianti: versioni con un nome di ogni componente per ogni situazione. Un pulsante non è stilizzato ad hoc; viene da un menu fisso: default, secondary, outline, ghost, danger. Small, medium, large. Fine.

Il risultato è che il linguaggio sostituisce lo styling. Quando dico all'AI "crea un pulsante di eliminazione", sa di dover usare la variante danger. Nessuno sceglie una sfumatura di rosso. Nessuno sceglie un padding. La decisione è stata presa una volta, quando la variante è stata definita, e ogni pulsante di eliminazione del prodotto è identico per sempre.

Lo stesso principio del "decidi una volta" attraversa tutta la codebase, non solo l'interfaccia: è come un unico schema è arrivato a 633 servizi sul lato dei dati. E si abbina all'altra metà della rifinitura visiva: gestire gli stati di caricamento, errore e vuoto che ogni schermata richiede. Sistema più stati è ciò che fa sentire un'app costruita con l'AI come un vero prodotto.

Come istruire l'AI sul tuo design system

Una volta che il sistema esiste, ogni richiesta di componente segue la stessa forma: indica lo schema da copiare, i token da usare, gli stati da gestire. Qualcosa come:

Crea una card per le storie di successo. Segui lo schema della card metrica esistente. Usa i token standard delle card, le dimensioni standard di titolo e corpo del testo e il colore del brand per lo sfondo dell'icona. Includi dark mode e accessibilità da tastiera, come nel componente di riferimento.

L'AI genera un componente coerente con il tuo prodotto al primo tentativo, perché non le hai chiesto di progettare, le hai chiesto di rispettare le regole. Tu sei l'architetto; il sistema è il tuo regolamento edilizio.

Per tenerlo in ordine, ogni mese faccio un breve audit: cerco colori scritti a mano che dovrebbero essere token, spaziature casuali che dovrebbero stare sulla scala, stili per la modalità chiara privi della coppia in dark mode e stilizzazioni una tantum ripetute che dovrebbero diventare una variante. Trenta minuti al mese fanno sembrare 1.480 componenti un unico sistema.

E c'è un effetto cumulativo di cui nessuno ti parla: la tua libreria di componenti è materiale di addestramento per la tua AI. Ogni componente ben costruito le insegna i tuoi schemi. Dopo 100 componenti, costruisce come te. Dopo 1.000, la deriva è sparita del tutto.

Il libroThe Solopreneur RevolutionLuis Gonçalves su come costruire un'attività da solopreneur con l'IA mentre sei ancora dipendente.Scopri il libro →

Domande frequenti

Devo assumere un designer per il mio SaaS?

Non per un prodotto costruito da soli. Un design system (token, componenti di tua proprietà, varianti con un nome) ti dà un'interfaccia professionale e coerente senza competenze di design. Un designer diventa utile più avanti, per il brand e il marketing, non per mantenere i tuoi pulsanti dello stesso blu.

Cosa sono i design token, in parole semplici?

Una breve lista di valori di design approvati: i tuoi colori, le dimensioni delle spaziature, le dimensioni del testo, l'arrotondamento degli angoli. Ogni schermata deve scegliere dalla lista invece di inventare valori. Trasforma "fallo bello" in una regola che l'AI può seguire meccanicamente.

Che cos'è shadcn/ui e perché è adatto allo sviluppo con l'AI?

È una raccolta di 77 componenti di interfaccia pronti per la produzione, il cui codice copi nel tuo progetto invece di installarlo come libreria sigillata. Poiché il codice è visibile, l'AI può leggerlo e replicare gli schemi, così i nuovi componenti combaciano con i vecchi invece di inventare stili nuovi.

Come impedisco all'AI di inventare nuovi stili?

Fai riferimento, non descrivere. Ogni richiesta indica un componente esistente come schema e i token da usare: "segui lo schema della card metrica" batte qualsiasi aggettivo. Poi fai un audit mensile per colori scritti a mano e spaziature fuori scala, e riporta gli stili ripetuti in varianti con un nome.