penpot-uiux-designby GitHub

Penpot UI/UX Design Skill.

A Claude Code and Codex skill for UI design: professional UI/UX design, components, and design systems in Penpot through MCP tools.

Web & UI
Design file

Download OpenDesign View usage guide

github/awesome-copilot · skills/penpot-uiux-design/SKILL.mdSKILL.md

--- name: penpot-uiux-design description: 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 … --- ## Available MCP Tools ## MCP Server Setup ## Core Design Principles ## Design Workflow ## Design System Handling ## Key Penpot API Gotchas

Front matter and section headings read from the upstream file on 2026-09-14 · 12,103 characters in full

01 What it does

What the penpot-uiux-design Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

A guide for designing real interfaces in Penpot through the penpot/penpot-mcp server, written for designers and developers whose agent drives the Penpot plugin API. Rather than giving generic advice, it specifies a working sequence: check whether the MCP server is already running, discover the file's existing colours, text styles and components, inspect hierarchy with penpotUtils.shapeStructure, then create boards, rectangles and text and apply addFlexLayout containers.

It supplies fallback 8px spacing and typography scales, a mobile 375x812 and dashboard 1440x900 layout, checklists for buttons, forms and navigation, WCAG contrast and touch target limits, board placement spacing, Penpot API pitfalls such as read-only width and height, and validation through analyzeDescendants, fontSize filtering and export_shape.

What it produces

New or modified Penpot designs created through JavaScript executed in the plugin context.
PNG or SVG renders of selected shapes, used to look at the design rather than guess.
CSS extracted from a selection, including children, for handoff.

See the example prompt ↗

How It Works

01
Confirm the Server Is Running
The first move is a trial call to penpot_api_info, so nobody gets walked through installation when the connection already works.
02
Find the Existing Design System
Before drawing, it asks about brand guidelines and reads the current file for components, colours and patterns already in use.
03
Inspect the Page Structure
shapeStructure returns the existing hierarchy so new elements can be placed relative to what is already on the canvas.
04
Create the Elements
Boards, rectangles and text are made through plugin calls in the Penpot plugin context rather than described in prose.
05
Validate by Exporting
Every change ends with an export so the result is looked at as an image, not trusted from code alone.

02 Find your fit

When to Use the penpot-uiux-design Skill

Use the penpot-uiux-design skill in Claude Code or Codex when the job is UI design of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

Someone starting a fresh web, mobile or desktop interface and wanting it built as an actual Penpot file.
Setting up a component library and design tokens that the whole product will reuse.
Producing common product screens such as dashboards, forms, navigation and landing pages.
Auditing or improving a Penpot file that already exists, rather than starting blank.
Work that must follow iOS, Android or Material Design conventions.

Know the Boundaries

It cannot run on its own: the local MCP server must be running and the Penpot plugin UI must show as connected, or calls fail or time out.
It is scoped to Penpot designs built through the penpot-mcp server, not to other design tools.
Passing its checklists is not the same as proving the design works; the file still asks you to test assumptions with real users.

What to Provide

Existing design system or brand guidelines, if you have themEither tell the agent your tokens and specs or let it discover them from the current file before it starts drawing.
Icons, photos or logosVisual assets are pulled into the design through the import image tool.

03 Inside the skill

Rules the penpot-uiux-design Skill Gives Claude Code and Codex

8 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

Check the Server Before Installing Anything
Attempt a tool call first and only run through setup once the user confirms the server is not installed.
Never Draw a Board on Top of Another
List existing boards before creating one and place the new board past their rightmost edge plus a gap, using 100px between screens in the same flow and 200px+ between different sections.
Resize Through Methods, Not Properties
width and height are read-only, so geometry changes go through shape.resize(w, h) instead of direct assignment.
Stack Layers with insertChild
Z-ordering uses insertChild(index, shape); appendChild is explicitly not the way to order layers.
Default Tokens Are a Fallback Only
When the user has a design system, their colours, spacing and typography win; the built-in scales apply only when none exists.
Hold the Accessibility Floor
Text contrast stays at 4.5:1 for body copy and 3:1 for large text, and touch targets never drop below 44x44px.
Limit Palette and Typefaces
Use 1 primary plus 1 secondary plus neutrals, and no more than 1-2 typefaces across the design.
Reset Text Grow Type After Resizing
Penpot resets text sizing behaviour on resize, so growType has to be set back to auto-width or auto-height.

04 Put it to work

Install penpot-uiux-design in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add penpot-uiux-design to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal

npx skills add https://github.com/github/awesome-copilot --skill penpot-uiux-design

