AI & Design: cosa è successo fino ad ora

di Andrea Marcomini

Cosa? Hai detto AI?

BASTAAAAAAAAAAAAA

Sono d’accordissimo, non se ne può più di sentire questa parola, ma è così importante che bisogna stringere i denti e affrontare questo momento di saturazione e crisi isterica.

Il mondo del design sta completamente cambiando alla velocità della luce, e questo è facile da capire. La cosa difficile da capire è come seguire nel modo corretto questa corrente fortissima che, tra 3276 articoli, 1194 strumenti nuovi, 815 nuovi video da vedere, ci fa affogare serenamente.

In più la nostra FOMO di voler provare tutto, fare tutto, capire tutto non rema dalla nostra parte. Anzi, ci trascina a vedere meglio il fondale.

Questo articolo non vuole entrare in dettagli tecnici (ogni tanto ti lascerò dei link di altri articoli che ho scritto se vuoi approfondire), ma vuole solo fare un riepilogo di tutto quello che è accaduto fino ad oggi (tipo i riassunti della stagione precedente su Netflix).

Cosa si può fare oggi con l’AI

Le attività di design che possono essere supportate dall’AI sono tante, però alcune hanno più senso di altre. Per capire se ha senso o no farsi supportare, io uso sempre questi criteri:

Costo: quanti token mi costa il supporto dell’AI per questa attività?
Tempo: quanto ci mette l’AI a fare questa operazione? Spesso per fare alcune operazioni semplici l’AI deve andarsi a studiare tutto il tuo sistema e il tuo contesto; quindi magari accade che per cambiare una label ci mette tipo 12 minuti.
Flessibilità: il supporto dell’AI mi sta lasciando libertà di manovra o mi sta vincolando all’utilizzo di uno strumento o metodologia? Esempio: se uso Lovable può sembrare comodo fare design e sviluppo tutto insieme con 4 prompt stupidi, ma poi sono veramente libero di cambiare radicalmente la UX, la UI e il codice? (spoilerone: no).

La mia filosofia è che non esiste uno strumento per fare tutto. La cosa migliore secondo me è farsi supportare verticalmente nelle varie fasi operative, perché questo ti permette di avere il pieno controllo del progetto ed essere supportato dall’AI in modo non invasivo o vincolante. In parole povere: sto facendo ricerca UX e uso uno strumento per velocizzare la ricerca, sto facendo UI e uso uno strumento per farmi generare delle idee, sto facendo un Design System e mi faccio compilare le variabili Figma dall’AI, etc.

Seguendo questo pensiero, ecco la lista di cose su cui l’AI può supportarci durante il design:

Generazione di materiale grafico e dati per i workshop
Analisi dei risultati delle attività di Service Design
Generazione di concept
Brainstorming su architettura informativa e User Experience
Generazione e modifica di variabili e token del Design System
Attività operative su Figma: l’AI può disegnare e modificare
Creazione della documentazione
Generazione del copy
Audit sul design
Sviluppo di una demo a partire dal design

Quando farsi supportare dall’AI

Quella che hai appena letto è una generica lista di possibilità. È evidente che l’AI potenzialmente può fare quasi tutto se usata correttamente. Ad ogni modo sta a te capire in quali circostanze farti supportare dall’AI e in quali no. Tutto dipende dal costo/beneficio di quella operazione e dal contesto in cui stai operando.

Con un po’ di esperienza, prove e lacrime capirai quando è il caso di tirare giù dal letto il tuo agente AI di fiducia. Nel tempo ho testato un po’ tutto, ti lascio qualche consiglio su cosa fare e cosa evitare. E via con un nuovo elenco:

