skills.rest
BrunoAMSilva
BrunoAMSilvaCOMMUNITY
Explore all skills by this author →
GitHub

penpot-uiux-design

Design accessible user interfaces and component systems in Penpot via MCP tools.

Updated Apr 14, 2026
Search Tags:#accessibility#mcp#ui-ux#design-system#component-library#penpot
One-click install
npx skills add https://github.com/BrunoAMSilva/my-config --skill penpot-uiux-design-brunoamsilva
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: penpot-uiux-design
Source: https://github.com/BrunoAMSilva/my-config/tree/main/coding/skills/penpot-uiux-design
Command: npx skills add https://github.com/BrunoAMSilva/my-config --skill penpot-uiux-design-brunoamsilva

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This guide helps designers and AI agents reduce repetitive manual work in Penpot by automating interface creation, applying consistent design tokens, and validating accessibility so designs are faster to produce and easier to review.

Core Features & Use Cases

  • Automated design operations: Discover shapes, create and position boards, generate components, apply layouts, and export visual assets using MCP tools.
  • Design system and accessibility support: Detect existing tokens, propose default tokens, run contrast and touch-target checks, and follow platform guidelines for iOS, Android, and web.
  • Setup, configuration, and troubleshooting: Step-by-step MCP server installation, VS Code/Claude client configuration, and common connection fixes to keep tools available.
  • Use case: Turn a set of requirements into a mobile dashboard with reusable components, apply accessibility checks, and export assets for handoff.

Quick Start

Inspect the open Penpot file, create a new mobile board with default tokens and components, and export a visual preview for review.

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 UI/UX design and component creation in Penpot?▼

You can automate interface creation in Penpot by using MCP tools to discover shapes, generate components, apply layouts, and export assets. This reduces repetitive manual work and speeds up design production.

Can I check accessibility contrast and touch targets in Penpot?▼

Yes, you can run accessibility checks in Penpot to validate contrast ratios and touch-target sizes. The workflow applies platform-specific guidelines for iOS, Android, and web interfaces.

How do I set up the penpot-mcp server for design automation?▼

Setting up the penpot-mcp server involves installing the server, configuring VS Code or Claude clients, and applying common connection fixes. Step-by-step configuration keeps your automation tools available.

Does this Penpot workflow support mobile and desktop interface design?▼

Yes, the Penpot workflow applies to web, mobile, and desktop interface design. You can create screens, build reusable component libraries, and export visual assets for developer handoff.

What tools do I need to execute JavaScript and import images in Penpot?▼

You need tools that execute JavaScript in the Penpot plugin, import images, export shapes, and inspect document structure. A running penpot-mcp server is also required to enable these operations.

Why is my penpot-mcp connection not working in VS Code?▼

Connection issues with penpot-mcp in VS Code often stem from incorrect client configuration or server installation. Troubleshooting steps and common connection fixes are provided to restore tool availability.

Related Skills

Explore More Design & Creative Skills→
githubgithub
37.6k

penpot-uiux-design

Create Penpot interfaces with MCP tools for design systems and layouts.

Official
Advanced
FoundationForgeFoundationForge

design-handoff

Generate developer handoff documentation from Figma URLs or design descriptions.

Official
Intermediate
ajilantonyajilantony

penpot-uiux-design

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

Community
Intermediate
Khamel83Khamel83

secrets-sync

Synchronize secrets between a central vault and project .env files.

Community
Advanced