Generic skills CLI form for skills/penpot-uiux-design/SKILL.md; the repository may document its own path.

Give the Skill a First UI Design Task

Written in the skill's own terms; replace the bracketed parts with your material.

Starter prompt

Design a settings screen for [app name] in Penpot on a 375x812 board. Follow the Material Design guidelines and use our existing tokens if the file already has them, otherwise use the 8px spacing scale. It needs a header, a form with labels above the inputs plus error states, and a bottom CTA. Export the screen when you are done so I can check the contrast.

Source: written from the SKILL.md in the skill's own terms.

Check the First Result

What the SKILL.md itself says a correct result looks like:

Every element sits inside its container, verified with analyzeDescendants combined with isContainedIn.
No text falls below 12px, found by filtering shapes on fontSize.
Colour contrast reaches WCAG AA before the design is considered final.
The nesting and hierarchy are reviewed with shapeStructure.
Body typography stays at 16px or larger.
Loading, empty and error states are accounted for, not just the happy path.

In OpenDesign import penpot-uiux-design from its SKILL.md link: Plugins → Add → Skill → Import from link, then pick it in the top bar.

Download OpenDesign Read the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author: GitHub
Repository: github.com/github/awesome-copilot Branch main
Skill file: skills/penpot-uiux-design/SKILL.md Content checksum recorded at verification; commit 1899b18
License: MIT From LICENSE.
Repository stars: 38,981 GitHub snapshot taken 2026-09-14 for the whole github/awesome-copilot repository, which contains 6 skills in this catalog. Not a rating or usage count for penpot-uiux-design.
Verified by OpenDesign: 2026-09-14 Source file, path, license text and star count were checked. Not bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

Available MCP ToolsFour tools with purposes: run code, export shapes, import images, fetch Penpot API docs.
MCP Server SetupCheck whether it is running first, then clone, build, load the plugin URL, configure VS Code, troubleshoot.
Core Design PrinciplesGolden rules for clarity and consistency, plus the five-step visual hierarchy priority order.
Design WorkflowOrdered steps from design-system check through inspection, creation, flex layout and visual validation.
Design System HandlingAsk about or discover tokens, colours, text styles and components, then branch on the answer.
Key Penpot API GotchasRead-only geometry, insertChild for z-order, reversed flex order, growType reset after text resize.
Positioning New BoardsFind existing boards, compute the next x from the rightmost edge, keep flows visually grouped.
Default Design TokensFallback 8px spacing scale, typography scale and semantic colour roles for designs with no system.
Component ChecklistCheckbox requirements for buttons, forms and navigation, covering states, sizing and labels.
Accessibility Quick ChecksSix checks: contrast, touch targets, focus, alt text, heading hierarchy, colour independence.
Design Review ChecklistPre-final checks on hierarchy, spacing, typography, WCAG AA, states and system consistency.
Validating DesignsValidation methods table plus exporting CSS from a selection with generateStyle.

The Skill's Own Description

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

Front-matter description from SKILL.md. The full file is about 12,103 characters. Read the full file on GitHub.

06 Before you install

Questions About the penpot-uiux-design Skill

Answers come from the SKILL.md as read on 2026-09-14, not from a recorded run.

Do I have to install the Penpot MCP server before using this?

No, and the skill deliberately checks first by calling penpot_api_info. It only gives you installation steps once you confirm the server is not installed, after which setup clones penpot-mcp, runs npm install and npm run bootstrap, then loads the plugin from http://localhost:4400/manifest.json in Penpot.

Which client does it configure?

The setup section shows a VS Code settings.json snippet registering a penpot server at http://localhost:4401/sse. It also warns that tools may not appear until you restart VS Code or Claude completely after changing the config.

Penpot UI/UX Design

Run penpot-uiux-design on a Real UI Design Task.

Download OpenDesign, import penpot-uiux-design from its SKILL.md link, paste the prompt above, and read the plan before the result.

Download OpenDesign Browse all skills

Terminal

npx skills add https://github.com/github/awesome-copilot --skill penpot-uiux-design

What the penpot-uiux-design Skill Does in Claude Code and Codex

In the Skill's Own Terms

How It Works

When to Use the penpot-uiux-design Skill

Good Fit

Know the Boundaries

What to Provide

Rules the penpot-uiux-design Skill Gives Claude Code and Codex

Check the Server Before Installing Anything

Never Draw a Board on Top of Another

Resize Through Methods, Not Properties

Stack Layers with insertChild

Default Tokens Are a Fallback Only

Hold the Accessibility Floor

Limit Palette and Typefaces

Reset Text Grow Type After Resizing