support_agent Assistenza: +39 393 9325373 screen_share Scarica TeamViewer
palette AI

DESIGNmd: una libreria di design system in Markdown per i tuoi agenti AI

calendar_today personTeam EGSOFT schedule6 min di lettura
info

Disclaimer: le informazioni pubblicate in questa sezione hanno finalità di pura divulgazione tecnica. EG Software S.r.l. non si assume alcuna responsabilità per un utilizzo improprio dei contenuti, né per eventuali danni diretti o indiretti derivanti dalla loro applicazione, e non garantisce l'aggiornamento, l'accuratezza o la completezza delle informazioni riportate. Prima di utilizzare in produzione codice o procedure qui descritte, verificane sempre l'adeguatezza al proprio contesto.

DESIGNmd è una libreria community di design system pensata per chi sviluppa con l'aiuto di agenti AI: centinaia di sistemi di design gratuiti, ciascuno racchiuso in un singolo file Markdown, DESIGN.md, che lo strumento di coding legge per costruire interfacce coerenti. In pratica è uno scaffale di «stili pronti» da scaricare, mettere nella radice del progetto e citare nel prompt.

Il formato DESIGN.md

Secondo il sito, il formato nasce in casa Google, nell'ambito di Google Stitch. Non c'è una specifica rigida: è un normale file di testo che descrive il design system in sezioni leggibili sia da una persona sia da un modello. Quelle tipiche sono:

  • Colors — palette primaria, neutri e colori semantici, con i codici esadecimali e l'indicazione d'uso;
  • Typography — famiglie di font, dimensioni, pesi, interlinea e quando usare ciascuno stile;
  • Spacing — unità base e scala per padding, margini e gap;
  • Components — varianti di bottoni, input, card, con misure e colori;
  • Elevation — livelli di ombra e indizi di profondità;
  • Guidelines — cosa fare, cosa evitare, tono di voce.
# Design System di Esempio

## Colors
- **Primary** (#0EA5E9): colore del marchio per le azioni principali
- **Background** (#FAFAF9): sfondo della pagina
- **Text** (#1C1917): testo principale

## Typography
- **Title**: Roboto, 28px, Medium
- **Body**: Roboto, 15px, Regular

## Components
- **Button primary**: sfondo #0EA5E9, testo bianco, raggio 6px
- **Card**: sfondo bianco, bordo 1px #E7E5E4, raggio 10px, padding 20px

I vantaggi sono quelli di qualunque file di testo: lo capisce direttamente l'agente senza librerie di parsing, vive in Git (le modifiche si rivedono nelle pull request), non dipende dallo strumento, e un designer può leggerlo e correggerlo senza software dedicato.

Come si usa: tre passaggi

  1. Scegli un design system dalla libreria: si può filtrare per tag (saas, dark, minimal, dashboard, ecommerce, fintech, accessible) o ordinare per tendenza e novità.
  2. Scarica il file e mettilo nella radice del progetto, accanto al README.md.
  3. Chiedi all'agente di usarlo, per esempio: «Usa il file @DESIGN.md e applica lo stile alla mia app».

Il server MCP

Per non passare dal browser, DESIGNmd offre un server MCP. Serve una API key gratuita, necessaria solo per scaricare, visualizzare, caricare o eliminare i design system: cercare e sfogliare funziona anche senza. Con Claude Code basta un comando:

claude mcp add -s user designmd -e DESIGNMD_API_KEY=dk_la-tua-chiave -- npx designmd-mcp

Per Cursor, Antigravity e gli altri client MCP si aggiunge la stessa voce nel file di configurazione:

{
  "mcpServers": {
    "designmd": {
      "command": "npx",
      "args": ["designmd-mcp"],
      "env": { "DESIGNMD_API_KEY": "dk_la-tua-chiave" }
    }
  }
}

Il server espone sette strumenti: ricerca (anche con descrizioni libere come «dark fintech»), navigazione dei tag e dei sistemi di tendenza, visualizzazione, download come DESIGN.md, caricamento ed eliminazione dei propri sistemi.

La CLI

Esiste anche una riga di comando, utile negli script e quando l'agente deve lavorare in autonomia:

npx designmd search "dark fintech"
npx designmd search --tag minimal --tag saas --sort trending --limit 5
npx designmd get shafius/neon-fintech --json
npx designmd download shafius/neon-fintech -o ./my-project/DESIGN.md
npx designmd upload ./DESIGN.md --name "My Kit" --tags dark,saas,minimal

L'opzione --json è disponibile su tutti i comandi, pensata per l'output leggibile dagli agenti. La chiave si imposta con la variabile DESIGNMD_API_KEY. Per far sapere all'agente che la CLI esiste basta una riga nel file di istruzioni del progetto (CLAUDE.md, .cursorrules o GEMINI.md): «Usa la CLI designmd per cercare e scaricare design system da designmd.ai».

Quando conviene (e quando no)

  • Prototipi e progetti nuovi: è il punto di partenza ideale. Si scarica uno stile vicino a quello voluto e lo si adatta, invece di ripartire da zero con il solito aspetto «da template».
  • Prodotti con un'identità già definita: un sistema scaricato non conosce il tuo marchio. Meglio scrivere il proprio DESIGN.md partendo dai token reali del progetto, come descritto in design.md: il metodo Vercel, usando la libreria come fonte di ispirazione.
  • Qualità dei contenuti: i sistemi sono caricati dalla community, quindi la qualità varia. Leggi il file prima di adottarlo e controlla in particolare contrasti e accessibilità.

Un dettaglio da ricordare: l'efficacia di un DESIGN.md dipende soprattutto da quanto è preciso e da quanto è mantenuto. Un file scaricato e mai più toccato è un buon punto di partenza, non un punto d'arrivo.

Per approcci affini: Awesome Design Skills, Impeccable e Taste Skill.

Design DESIGN.md MCP Claude Code Frontend
paletteAltri articoli su AI grid_viewTutti gli articoli
Scrivici su WhatsApp