back
loading skill details...
Comprehensive guide for creating professional UI/UX designs in Penpot using MCP tools. Use this skill when: (1) Creating new UI/UX designs for web, mobile, or…
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
don't have the plugin yet? install it then click "run inline in claude" again.