Penpot está experimentando con el servidor MCP para flujos de trabajo de diseño impulsados por IA – Smashing Magazine
Imagine que, además del diseño en sí, su archivo Penpot contiene un conjunto de iconos completo, utilizando algunos pero no todos los iconos. Si le pides a una IA como Claude o Gemini que exporte solo los íconos que está usando, no podrá hacerlo. No puede interactuar con archivos Penpot.
Sin embargo, un Servidor MCP Penpot capaz. Puede realizar un conjunto de operaciones cuidadosamente seleccionadas bajo reglas y permisos establecidos, especialmente porque Penpot tiene una API extensa y, lo que es más importante, porque Código abierto.
El trabajo de la IA es simplemente comprender su intención, elegir la acción correcta que debe realizar el servidor MCP (en este caso, exportar) y pasar cualquier parámetro (es decir, el icono que se está utilizando). Luego, el servidor MCP convierte esto en una solicitud API estructurada y la ejecuta.
Puede resultar útil pensar en la IA como un servidor en un restaurante que toma pedidos, 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é elegir el servidor MCP después de todo? Bueno, Penpot no puede comprender sus intenciones porque no es un LLM y no permite que LLM de terceros interactúen con sus archivos de Penpot para garantizar la seguridad y privacidad de sus datos de Penpot. Aunque el servidor Penpot MCP actúa como puente de seguridadutilizando archivos y datos de Penpot como contexto para traducir la intención de la IA en solicitudes de API.
Aún mejor, porque Penpot requiere Expresión de diseño como método de código.los diseños se pueden crear, editar y analizar mediante programación a un nivel granular. Es más contextual, más específico y, por tanto, más potente que los servicios proporcionados por otros servidores MCP, y lejos Mucho más reflexivo que el flujo de trabajo de IA de mala calidad de “describir → generar” que creo que nadie realmente quiere. Libro blanco sobre IA de Penpot Describa esto como un mal enfoque y el enfoque de “convertir a código” como feo, mientras que el servidor MCP es más refinado y adaptable.
Características y detalles técnicos.
Antes de pasar a los casos de uso, aquí hay algunos detalles técnicos y funcionales que explican con más detalle cómo funciona el servidor Penpot MCP:
- Cumplir con los estándares MCP;
- Integre con Penpot API para obtener datos de diseño en tiempo real;
- Incluyendo Python SDK, REST API, sistema de complementos y herramientas CLI;
- Se puede utilizar con cualquier asistente de IA que admita MCP (Claude en VS Code, Claude en Cursor, Claude Desktop, etc.);
- Admite compartir contexto de diseño con modelos de IA, permitiéndoles ver y comprender componentes;
- Utilice lenguaje natural para facilitar la comunicación con Penpot.
Entonces, ¿qué nos permite hacer el servidor MCP en Penpot? ¿Qué resultados han logrado los experimentos existentes? Echemos un vistazo.
Caso de uso del servidor Penpot MCP
Si solo desea pasar a las funciones del servidor Penpot MCP, Penpot tiene algunas Demostración de MCP Escondido en Google Drive, vale la pena echarle un vistazo. El director general de Penpot, Pablo Ruiz-Múzquiz, mencionó los vídeos 03, 04, 06, 08 y 12 como sus favoritos.
Una forma más rápida de resumir los servidores MCP es Vea la presentación del Penpot Fest 2025.
Más allá de eso, veamos algunos de los ejemplos más elaborados que Penpot muestra en su artículo. exhibición pública.
Del diseño al código y viceversa (y más)
Continuando con lo que dije anteriormente sobre cómo los diseños de Penpot se expresan como código, esto significa que el servidor MCP se puede usar para convertir diseños en código usando IA, pero también código en diseños, diseños en documentos, elementos del sistema de diseño de documentos, diseños en código nuevamente. Residencia en Basado en dicho sistema de diseño y luego componentes completamente nuevos basados en dicho sistema de diseño.
Suena surrealista, pero la siguiente demostración lo muestra. variabilidadesto no proviene de instrucciones vagas, sino de elecciones de diseño previas, independientemente de cómo se expresaron (diseño, código o documentación). No hay sorpresas: son solo decisiones que usted toma basándose en decisiones anteriores y las ejecuta rápidamente.
En la demostración, el diseñador de Penpot Juan de la Cruz García transforma fácilmente algunos componentes simples en documentos, elementos del sistema de diseño, código, nuevos componentes e incluso un proyecto completo de Storybook como Play-Doh:
Diseño a código, verificación de diseño/código y operaciones simples
En una demostración similar a continuación, el cofundador de Oraios AI, Dominik Jain, creó una aplicación web Node.js basada en un diseño antes de actualizar los estilos de interfaz, guardando nombres e identificadores en la memoria para garantizar una transición fluida del diseño al código, luego verificando la coherencia, agregando anotaciones junto a las formas seleccionadas en Penpot y luego reemplazando los garabatos en Penpot con componentes adaptados. Están sucediendo muchas cosas aquí, pero puedes ver exactamente lo que Dominik escribió en Claude Desktop y la respuesta de Claude, que es Muy Fuerte:
Por cierto, la demostración anterior usó Claude en VS Code, así que lo que debo tener en cuenta es El servidor Penpot MCP es independiente de LLM. Su pila de tecnología depende totalmente de usted. IvanTheGeek logró Configure el servidor MCP utilizando JetBrains Rider IDE y Junie AI.
Más casos de uso
Convierta los tableros de Penpot en HTML semántico y CSS modular listos para producción mientras aprovecha cualquier token de diseño de Penpot (recuerde, los diseños de Penpot ya se expresan como código, por lo que esto no es una conjetura de la nada):
Genere prototipos web interactivos sin cambiar el HTML existente:
Como se mencionó anteriormente, aproveche el diseño existente y/o los elementos del sistema de diseño para convertir garabatos en componentes:
Cree un documento del sistema de diseño a partir de un archivo Penpot:
Aquí hay más casos de uso para Penpot y la comunidad:
- exportación avanzada,
- Busque elementos de diseño utilizando lenguaje natural,
- Utilice lenguaje natural para extraer datos de API externas.
- Conecte fácilmente Penpot a otras herramientas externas,
- Guarde tareas recurrentes en la memoria y ejecútelas,
- prueba de regresión visual,
- Comprobaciones de coherencia y redundancia del diseño.
- Análisis y comentarios de accesibilidad y usabilidad.
- Comprobaciones de cumplimiento del sistema de diseño,
- Comprobaciones de cumplimiento de las directrices (marca, contenido, etc.),
- Monitorear la adopción y el uso a través de análisis de diseño,
- Mantenga automáticamente sincronizados los documentos y diseños,
- Diseñar la organización de archivos (por ejemplo, etiquetar/categorizar).
Básicamente, los servidores Penpot MCP marcan el camino Número ilimitado de flujos de trabajo Esto se logra gracias a la eficiencia y facilidad de uso del cliente LLM/LLM que elijas sin exponer tus datos al mismo.
¿Para qué utilizarás el servidor MCP?
El servidor Penpot MCP ni siquiera está en versión beta todavía, pero es una experimentación activa Tú puedes ser parte de ello. Los usuarios de Penpot ya están explorando casos de uso para servidores MCP, pero Penpot quiere ver más. Para garantizar que las herramientas de diseño de próxima generación satisfagan las necesidades colectivas de diseñadores, desarrolladores y equipos de productos, deben crearse colectivamente y colaborativamenteespecialmente en inteligencia artificial.
notas: Penpot está buscando probadores beta que estén ansiosos por explorar, experimentar y ayudar a mejorar el servidor MCP de Penpot. Para unirte, por favor escribe a Soporte @penpot.app El tema es “Voluntarios de la prueba beta de MCP”.
¿Crees que el servidor Penpot MCP puede hacer algo que las herramientas actuales no hacen lo suficientemente bien, lo suficientemente rápido o simplemente no pueden hacer?
puedes aprender Cómo configurar el servidor Penpot MCP aquí Empiece a jugar hoy o, si su cerebro ya está lleno de ideas, Penpot quiere que lo haga. Únase a la discusióncomparta sus comentarios y analice sus casos de uso. Alternativamente, ¡la sección de comentarios a continuación es un excelente lugar para comenzar!
(gg, yk)
