Design.md: Come Creare Progetti AI che Non Sembrino Fatti da un Bot

L'intelligenza artificiale non ti ruberà il lavoro. Ma qualcuno che sa usare l'AI per creare design straordinari, probabilmente sì. E no, non sto parlando di siti web viola con gradienti generici che urlano "fatto con ChatGPT".

Quando ho iniziato a sperimentare con gli agenti AI per il design, mi sono scontrato con un problema che forse conosci bene: il primo risultato era spesso sorprendente. La seconda schermata? Già più debole. La terza? Un disastro generico che sembrava uscito da un template WordPress del 2018. Questo fenomeno si chiama design drift , e fino a poco tempo fa sembrava inevitabile quando si lavora con l'AI.

Poi ho scoperto Design.md : un approccio che trasforma il modo in cui gli agenti AI gestiscono il design. Non è magia, è metodo. E funziona.

Che Cos'è Design.md e Perché Dovrebbe Interessarti

Design.md è un formato open source che cattura il DNA di un sistema di design: colori, tipografia, spaziature, animazioni, componenti. È come un file agents.md o skills.md, ma applicato al design visivo. Invece di dire all'AI "crea qualcosa di bello", le fornisci un blueprint preciso che mantiene coerenza su tutti i touchpoint del tuo progetto.

Immagina di poter prendere un design straordinario (creato da te o da altri), estrarne l'essenza in un file testuale, e usarlo per generare in modo coerente: una landing page, una versione mobile, un video promozionale, slide per una presentazione. Tutto con la stessa identità visiva, senza dover spiegare ogni volta all'AI cosa intendi per "moderno" o "professionale".

Il punto è questo: il baseline del design oggi è altissimo, ma anche incredibilmente omologato. Quello che cinque anni fa faceva dire "wow" (un bel gradiente viola, per dire) oggi ti fa scappare dal sito. Design.md ti permette di andare oltre il generico, dandoti un controllo granulare su come l'AI interpreta e applica il tuo stile.

Il Design Drift: Il Problema Che Nessuno Ti Dice

Partiamo dal problema reale. Quando chiedi a Claude, GPT o qualsiasi altro modello di creare un'interfaccia, il primo output può essere eccellente. Ma appena inizi a iterare ("ora aggiungi una sezione testimonial", "crea la pagina contatti"), la coerenza evapora. I colori cambiano leggermente. La tipografia perde consistenza. Gli elementi UI non parlano più la stessa lingua.

Questo succede perché l'AI non ha memoria visiva persistente tra i prompt. Ogni richiesta è un nuovo inizio, e senza un framework di riferimento forte, il modello improvvisa sulla base di pattern generici. Il risultato? Un Frankenstein visivo che sembra assemblato da pezzi casuali di internet.

La soluzione non è chiedere all'AI di "fare meglio". È darle strumenti migliori: un Design.md ben strutturato agisce come una memoria di design permanente che l'agente può consultare a ogni iterazione. Include tabelle di colori, scale tipografiche, regole di spacing, persino snippet di codice per animazioni WebGL se necessario.

In pratica, stai passando da "spiega tutto ogni volta" a "segui queste linee guida". E fidati, la differenza si vede.

Come Costruire un Workflow di Design AI che Non Fa Schifo

Ecco il processo che uso quando devo creare qualcosa di nuovo, dall'idea al deploy. Non è teoria: è il metodo che applico quotidianamente con Claude e Make per automatizzare progetti reali.

Fase 1: Trova il Riferimento Giusto

Ogni designer parte da riferimenti visivi. Anche tu dovresti. Piattaforme come Variant (variant.com) o community di design system permettono di esplorare centinaia di identità visive in pochi minuti. L'obiettivo non è copiare, ma trovare un punto di partenza che risuoni con il tuo progetto.

Remix velocemente: clicca, osserva, scarta, torna indietro. Questo è il momento di alimentare il tuo gusto, non di prendere decisioni finali. Quando trovi qualcosa che ti convince, scarica il file Design.md (se disponibile) e l'HTML di riferimento.

Fase 2: Costruisci il Blueprint

Apri il file Design.md che hai scaricato. È un documento strutturato in markdown con tabelle, codice e descrizioni testuali. Contiene:

• Palette colori con valori esadecimali e usage (primario, secondario, accento)
• Scale tipografiche: font families, pesi, dimensioni per H1, H2, body text
• Sistema di spacing: margini, padding, gap tra elementi
• Stili di pulsanti, card, form
• Eventuali snippet di animazioni (CSS, WebGL, Three.js)

Se il file non esiste, puoi crearlo tu partendo da un design esistente. Ispeziona il codice HTML, estrai i valori CSS rilevanti, organizzali in un formato leggibile. Sembra lungo, ma una volta fatto hai un asset riutilizzabile per mesi.

Fase 3: Integra con l'Agente AI

Questo è dove la magia succede. Apri il tuo tool preferito (uso Claude per la maggior parte dei workflow, ma funziona anche con strumenti come Lovable, V0, o Google Stitch). Allega il file Design.md al prompt iniziale insieme all'HTML di riferimento se ce l'hai.

Esempio di prompt:

