penpot-uiux-design

Automate Penpot UI/UX design tasks for layouts and usability reviews.

1|Updated May 4, 2026
One-click install
npx skills add https://github.com/beel-collab/presets.dev --skill penpot-uiux-design-beel-collab
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: penpot-uiux-design
Source: https://github.com/beel-collab/presets.dev/tree/main/skills/penpot-uiux-design
Command: npx skills add https://github.com/beel-collab/presets.dev --skill penpot-uiux-design-beel-collab

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Designers often struggle to rapidly prototype, refine, and maintain UI/UX designs across Penpot while coordinating tokens, design systems, and accessibility compliance.

Core Features & Use Cases

  • MCP-guided design: Use Penpot MCP tools to create, export, and adjust shapes, components, and layouts.
  • Design systems & tokens: Build and maintain system-wide components and tokens for consistency.
  • Accessibility and compliance: Ensure contrast, targets, and semantic structure across platforms.
  • Real-world use: Iterate dashboards, forms, landing pages for web/mobile/Desktop.

Quick Start

To begin, ensure the Penpot MCP server is running, install the Penpot MCP plugin, connect to the server, and run a simple UI task like creating a new component and exporting an SVG.

Frequently Asked Questions about penpot-uiux-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I automate Penpot UI/UX design tasks without external tooling?▼

You can automate Penpot UI/UX design tasks by leveraging Penpot MCP server tools like mcp__penpot__execute_code and mcp__penpot__export_shape to generate, modify, and export design artifacts directly.

Can I build and maintain design systems and tokens in Penpot using MCP?▼

Yes, you can build and maintain system-wide components and tokens in Penpot for layout consistency by applying MCP-guided automation to create, adjust, and export shapes.

What is the best way to run an accessibility review for a Penpot dashboard?▼

The best way to run an accessibility review for a Penpot dashboard is using Penpot MCP automation to check contrast, targets, and semantic structure across web, mobile, and desktop platforms.

Do I need the Penpot MCP plugin running to create and export shapes?▼

Yes, you need the Penpot MCP server running and the Penpot MCP plugin installed and connected to execute code and export shapes for automated UI/UX design tasks.

How does MCP-guided design handle rapid prototyping for web and mobile interfaces?▼

MCP-guided design handles rapid prototyping for web and mobile by automating layout creation and usability reviews, allowing you to iterate dashboards, forms, and landing pages quickly.