Generatore DESIGN.md
Crea file DESIGN.md pronti per l'IA per Google Stitch, Claude Code, Cursor e Copilot — definisci colori, tipografia, spaziatura e componenti per strumenti AI.
Aggiornato maggio 2026
Revisionato da Rafael Duarte
Basi del progetto
Dai un nome al progetto e descrivine l’intento visivo generale.
Descrivi la resa visiva desiderata. Gli agenti IA la usano per impostare il tono.
Come creare un file DESIGN.md per gli agenti AI
Una procedura guidata in nove passi, anteprima dal vivo e download immediato
1. Descrivi progetto e atmosfera visiva
Inserisci nome, tagline e una descrizione dello stile, oppure parti da uno dei sei temi pronti come Minimal & Clean o Dark & Sophisticated.
2. Definisci colori e tipografia
Assegna i colori per ruolo (primary, surface, error, success…), aggiungi gli override del tema scuro e scegli font e rapporto della scala tipografica.
3. Completa spaziature, componenti e accessibilità
Unità base, raggi di bordo, ombre, durata delle animazioni, livello WCAG e touch target minimo. Ogni passo si può saltare.
4. Controlla e scarica
Verifica il risultato nelle schede Mockup, Lint e Diff, poi copia il Markdown o scarica DESIGN.md e mettilo nella radice del progetto.
Cosa fa il generatore DESIGN.md
Dal design system a un file che Claude Code, Cursor e Stitch possono leggere
Colori per ruolo semantico
Nove ruoli per tema (primary, secondary, accent, surface, background, on-surface, error, warning, success) più quattro override per la modalità scura.
Più temi e palette pronte
Aggiungi e rinomina temi, poi carica in quello attivo una delle palette Default, Ocean, Forest, Sunset o Mono.
Scala tipografica modulare
Otto rapporti, dalla seconda minore (1,067×) alla sezione aurea (1,618×): i valori da xs a 4xl vengono calcolati e scritti nel file.
Lint del contrasto WCAG
Calcola il rapporto di contrasto di primary e testo su background, testo su surface e testo scuro su sfondo scuro, secondo il livello WCAG scelto (AA o AAA), con un link al passo da correggere.
Mockup dal vivo
Dashboard, pulsanti, modulo e avvisi vengono resi con i tuoi colori e font reali, e puoi passare da un tema all'altro prima di esportare.
Export tokens.css
La scheda Tokens genera custom property CSS (colori, font, scala, spaziature, raggi, durate) con il prefisso che scegli e un blocco .dark.
Cosa contiene il DESIGN.md generato
Il file esportato è in inglese, la lingua che gli agenti AI interpretano meglio
Quando ti serve un DESIGN.md
Dare agli agenti AI regole visive stabili invece di ripeterle a ogni prompt
Avviare un progetto con un agente AI
Metti il file nella radice prima di generare il primo componente, così colori, font e raggi partono già dalle tue regole.
Smettere di ripetere le specifiche nei prompt
Scrivi una volta sola il colore primario, il font e il border-radius invece di incollarli in ogni richiesta.
Lavorare con Google Stitch
Stitch usa DESIGN.md come contesto di design: un file preparato qui ti dà un punto di partenza da rifinire nel progetto.
Controllare il contrasto prima dell'handoff
La scheda Lint segnala i colori che non raggiungono 4,5:1 sul testo o 3:1 sugli elementi UI, prima che finiscano nel codice.
Gestire più marchi o varianti
Più temi con nome nello stesso file (per esempio Light e una variante di marca), ciascuno con la propria tabella di colori e la propria classe in tokens.css.
Errori comuni
Lasciare vuota l'atmosfera visiva
È il campo che dà il tono a tutto il resto: senza una descrizione l'agente ha solo valori esadecimali e torna a scelte generiche. Il Lint lo segnala come avviso.
Ignorare gli errori del Lint
Un primary come #F97316 (palette Sunset) ha un contrasto di 2,7:1 sul suo background #FFFBF5: sotto il minimo di 3:1 per gli elementi UI. L'agente lo applicherà comunque, ovunque.
Dimenticare le note facoltative
Il file esportato riporta tutte le nove sezioni, ma le note sui pulsanti, sull'animazione e le regole web/mobile compaiono solo se le compili. Lasciarle vuote toglie all'agente il contesto più specifico.
Confondere temi e modalità scura
I temi con nome sono palette indipendenti; la modalità scura è un blocco separato di quattro override. Uno non sostituisce l'altro.
Perché usare questo generatore
Invece di scrivere il Markdown da zero, compili una procedura guidata con valori predefiniti sensati e vedi subito il risultato su un mockup reale. Il controllo del contrasto e la scheda Diff mostrano cosa hai cambiato rispetto ai valori di partenza.
Senza un file di contesto, ogni prompt sceglie colori, font e spaziature a modo suo. Con un DESIGN.md nella radice, Claude Code, Cursor o Copilot possono leggere le tue regole e applicarle in modo coerente. Tutto viene generato nel browser, senza account.
DESIGN.md, README.md o design token?
Formati complementari con destinatari diversi
Domande frequenti
È un file Markdown che descrive le regole visive di un progetto (colori, tipografia, spaziature, componenti) in un formato che gli agenti AI possono leggere. Il formato è nato con Google Stitch e la specifica è pubblicata da Google Labs con licenza Apache 2.0.
Riferimenti
Il repository ufficiale (in inglese) della specifica DESIGN.md, con licenza Apache 2.0.
La documentazione (in inglese) di Stitch su come usa il file DESIGN.md.
La traduzione autorizzata delle linee guida WCAG 2.1, con i rapporti minimi di contrasto usati dal Lint.
Strumenti correlati
- Generatore di Palette Colori Design Genera palette colori armoniose da qualsiasi colore base. Scegli armonia Analoga, Complementare, Triadica o Tetradica — esporta come CSS variables o JSON.
- Verificatore Contrasto Colori Design Verificatore contrasto colori gratuito — verifica subito la conformità WCAG 2.2 AA e AAA. Anteprima live, simulazione daltonismo e suggerimenti colori...
- Convertitore di Colori Design Converti colori tra HEX, RGB, HSL e CMYK all'istante. Selettore di colori gratuito con controllo contrasto WCAG e generatore di palette.
- Palette Colori da Immagine Design Estrai palette colori da qualsiasi immagine — ottieni codici HEX, RGB, HSL ed esporta come CSS variables, Tailwind, JSON o PNG. 100% nel browser, senza upload.
- Generatore CSS Box Shadow — Neumorfismo, Glassmorfismo e Tailwind Design Generatore CSS box shadow gratuito con anteprima in tempo reale. Crea ombre, effetti neumorfismo e glassmorfismo. Esporta in CSS, Tailwind o variabili CSS.
