Does it support mobile-first design?

Absolutely. It includes specific platform guidelines and predefined screen sizes for both iOS and Android to ensure mobile-friendly interfaces.

How does it handle accessibility?

It follows a strict checklist including WCAG AA contrast ratios, minimum 44x44px touch targets, and proper heading hierarchies to ensure inclusive design.

What is required to use the Penpot UI/UX Design skill?

You must have the penpot/penpot-mcp server installed and running locally, and the Penpot plugin must be connected to the MCP server manifest.

Can this skill work with my existing design systems?

Yes, the skill is designed to first discover existing colors, typography, and components in your Penpot file to ensure all new designs remain brand-consistent.

Can I generate CSS from my designs?

Yes, the skill can use the Penpot API to extract CSS styles and tokens directly from your visual elements for use in frontend development.

Penpot UI/UX Design

Name: Penpot UI/UX Design
Author: rodolfolermacontreras

byrodolfolermacontreras

•

Herramientas de Diseño

Designs professional UI/UX interfaces and component libraries directly in Penpot using automated MCP tools.

This skill transforms Claude into a specialized design assistant for Penpot, enabling the programmatic creation and management of user interfaces. It leverages the Penpot MCP server to build responsive layouts, implement design systems, and ensure accessibility compliance. Whether you are generating a high-fidelity dashboard from scratch, auditing an existing layout for contrast issues, or maintaining a shared component library, this skill provides the domain-specific logic and API integration needed to streamline your design-to-code workflow.

Características Principales

01Responsive layout management using Flexbox-based containers

02Visual validation through shape exports (PNG/SVG) and structure analysis

03Programmatic design creation using Penpot's JavaScript plugin API

041 GitHub stars

05Automated discovery and application of design tokens and components

06Built-in accessibility auditing for WCAG contrast and touch targets

Casos de Uso

01Generating responsive web and mobile application layouts from text descriptions

02Building and scaling design systems with consistent typography, colors, and spacing

03Improving existing designs by applying platform guidelines like Material Design or iOS

Características Principales

01Responsive layout management using Flexbox-based containers

02Visual validation through shape exports (PNG/SVG) and structure analysis

03Programmatic design creation using Penpot's JavaScript plugin API

041 GitHub stars

05Automated discovery and application of design tokens and components

06Built-in accessibility auditing for WCAG contrast and touch targets

Casos de Uso

01Generating responsive web and mobile application layouts from text descriptions

02Building and scaling design systems with consistent typography, colors, and spacing

03Improving existing designs by applying platform guidelines like Material Design or iOS