“Agente, disegnami su Figma tutte le cose”: no, questo non ha mai senso. In primo luogo per via del costo e tempo delle operazioni, in secondo luogo per la qualità dell’output. L’AI è estremamente utile per delle operazioni verticali e specifiche (soprattutto se ridondanti e automatizzabili), ma non deve mai essere un one-man show.
User Experience: la fase di UX è quella dove faccio intervenire meno l’AI, la uso quasi solo per brainstorming e ragionamenti. Questo perché i modelli AI non riescono a creare un’esperienza che sia corretta per il tipo di utente che stai analizzando. Solo tu sei in grado di mettere insieme i pezzi legati all’analisi, ai dati, al benchmark, ai bisogni dell’utente in quell’ambito, al modo in cui vuoi far usare quello strumento, per poi creare un prodotto che nasce con un’esperienza coerente e progettata nella sua interezza.
Design System e UI: è utilissimo farsi generare, correggere, controllare, modificare le variabili e token su Figma. Anche per i componenti e variant si può usare l’AI per farsi disegnare delle idee, ma poi è bene metterli a posto manualmente (capita molto spesso che l’AI non costruisca i componenti correttamente su Figma). Quindi un supporto parziale va bene, ma poi lavoraci tu. In linea generale ti sconsiglio di farti generare i layout di pagina usando i tuoi componenti, perché questa operazione consuma troppi token.
Copywriting: ottimo farsi generare i testi, ti consiglio di creare degli agenti che conoscano tutto il prodotto, le linee guida e il tone of voice. Su un sito web bisogna prestare più attenzione, perché il copy è il cuore pulsante della vendita, quindi va più curato da te per creare emozione, fiducia, chiarezza, umanità. Per un prodotto invece la scrittura AI è perfetta: neutra, razionale, breve, chiara.
Concept: ci sono tantissimi strumenti per generare un concept/prototipo e apprezzo tantissimo il supporto dell’AI per far scegliere un’idea iniziale o uno stile a un cliente.
Service Design: l’AI è molto utile per creare form, questionari, elementi grafici, blueprint, personas, user flow e qualsiasi altro materiale utile a un workshop. Altro grosso aiuto te lo può dare analizzando poi i risultati.
“Agente, prendi questo excel e modifica tutti i dati su Figma”: sì, finalmente si può fare, che sogno. Vaffan… a tutte le tabelle!
Audit globale sul design: controllo coerenza, controllo che non ci siano componenti detached, controllo che le variabili siano applicate correttamente, controllo sulla tipografia, etc. È molto utile usare l’AI per l’audit.
Documentazione: l’AI può accedere al tuo contesto su Figma, quindi può aiutarti a generare della documentazione ben fatta.
POC e demo commerciali: questa parte per me è stata proprio game changer, perché ora posso in pochissimo tempo sviluppare in qualsiasi linguaggio il mio design. Lo scopo è far vedere e testare qualche feature di un prodotto prima di validarlo e partire col progetto vero e proprio. In questo caso l’AI fa risparmiare tantissimi soldi a chi deve investire.
Handoff con sviluppo: se il Design System è fatto e documentato bene, con l’AI lo sviluppo ci metterà davvero molto meno tempo per la parte di Front-End. Anche qui siamo davanti a una rivoluzione.

Come fare

Ti ho raccontato cosa puoi fare e quando ti consiglio di farlo. Manca il come farlo. Anche in questo caso ci sono tanti strumenti, workflow e ognuno trova il suo metodo.

Per quanto riguarda il modello AI ti consiglio Claude Code, perché è veramente fortissimo, soprattutto per come funzionano molte sue funzionalità come le Skill.

Per sfruttare al meglio l’AI ti consiglio di usarla da terminale (CLI). Io uso il terminale di VS Code, così sono già nel posto giusto per sviluppare e testare.

La base di quasi tutte le operazioni che ti ho elencato sopra si basa sulla connessione MCP (Model Context Protocol) di Figma. Solo in questo modo sarà possibile far comprendere alla tua AI il contesto e farla accedere a un progetto sul quale potrà disegnare, modificare, fare audit, etc. Ho scritto una serie di articoli su questo: MCP & FIGMA – Il cambio del paradigma grazie all’AI

Una volta che abbiamo Claude Code da terminale e abbiamo connesso l’MCP di Figma, dobbiamo creare le nostre Skill per le attività che vogliamo automatizzare. Per scrivere le Skill stesse puoi farti aiutare dall’AI stessa, che ti creerà dei file .md con le istruzioni da eseguire. Per fare un esempio, potresti creare una skill che si chiama “Audit del design system”, che scansiona un file Figma e genera un report di inconsistenze: componenti con stili hardcoded invece di token, testi fuori dalla type scale, colori non collegati a variabili. Insomma, puoi creare tutti i flussi che ti servono.

Oltre a questo, puoi integrare i tuoi workflow con qualsiasi strumento AI possa esserti utile. Ne ho descritti molti in questo articolo: AI & Design: ma io cosa devo fare?

Esempio di workflow partendo da foglio bianco: genero un concept con Google Stitch, lo importo su Figma, su quel concept faccio generare dall’AI un Design System. Ho fatto un video su questo workflow, ti lascio qui il link.

Esempio di workflow per una demo commerciale: faccio leggere il mio Design System e le pagine da Claude tramite MCP di Figma, chiedo a Claude Code di svilupparlo in React per poi eseguire dei test.

Esempio di workflow per generare pagine nuove di un sito: creo dei file .md con tutta la conoscenza del sito (comportamenti, disposizione del layout, design system, componenti, navigazione), chiedo all’AI di generarmi una nuova pagina seguendo le istruzioni del file .md.

Questo workflow è un po’ più complesso, lo racconto tutto qui: AI & Design: generare usando Design System e contesto

Come vedi, in base alle tue esigenze cambierai i workflow, cambierai gli strumenti, cambierai tutto il tuo metodo. L’importante è sapere cosa stai facendo e perché. Per capirlo non ci sono trucchi, bisogna mettere le mani in pasta. Ma quando capisci come funziona, ti si apre un mondo!

Andrea Marcomini
Designer UX/UI & AI Specialist
Substack
Linkedin