MCP per progettisti: connessione di Figma, token e codice a Claude e Cursor

Cos'è MCP, in parole povere

La documentazione ufficiale di MCP lo descrive come uno standard open source per la connessione di applicazioni AI a sistemi esterni, come file, database e strumenti. Uno dei suoi esempi è Claude Code che genera un'intera app Web da un progetto Figma. Per un designer, la parte importante è questa: l’intelligenza artificiale non deve più indovinare come sarà il tuo progetto. Può chiedere direttamente allo strumento di progettazione.

Strumenti di progettazione con i server MCP oggi

A partire da ottobre 2026:

• Figma: un server MCP che fornisce agli agenti il ​​contesto di progettazione (variabili, componenti, layout) per la generazione del codice e può riscrivere il contenuto nativo nell'area di disegno. Figma lo elenca nei piani Starter e a pagamento; la scrittura su tela è gratuita durante la versione beta.
• Penpot: un server MCP gratuito e aperto che funziona con qualsiasi client MCP, inclusi Claude, Cursor, VS Code e OpenAI Codex e può essere ospitato autonomamente.
• ExodeUI (we make it): un server MCP che consente agli strumenti di codifica AI di creare e modificare animazioni interattive con stati e fisica primaverile.
• Token di progettazione: se i tuoi token risiedono in un repository come JSON, uno strumento di codifica AI può già leggerli come file; un server dedicato è necessario solo per i token archiviati all'interno di uno strumento.

Come i designer lo utilizzano effettivamente

I flussi di lavoro più comuni sono pratici piuttosto che magici. Gli sviluppatori selezionano un frame e chiedono all'intelligenza artificiale di implementarlo con la libreria di componenti esistente. I progettisti chiedono all'intelligenza artificiale di verificare se uno schermo codificato corrisponde al design ed elenca le differenze. I team chiedono all'intelligenza artificiale di aggiornare i token di un componente nella base di codice. E sempre più spesso i designer utilizzano l’intelligenza artificiale per abbozzare varianti direttamente sulla tela, per poi perfezionarle a mano.

Connessione di un server

Claude Code aggiunge server con il comando claude mcp add o tramite un file .mcp.json nel progetto e supporta server HTTP remoti oltre a quelli locali. Cursor gestisce i server MCP nelle sue impostazioni e supporta server locali (stdio) e remoti. I server remoti in genere ti chiedono di accedere una volta con OAuth. Ogni fornitore documenta il comando o l'URL esatto per il proprio server.

A cosa prestare attenzione

MCP offre agli strumenti di intelligenza artificiale un accesso reale, quindi trattalo come qualsiasi integrazione:

• Autorizzazioni: anche un agente che può scrivere sul canvas o sul repository può commettere errori. Utilizza la cronologia delle versioni e rivedi le modifiche.
• Privacy: controlla dove vanno i dati di progettazione e se il tuo piano lo consente.
• Costo: alcune funzionalità di scrittura sono gratuite in versione beta e si prevede che diventeranno basate sull'utilizzo.
• Qualità: l'output dell'intelligenza artificiale segue il sistema di progettazione solo se il sistema è ben strutturato, con componenti e token denominati.