skills.rest
lzc0901
lzc0901COMMUNITY
Explore all skills by this author →
GitHub

penpot-uiux-design

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

Updated Aug 23, 2026
Search Tags:#accessibility#ui/ux#mcp#dashboard#design-system#penpot
One-click install
npx skills add https://github.com/lzc0901/vibe_coding_template --skill penpot-uiux-design-lzc0901
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: penpot-uiux-design
Source: https://github.com/lzc0901/vibe_coding_template/tree/main/skills/design-visualization/penpot-uiux-design
Command: npx skills add https://github.com/lzc0901/vibe_coding_template --skill penpot-uiux-design-lzc0901

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill helps designers create professional Penpot UI/UX designs using MCP tools and standardized workflows, reducing time to deliver polished interfaces.

Core Features & Use Cases

  • Design systems & tokens: Build, apply, and document tokens and components across Penpot files.
  • UI/UX design authoring: Create dashboards, forms, navigation, and landing pages that follow accessibility best practices.
  • Collaboration & consistency: Reuse components and patterns to ensure brand consistency across projects.

Quick Start

  1. Open your Penpot file and ensure the Penpot MCP plugin is installed.
  2. Load the MCP server connection in the plugin and confirm “Connected to MCP server”.
  3. Ask your AI assistant to design a UI: e.g., “design a responsive dashboard with a top navigation bar and a left sidebar.”

Frequently Asked Questions about penpot-uiux-design

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

FAQPage Schema
How do I design a Penpot UI/UX dashboard using MCP?▼

You can design Penpot UI/UX with MCP by opening a Penpot file, installing the MCP plugin, connecting the MCP server, and prompting your AI assistant to generate interfaces like dashboards, forms, and navigation.

Can I build a design system with tokens in Penpot using an AI assistant?▼

Yes, you can build a design system in Penpot using MCP tools to create, apply, and document UI tokens and components across files, ensuring brand consistency throughout your projects.

Does the Penpot MCP workflow support accessibility best practices for web and mobile?▼

Yes, the Penpot MCP workflow supports accessibility best practices, enabling you to author UI/UX designs for web, mobile, and desktop contexts that meet standardized accessibility guidelines.

What do I need to connect an AI assistant to Penpot for UI design?▼

To connect an AI assistant to Penpot for UI design, you need a Penpot file with the Penpot MCP plugin installed and an active MCP server connection confirmed within the plugin environment.

Why is my Penpot MCP server not executing code for UI components?▼

Penpot MCP code execution for UI components requires the MCP plugin to be installed and actively connected to the MCP server, ensuring tools like execute_code can function properly within your workflow.

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
beel-collabbeel-collab
1

penpot-uiux-design

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

Community
Advanced
penpotpenpot
33

penpot-component-factory

Automate Penpot component creation with variant matrices and tokenized design systems.

Official
Advanced
mattmacleod16-svgmattmacleod16-svg
1

penpot-uiux-design

Plan and execute Penpot UI/UX design tasks via MCP tools.

Community
Intermediate