Questo articolo è sponsorizzato da Penpot Immagina che il tuo file Penpot contenga un set completo di icone oltre al design stesso, che utilizza alcune ma non tutte quelle icone. Se chiedessi a un’intelligenza artificiale come Claude o Gemini di esportare solo le icone utilizzate, non sarebbe in grado di farlo. Non è in grado di interagire con i file Penpot. Tuttavia, un server MCP Penpot può farlo. Può eseguire un numero selezionato di operazioni in base a regole e autorizzazioni prestabilite, soprattutto perché Penpot ha un'API estesa e ancora di più perché è open source. Il lavoro dell'intelligenza artificiale è semplicemente quello di comprendere le tue intenzioni, scegliere l'operazione giusta da eseguire per il server MCP (un'esportazione in questo caso) e trasmettere eventuali parametri (ad esempio, le icone che vengono utilizzate). Il server MCP quindi la traduce in una richiesta API strutturata e la esegue. Potrebbe essere utile pensare all'intelligenza artificiale come a un server in un ristorante che prende il tuo ordine, al server MCP sia come menu che come chef e alla richiesta API come (si spera) una torta di pizza calda su un piatto caldo. Perché i server MCP, esattamente? Bene, Penpot non è in grado di comprendere le tue intenzioni perché non è un LLM, né consente a LLM di terze parti di interagire con i tuoi file Penpot per la sicurezza e la privacy dei tuoi dati Penpot. Sebbene i server Penpot MCP agiscano come un ponte sicuro, traducendo l'intento dell'intelligenza artificiale in richieste API utilizzando i file e i dati Penpot come contesto. La cosa ancora migliore è che, poiché Penpot adotta un approccio di progettazione espresso come codice, i progetti possono essere creati, modificati e analizzati a livello di programmazione a livello granulare. È più contestuale, più particolare e quindi più potente rispetto a ciò che offrono altri server MCP e molto più ponderato del flusso di lavoro AI subpar "Descrivi → Genera" che non credo che nessuno voglia davvero. Il whitepaper sull’intelligenza artificiale di Penpot descrive questo come l’approccio sbagliato e l’approccio “Converti in codice” come l’approccio brutto, mentre i server MCP sono più raffinati e adattabili. Caratteristiche e dettagli tecnici Prima di passare ai casi d'uso, ecco alcune caratteristiche e dettagli tecnici che spiegano ulteriormente come funzionano i server Penpot MCP:
Conforme agli standard MCP; Si integra con l'API Penpot per dati di progettazione in tempo reale; Include un SDK Python, API REST, sistema di plug-in e strumenti CLI; Funziona con qualsiasi assistente AI abilitato per MCP (Claude in VS Code, Claude in Cursor, Claude Desktop, ecc.); Supporta la condivisione del contesto di progettazione con i modelli AI e consente loro di vedere e comprendere i componenti; Facilita la comunicazione con Penpot utilizzando il linguaggio naturale.
Cosa potrebbero quindi consentirci di fare i server MCP in Penpot e cosa hanno già ottenuto gli esperimenti esistenti? Diamo un'occhiata. Casi d'uso del server Penpot MCP Se vuoi semplicemente passare a cosa possono fare i server MCP Penpot, Penpot ha alcune demo MCP nascoste in un Google Drive che vale più che la pena guardare. Il CEO di Penpot Pablo Ruiz-Múzquiz ha affermato che i video 03, 04, 06, 08 e 12 sono i loro preferiti. Un modo ancora più veloce per riassumere i server MCP è guardare la presentazione del Penpot Fest 2025. Altrimenti, diamo un'occhiata ad alcuni degli esempi più raffinati che Penpot ha presentato nella sua vetrina pubblica. Design-to-Code e viceversa (e altro ancora) Riprendendo ciò che dicevo prima su come i progetti Penpot sono espressi come codice, ciò significa che i server MCP possono essere utilizzati per convertire il progetto in codice utilizzando l'intelligenza artificiale, ma anche il codice in progetto, il progetto in documentazione, la documentazione per progettare elementi del sistema, il progetto in codice nuovamente basato su detto sistema di progettazione e quindi componenti completamente nuovi basati su detto sistema di progettazione. Sembra surreale, ma la demo qui sotto mostra questa trasmutabilità, e non deriva da istruzioni vaghe ma piuttosto da scelte progettuali precedenti, indipendentemente da come sono state espresse (design, codice o documentazione). Non ci sono sorprese: queste sono semplicemente le decisioni che avresti comunque preso in base a decisioni precedenti, eseguite rapidamente. Nella demo, Juan de la Cruz García, Designer di Penpot, trasforma senza problemi alcuni semplici componenti in documentazione, elementi del sistema di progettazione, codice, nuovi componenti e persino un progetto completo di Storybook come un pezzo di Play-Doh: Design-to-code, convalida del progetto/codice e operazioni semplici In una demo simile di seguito, Dominik Jain, co-fondatore di Oraios AI, crea un'app Web Node.js basata sul design prima di aggiornare gli stili frontend, salva nomi e identificatori in memoria per garantire una traduzione fluida dal design al codice prima di verificarne la coerenza, aggiunge uncommento accanto alla forma selezionata in Penpot, quindi sostituisce uno scarabocchio in Penpot con un componente adattato. Stanno accadendo molte cose qui, ma puoi vedere esattamente cosa Dominik sta digitando in Claude Desktop così come le risposte di Claude, ed è molto robusto: A proposito, la demo precedente utilizzava Claude in VS Code, quindi dovrei notare che i server Penpot MCP sono indipendenti da LLM. Il tuo stack tecnologico dipende totalmente da te. IvanTheGeek è riuscito a configurare il proprio server MCP con JetBrains Rider IDE e Junie AI. Altri casi d'uso Traduci una scheda Penpot in HTML semantico pronto per la produzione e CSS modulare sfruttando al contempo qualsiasi token di progettazione Penpot (ricorda che i design Penpot sono già espressi come codice, quindi non è un colpo al buio): Genera un prototipo web interattivo senza modificare l'HTML esistente: Come mostrato in precedenza, converti uno scarabocchio in un componente, sfruttando gli elementi di progettazione esistenti e/o del sistema di progettazione: Crea la documentazione del sistema di progettazione da un file Penpot: Ed ecco alcuni altri casi d'uso di Penpot e della community:
Esportazioni avanzate, Cerca elementi di design utilizzando il linguaggio naturale, Estrai dati da API esterne utilizzando il linguaggio naturale, Collega facilmente Penpot ad altri strumenti esterni, Salvare attività ripetitive in memoria ed eseguirle, Test di regressione visiva, Verifica della coerenza del progetto e della ridondanza, Analisi e feedback di accessibilità e usabilità, Verifica della conformità del sistema di progettazione, Controllo della conformità alle linee guida (marchio, contenuto, ecc.), Monitorare l'adozione e l'utilizzo con l'analisi della progettazione, Mantieni automaticamente la documentazione sincronizzata con la progettazione, Progettare l'organizzazione dei file (ad esempio, tagging/categorizzazione).
In sostanza, i server Penpot MCP aprono la strada a un numero infinito di flussi di lavoro grazie all'efficienza e alla facilità del client LLM/LLM scelto, ma senza esporre i tuoi dati ad esso. Per cosa utilizzeresti i server MCP? I server Penpot MCP non sono nemmeno in fase beta, ma è un esperimento attivo di cui puoi prendere parte. Gli utenti di Penpot hanno già iniziato a esplorare casi d'uso per i server MCP, ma Penpot vuole vedere di più. Per garantire che la prossima generazione di strumenti di progettazione soddisfi le esigenze di designer, sviluppatori e team di prodotto in generale, questi devono essere costruiti collettivamente e in modo collaborativo, soprattutto per quanto riguarda l’intelligenza artificiale. Nota: Penpot è alla ricerca di beta tester desiderosi di esplorare, sperimentare e contribuire a perfezionare il server MCP di Penpot. Per iscriverti, scrivi a support@penpot.app con oggetto "MCP beta test volontario". C'è qualcosa che ritieni che i server MCP Penpot potrebbero fare che gli strumenti attuali non sono in grado di fare abbastanza bene, abbastanza velocemente o non sono in grado di fare affatto? Puoi imparare come configurare un server Penpot MCP proprio qui e iniziare ad armeggiare oggi stesso, oppure se il tuo cervello è già pieno di idee, Penpot vuole che tu partecipi alla discussione, condivida il tuo feedback e parli dei tuoi casi d'uso. In alternativa, anche la sezione commenti proprio qui sotto non è un brutto punto di partenza!
