27 de mayo de 2025 admin

Nos complace enormemente anunciar el lanzamiento de Penpot MCP, una innovadora solución que permite interactuar con Penpot desde nuestra IA favorita (Claude Desktop, Cursor, …). Este nuevo servidor MCP (Model Context Protocol) establece un puente revolucionario entre los modelos de lenguaje de IA, como Claude, y Penpot, la plataforma open-source líder en diseño y prototipado.

¿Qué es MCP (Model Context Protocol) y por qué es tan importante?

MCP, o Model Context Protocol, es un estándar abierto que define cómo los modelos de inteligencia artificial pueden interactuar de forma estructurada y segura con aplicaciones externas, como herramientas de diseño, editores de código o sistemas de gestión de proyectos. MCP permite que los asistentes de IA comprendan el contexto de trabajo y realicen acciones útiles sobre ese contexto, como análisis, generación de código o automatización de tareas.

¿Qué es Penpot?

Penpot es una plataforma open source para diseño de interfaces y prototipado colaborativo, pensada para equipos multidisciplinares que valoran la libertad, la interoperabilidad y la transparencia tecnológica. A diferencia de soluciones propietarias como Figma, Penpot destaca por varias características únicas:

  • Soporte nativo de design tokens: Penpot permite definir, gestionar y exportar design tokens de forma nativa, facilitando la integración directa con sistemas de diseño y flujos de trabajo de desarrollo frontend.
  • Uso de estándares web: Todo en Penpot se basa en tecnologías abiertas como SVG y CSS, lo que garantiza que los archivos sean accesibles, editables y comprensibles fuera de la plataforma. No existen conceptos propietarios como Autolayout, sino que se utilizan los mismos principios que los desarrolladores ya conocen del desarrollo web.
  • Open source!

Demo: generando código a partir de un diseño

Comienza Ahora

Penpot MCP está disponible como un paquete Python y puede instalarse fácilmente mediante pip o uv:

pip install penpot-mcp

# O usando uv (recomendado)
uvx penpot-mcp

Ejemplo de integración con Cursor IDE

Para integrar Penpot MCP en Cursor IDE y permitir que la IA interactúe con tus archivos de Penpot, añade la siguiente configuración en tu archivo de settings de Cursor (por ejemplo, .cursor/settings.json):

{
  "mcpServers": {
    "penpot": {
      "command": "uvx",
      "args": ["penpot-mcp"],
      "env": {
        "PENPOT_API_URL": "https://design.penpot.app/api",
        "PENPOT_USERNAME": "your_penpot_username",
        "PENPOT_PASSWORD": "your_penpot_password"
      }
    }
  }
}
  • command y args indican cómo lanzar el servidor MCP de Penpot usando uvx.
  • En env debes poner la URL de la API de tu instancia de Penpot y tus credenciales.

Referencias

Tags: