I migliori server MCP di design: Figma, Mobbin, Stitch, Sleek

Un server MCP di design consente a un agente di programmazione di leggere design, cercare riferimenti UI o generare schermate tramite il Model Context Protocol. Per un design Figma esistente, parti da Figma. Per cercare riferimenti, usa Mobbin. Per nuove schermate di app mobile all'interno di un progetto modificabile, Sleek è un'opzione creata appositamente per questo scopo.

Questo confronto copre le funzionalità documentate e i percorsi di configurazione di otto fornitori per Claude Code e Cursor, verificati il 28 settembre 2026. Sviluppiamo Sleek. Le raccomandazioni di seguito si basano su ciò che fa ciascuna integrazione, non su una classifica della qualità dei risultati basata su prove dirette.

Punti Chiave

Scegli in base all'obiettivo: leggere un design, trovare riferimenti e generare schermate richiedono strumenti diversi.
L'MCP remoto di Figma può leggere i design e scrivere sul canvas. Il suo server desktop offre un insieme di funzionalità più limitato.
Mobbin fornisce riferimenti di prodotti reali. Stitch e Sleek possono generare nuove schermate tramite servizi cloud.
Pencil e Paper permettono a un agente di lavorare su un canvas di design locale. Mantieni aperto il documento interessato per questo flusso di lavoro.
Sleek offre una prova gratuita dell'API tramite crediti una tantum. L'accesso continuativo richiede Pro o Team; il piano Starter è escluso.

Cos'è un server MCP di design?

Un server MCP di design espone gli strumenti di un prodotto di design a un client IA. L'agente può chiamare tali strumenti e ricevere dati o immagini senza chiederti di copiare ogni dettaglio in chat. Il protocollo fornisce la connessione; il server determina se l'agente può leggere un file, cercare in un catalogo o modificare un design.

Un server ospitato nel cloud si connette tramite un URL. Un'integrazione locale si connette al software sul tuo computer. Nessuna delle due etichette ti dice se il server è in grado di generare schermate. Verifica le operazioni disponibili prima di scegliere un server.

Come si confrontano i server MCP di design?

Figma è utile quando il design deve risiedere in Figma. Mobbin fornisce riferimenti da prodotti esistenti. Stitch e Sleek offrono flussi di lavoro cloud per la generazione di schermate, mentre Pencil e Paper connettono un agente a un canvas locale. Alcune funzionalità si sovrappongono, quindi scegli il tipo di risultato e il flusso di lavoro di cui hai bisogno piuttosto che la lista di strumenti più lunga.

Tutti i dettagli di accesso indicati di seguito sono aggiornati a settembre 2026. Le fonti dei fornitori e le istruzioni per i client seguono la tabella.

Server	Legge i design	Crea o modifica schermate	Ricerca di riferimenti	Autenticazione	Accesso o limitazione di piano	Claude Code / Cursor
Figma remoto	Frame, variabili, componenti	Sì, scrittura sul canvas in beta	Nessun catalogo di riferimenti	OAuth	Tutti i piani e i tipi di licenza, con limiti di utilizzo	Plugin o HTTP / plugin
Figma desktop	Contesto del design selezionato	La scrittura sul canvas è solo remota	Nessun catalogo di riferimenti	Sessione desktop	Piano a pagamento con licenza Dev o Full	HTTP locale / HTTP locale
Google Stitch	Dati di progetto e schermata	Sì, schermate generate	Non è il suo scopo principale	Chiave API o OAuth	Verifica i limiti correnti dell'account	HTTP remoto / HTTP remoto
Mobbin	Immagini di riferimento	Nessuno strumento di generazione documentato	Schermate, flussi, sezioni di siti web	OAuth	Pro, Team, Enterprise	Connettore o HTTP / plugin
Sleek	HTML e immagini delle schermate	Sì, schermate di app mobile	Riferimenti Sleek selezionati	OAuth; fallback su chiave API	Prova gratuita; accesso continuativo con Pro o Team	HTTP remoto / HTTP remoto
ScreensDesign	Schermate app e flussi UX	Sì, generazione basata su libreria	Libreria di app iOS e segnali di ricavo	OAuth o chiave API con permessi limitati	Pro	HTTP remoto / HTTP remoto
AIDesigner	Design generati e contesto canvas	Sì, HTML/CSS con Tailwind	Nessun catalogo di riferimenti; accetta URL di siti web	OAuth	Account e crediti di generazione	CLI o HTTP / CLI o HTTP
Pencil, ora pen.dev	Documento .pen aperto	Sì, sul canvas	Nessun catalogo di riferimenti	Connessione app locale	Attualmente gratuito; costi dell'agente di programmazione separati	Integrazione app / estensione IDE
Paper	Documento aperto	Sì, canvas HTML/CSS	Nessun catalogo di riferimenti	Connessione app locale	Gratuito: 100 chiamate MCP/settimana; Pro: 1 milione/settimana	Plugin / plugin

