Show HN: Penpot MCP Server

AI-Powered Design Workflow Automation
Connect Claude AI and other LLMs to Penpot designs via Model Context Protocol

Penpot MCP is a revolutionary Model Context Protocol (MCP) server that bridges the gap between AI language models and Penpot, the open-source design and prototyping platform. This integration enables AI assistants like Claude (in both Claude Desktop and Cursor IDE) to understand, analyze, and interact with your design files programmatically.

• 🤖 AI-Native Design Analysis: Let Claude AI analyze your UI/UX designs, provide feedback, and suggest improvements
• ⚡ Automated Design Workflows: Streamline repetitive design tasks with AI-powered automation
• 🔍 Intelligent Design Search: Find design components and patterns across your projects using natural language
• 📊 Design System Management: Automatically document and maintain design systems with AI assistance
• 🎨 Cross-Platform Integration: Works with any MCP-compatible AI assistant (Claude Desktop, Cursor IDE, etc.)

Check out our demo video to see Penpot MCP in action:

• MCP Protocol Implementation: Full compliance with Model Context Protocol standards
• Real-time Design Access: Direct integration with Penpot's API for live design data
• Component Analysis: AI-powered analysis of design components and layouts
• Export Automation: Programmatic export of design assets in multiple formats
• Design Validation: Automated design system compliance checking

• Command-line Utilities: Powerful CLI tools for design file analysis and validation
• Python SDK: Comprehensive Python library for custom integrations
• REST API: HTTP endpoints for web application integration
• Extensible Architecture: Plugin system for custom AI workflows

• Claude Desktop & Cursor Integration: Native support for Claude AI assistant in both Claude Desktop and Cursor IDE
• Design Context Sharing: Provide design context to AI models for better responses
• Visual Component Recognition: AI can "see" and understand design components
• Natural Language Queries: Ask questions about your designs in plain English
• IDE Integration: Seamless integration with modern development environments

• Design Review Automation: Get instant AI feedback on accessibility, usability, and design principles
• Component Documentation: Automatically generate documentation for design systems
• Design Consistency Checks: Ensure brand guidelines compliance across projects
• Asset Organization: AI-powered tagging and categorization of design components

• Design-to-Code Workflows: Bridge the gap between design and development with AI assistance
• API Integration: Programmatic access to design data for custom tools and workflows
• Automated Testing: Generate visual regression tests from design specifications
• Design System Sync: Keep design tokens and code components in sync

• Design Analytics: Track design system adoption and component usage
• Collaboration Enhancement: AI-powered design reviews and feedback collection
• Workflow Optimization: Automate repetitive design operations and approvals
• Cross-tool Integration: Connect Penpot with other tools in your design workflow

• Python 3.12+ (Latest Python recommended for optimal performance)
• Penpot Account (Sign up free)
• Claude Desktop or Cursor IDE (Optional, for AI integration)

• Python 3.12+
• Penpot account credentials

Create a .env file based on env.example with your Penpot credentials:

To debug the MCP server, you can:

1. Enable debug mode in your .env file by setting DEBUG=true
2. Use the Penpot API CLI for testing API operations:

The package includes utility command-line tools:

• server://info - Server status and information
• penpot://schema - Penpot API schema as JSON
• penpot://tree-schema - Penpot object tree schema as JSON
• rendered-component://{component_id} - Rendered component images
• penpot://cached-files - List of cached Penpot files

• list_projects - List all Penpot projects
• get_project_files - Get files for a specific project
• get_file - Retrieve a Penpot file by its ID and cache it
• export_object - Export a Penpot object as an image
• get_object_tree - Get the object tree structure for a Penpot object
• search_object - Search for objects within a Penpot file by name

The Penpot MCP server can be integrated with AI assistants using the Model Context Protocol. It supports both Claude Desktop and Cursor IDE for seamless design workflow automation.

For detailed Claude Desktop setup instructions, see CLAUDE_INTEGRATION.md.

Add the following configuration to your Claude Desktop config file (~/Library/Application Support/Claude/claude_desktop_config.json on macOS or %APPDATA%\Claude\claude_desktop_config.json on Windows):

Cursor IDE supports MCP servers through its AI integration features. To configure Penpot MCP with Cursor:

1. Install the MCP server (if not already installed):

2. Configure Cursor settings by adding the MCP server to your Cursor configuration. Open Cursor settings and add:

   { "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" } } } }

3. Alternative: Use environment variables by creating a .env file in your project root:

   PENPOT_API_URL=https://design.penpot.app/api PENPOT_USERNAME=your_penpot_username PENPOT_PASSWORD=your_penpot_password

4. Start the MCP server in your project:

   # In your project directory penpot-mcp

5. Use in Cursor: Once configured, you can interact with your Penpot designs directly in Cursor by asking questions like:

   • "Show me all projects in my Penpot account"
   • "Analyze the design components in project X"
   • "Export the main button component as an image"
   • "What design patterns are used in this file?"

Both Claude Desktop and Cursor integration provide:

• Direct access to Penpot projects and files
• Visual component analysis with AI-powered insights
• Design export capabilities for assets and components
• Natural language queries about your design files
• Real-time design feedback and suggestions
• Design system documentation generation

The project uses pytest for testing:

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Please make sure your code follows the project's coding standards and includes appropriate tests.

This project is licensed under the MIT License - see the LICENSE file for details.

• Penpot - The open-source design and prototyping platform
• Model Context Protocol - The standardized protocol for AI model context