penpot-uiux-design
Installation
Summary
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
SKILL.md
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.