penpot-uiux-design Skill: Design UI in Penpot With Claude

Guides Claude to design web and mobile interfaces in Penpot through the penpot-mcp server, using layout, token and accessibility rules.

Installs: 12.8K; on skills.sh
Stars: 40.7K; on GitHub
Files: 4; besides SKILL.md
Updated: Oct 2026; last repo commit

penpot-uiux-design is a skill in the github/awesome-copilot collection. It tells Claude how to create and review UI designs in Penpot by calling the penpot-mcp tools: it runs JavaScript in Penpot to build boards and layouts, exports shapes as images to check its work, and applies default spacing, type and color tokens when you have no design system.

The skill does not include the Penpot connection. You need the penpot-mcp server running locally and the Penpot plugin connected in your browser before the tools work, and the install box below covers both. The skill bundles four reference files and no scripts.

Good for

Designers who want Claude to build screens and components directly in Penpot
Developers sketching a dashboard, form or landing page without a design tool background
Teams that need contrast, touch-target and WCAG checks on a design
Penpot users who already run an MCP client such as VS Code, Claude Desktop or Claude Code

Install penpot-uiux-design

Claude Code

Copy this prompt.

Install the penpot-uiux-design skill in Claude Code. Run this command:

git clone https://github.com/penpot/penpot-mcp.git
cd penpot-mcp
npm install
npm run bootstrap

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js 22+, Git.

The skill only guides Claude. It needs the penpot-mcp server running on your machine and the Penpot plugin connected. Node.js 22 or newer is required. The penpot-mcp README says the repository was archived on 2026-02-03 and its contents moved into the main Penpot repository (github.com/penpot/penpot, mcp folder), which is the maintained copy. The commands above match the archived README; the main repository's README gives its own build steps, so follow those if you build from there.

From the project README. Source.

What's in the skill

When it loads

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".

Sections in SKILL.md

Available MCP Tools
MCP Server Setup
Before Setup: Check If Already Running
Quick Start (Only If Not Installed)
VS Code Configuration
Troubleshooting (If Server Is Installed But Not Working)
Quick Reference
Core Design Principles
The Golden Rules
Visual Hierarchy (Priority Order)
Design Workflow
Design System Handling
Key Penpot API Gotchas
Positioning New Boards
Default Design Tokens
Spacing Scale (8px base)

Key facts

Author: Not named in SKILL.md; listed in github/awesome-copilot
Repository: github/awesome-copilot
Installs on skills.sh: 12,836 as of 2026-11-02
GitHub stars: 40,666 for the whole repo, 2026-11-02
License: MIT (repo metadata)
Last commit to the repo: 2026-10-30
Files: 5 files including SKILL.md (4 reference files: accessibility, component patterns, platform guidelines, setup and troubleshooting)
Needs: penpot-mcp server on ports 4400 to 4402, Penpot plugin connected, Node.js v22+
MCP tools it uses: execute_code, export_shape, import_image, penpot_api_info

What it includes

Runs JavaScript in the Penpot plugin to create or change designs
The main tool. Claude uses it to inspect the file, find shapes, create boards, rectangles and text, and apply flex layouts.
Try: “Design a 375x812 mobile login screen in my Penpot file.”
Runs code · mcp__penpot__execute_code
Exports shapes as PNG or SVG so Claude can check its work
Used to look at the result, for example to check contrast by eye after a build.
Read · mcp__penpot__export_shape
Imports icons, photos and logos into a design
Adds image assets to the Penpot file.
Write · mcp__penpot__import_image
Retrieves Penpot API documentation
Also the first check: if this tool answers, the server is running and no setup is needed.
Read · mcp__penpot__penpot_api_info
Check for a design system, read the page, build, add layout, validate
Claude first asks if you have a design system or reads one from the file. It then lays out boards with a 100px gap so they do not overlap.
Design workflow
8px spacing scale, type scale and color roles used when you have no system
Fallback values for spacing, typography and color. Your own tokens take priority when you have them.
Default design tokens
Component patterns, accessibility, platform guidelines, setup help
references/component-patterns.md, accessibility.md (WCAG), platform-guidelines.md (iOS, Android, responsive web, desktop) and setup-troubleshooting.md.
Read · Reference files
Extracts CSS from selected shapes with penpot.generateStyle
Claude can pull CSS from a design through execute_code.
CSS export

From the official docs

Permissions

Medium risk

Claude can run JavaScript in your open Penpot file and change it, and setup builds third-party code from the penpot-mcp repository. Try it on a copy of your design first.

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

Claude can change your open Penpot file
execute_code runs JavaScript in Penpot, so Claude can add, move or restyle shapes. Work on a duplicate of the file and use Penpot version history. github.com
You build and run third-party code
The setup clones github.com/penpot/penpot-mcp and runs npm install and npm run bootstrap. Check the repository before you build it. That repository is archived (since 2026-02-03) and its code now lives in the main Penpot repository, so check which one you build. github.com
Troubleshooting suggests kill and delete commands
The guide shows kill -9 on the process using a port and rm -rf node_modules. Run them only against the process and folder you mean. github.com
Claude Desktop setup installs a global proxy
The guide has npm install -g mcp-remote and runs it through npx -y mcp-remote with --allow-http to reach the local server. github.com

Technical details

Talks to	localhost:4400, localhost:4401, localhost:4402
Scopes	Claude runs JavaScript in the Penpot file you have open and can create, change and import shapes The guide has you clone and build the penpot-mcp repository and run npm install and npm run bootstrap The server listens on localhost ports 4400, 4401 and 4402

Questions

What does the penpot-uiux-design skill do?

It teaches Claude how to design interfaces in Penpot through the penpot-mcp tools, with default tokens, layouts, component checklists and accessibility checks.

How do I install penpot-uiux-design?

Use the install box at the top of this page. You need the skill and the penpot-mcp server with the Penpot plugin connected, so the box has both.

Does it work in the Claude app, Codex or Cursor?

The setup guide documents VS Code (GitHub Copilot), Claude Desktop through the mcp-remote proxy, and Claude Code. It does not document the Claude web app, Codex or Cursor, and the server runs on your own machine.

Does it need an API key?

No key is named in SKILL.md or the setup guide. It needs Node.js v22 or newer, Git and a Penpot file open in your browser.

Is it safe?

It lets Claude run JavaScript inside your open Penpot file and start from a server you build from the penpot-mcp repository. Try it on a copy of your design first, because Claude can change shapes in the file you have open.

Why do the tools not show up?

The setup guide lists restarting your client fully, keeping the Penpot plugin window open and showing Connected, and allowing ports 4400, 4401 and 4402 through your firewall. It also says newer Chromium blocks local connections until you allow them.

Information

updated Nov 2, 2026

Repository: github/awesome-copilot
Folder: skills/penpot-uiux-design

github/awesome-copilot skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 4

setup-troubleshooting.md · github.com
SKILL.md · github.com
penpot-mcp README · github.com
awesome-copilot README · github.com