penpot-uiux-design

# Penpot UI/UX Design Guide Create professional, user-centered designs in Penpot using the `penpot/penpot-mcp` MCP server and proven UI/UX principles. ## Available MCP Tools | Tool | Purpose | | ---- | ------- | | `mcp__penpot__execute_code` | Run JavaScript in Penpot plugin context to create/modify designs | | `mcp__penpot__export_shape` | Export shapes as PNG/SVG for visual inspection | | `mcp__penpot__import_image` | Import images (icons, photos, logos) into designs | | `mcp__penpot__penpot_api_info` | Retrieve Penpot API documentation | ## MCP Server Setup The Penpot MCP tools require the `penpot/penpot-mcp` server running locally. For detailed installation and troubleshooting, see [setup-troubleshooting.md](references/setup-troubleshooting.md). ### Before Setup: Check If Already Running **Always check if the MCP server is already available before attempting setup:** 1. **Try calling a tool first**: Attempt `mcp__penpot__penpot_api_info` - if it succeeds, the server is running and connected. No setup needed. 2. **If the tool fails**, ask the user: > "The Penpot MCP server doesn't appear to be connected. Is the server already installed and running? If so, I can help troubleshoot. If not, I can guide you through the setup." 3. **Only proceed with setup instructions if the user confirms the server is not installed.** ### Quick Start (Only If Not Installed) ```bash # Clone and install git clone https://github.com/penpot/penpot-mcp.git cd penpot-mcp npm install ...