What is the penpot-uiux-design skill?
The penpot-uiux-design skill is a SKILL.md in awesome-copilot that drives Penpot through the penpot/penpot-mcp server. It gives your agent golden rules, an 8px spacing scale, component checklists and accessibility targets, then lets it run code in Penpot, export shapes and import images.
The penpot-uiux-design skill is a folder in GitHub's awesome-copilot collection. It teaches an agent to design inside Penpot, the open source design tool, by calling the penpot/penpot-mcp server rather than only writing code.
The skill expects four MCP tools: execute_code to run JavaScript in the Penpot plugin context, export_shape for PNG or SVG output, import_image to place images, and penpot_api_info to look up the API.
Connecting Penpot first
The quick start clones penpot/penpot-mcp, runs npm install and npm run bootstrap, then loads the plugin in Penpot from a local manifest URL on port 4400. The MCP client then connects to an SSE endpoint on port 4401.
Design rules it carries
- Golden rules for components and layout, plus an 8px spacing scale and a defined type scale.
- Default semantic colors, and contrast targets of 4.5:1 for text and 3:1 for large text.
- Touch targets of at least 44 by 44 pixels.
- Checklists for buttons, forms and navigation, with fuller specs in the component-patterns reference.
API gotchas it spares you
The skill records quirks that trip up scripts. Width and height are read-only, so shapes must use the resize method. New boards need a 100px gap to avoid overlapping others, and CSS comes from penpot.generateStyle.
Who the penpot-uiux-design skill is for
Best for
- Teams that design in Penpot and want an agent to draft screens, components or design systems there.
- Designers who want rules for spacing, contrast and touch targets applied automatically.
- Agents already set up with MCP servers, such as the one in the Penpot MCP page.
Not for
- Figma users. This skill talks to Penpot only, Related: the Figma MCP.
- Anyone unwilling to run a local Node server, since the setup needs git, npm and a plugin load.
- Quick code-only UI work with no design file, Related: frontend design.
Use it with UiChemy
UiChemy Figma to WordPress converts Figma designs into editable WordPress pages. It starts from Figma, so a Penpot file would need to reach Figma first. Composer then edits the result inside Elementor or Gutenberg. Click Get Started.
How to install Penpot UI/UX Design Skill: Design in Penpot with an AI Agent
git clone https://github.com/github/awesome-copilot.gitClone awesome-copilot
Run
git clone https://github.com/github/awesome-copilot.git. The skill lives in skills/penpot-uiux-design.Copy the skill folder
Copy skills/penpot-uiux-design into the place your agent loads skills from, with its references folder: accessibility.md, component-patterns.md, platform-guidelines.md and setup-troubleshooting.md.
Run the Penpot MCP server
Run
git clone https://github.com/penpot/penpot-mcp.git, thennpm installandnpm run bootstrapinside it. The server uses ports 4400, 4401 and 4402.Load the plugin and connect
In Penpot open the plugin manager, enter http://localhost:4400/manifest.json, and click Connect in the plugin window.
Point your client at the server
For VS Code, add
"penpot": {"url": "http://localhost:4401/sse"}to the MCP servers config.
Check that it loaded
Ask the agent to create a button component on a new board. The Penpot canvas should show it, and the agent should have used execute_code with the 8px spacing scale.
Key features
- Penpot MCP integrationThe skill works through the penpot/penpot-mcp server, so the agent edits a real Penpot file rather than describing a design in text.
- Four MCP toolsmcp__penpot__execute_code runs JavaScript in Penpot, export_shape outputs PNG or SVG, import_image adds images and penpot_api_info looks up API details.
- Golden rulesA set of core design principles guides every component the agent builds, so output stays consistent from one request to the next.
- 8px spacing scaleLayout uses a defined 8px scale and a type scale, which keeps gaps and text sizes on a predictable grid.
- Semantic color defaultsDefault semantic colors give the agent a starting palette for success, warning and error states instead of improvised hues.
- Component checklistsButtons, forms and navigation each have a checklist, with fuller specifications in references/component-patterns.md.
- Accessibility targetsContrast of 4.5:1 for text and 3:1 for large text, plus 44 by 44 pixel touch targets, are written into the rules.
- API gotcha notesRead-only width and height are changed with resize, boards are positioned with a 100px gap, and CSS export uses penpot.generateStyle.
- Platform and troubleshooting referencesreferences/platform-guidelines.md covers screen sizes and platform specs, and references/setup-troubleshooting.md covers server installation problems.
Frequently asked questions
What is the penpot-uiux-design skill?
It is a skill in the awesome-copilot repository that lets an AI coding agent design in Penpot. It works through the penpot/penpot-mcp server and adds design rules for spacing, color, components and accessibility, so the agent builds screens and design systems directly on the Penpot canvas.
How do I install the penpot-uiux-design skill?
Clone github/awesome-copilot and copy skills/penpot-uiux-design, with its references folder, into the place your agent loads skills from. Then clone and bootstrap penpot/penpot-mcp, load its plugin in Penpot from the local manifest URL, click Connect, and point your client at the SSE endpoint.
What tools does the Penpot MCP expose here?
The skill names four: mcp__penpot__execute_code to run JavaScript in the Penpot plugin context, export_shape for PNG or SVG export, import_image to bring in images, and penpot_api_info to look up API documentation. Most design work goes through execute_code.
Which ports does penpot-mcp use?
The skill lists port 4400 for the plugin manifest, 4401 for the SSE endpoint that MCP clients connect to, and 4402 as a third server port. If something else on your machine uses those, setup-troubleshooting.md in the skill is the place to look.
Does penpot-uiux-design work with Figma?
No. It is built for Penpot and calls the Penpot MCP server. For Figma files you need a Figma-specific route. UiChemy Figma to WordPress starts from a Figma design, so a Penpot design would have to be recreated or handed off in Figma first.
What accessibility rules does penpot-uiux-design apply?
It sets text contrast at 4.5:1, large text at 3:1 and touch targets at 44 by 44 pixels. The details live in references/accessibility.md, and component checklists for buttons, forms and navigation carry the same expectations into each element.
Which agents can use penpot-uiux-design?
The skill assumes an agent that supports MCP servers, and its documented example is a VS Code config. Claude Code and other MCP-capable agents can connect to the same server, but the pack documents only VS Code, so check your client's MCP settings.