La tabella separa la generazione dal recupero dei riferimenti. Il risultato di una ricerca può aiutare un agente a comprendere un pattern di checkout, ma non equivale a una nuova schermata di checkout per la tua app.

Cosa fa il server MCP di Figma?

Figma MCP fornisce il contesto di design per l'implementazione, inclusi layout, variabili e componenti. Il server remoto consente inoltre ai client supportati di creare e modificare contenuti nativi di Figma. Usalo quando il file di design su cui intendi lavorare o in cui desideri scrivere è su Figma. Il server desktop rimane disponibile per leggere il contesto di design locale.

Il centro assistenza di Figma indica l'accesso remoto per tutti i piani e i tipi di licenza, l'accesso desktop per le licenze Dev o Full a pagamento e la scrittura gratuita sul canvas durante la fase beta. L'accesso non è illimitato: la pagina dei limiti di utilizzo di Figma assegna al piano Starter fino a 20 chiamate di strumenti di lettura al mese, con soglie più alte per le licenze Dev e Full a pagamento.

Comandi verificati il 2026-09-28.

La guida all'installazione remota raccomanda questo plugin per Claude Code:

claude plugin install figma@claude-plugins-official

Oppure aggiungi semplicemente il server:

claude mcp add --transport http figma https://mcp.figma.com/mcp

Apri /mcp in Claude Code ed effettua l'autenticazione. Per Cursor, la stessa guida documenta questo comando nella chat dell'agente:

/add-plugin figma

Per la modalità desktop, abilita il server MCP nel pannello di ispezione della Dev Mode di Figma. La guida desktop fornisce questo comando per Claude Code:

claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp

La configurazione desktop per Cursor è:

{
  "mcpServers": {
    "figma-desktop": {
      "url": "http://127.0.0.1:3845/mcp"
    }
  }
}

Incolla il link a un frame e chiedi all'agente di implementarlo. Questo è il punto di partenza più chiaro quando il layout è già stato deciso. Gli strumenti di scrittura del server remoto lo rendono un'opzione anche quando devi creare contenuti direttamente in Figma.

Cosa fa il server MCP di Google Stitch?

Google Stitch fornisce una connessione MCP cloud per lavorare con i progetti Stitch e generare schermate a partire da un testo. Il design risultante rimane all'interno di un progetto Stitch. È adatto agli sviluppatori che desiderano utilizzare il generatore di design di Google direttamente dal proprio agente di programmazione e recuperare i dati delle schermate all'interno dello stesso flusso di lavoro.

La guida di configurazione MCP di Stitch documenta l'autenticazione tramite chiave API e OAuth. La procedura con chiave API utilizza una chiave generata nelle impostazioni di Stitch. L'SDK ufficiale di Stitch documenta inoltre l'endpoint remoto, la generazione e il recupero dell'HTML e delle immagini delle schermate.

Claude Code, utilizzando la configurazione con chiave API della guida:

claude mcp add stitch --transport http https://stitch.googleapis.com/mcp --header "X-Goog-Api-Key: YOUR-API-KEY" -s user

Cursor, in .cursor/mcp.json:

{
  "mcpServers": {
    "stitch": {
      "url": "https://stitch.googleapis.com/mcp",
      "headers": {
        "X-Goog-Api-Key": "YOUR-API-KEY"
      }
    }
  }
}

Sostituisci il segnaposto con la tua chiave e tieni quel file fuori dal controllo versione. Verifica i limiti correnti nel tuo account Stitch prima di pianificare un lavoro in batch. La pagina di configurazione è una guida alla connessione.

