Claude MarketplacesSubmit
github avatar

Penpot Uiux Design

github/awesome-copilotOfficial

Penpot UI/UX Design enables designers and developers to create professional, accessible user interfaces in Penpot by providing MCP tools for automating design workflows, managing design systems, and applying UI/UX best practices. It solves the problem of manually building complex layouts, components, and design systems by offering programmatic access to Penpot's design capabilities through JavaScript execution, asset management, and API integration. The skill is designed for anyone creating web, mobile, or desktop application interfaces who wants to streamline design processes and maintain consistency across projects.

skills.sh installs
12.9K
GitHub stars
41K
last updated
Aug 21, 2026
View on GitHub

Install

$ npx -y skills add github/awesome-copilot --skill penpot-uiux-design --agent claude-code

Installs into .claude/skills of the current project.

Files

Penpot UI/UX Design Guide

Create professional, user-centered designs in Penpot using the penpot/penpot-mcp MCP server and proven UI/UX principles.

Available MCP Tools

ToolPurpose
mcp__penpot__execute_codeRun JavaScript in Penpot plugin context to create/modify designs
mcp__penpot__export_shapeExport shapes as PNG/SVG for visual inspection
mcp__penpot__import_imageImport images (icons, photos, logos) into designs
mcp__penpot__penpot_api_infoRetrieve Penpot API documentation

MCP Server Setup

The Penpot MCP tools require the penpot/penpot-mcp server running locally. For detailed installation and troubleshooting, see setup-troubleshooting.md.

Before Setup: Check If Already Running

Always check if the MCP server is already available before attempting setup:

  1. Try calling a tool first: Attempt mcp__penpot__penpot_api_info - if it succeeds, the server is running and connected. No setup needed.
SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/github/awesome-copilot
Categories
Frontend Development, DevOps & CI/CD, Git & Pull Requests, Documentation, AI & Agent Building, Mobile Development, Design & UI/UX

More from github/awesome-copilot

All 318

Recommended

More Frontend Development
1heroui-inc avatarheroui-nativeheroui-inc/herouiHeroUI Native component library for React Native (Tailwind v4 via Uniwind). Use when building mobile UIs with HeroUI Native — creating Buttons, Cards, TextField11.2Kskills.sh installs
2tanstack-skills avatartanstack-querytanstack-skills/tanstack-skillsPowerful asynchronous state management, server-state utilities, and data fetching for TS/JS, React, Vue, Solid, Svelte & Angular.10.3Kskills.sh installs
3upstash avatarfind-docsupstash/context7Retrieves up-to-date documentation, API references, and code examples for any developer technology. Use this skill whenever the user asks about a specific libra10.1Kskills.sh installs
4wondelai avatarrefactoring-uiwondelai/skillsAudit and fix visual hierarchy, spacing, color, and depth in web UIs. Use when the user mentions "my UI looks off" (or amateur/unprofessional), "fix the design"10.1Kskills.sh installs
5deckardger avatartanstack-start-best-practicesdeckardger/tanstack-agent-skillsTanStack Start best practices for full-stack React applications. Server functions, middleware, SSR, authentication, and deployment patterns. Activate when build9.9Kskills.sh installs
6wondelai avatarweb-typographywondelai/skillsSelect, pair, and implement typefaces for web projects. Use when the user mentions "font pairing", "which typeface", "line height", "responsive typography", "we9.7Kskills.sh installs