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 landin
Profile →npx skills add github/awesome-copilot --skill penpot-uiux-design --agent copilot
Same command for any agent — swap --agent for claude-code, codex, cursor.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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
- Available MCP Tools
- MCP Server Setup
- Before Setup: Check If Already Running
- Quick Start (Only If Not Installed)
- VS Code Configuration
- Troubleshooting (If Server Is Installed But Not Working)
- Quick Reference
- Core Design Principles
- The Golden Rules
- Visual Hierarchy (Priority Order)
- Design Workflow
- Design System Handling
- Key Penpot API Gotchas
- Positioning New Boards
Clone and install git clone https://github.com/penpot/penpot-mcp.git cd penpot-mcp npm install Build and start servers npm run bootstrap
What does the penpot-uiux-design skill do?
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 landin
How do I install it?
Run `npx skills add github/awesome-copilot --skill penpot-uiux-design --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From github/awesome-copilot, a repository with 37,432 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.