Penpot Uiux Design
Create and refine web, mobile, or desktop UI in Penpot via penpot-mcp tools, design systems, and accessibility patterns.
Overview
penpot-uiux-design is an agent skill most often used in Validate (also Build → frontend) that creates professional UI/UX in Penpot using penpot-mcp tools and accessibility-aware patterns.
Install
npx skills add https://github.com/github/awesome-copilot --skill penpot-uiux-designWhat is this skill?
- Guides Penpot work through penpot/penpot-mcp: execute_code, export_shape, import_image, penpot_api_info
- Covers design systems with components and tokens plus platform guides (iOS, Android, Material)
- Triggers on design a UI, dashboard, form, landing page, design system, and accessibility requests
- Includes setup-troubleshooting reference for local MCP server installation
- Supports reviewing and improving existing Penpot files for usability and a11y
- 4 Penpot MCP tools documented in the skill table (execute_code, export_shape, import_image, penpot_api_info)
Adoption & trust: 10.7k installs on skills.sh; 34.6k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You need production-minded UI layouts and design systems in Penpot but lack a consistent MCP-driven workflow for agents.
Who is it for?
Indie builders pairing Penpot with Claude/Cursor who want MCP-backed design creation and usability or a11y review in one skill.
Skip if: Figma-only workflows, purely code-first UI with no design file, or environments where penpot-mcp cannot run locally.
When should I use this skill?
Creating UI/UX in Penpot, design systems, dashboards, forms, landing pages, accessibility, platform guidelines, or reviewing Penpot designs—triggers include design a UI, create interface, build layout, design dashboard,
What do I get? / Deliverables
You get structured Penpot designs—exportable for review—with components, tokens, and platform-appropriate UX guidance.
- Penpot frames and components
- PNG or SVG exports for review
- Design system tokens and component structure
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Interface exploration and clickable structure usually happen in Validate before production frontend implementation. Prototype is where dashboards, forms, landing layouts, and component libraries are drafted and reviewed for usability.
Where it fits
Draft a SaaS dashboard and navigation before committing to React components.
Compose a marketing landing layout with accessible form patterns for smoke-test signups.
Extend a component library and export SVG icons for the codebase.
Export shapes and run a usability pass on an existing Penpot file before launch.
How it compares
Design-and-MCP guide for Penpot, not a generic markdown wireframe template or a deployment skill.
Common Questions / FAQ
Who is penpot-uiux-design for?
Solo builders and designers shipping web or mobile products who use Penpot and want agents to call penpot-mcp tools with UX and accessibility guardrails.
When should I use penpot-uiux-design?
Use it in Validate → prototype when designing dashboards, forms, or landing pages; in Build → frontend when extending a design system; whenever triggers include design a UI, create interface, or design system.
Is penpot-uiux-design safe to install?
It expects a local MCP server and Penpot plugin execution; review the Security Audits panel on this page and only connect MCP to Penpot instances you control.
SKILL.md
READMESKILL.md - Penpot Uiux Design
# 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. 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) ```bash # Clone and install git clone https://github.com/penpot/penpot-mcp.git cd penpot-mcp npm install # Build and start servers npm run bootstrap ``` Then in Penpot: 1. Open a design file 2. Go to **Plugins** → **Load plugin from URL** 3. Enter: `http://localhost:4400/manifest.json` 4. Click **"Connect to MCP server"** in the plugin UI ### VS Code Configuration Add to `settings.json`: ```json { "mcp": { "servers": { "penpot": { "url": "http://localhost:4401/sse" } } } } ``` ### Troubleshooting (If Server Is Installed But Not Working) | Issue | Solution | | ----- | -------- | | Plugin won't connect | Check servers are running (`npm run start:all` in penpot-mcp dir) | | Browser blocks localhost | Allow local network access prompt, or disable Brave Shield, or try Firefox | | Tools not appearing in client | Restart VS Code/Claude completely after config changes | | Tool execution fails/times out | Ensure Penpot plugin UI is open and shows "Connected" | | "WebSocket connection failed" | Check firewall allows ports 4400, 4401, 4402 | ## Quick Reference | Task | Reference File | | ---- | -------------- | | MCP server installation & troubleshooting | [setup-troubleshooting.md](references/setup-troubleshooting.md) | | Component specs (buttons, forms, nav) | [component-patterns.md](references/component-patterns.md) | | Accessibility (contrast, touch targets) | [accessibility.md](references/accessibility.md) | | Screen sizes & platform specs | [platform-guidelines.md](references/platform-guidelines.md) | ## Core Design Principles ### The Golden Rules 1. **Clarity over cleverness**: Every element must have a purpose 2. **Consistency builds trust**: Reuse patterns, colors, and components 3. **User goals first**: Design for tasks, not features 4. **Accessibility is not optional**: Design for everyone 5. **Test with real use