Trasforma le idee in design di app

Cosa fa il server MCP di Mobbin?

Mobbin MCP consente all'agente di cercare interfacce di prodotti reali e ricevere immagini delle schermate. È utile prima di progettare un flusso o implementare un pattern su cui non hai ancora preso una decisione. I suoi strumenti documentati cercano materiale esistente; non generano il design di una nuova app. L'output è materiale di riferimento per la decisione successiva.

L'introduzione di Mobbin conferma l'autenticazione OAuth e l'accesso sui piani Pro, Team ed Enterprise. La sua lista degli strumenti copre schermate, flussi e sezioni di siti web. Gli URL delle immagini ad alta risoluzione scadono dopo 30 giorni.

La guida per Claude Code di Mobbin consiglia di configurare prima il connettore verificato in Claude Desktop o sul web. Documenta anche questa alternativa riservata alla CLI:

claude mcp add mobbin --scope user --transport http https://api.mobbin.com/mcp

Quindi apri /mcp, seleziona Mobbin ed effettua l'autenticazione.

Per Cursor, le istruzioni di configurazione del fornitore utilizzano il plugin del suo Marketplace anziché uno snippet JSON:

Apri il plugin Mobbin nel Cursor Marketplace e seleziona Add to Cursor.
Seleziona Add Plugin.
In Cursor, apri Customize, poi Installed e quindi Mobbin.
Seleziona Authenticate ed effettua l'accesso.

Richiedi un riferimento concreto, come le schermate di onboarding delle app bancarie. Scegli i pattern più utili prima di chiedere a un generatore o a un agente di programmazione di implementare il tuo flusso.

Cosa fa il server MCP di Sleek?

Sleek MCP consente a un agente di generare schermate modificabili per app iOS e Android all'interno di un progetto Sleek. L'agente può recuperare l'HTML della schermata, effettuare il rendering delle immagini e restituire un link al progetto per la revisione. Usalo quando il design dell'app mobile è il passaggio mancante tra il tuo brief e il codice che vuoi far scrivere all'agente.

Il README di Sleek MCP documenta un server cloud, l'accesso tramite OAuth e le esportazioni in Figma e in codice. Fornisci all'agente il brief completo dell'app in un unico messaggio perché Sleek possa pianificare tutte le schermate insieme. La generazione consuma crediti dell'area di lavoro; la lettura e il rendering no.

Claude Code:

claude mcp add --transport http sleek https://sleek.design/api/mcp

Apri /mcp, seleziona Sleek e completa l'autenticazione nel browser. Per Cursor, aggiungi quanto segue a .cursor/mcp.json per un singolo progetto o a ~/.cursor/mcp.json per tutti i progetti:

{
  "mcpServers": {
    "sleek": {
      "url": "https://sleek.design/api/mcp"
    }
  }
}

Abilita il server ed effettua l'accesso. Il README raccomanda OAuth; le chiavi API sono una soluzione di fallback per i client che non lo supportano.

Gli account gratuiti possono provare l'API con 60 crediti una tantum. Tra i piani di abbonamento pubblici, l'accesso continuativo all'API e all'agente richiede Pro o Team, non Starter. Il piano Pro costa $69 al mese o $360 all'anno con 20.000 crediti mensili secondo i dati di settembre 2026. Le esportazioni verso Figma e verso il codice sono incluse in ogni piano, mentre le esportazioni del piano gratuito sono limitate alle schermate sbloccate.

Il README dell'MCP stima circa 30 crediti per ogni nuova schermata e da 5 a 30 per ogni modifica. È possibile attivare una sola esecuzione di design alla volta per progetto. La chiamata design attende fino a 270 secondi, quindi restituisce uno stato di esecuzione in corso se necessario; l'agente dovrebbe effettuare il polling di get_design_run invece di inviare nuovamente il brief.

Sleek produce design e codice UI esportabile. Il tuo agente di programmazione deve comunque collegare i dati e il comportamento dell'app, oltre ad adattare il codice delle schermate se stai sviluppando con React Native o SwiftUI. Se preferisci un flusso di lavoro basato su API REST, la guida alle skill di UI design per Claude Code spiega l'installazione separata della skill di Sleek.

