Penpot UI/UX Design Guide

Professional UI/UX design creation in Penpot with MCP tools, design systems, and accessibility standards.

- Four MCP tools enable design creation, modification, export, and API access within Penpot's plugin context

- Includes discovery workflow to identify existing design systems, components, and tokens before building new designs

- Covers responsive layouts for mobile (375×812), desktop (1440×900), and platform-specific guidelines (iOS, Android, Material Design)

- Provides default design tokens (spacing scale, typography, colors) and component patterns (buttons, forms, navigation) when no design system exists

- Built-in accessibility validation, visual hierarchy principles, and design review checklist for WCAG compliance and usability

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.

Before Setup: Check If Already Running