penpot-uiux-design

Create UI/UX designs and design systems in Penpot via MCP tools.

Updated Mar 25, 2026

Search Tags:#workflow #accessibility #mcp #design-system #uiux #penpot

Ready to run

npx skills add https://github.com/Shaarav4795/ScholarFlow --skill penpot-uiux-design-shaarav4795

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: penpot-uiux-design
Source: https://github.com/Shaarav4795/ScholarFlow/tree/main/.agents/skills/penpot-uiux-design
Command: npx skills add https://github.com/Shaarav4795/ScholarFlow --skill penpot-uiux-design-shaarav4795

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Penpot UI/UX design with MCP tooling enables teams to plan, design, and iterate UI/UX in Penpot, aligning with accessibility and platform guidelines while streamlining collaboration.

Core Features & Use Cases

Penpot MCP integration: Run MCP tools to generate/update UI artifacts directly in Penpot.
Use Case: Build design systems with components and tokens; design dashboards, forms, navigation, or landing pages; audit accessibility and platform guidelines.

Quick Start

Open Penpot, connect to the MCP server, and begin designing UI/UX using the Penpot MCP tools.

Frequently Asked Questions about penpot-uiux-design

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

FAQPage Schema

How do I use MCP tools to design UI/UX in Penpot?▼

Penpot UI/UX design with MCP tooling streamlines creating and updating interface artifacts directly. You connect to the MCP server and utilize specific tools like execute_code and export_shape to generate designs, build systems, and audit accessibility.

Can I build a design system with components and tokens in Penpot?▼

Yes, building a design system with components and tokens in Penpot is a core use case. The MCP integration allows you to generate and update these UI artifacts directly, streamlining the creation of scalable and consistent web and mobile interfaces.

Does this Penpot MCP integration support accessibility auditing?▼

Yes, accessibility auditing is supported across web, mobile, and desktop projects. The skill includes references for accessibility guidelines and utilizes MCP tooling to align your UI/UX designs with required platform standards during the creation process.

What do I need to connect to the Penpot MCP server and start designing?▼

You need to open Penpot and establish a connection to the MCP server. Once connected, you can begin planning and iterating on UI/UX designs using the available MCP tools and provided setup references.

Is there a way to export shapes directly from Penpot using MCP?▼

Yes, you can export shapes directly using the mcp__penpot__export_shape tool. This function allows you to extract UI artifacts from your Penpot projects as part of the MCP-driven design workflow.

What types of projects can I design with Penpot MCP tools?▼

You can design and iterate on web, mobile, and desktop projects. The tooling supports creating dashboards, forms, navigation, and landing pages while auditing accessibility and aligning with platform-specific guidelines.