"Crea una landing page per [nome progetto], un'app che [funzione principale]. Usa il Design.md allegato per colori, tipografia e stile. Includi hero section con CTA, sezione benefici a tre colonne, testimonial, footer."

L'agente genererà la prima versione mantenendo fedeltà al sistema. Da qui, puoi iterare: "aggiungi una sezione FAQ", "trasforma in versione mobile", "crea una variante dark mode". Ogni output rispetterà il blueprint iniziale.

Skills, Non Solo Design.md: Il Tuo Arsenale Segreto

Design.md è la fondazione, ma le skills sono gli ingredienti che trasformano una base solida in qualcosa di memorabile. Pensa alle skills come a micro-istruzioni specializzate che insegni all'AI per compiti specifici.

Alcuni esempi di skills che uso regolarmente:

• Laser Effects : prompt per aggiungere effetti luminosi dinamici via WebGL. Sembra strano, ma funziona: le landing page con animazioni laser ottengono tassi di engagement visibilmente più alti
• Skeuomorphic Design : per progetti che richiedono un tocco realistico (app musicali, strumenti creativi). Genera ombre, embossing, texture materiali
• Copywriting Skill : non strettamente design, ma cruciale. Un prompt dedicato che analizza e migliora i microcopy di UI per chiarezza e impatto
• 3D Elements : per integrare oggetti tridimensionali con Three.js in modo coerente con il resto dell'interfaccia

Ogni skill è un file di testo, un prompt ottimizzato che puoi salvare e riutilizzare. Li attivi al bisogno: "usa la skill laser" oppure "applica la skill copywriting a questa sezione". È modulare, scalabile, e ti permette di costruire un arsenale personale di tecniche affidabili.

La differenza tra un design generico e uno che ferma lo scroll spesso risiede in questi dettagli: un'animazione inaspettata, un micro-interaction ben calibrata, un elemento 3D posizionato con cura. Le skills ti permettono di iniettare questi dettagli senza doverli programmare manualmente ogni volta.

Iterazione vs Remix: Quando Fermarti e Quando Cambiare Tutto

C'è una distinzione importante da fare tra iterare e remixare. Iterazione significa migliorare progressivamente: aggiustare spacing, affinare colori, ottimizzare responsive. È il 90% del lavoro dopo il primo output soddisfacente.

Remix significa trasformare il design in un formato completamente diverso: da landing page a video promozionale, da web app a presentazione slide, da desktop a mobile. Qui il Design.md diventa ancora più potente, perché mantiene l'identità visiva anche quando il medium cambia radicalmente.

Ho costruito interi workflow che generano in parallelo sei varianti dello stesso progetto: versione desktop, mobile, slide deck, hero video, Instagram post, email newsletter. Tutto parte dallo stesso blueprint, tutto condivide la stessa anima visiva. È come avere un team di designer che eseguono in contemporanea, ma con coerenza assoluta.

Il trucco è sapere quando fermarsi a iterare e quando è il momento di remixare. Se dopo venti prompt stai ancora aggiustando il padding di un bottone, forse è il momento di generare una nuova variante da zero. Se invece il design funziona ma vuoi espanderlo su nuovi canali, remix è la strada.

Il Gusto Vince: Perché l'AI Non Basta

Parliamoci chiaro: l'intelligenza artificiale non ti rende designer. Ti dà superpoteri, ma solo se sai già dove vuoi andare. Il vero moat, oggi, non è avere accesso agli strumenti migliori (li hanno tutti), ma sviluppare gusto.

Il gusto è quella capacità quasi istintiva di guardare un design e sapere immediatamente se funziona. Se ha anima. Se qualcuno ci ha messo cura, o se è stato sputato fuori da un generatore generico in trenta secondi. E il gusto si allena, come un muscolo.

Come? Immergendoti. Usa tutte le app della tua nicchia. Segui designer che ammiri (anche se non lavori nel loro campo). Salva screenshot di interfacce che ti colpiscono. Crea un secondo cervello per l'ispirazione visiva, non solo per note e meeting. Quando vedi qualcosa che funziona, chiediti perché : è il contrasto? La tipografia? L'animazione? La composizione?

Questo è il loop che fa la differenza: referenza → genera → ispeziona → sistema → itera. L'AI accelera ogni fase, ma sei tu a guidare. E sì, parlo di centinaia, anche migliaia di iterazioni su un singolo progetto. Non perché l'AI sbagli, ma perché ogni micro-decisione conta. Ogni pixel conta. Ogni scelta tipografica conta.

Fino a quando saremo noi a usare l'AI, e non viceversa? Bella domanda. Per ora, il vantaggio competitivo sta nel saper orchestrare questi strumenti con intenzionalità. Domani, chissà. Ma oggi, chi sa unire velocità AI e gusto umano vince.

Se stai iniziando con Design.md, il mio consiglio è di partire da un singolo progetto personale : un portfolio, una landing page per un'idea che hai nel cassetto. Scarica un design system che ti piace, studiane la struttura, poi prova a creare tre varianti (desktop, mobile, slide). Sperimenta con skills diverse. Itera finché non ti sorprendi del risultato. Poi ripeti. Il gusto si costruisce facendo, non guardando tutorial.