Vai al contenuto principale
Progetto sperimentale non ufficiale: Bootstrap Italia v3 e Dev Kit Italia v1 sono in beta — README
Filo.

MCP server per il Design system .italia

Non perdere il filo.

Installa Dati
npm docker GitHub
Tenere il filo blu Italia.
Changelog

⚠️ Progetto personale non ufficiale e sperimentale - I dati sono forniti così come sono e potrebbero essere incompleti o non aggiornati. Utilizzare a proprio rischio

Di cosa parliamo?

Design system .italia è il sistema open source ufficiale per realizzare le interfacce della Pubblica Amministrazione

Una iniziativa del progetto Designers Italia, è distribuito in più repository indipendenti:

Filo raccoglie e organizza le informazioni utili da queste sorgenti ogni notte e le espone via MCP. È un'interfaccia per assistenti AI che offre strumenti per consultare e usare le risorse del design system in modo semplice e verificato. È da notare che Filo fa riferimento alle v3 di Bootstrap Italia e v1 di Dev Kit Italia oggi in beta.

Tenersi al filo blu Italia.

Perché Filo?

Un progetto sperimentale con alcune idee precise:

In roadmap: strumenti per setup progetti e lettura fondamenti del design system, ottimizzazione dell'uso di token LLM e risorse. Futuribile: test uso combinato con server MCP per tool di design

Installa Filo

Avvia il server MCP in un comando

npx @fupete/design-system-italia-mcp
docker pull ghcr.io/fupete/design-system-italia-mcp
docker run -p 8080:8080 \
  -e GITHUB_TOKEN=your_token \
  ghcr.io/fupete/design-system-italia-mcp
git clone https://github.com/fupete/design-system-italia-mcp.git
cd design-system-italia-mcp
npm install && npm run dev

GITHUB_TOKEN (opzionale ma consigliato) per github_get_component_issues. Senza: 60 richieste/ora per IP. Con token scopo pubblico read-only: 5000/ora.

Client

In ~/Library/Application Support/Claude/claude_desktop_config.json 

{
  "mcpServers": {
    "design-system-italia": {
      "command": "npx",
      "args": ["-y", "@fupete/design-system-italia-mcp"],
      "env": { "TRANSPORT": "stdio", "GITHUB_TOKEN": "your_token" }
    }
  }
}

In .vscode/mcp.json

{
  "servers": {
    "design-system-italia": {
      "command": "npx",
      "args": ["-y", "@fupete/design-system-italia-mcp"],
      "env": { "TRANSPORT": "stdio", "GITHUB_TOKEN": "your_token" }
    }
  }
}

claude mcp add design-system-italia \
  --command "npx -y @fupete/design-system-italia-mcp" \
  --env TRANSPORT=stdio \
  --env GITHUB_TOKEN=your_token

{
  "mcpServers": {
    "design-system-italia": {
      "type": "http",
      "url": "http://localhost:8080/mcp"
    }
  }
}

System prompt

## Regole dati Design system .italia (Filo MCP)

DATI VERIFICATI: usa esclusivamente i dati restituiti dagli strumenti MCP di Filo. Non integrare con conoscenza pregressa su Bootstrap Italia, Dev Kit Italia, Design Tokens Italia o altri framework CSS/web component.

QUANDO IL DATO MANCA: se un'informazione non è presente nelle risposte MCP, dillo esplicitamente. Scrivi "Questo dato non è disponibile nelle sorgenti MCP" anziché fornire una stima o inferenza. Non inventare valori numerici.

QUANDO COMPONI ELEMENTI: se combini markup MCP reale con HTML/CSS che aggiungi tu, segnala chiaramente cosa viene dai dati MCP e cosa è tua inferenza.

VERSIONI E FONTI: in ogni risposta che usa dati MCP, includi la versione delle sorgenti e il link alla documentazione ufficiale restituiti dal tool.

REGOLA D'ORO: se non sei sicuro che un dato provenga da MCP, trattalo come inferenza e segnalalo.

