Este artículo está patrocinado por Penpot. Imagine que su archivo Penpot contiene un conjunto completo de iconos además del diseño en sí, que utiliza algunos de esos iconos, pero no todos. Si le pidieras a una IA como Claude o Gemini que exporte solo los íconos que se están utilizando, no podría hacerlo. No puede interactuar con archivos Penpot. Sin embargo, un servidor Penpot MCP sí puede hacerlo. Puede realizar una cantidad cuidadosamente seleccionada de operaciones bajo reglas y permisos establecidos, especialmente porque Penpot tiene una API extensa y más aún porque es de código abierto. El trabajo de la IA es simplemente comprender su intención, elegir la operación correcta que debe realizar el servidor MCP (una exportación en este caso) y transmitir cualquier parámetro (es decir, iconos que se están utilizando). Luego, el servidor MCP traduce esto en una solicitud API estructurada y la ejecuta. Podría ser útil pensar en la IA como un servidor en un restaurante que toma su pedido, el servidor MCP como el menú y el chef, y la solicitud de API como (con suerte) una pizza caliente en un plato caliente. ¿Por qué exactamente servidores MCP? Bueno, Penpot no puede comprender su intención porque no es un LLM, ni permite que LLM de terceros interactúen con sus archivos de Penpot para la seguridad y privacidad de sus datos de Penpot. Aunque los servidores Penpot MCP actúan como un puente seguro, traducen la intención de la IA en solicitudes de API utilizando los archivos y datos de Penpot como contexto. Lo que es aún mejor es que debido a que Penpot adopta un enfoque de diseño expresado como código, los diseños se pueden crear, editar y analizar mediante programación a nivel granular. Es más contextual, más particular y, por lo tanto, más poderoso en comparación con lo que ofrecen otros servidores MCP, y mucho más reflexivo que el flujo de trabajo de IA deficiente 'Describir → Generar' que no creo que nadie realmente quiera. El documento técnico de IA de Penpot describe esto como el enfoque incorrecto y el enfoque de "Convertir a código" como el enfoque feo, mientras que los servidores MCP son más refinados y adaptables. Características y detalles técnicos Antes de pasar a los casos de uso, aquí hay algunas características y detalles técnicos que explican con más detalle cómo funcionan los servidores Penpot MCP:
Cumple con los estándares MCP; Se integra con la API de Penpot para obtener datos de diseño en tiempo real; Incluye un SDK de Python, API REST, sistema de complementos y herramientas CLI; Funciona con cualquier asistente de IA habilitado para MCP (Claude en VS Code, Claude en Cursor, Claude Desktop, etc.); Admite compartir el contexto de diseño con modelos de IA y permitirles ver y comprender los componentes; Facilita la comunicación con Penpot utilizando lenguaje natural.
Entonces, ¿qué podrían permitirnos hacer los servidores MCP en Penpot y qué han logrado ya los experimentos existentes? Echemos un vistazo. Casos de uso del servidor Penpot MCP Si solo desea pasar a lo que pueden hacer los servidores Penpot MCP, Penpot tiene algunas demostraciones de MCP escondidas en Google Drive que vale la pena ver. El director general de Penpot, Pablo Ruiz-Múzquiz, mencionó que los videos 03, 04, 06, 08 y 12 son sus favoritos. Una forma aún más rápida de resumir los servidores MCP es ver la presentación del Penpot Fest 2025. De lo contrario, echemos un vistazo a algunos de los ejemplos más refinados que Penpot demostró en su exhibición pública. Diseño a código y viceversa (y más) Siguiendo con lo que dije antes sobre cómo los diseños de Penpot se expresan como código, esto significa que los servidores MCP se pueden usar para convertir diseño en código usando IA, pero también código en diseño, diseño en documentación, documentación para diseñar elementos del sistema, diseño a código nuevamente basado en dicho sistema de diseño y luego componentes completamente nuevos basados en dicho sistema de diseño. Suena surrealista, pero la demostración a continuación muestra esta transmutabilidad, y no se debe a instrucciones vagas sino a elecciones de diseño previas, independientemente de cómo se expresaron (diseño, código o documentación). No hay sorpresas: estas son simplemente las decisiones que habría tomado de todos modos basándose en decisiones anteriores, ejecutadas rápidamente. En la demostración, Juan de la Cruz García, diseñador de Penpot, transmuta sin problemas algunos componentes simples en documentación, elementos del sistema de diseño, código, nuevos componentes e incluso un proyecto completo de Storybook como una pieza de Play-Doh: Diseño a código, validación de diseño/código y operaciones simples En una demostración similar a continuación, Dominik Jain, cofundador de Oraios AI, crea una aplicación web Node.js basada en el diseño antes de actualizar los estilos de interfaz, guarda nombres e identificadores en la memoria para garantizar una traducción fluida del diseño al código antes de verificar su coherencia y agrega uncomenta junto a la forma seleccionada en Penpot y luego reemplaza un garabato en Penpot con un componente adaptado. Están sucediendo muchas cosas aquí, pero puedes ver exactamente lo que Dominik está escribiendo en Claude Desktop, así como las respuestas de Claude, y es muy sólido: Por cierto, la demostración anterior usó Claude en VS Code, por lo que debo tener en cuenta que los servidores Penpot MCP son independientes de LLM. Su pila tecnológica depende totalmente de usted. IvanTheGeek logró configurar su servidor MCP con JetBrains Rider IDE y Junie AI. Más casos de uso Traduzca un tablero de Penpot a HTML semántico y CSS modular listo para producción mientras aprovecha cualquier token de diseño de Penpot (recuerde que los diseños de Penpot ya se expresan como código, por lo que esto no es una oportunidad a ciegas): Genere un prototipo web interactivo sin cambiar el HTML existente: Como se mostró anteriormente, convierta un garabato en un componente, aprovechando el diseño existente y/o los elementos del sistema de diseño: Cree documentación del sistema de diseño a partir de un archivo Penpot: Y aquí hay algunos casos de uso más de Penpot y la comunidad:
Exportaciones avanzadas, Busque elementos de diseño utilizando lenguaje natural, Extraiga datos de API externas utilizando lenguaje natural, Conecte fácilmente Penpot a otras herramientas externas, Guardar tareas repetitivas en la memoria y ejecutarlas, Pruebas de regresión visual, Comprobación de coherencia y redundancia del diseño. Análisis y comentarios de accesibilidad y usabilidad. Comprobación del cumplimiento del sistema de diseño, Comprobación del cumplimiento de las directrices (marca, contenido, etc.), Supervise la adopción y el uso con análisis de diseño, Mantenga automáticamente la documentación sincronizada con el diseño, Diseñar la organización de archivos (por ejemplo, etiquetado/categorización).
Básicamente, los servidores Penpot MCP abren el camino hacia una cantidad infinita de flujos de trabajo gracias a la eficiencia y facilidad del cliente LLM/LLM elegido, pero sin exponer sus datos a él. ¿Para qué utilizarías los servidores MCP? Los servidores Penpot MCP ni siquiera se encuentran en la etapa beta, pero es un experimento activo del que puedes formar parte. Los usuarios de Penpot ya han comenzado a explorar casos de uso para servidores MCP, pero Penpot quiere ver más. Para garantizar que la próxima generación de herramientas de diseño satisfaga las necesidades de los diseñadores, desarrolladores y equipos de productos en general, deben construirse de manera colectiva y colaborativa, especialmente en lo que respecta a la IA. Nota: Penpot está buscando probadores beta deseosos de explorar, experimentar y ayudar a perfeccionar el servidor MCP de Penpot. Para unirse, escriba a support@penpot.app con el asunto "Voluntario de prueba beta de MCP". ¿Hay algo que crea que los servidores Penpot MCP podrían hacer y que las herramientas actuales no pueden hacer lo suficientemente bien, lo suficientemente rápido o no pueden hacer en absoluto? Puede aprender cómo configurar un servidor Penpot MCP aquí mismo y comenzar a experimentar hoy mismo, o si su cerebro ya está lleno de ideas, Penpot quiere que se una a la discusión, comparta sus comentarios y hable sobre sus casos de uso. Alternativamente, ¡la sección de comentarios justo debajo tampoco es un mal lugar para comenzar!