Cosa fa il server MCP di ScreensDesign?

ScreensDesign MCP unisce la ricerca su app iOS alla generazione di schermate. La sua pagina MCP elenca una libreria di oltre 2.715 app tra quelle con i maggiori incassi, flussi UX completi, segnali di ricavo e strumenti per generare schermate a partire da tali riferimenti, con dati aggiornati a settembre 2026. È adatto a un brief che parte dall'analisi dei pattern mobile esistenti.

L'accesso a MCP richiede ScreensDesign Pro. Il server hosted supporta OAuth o chiavi API con permessi limitati. Per Claude Code, aggiungi l'endpoint HTTP e autenticati tramite /mcp:

claude mcp add --transport http screensdesign https://api.screensdesign.com/v1/mcp

Per Cursor, aggiungi questo a .cursor/mcp.json, poi connetti il server:

{
  "mcpServers": {
    "screensdesign": {
      "url": "https://api.screensdesign.com/v1/mcp"
    }
  }
}

Usa la guida di configurazione del vendor per le impostazioni specifiche del tuo account. I segnali di ricavo descrivono le app di riferimento; non dimostrano che copiare una schermata migliorerà il tasso di conversione della tua app.

Cosa fa il server MCP di AIDesigner?

AIDesigner MCP genera e rifinisce design HTML/CSS con Tailwind per viewport mobile o desktop. Può usare il contesto del repository e condividere i risultati con il suo canvas. Sceglilo se vuoi che il codice dell'interfaccia generato sia modellato sul tuo progetto esistente, per poi ispezionare l'output prima di considerarlo un'implementazione definitiva.

La guida di configurazione ufficiale fornisce una CLI che configura il server e le istruzioni per l'agente. Esegui questo comando nella root del tuo progetto per Claude Code:

npx -y @aidesigner/agent-skills init

Per Cursor, seleziona esplicitamente l'host:

npx -y @aidesigner/agent-skills init cursor

Entrambi si connettono a https://api.aidesigner.ai/api/v1/mcp. Completa l'accesso tramite OAuth dal pannello MCP del client. La generazione consuma crediti dell'account; controlla la tua disponibilità prima di lanciare varianti ripetute. L'output documentato è HTML per l'interfaccia, non un'app mobile nativa completa.

Cosa fa il server MCP di Pencil?

Pencil, ora pen.dev, connette un agente al documento .pen aperto nella sua app desktop o estensione IDE. L'agente può ispezionare e modificare il canvas mentre lavori nello stesso file. È adatto agli sviluppatori che desiderano un documento di design affiancato al proprio repository e un flusso di lavoro di modifica locale interattivo.

La documentazione sull'integrazione IA descrive una connessione stdio locale all'app. La guida all'installazione fornisce questi passaggi per Claude Code al posto di un URL utilizzabile su qualsiasi computer:

Apri un documento .pen in pen.dev.
Abilita Claude Code CLI in Settings, quindi seleziona MCP.
Avvia o riavvia Claude Code.
Esegui /mcp e conferma che pencil sia connesso.

Per Cursor, segui la procedura documentata per l'estensione IDE:

Apri Extensions e cerca pen.dev.
Installa l'estensione.
Crea o apri un file .pen.

La pagina dei prezzi indica che pen.dev è attualmente gratuito a settembre 2026. Questo non include l'abbonamento separato per il tuo agente di programmazione. Mantieni aperto il documento per questo flusso di lavoro MCP; non tentare di indovinare un endpoint cloud e non usare un percorso dell'eseguibile copiato dal computer di qualcun altro.

Cosa fa il server MCP di Paper?

Paper MCP consente a un agente di leggere e modificare un documento di design Paper creato con HTML e CSS. Supporta un flusso di lavoro con canvas condiviso: l'agente modifica il design, tu lo ispezioni e l'agente può utilizzare il risultato durante l'implementazione. Paper Desktop deve essere in esecuzione con un file aperto per eseguire queste operazioni sul documento.

La guida all'MCP di Paper documenta l'installazione di questi plugin. Prima installa e apri Paper Desktop. Per Claude Code, esegui:

claude plugin marketplace add paper-design/agent-plugins && claude plugin install paper-desktop@paper

