skills.rest
serotoninboi
serotoninboiCOMMUNITY
Explore all skills by this author →
GitHub

penpot-uiux-design

Create and manage UI/UX designs in Penpot via its MCP server.

Updated Aug 23, 2026
Search Tags:#accessibility#design system#prototyping#component design#uiux#penpot
One-click install
npx skills add https://github.com/serotoninboi/claudine-ai-v3.1 --skill penpot-uiux-design-serotoninboi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: penpot-uiux-design
Source: https://github.com/serotoninboi/claudine-ai-v3.1/tree/main/.kilocode/skills/penpot-uiux-design
Command: npx skills add https://github.com/serotoninboi/claudine-ai-v3.1 --skill penpot-uiux-design-serotoninboi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive guide and tools for creating professional, user-centered UI/UX designs within the Penpot design tool, leveraging its MCP server for advanced interactions.

Core Features & Use Cases

  • Design Creation & Modification: Build new interfaces, design systems, and refine existing Penpot files using JavaScript execution.
  • Asset Management: Import images and export design elements for review or integration.
  • Workflow Guidance: Follow best practices for layout, accessibility, and component design.
  • Use Case: You need to design a new mobile app dashboard. This Skill will guide you through setting up Penpot, creating the necessary boards, applying design tokens, and building interactive components according to platform guidelines.

Quick Start

Use the penpot-uiux-design skill to create a new mobile screen design for a user profile page.

Frequently Asked Questions about penpot-uiux-design

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

FAQPage Schema
How do I create professional UI/UX designs in Penpot?▼

To create professional UI/UX designs in Penpot, this Skill facilitates building interfaces, design systems, and interactive components using JavaScript execution through its MCP server. It guides the entire design lifecycle from concept to accessibility compliance.

Do I need the Penpot MCP server to manage component design?▼

Yes, managing component design requires a local setup of the Penpot MCP server integrated with VS Code or Claude Desktop. This local configuration enables the tool execution necessary for creating and modifying professional UI/UX files.

Can I build a mobile app dashboard and apply design tokens in Penpot?▼

Yes, you can build a mobile app dashboard by setting up Penpot boards, applying design tokens, and building interactive components. The Skill provides workflow guidance and best practices for layout and platform-specific component design.

What is the best way to ensure accessibility compliance in Penpot designs?▼

The best way to ensure accessibility compliance is to follow the workflow guidance and best practices included in this Skill. It supports detailed component specification and accessibility checks throughout the entire UI/UX design lifecycle.

Does this Skill support importing images and exporting design elements?▼

Yes, this Skill supports asset management by allowing you to import images and export design elements. You can export these elements for review or integration into your broader user-centered UI/UX workflow.

What are the limitations of using JavaScript execution for Penpot design modification?▼

A key limitation is the strict dependency on a local MCP server setup within VS Code or Claude Desktop for JavaScript execution. Without this specific local environment integration, the tools cannot execute to modify or build Penpot files.

Related Skills

Explore More Design & Creative Skills→
alexandereiseghohialexandereiseghohi

penpot-uiux-design

Create and manage UI/UX designs in Penpot using MCP tools.

Community
Advanced
Shaarav4795Shaarav4795

penpot-uiux-design

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

Community
Intermediate
1479089714790897
7

kwp-design-design-system

Audit component libraries for naming inconsistencies and missing documentation.

Community
Intermediate
tylerbjones1504-hashtylerbjones1504-hash

ui-ux-pro-max

Generate design systems and searchable UI/UX recommendations for web and mobile apps.

Community
Advanced