Servidor Penpot MCP 🎨🤖
🚀 ¿Qué es Penpot MCP?
Penpot MCP es un revolucionario servidor de Protocolo de Contexto de Modelo (MCP) que conecta los modelos de lenguaje de IA con Penpot , la plataforma de diseño y prototipado de código abierto. Esta integración permite que asistentes de IA como Claude (tanto en Claude Desktop como en Cursor IDE) comprendan, analicen e interactúen con sus archivos de diseño mediante programación.
🎯 Beneficios clave
- 🤖 Análisis de diseño nativo de IA : deja que Claude AI analice tus diseños de UI/UX, te brinde comentarios y sugiera mejoras
- ⚡ Flujos de trabajo de diseño automatizados : agilice las tareas de diseño repetitivas con automatización impulsada por IA
- 🔍 Búsqueda de diseño inteligente : encuentre componentes y patrones de diseño en sus proyectos utilizando lenguaje natural
- 📊 Gestión del sistema de diseño : documente y mantenga automáticamente los sistemas de diseño con asistencia de IA
- 🎨 Integración multiplataforma : funciona con cualquier asistente de inteligencia artificial compatible con MCP (Claude Desktop, Cursor IDE, etc.)
🎥 Vídeo de demostración
Vea nuestro video de demostración para ver Penpot MCP en acción:
✨ Características
🔌 Capacidades principales
- Implementación del protocolo MCP : Cumplimiento total de los estándares del Protocolo de Contexto Modelo
- Acceso al diseño en tiempo real : integración directa con la API de Penpot para obtener datos de diseño en vivo
- Análisis de componentes : análisis de componentes y diseños impulsado por IA
- Automatización de la exportación : exportación programática de recursos de diseño en múltiples formatos
- Validación del diseño : verificación automatizada del cumplimiento del sistema de diseño
🛠️ Herramientas para desarrolladores
- Utilidades de línea de comandos : potentes herramientas CLI para el análisis y validación de archivos de diseño
- SDK de Python : biblioteca completa de Python para integraciones personalizadas
- API REST : puntos finales HTTP para la integración de aplicaciones web
- Arquitectura extensible : sistema de complementos para flujos de trabajo de IA personalizados
🎨 Funciones de integración de IA
- Integración de Claude Desktop y Cursor : Soporte nativo para el asistente de IA de Claude tanto en Claude Desktop como en Cursor IDE
- Intercambio de contexto de diseño : proporcione contexto de diseño a los modelos de IA para obtener mejores respuestas
- Reconocimiento visual de componentes : la IA puede "ver" y comprender los componentes del diseño
- Consultas en lenguaje natural : haga preguntas sobre sus diseños en un lenguaje sencillo
- Integración IDE : Integración perfecta con entornos de desarrollo modernos
💡 Casos de uso
Para diseñadores
- Automatización de revisión de diseño : obtenga comentarios instantáneos de IA sobre accesibilidad, usabilidad y principios de diseño
- Documentación de componentes : genere automáticamente documentación para sistemas de diseño
- Comprobaciones de coherencia del diseño : garantizar el cumplimiento de las directrices de la marca en todos los proyectos
- Organización de activos : etiquetado y categorización de componentes de diseño impulsados por IA
Para desarrolladores
- Flujos de trabajo de diseño a código : cierre la brecha entre el diseño y el desarrollo con asistencia de IA
- Integración de API : acceso programático a datos de diseño para herramientas y flujos de trabajo personalizados
- Pruebas automatizadas : genere pruebas de regresión visual a partir de especificaciones de diseño
- Sincronización del sistema de diseño : mantenga sincronizados los tokens de diseño y los componentes del código
Para equipos de productos
- Análisis de diseño : Realice un seguimiento de la adopción del sistema de diseño y el uso de los componentes
- Mejora de la colaboración : revisiones de diseño impulsadas por IA y recopilación de comentarios
- Optimización del flujo de trabajo : automatice las operaciones de diseño y aprobaciones repetitivas
- Integración entre herramientas : conecte Penpot con otras herramientas en su flujo de trabajo de diseño
🚀 Inicio rápido
Prerrequisitos
- Python 3.12+ (se recomienda la última versión de Python para un rendimiento óptimo)
- Cuenta Penpot ( Regístrate gratis )
- Claude Desktop o Cursor IDE (opcional, para integración con IA)
Instalación
Prerrequisitos
- Python 3.12+
- Credenciales de la cuenta de Penpot
Instalación
Opción 1: Instalar desde PyPI
Opción 2: Usar uv (recomendado para el desarrollo moderno en Python)
# Install directly with uvx (when published to PyPI)
uvx penpot-mcp
# For local development, use uvx with local path
uvx --from . penpot-mcp
# Or install in a project with uv
uv add penpot-mcp
Opción 3: Instalar desde la fuente
# Clone the repository
git clone https://github.com/montevive/penpot-mcp.git
cd penpot-mcp
# Using uv (recommended)
uv sync
uv run penpot-mcp
# Or using traditional pip
python -m venv .venv
source .venv/bin/activate # On Windows: .venv\Scripts\activate
pip install -e .
Configuración
Cree un archivo .env basado en env.example con sus credenciales de Penpot:
PENPOT_API_URL=https://design.penpot.app/api
PENPOT_USERNAME=your_penpot_username
PENPOT_PASSWORD=your_penpot_password
PORT=5000
DEBUG=true
Uso
Ejecución del servidor MCP
# Using uvx (when published to PyPI)
uvx penpot-mcp
# Using uvx for local development
uvx --from . penpot-mcp
# Using uv in a project (recommended for local development)
uv run penpot-mcp
# Using the entry point (if installed)
penpot-mcp
# Or using the module directly
python -m penpot_mcp.server.mcp_server
Depuración del servidor MCP
Para depurar el servidor MCP, puede:
- Habilite el modo de depuración en su archivo
.env configurando DEBUG=true - Utilice la CLI de la API de Penpot para probar las operaciones de la API:
# Test API connection with debug output
python -m penpot_mcp.api.penpot_api --debug list-projects
# Get details for a specific project
python -m penpot_mcp.api.penpot_api --debug get-project --id YOUR_PROJECT_ID
# List files in a project
python -m penpot_mcp.api.penpot_api --debug list-files --project-id YOUR_PROJECT_ID
# Get file details
python -m penpot_mcp.api.penpot_api --debug get-file --file-id YOUR_FILE_ID
Herramientas de línea de comandos
El paquete incluye herramientas de línea de comandos de utilidad:
# Generate a tree visualization of a Penpot file
penpot-tree path/to/penpot_file.json
# Validate a Penpot file against the schema
penpot-validate path/to/penpot_file.json
Monitoreo y pruebas de MCP
Monitor de CLI de MCP
# Start your MCP server in one terminal
python -m penpot_mcp.server.mcp_server
# In another terminal, use mcp-cli to monitor and interact with your server
python -m mcp.cli monitor python -m penpot_mcp.server.mcp_server
# Or connect to an already running server on a specific port
python -m mcp.cli monitor --port 5000
Inspector de MCP
# Start your MCP server in one terminal
python -m penpot_mcp.server.mcp_server
# In another terminal, run the MCP Inspector (requires Node.js)
npx @modelcontextprotocol/inspector
Uso del cliente
# Run the example client
penpot-client
Recursos y herramientas de MCP
Recursos
server://info - Estado e información del servidorpenpot://schema - Esquema de la API de Penpot como JSONpenpot://tree-schema - Esquema de árbol de objetos Penpot como JSONrendered-component://{component_id} - Imágenes de componentes renderizadospenpot://cached-files - Lista de archivos Penpot en caché
Herramientas
list_projects - Lista todos los proyectos de Penpotget_project_files - Obtener archivos para un proyecto específicoget_file - Recupera un archivo Penpot por su ID y lo almacena en cachéexport_object - Exportar un objeto Penpot como una imagenget_object_tree - Obtiene la estructura del árbol de objetos para un objeto Penpotsearch_object - Busca objetos dentro de un archivo Penpot por nombre
Integración de IA
El servidor Penpot MCP se integra con asistentes de IA mediante el Protocolo de Contexto de Modelo. Es compatible con Claude Desktop y Cursor IDE para una automatización fluida del flujo de trabajo de diseño.
Integración de escritorio de Claude
Para obtener instrucciones detalladas de configuración de Claude Desktop, consulte CLAUDE_INTEGRATION.md .
Agregue la siguiente configuración a su archivo de configuración de Claude Desktop ( ~/Library/Application Support/Claude/claude_desktop_config.json en macOS o %APPDATA%\Claude\claude_desktop_config.json en Windows):
{
"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"
}
}
}
}
Integración de Cursor IDE
Cursor IDE es compatible con servidores MCP gracias a sus funciones de integración con IA. Para configurar Penpot MCP con Cursor:
- Instalar el servidor MCP (si aún no está instalado):
- Configure los ajustes del cursor añadiendo el servidor MCP a la configuración del cursor. Abra la configuración del cursor y añada:
{
"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"
}
}
}
}
- Alternativa: utilice variables de entorno creando un archivo
.env en la raíz de su proyecto:PENPOT_API_URL=https://design.penpot.app/api
PENPOT_USERNAME=your_penpot_username
PENPOT_PASSWORD=your_penpot_password
- Inicie el servidor MCP en su proyecto:
# In your project directory
penpot-mcp
- Uso en Cursor : Una vez configurado, puede interactuar con sus diseños de Penpot directamente en Cursor haciendo preguntas como:
- "Muéstrame todos los proyectos en mi cuenta de Penpot"
- Analizar los componentes de diseño del proyecto X
- "Exportar el componente del botón principal como imagen"
- "¿Qué patrones de diseño se utilizan en este archivo?"
Características clave de integración
Tanto la integración de Claude Desktop como de Cursor proporcionan:
- Acceso directo a proyectos y archivos de Penpot
- Análisis de componentes visuales con información basada en IA
- Diseñar capacidades de exportación para activos y componentes
- Consultas en lenguaje natural sobre sus archivos de diseño
- Comentarios y sugerencias de diseño en tiempo real
- Generación de documentación del sistema de diseño
Estructura del paquete
penpot_mcp/
├── api/ # Penpot API client
├── server/ # MCP server implementation
│ ├── mcp_server.py # Main MCP server
│ └── client.py # Client implementation
├── tools/ # Utility tools
│ ├── cli/ # Command-line interfaces
│ └── penpot_tree.py # Penpot object tree visualization
├── resources/ # Resource files and schemas
└── utils/ # Helper utilities
Desarrollo
Pruebas
El proyecto utiliza pytest para realizar pruebas:
# Using uv (recommended)
uv sync --extra dev
uv run pytest
# Run with coverage
uv run pytest --cov=penpot_mcp tests/
# Using traditional pip
pip install -e ".[dev]"
pytest
pytest --cov=penpot_mcp tests/
Pelusa
# Using uv (recommended)
uv sync --extra dev
# Set up pre-commit hooks
uv run pre-commit install
# Run linting
uv run python lint.py
# Auto-fix linting issues
uv run python lint.py --autofix
# Using traditional pip
pip install -r requirements-dev.txt
pre-commit install
./lint.py
./lint.py --autofix
Contribuyendo
¡Agradecemos sus contribuciones! No dude en enviar una solicitud de incorporación de cambios.
- Bifurcar el repositorio
- Crea tu rama de funciones (
git checkout -b feature/amazing-feature ) - Confirme sus cambios (
git commit -m 'Add some amazing feature' ) - Empujar a la rama (
git push origin feature/amazing-feature ) - Abrir una solicitud de extracción
Asegúrese de que su código siga los estándares de codificación del proyecto e incluya pruebas adecuadas.
Licencia
Este proyecto está licenciado bajo la licencia MIT: consulte el archivo de LICENCIA para obtener más detalles.
Expresiones de gratitud