Quindi apri Claude Code e controlla /mcp. Per Cursor, esegui questo comando nel pannello dell'agente:

/add-plugin paper-desktop

Ricarica Cursor se il server non appare. La precedente configurazione HTTP localhost di Paper funziona ancora, ma i plugin attuali utilizzano la CLI di Paper. La CLI può esporre gli strumenti anche quando l'applicazione Desktop è chiusa; la lettura e la scrittura dei documenti richiedono comunque l'app.

La pagina dei prezzi di Paper indica 100 chiamate MCP a settimana nel piano Free e 1 milione a settimana nel piano Pro secondo i dati di settembre 2026. Pro costa $20 al mese per editor, oppure $16 al mese per editor con fatturazione annuale. La quota di chiamate agli strumenti non corrisponde al numero di schermate: un singolo compito di design può richiedere diverse chiamate.

Quale server MCP di design dovresti usare?

Usa Figma per implementare un design Figma esistente, Mobbin per trovare riferimenti e Sleek per generare schermate mobile in un progetto che puoi revisionare ed esportare. Stitch è un'altra opzione di generazione cloud. Scegli Pencil o Paper quando desideri che l'agente e un canvas locale lavorino sullo stesso documento di design.

Parti dall'obiettivo immediato. Se un tuo collega ti ha già fornito un frame Figma, un secondo generatore aggiunge una decisione di design di cui potresti non avere bisogno. Se non disponi di un layout, i riferimenti possono aiutarti a decidere cosa inserire nella schermata prima di procedere con la generazione. Per il brief di una nuova app mobile, connetti il tuo agente a Sleek e ispeziona le schermate risultanti prima di implementarle. La prova gratuita copre circa un'esecuzione di design; il piano Pro supporta l'uso continuativo.

Fornisci all'agente le regole del brand esistenti all'interno del brief. La libreria DESIGN.md offre indicazioni di design scritte che puoi utilizzare insieme a questi strumenti; si tratta di un input separato dalla connessione MCP.

Per scelte che vanno oltre le integrazioni degli agenti, consulta la classifica dei migliori strumenti di IA per il design di app mobile e le alternative a Claude Design.

Domande frequenti

Il server MCP di Figma è gratuito?

Il server remoto di Figma è disponibile su tutti i piani e i tipi di licenza, pur con dei limiti di utilizzo. Il piano Starter offre fino a 20 chiamate di strumenti di lettura al mese secondo i dati di settembre 2026. L'accesso desktop richiede una licenza Dev o Full su un piano a pagamento. La scrittura sul canvas è gratuita durante la fase beta.

L'MCP di Mobbin genera nuove schermate?

I suoi strumenti documentati cercano schermate, flussi e sezioni di siti web esistenti, restituendo immagini di riferimento per il tuo agente. Non creano il design di una nuova app.

Posso connettere più di un server MCP di design?

Sì. Puoi connettere strumenti che svolgono compiti diversi, come la ricerca di riferimenti e la generazione del design. Specifica quale servizio l'agente deve utilizzare per ogni passaggio, in modo da rendere chiaro il flusso di lavoro previsto.

L'MCP di Sleek funziona sul piano Starter?

No. Il piano Starter non include l'accesso all'API. Gli account gratuiti possono provare l'API con crediti di prova una tantum. L'accesso continuativo è incluso nei piani Pro e Team; Pro costa $69 al mese o $360 all'anno secondo i dati di settembre 2026.

Pencil e Paper richiedono un'app locale aperta?

Per i flussi di lavoro MCP di modifica dei documenti descritti qui, sì. Pencil funziona con un documento .pen aperto nell'app desktop o nell'estensione IDE. Paper necessita dell'app Desktop e di un file aperto per le operazioni di lettura e scrittura sul documento, anche se la sua CLI può esporre gli strumenti mentre l'app Desktop è chiusa.

In che modo un server MCP di design differisce da una skill di design?

Un server MCP espone strumenti che l'agente può chiamare. Una skill fornisce istruzioni e può includere script o indicazioni sulle API. Sleek supporta entrambe le modalità: il suo MCP si connette tramite OAuth, mentre la sua skill insegna all'agente a utilizzare l'API REST.

I migliori server MCP di design per Claude Code e Cursor