Agent skill · design visual · github
penpot-uiux-design
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 desktop applications, (2) Building design systems with components and tokens, (3) Designing dashboards, forms, navigation, or landing pages, (4) Applying accessibility standards and best practices, (5) Following platform guidelines (iOS, Android, Material Design), (6) Reviewing or improving existing Penpot designs for usability. Triggers: "design a UI", "create interface", "build layout", "design dashboard", "create form", "design landing page", "make it accessible", "design system", "component library".
Why this skill is useful
Provides specific MCP tool commands and setup instructions for Penpot that the AI wouldn't reliably generate on its own.
What it needs
Requires npm installed locally. About 7k tokens when loaded. Last updated 2026-08-07. 37,534 stars on the source repository.
What this skill does
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 ---- ------- mcppenpotexecutecode Run JavaScript in Penpot plugin context to create/modify designs mcppenpotexportshape Export shapes as PNG/SVG for visual inspection mcppenpotimportimage Import images (icons, photos, logos) into designs mcppenpotpenpotapiinfo 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 Always check if the MCP server is already available before attempting setup: 1. Try calling a tool first: Attempt mcppenpotpenpotapiinfo - 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) Then in Penpot: 1. Open a design file 2. Go to Plugins → Load plugin from URL 3. Enter: http://localhost:4400/manifest.json 4. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills github/penpot-uiux-design