Smetti di correggere manualmente le interfacce AI difettose

I tuoi strumenti di coding basati su IA spesso falliscono nel design.

Chiedi un pulsante. L'IA ti restituisce una tonalità di blu. Chiedi un altro componente. L'IA ti restituisce una tonalità di blu diversa. Questo accade perché l'IA non dispone di un design system rigoroso.

Google Labs ha rilasciato design.md per risolvere questo problema.

Si tratta di una specifica che consente a strumenti come Cursor, Claude Code e GitHub Copilot di leggere le tue regole di design. Questo evita spaziature incoerenti, font errati e colori che variano nel tempo.

Come funziona:

design.md è un file Markdown composto da due parti.

  • YAML Front Matter: contiene design token precisi. Qui definisci colori, tipografia, spaziature e raggi di curvatura (corner radii).
  • Markdown Body: contiene la logica del design (design rationale). Spiega perché utilizzi un determinato colore e quando invece evitarlo.

Questa struttura aiuta l'IA a comprendere sia i dati che la logica. Non vede solo un codice esadecimale; capisce che un colore specifico è destinato ai titoli e non deve essere utilizzato per il corpo del testo.

Caratteristiche principali della CLI di design.md:

  • Linting: controlla se i tuoi token sono corretti. Verifica persino il contrasto per l'accessibilità WCAG AA.
  • Diffing: ti mostra esattamente quali token sono cambiati quando aggiorni il tuo design.
  • Exporting: converte il tuo file di design in Tailwind CSS, JSON o W3C Design Tokens.
  • Spec: genera una guida da fornire alla tua IA per insegnarle come leggere il tuo file.

Perché è importante:

La maggior parte degli sviluppatori utilizza CLAUDE.md o AGENTS.md per le regole generali. Sebbene utili, questi file sono composti principalmente da linguaggio naturale. L'IA deve comunque indovinare i valori specifici.

design.md trasforma il tuo design system in dati leggibili dalle macchine.

Per usarlo:

  1. Posiziona DESIGN.md nella root del tuo progetto.
  2. In CLAUDE.md o nelle regole di Cursor, aggiungi questa riga: "For UI tasks, read DESIGN.md first and strictly follow the tokens and rationale."

Smetti di ripetere "colore sbagliato" alla tua IA. Forniscile un'unica fonte di verità.

Fonte: https://dev.to/isray_notarray/designmd-if-your-ai-generated-ui-keeps-drifting-youre-missing-googles-designmd-4abh

Community di apprendimento opzionale: https://t.me/GyaanSetuAi