TOOL DISPONIBILI: all'inizio della sessione, usa il tool ping per verificare la connessione e leggi la lista dei tool disponibili. Non assumere quali tool esistono.

COMPLETEZZA DATI: se un componente non è presente in una sorgente (es. `devkit: null` in dsi_list_components/dsi_search_components), segnalalo all'utente invece di presumerne l'assenza totale.
## Data rules — Design System .italia (Filo MCP)

VERIFIED DATA: use exclusively the data returned by Filo's MCP tools. Do not supplement with prior knowledge of Bootstrap Italia, Dev Kit Italia, Design Tokens Italia, or any other CSS/web component framework.

WHEN DATA IS MISSING: if information is not present in the MCP responses, say so explicitly. Never invent numeric values.

WHEN COMPOSING ELEMENTS: clearly indicate what comes from MCP data and what is your own inference.

VERSIONS AND SOURCES: in every response that uses MCP data, include the source versions and official documentation URL returned by the tool.

GOLDEN RULE: if you are unsure whether a piece of data comes from MCP, treat it as inference and label it as such.

AVAILABLE TOOLS: at the start of the session, use the ping tool to verify the connection and read the list of available tools. Do not assume which tools exist.

DATA COMPLETENESS: if a component is missing from one source (e.g. `devkit: null` in dsi_list_components/dsi_search_components), flag this to the user instead of assuming it doesn't exist at all.

Scopri gli strumenti

Approfondisci i tool a disposizione del tuo assistente AI, organizzati per sorgente

Componenti

  • dsi_list_components Inventario unificato di tutti i componenti: una riga per componente, con stato Bootstrap Italia e Dev Kit Italia, null dove un componente non esiste in una delle due sorgenti. Punto di partenza prima di markup, token o props.
  • dsi_search_components Cerca sulla stessa unione, per nome, slug, alias IT/EN o tag Dev Kit (es. a11y-ok, web-component).

Bootstrap Italia

  • bsi_list_component_variants Nomi di tutte le varianti disponibili per un componente, senza markup.
  • bsi_get_component_markup Markup HTML completo di una variante specifica, o della prima se non ne specifichi una.
  • bsi_list_components_by_status Componenti filtrati per stato di implementazione, su Bootstrap Italia o Dev Kit Italia.

Dev Kit Italia

  • devkit_list_component_variants Nomi di tutte le varianti disponibili per un web component.
  • devkit_get_component_markup Markup HTML di una variante, estratto da Storybook via snapshot CI.
  • devkit_list_component_props Attributi HTML it-* di un web component: nome, tipo, descrizione, default, opzioni, incluse le props dei subcomponenti.

Design tokens

  • tokens_list_component_vars Variabili CSS --bsi-* personalizzabili di un componente, con descrizione semantica e valore risolto (es. var(--bsi-spacing-m) → 24px).
  • tokens_list_globals Coppie di token globali che Bootstrap Italia usa davvero: Design Token centrale + --bsi-* corrispondente, con valore risolto.
  • tokens_resolve Risolve una variabile qualsiasi (--bsi-*, --it-* o $it-*) al valore concreto, seguendo l'intera catena.
  • tokens_find_components Componenti impattati da una variabile, incluso l'impatto indiretto. Utile per capire cosa cambia sovrascrivendola.
  • tokens_search Cerca un token per sottostringa nel nome della variabile, su BSI e Design Tokens Italia globali.

Documentazione, issue e stato

  • docs_get_component_guide Linee guida d'uso da Designers Italia: quando e come usarlo, stato verifiche accessibilità, stato libreria.
  • github_get_component_issues Issue GitHub aperte per un componente sui repository monitorati del Design system .italia.
  • github_get_project_repo_links Link alle issue aperte per ciascun repository.
  • ping Verifica connessione al server. Restituisce stato, versione, timestamp, warning sulle sorgenti beta e la lista completa dei tool disponibili.

Esplora i dati

Verifica i dati aggregati dalle sorgenti originali del Design system .italia

Caricamento...

Istantanea salvata ogni notte nel ramo data-fetched del repository