penpot-uiux-design — Skills

What it does

Use their specified colors, spacing, typography

Match their existing component patterns

Follow their naming conventions

Use the default tokens below as a starting point

Offer to help establish consistent patterns

Reference specs in component-patterns.md

width/height are READ-ONLY → use shape.resize(w, h)

Professional UI/UX design creation in Penpot with MCP tools, design systems, and accessibility standards.

Source

Repository: https://github.com/github/awesome-copilot

penpot-uiux-design FAQ

What does the penpot-uiux-design skill do?

Comprehensive guide for creating professional UI/UX designs in Penpot using MCP tools. Use this skill when: (1) Creating new UI/UX designs for web, mobile, or desktop applications, (2) Building design systems with components and tokens, (3) Designing dashboards, forms, navigation, or landing pages, (4) Applying accessibility standards and best practices, (5) Following platform guidelines (iOS, Android, Material Design), (6) Reviewing or improving existing Penpot designs for usability. Triggers: "design a UI", "create interface", "build layout", "design dashboard", "create form", "design landing page", "make it accessible", "design system", "component library". Use their specified colors, spacing, typography Match their existing component patterns

What does penpot-uiux-design require?

The Penpot MCP tools require the penpot/penpot-mcp server running locally. For detailed installation and troubleshooting, see setup-troubleshooting.md. | Token | Value | Usage | 1. Start with content: Real content reveals layout needs 8. Provide feedback: Every action needs a response

How do I install penpot-uiux-design?

Run: npx -y skills add https://github.com/github/awesome-copilot --skill penpot-uiux-design --agent claude-code — the source lives at github.com/github/awesome-copilot.

Maintain penpot-uiux-design?

Let people know it's listed here — add the badge (live metrics, light/dark aware) or a plain link to your README or docs.

[![penpot-uiux-design on getagentictools](https://getagentictools.com/badge/skills/github-awesome-copilot-penpot-uiux-design.svg)](https://getagentictools.com/skills/github-awesome-copilot-penpot-uiux-design?ref=badge)

npx agentictools info skills/github-awesome-copilot-penpot-uiux-design

The second line is the CLI lookup for this page — handy in READMEs and docs.