Aquest article està patrocinat per Penpot Imagineu que el vostre fitxer Penpot conté un conjunt d'icones complet a més del disseny en si, que utilitza algunes d'aquestes icones, però no totes. Si demaneu a una IA com ara Claude o Gemini que exporti només les icones que s'estan utilitzant, no ho podria fer. No pot interactuar amb fitxers Penpot. Tanmateix, un servidor Penpot MCP ho pot fer. Pot realitzar un nombre d'operacions seleccionades a mà sota regles i permisos establerts, sobretot perquè Penpot té una API extensa i encara més perquè és de codi obert. La feina de l'IA és simplement entendre la vostra intenció, triar l'operació adequada perquè el servidor MCP realitzi (una exportació en aquest cas) i transmetre qualsevol paràmetre (és a dir, les icones que s'estan utilitzant). Aleshores, el servidor MCP ho tradueix en una sol·licitud d'API estructurada i l'executa. Pot ser útil pensar en AI com un servidor d'un restaurant que rep la vostra comanda, el servidor MCP com el menú i el xef, i la sol·licitud de l'API com (esperem) un pastís de pizza calenta en un plat calent. Per què exactament els servidors MCP? Bé, Penpot no pot entendre la vostra intenció perquè no és un LLM, ni permet que els LLM de tercers interactuïn amb els vostres fitxers Penpot per garantir la seguretat i la privadesa de les vostres dades de Penpot. Tot i que els servidors Penpot MCP actuen com un pont segur, traduint la intenció de l'IA en sol·licituds d'API utilitzant els vostres fitxers i dades Penpot com a context. El que és encara millor és que, com que Penpot adopta un enfocament de disseny expressat com a codi, els dissenys es poden crear, editar i analitzar de manera programada a nivell granular. És més contextual, més particular i, per tant, més potent en comparació amb el que ofereixen altres servidors MCP, i molt més reflexiu que el flux de treball d'IA "Descriu → Genera" que no crec que ningú vulgui realment. El document blanc d'IA de Penpot ho descriu com el mal enfocament i l'enfocament "Convertir a codi" com l'enfocament lleig, mentre que els servidors MCP són més refinats i adaptables. Característiques i detalls tècnics Abans de passar als casos d'ús, aquí hi ha algunes característiques i detalls tècnics que expliquen més com funcionen els servidors Penpot MCP:
Compleix amb els estàndards MCP; S'integra amb l'API Penpot per obtenir dades de disseny en temps real; Inclou un SDK de Python, una API REST, un sistema de connectors i eines CLI; Funciona amb qualsevol assistent d'IA habilitat per MCP (Claude a VS Code, Claude a Cursor, Claude Desktop, etc.); Admet compartir el context del disseny amb models d'IA i permetre'ls veure i entendre els components; Facilita la comunicació amb Penpot mitjançant el llenguatge natural.
Què ens podrien permetre fer, doncs, els servidors MCP a Penpot i què ja han aconseguit els experiments existents? Fem una ullada. Casos d'ús del servidor Penpot MCP Si només voleu saltar al que poden fer els servidors MCP de Penpot, Penpot té unes quantes demostracions de MCP emmagatzemades a Google Drive que val la pena veure-les. El director general de Penpot, Pablo Ruiz-Múzquiz, va esmentar que els vídeos 03, 04, 06, 08 i 12 són els seus preferits. Una manera encara més ràpida de resumir els servidors MCP és veure la presentació del Penpot Fest 2025. En cas contrari, fem una ullada a alguns dels exemples més refinats que Penpot va demostrar a la seva presentació pública. Disseny a codi i de nou (i més) Partint del que deia anteriorment sobre com s'expressen els dissenys de Penpot com a codi, això vol dir que els servidors MCP es poden utilitzar per convertir disseny en codi mitjançant IA, però també codi per disseny, disseny per documentació, documentació per dissenyar elements del sistema, disseny per codi de nou basat en aquest sistema de disseny, i després components completament nous basats en aquest sistema de disseny. Sembla surrealista, però la demostració següent mostra aquesta transmutabilitat, i no és d'instruccions vagues sinó d'opcions de disseny anteriors, independentment de com s'expressessin (disseny, codi o documentació). No hi ha sorpreses: aquestes són simplement les decisions que hauríeu pres de totes maneres basant-vos en decisions anteriors, executades ràpidament. A la demostració, Juan de la Cruz García, dissenyador de Penpot, transmuta sense fricció alguns components simples en documentació, elements del sistema de disseny, codi, components nous i fins i tot un projecte complet de Storybook com una peça de Play-Doh: Disseny a codi, validació de disseny/codi i operacions senzilles En una demostració similar a continuació, Dominik Jain, cofundador d'Oraios AI, crea una aplicació web Node.js basada en el disseny abans d'actualitzar els estils d'interfície, desa noms i identificadors a la memòria per garantir una traducció fluida del disseny al codi abans de comprovar-ne la coherència, afegeix uncomenta al costat de la forma seleccionada a Penpot i després substitueix un gargot a Penpot per un component adaptat. Passen moltes coses aquí, però podeu veure exactament què està escrivint Dominik a Claude Desktop, així com les respostes de Claude, i és molt robust: Per cert, la demostració anterior utilitzava Claude a VS Code, així que he de tenir en compte que els servidors Penpot MCP són independents de LLM. La teva pila de tecnologia depèn totalment de tu. IvanTheGeek va aconseguir configurar el seu servidor MCP amb JetBrains Rider IDE i Junie AI. Més casos d'ús Tradueix un tauler de Penpot a HTML semàntic i CSS modular llest per a la producció mentre s'aprofita qualsevol testimoni de disseny de Penpot (recordeu que els dissenys de Penpot ja s'expressen com a codi, de manera que això no és un tret a les fosques): Genereu un prototip web interactiu sense canviar l'HTML existent: Com s'ha mostrat anteriorment, convertiu un gargot en un component, aprofitant el disseny existent i/o els elements del sistema de disseny: Creeu la documentació del sistema de disseny a partir d'un fitxer Penpot: I aquí hi ha alguns casos d'ús més de Penpot i la comunitat:
Exportacions avançades, Cercar elements de disseny amb llenguatge natural, Extraieu dades d'API externes mitjançant llenguatge natural, Connecteu fàcilment Penpot a altres eines externes, Desar tasques repetitives a la memòria i executar-les, Prova de regressió visual, Coherència del disseny i control de redundància, Anàlisi i comentaris d'accessibilitat i usabilitat, Comprovació del compliment del sistema de disseny, Comprovació del compliment de les directrius (marca, contingut, etc.), Superviseu l'adopció i l'ús amb anàlisis de disseny, Mantenir automàticament la documentació sincronitzada amb el disseny, Organització del fitxer de disseny (p. ex., etiquetatge/categorització).
Essencialment, els servidors Penpot MCP lideren el camí cap a una infinitat de fluxos de treball gràcies a l'eficiència i la facilitat del client LLM/LLM escollit, però sense exposar-hi les vostres dades. Per a què utilitzaríeu els servidors MCP? Els servidors Penpot MCP ni tan sols es troben en fase beta, però és un experiment actiu del qual podeu formar part. Els usuaris de Penpot ja han començat a explorar casos d'ús per als servidors MCP, però Penpot vol veure'n més. Per garantir que la propera generació d'eines de disseny satisfà les necessitats dels dissenyadors, desenvolupadors i equips de producte en general, s'han de construir de manera col·lectiva i col·laborativa, especialment pel que fa a la IA. Nota: Penpot busca provadors beta amb ganes d'explorar, experimentar i ajudar a perfeccionar el servidor MCP de Penpot. Per unir-vos, escriviu a support@penpot.app amb l'assumpte "MCP beta test volunteer". Hi ha alguna cosa que creieu que els servidors Penpot MCP podrien fer que les eines actuals no puguin fer-ho prou bé, prou ràpid o no ho puguin fer en absolut? Podeu aprendre a configurar un servidor MCP de Penpot aquí mateix i començar a retocar avui mateix, o si el vostre cervell ja està ple d'idees, Penpot vol que us uniu a la discussió, compartiu els vostres comentaris i parleu dels vostres casos d'ús. Alternativament, la secció de comentaris de sota tampoc és un mal lloc per començar!
