penpot-uiux-design
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
More from github/awesome-copilot
git-commit
Execute git commit with conventional commit message analysis, intelligent staging, and message generation. Use when user asks to commit changes, create a git commit, or mentions "/commit". Supports: (1) Auto-detecting type and scope from changes, (2) Generating conventional commit messages from diff, (3) Interactive commit with optional type/scope/description overrides, (4) Intelligent file staging for logical grouping
30.2Kgh-cli
GitHub CLI (gh) comprehensive reference for repositories, issues, pull requests, Actions, projects, releases, gists, codespaces, organizations, extensions, and all GitHub operations from the command line.
21.2Kprd
Generate high-quality Product Requirements Documents (PRDs) for software systems and AI-powered features. Includes executive summaries, user stories, technical specifications, and risk analysis.
17.4Kdocumentation-writer
Diátaxis Documentation Expert. An expert technical writer specializing in creating high-quality software documentation, guided by the principles and structure of the Diátaxis technical documentation authoring framework.
17.4Kexcalidraw-diagram-generator
Generate Excalidraw diagrams from natural language descriptions. Use when asked to "create a diagram", "make a flowchart", "visualize a process", "draw a system architecture", "create a mind map", or "generate an Excalidraw file". Supports flowcharts, relationship diagrams, mind maps, and system architecture diagrams. Outputs .excalidraw JSON files that can be opened directly in Excalidraw.
16.4Krefactor
Surgical code refactoring to improve maintainability without changing behavior. Covers extracting functions, renaming variables, breaking down god functions, improving type safety, eliminating code smells, and applying design patterns. Less drastic than repo-rebuilder; use for gradual improvements.
16.1K