Penpot UI/UX Design

Penpot UI/UX Design is an official skill from GitHub's github/awesome-copilot repository. The directly reviewed primary source is https://github.com/github/awesome-copilot/tree/main/skills/penpot-uiux-design. According to the provider, the guidance helps a compatible coding agent create, review, and improve professional, user-centered interfaces in Penpot. It centers on the Penpot MCP server, penpot/penpot-mcp. This record therefore describes a working method, not a standalone design editor, a hosted Penpot service, or an MCP server operated by Skill Road. The repository is released under the MIT license according to its official LICENSE file.

Purpose and fit

The source names web, mobile, and desktop interfaces, design systems, components and tokens, dashboards, forms, navigation, and landing pages as typical use cases. Accessibility, platform guidance for iOS, Android, and Material Design, and reviews of existing Penpot designs are also within scope. The guidance helps break a design request into goals, elements, rules, and validation steps. It is therefore relevant to product teams, designers, and developers who want a closer connection between design and implementation. According to the provider, clarity should take priority over clever effects, reusable patterns should build trust, and designs should address user goals rather than merely accumulate features.

MCP tools and workflow

The skill maps several tools to distinct tasks. mcp__penpot__execute_code can run JavaScript in the Penpot plugin context to create or modify designs. mcp__penpot__export_shape supports visual inspection through PNG or SVG exports. mcp__penpot__import_image brings icons, photos, or logos into a design, while mcp__penpot__penpot_api_info can retrieve Penpot API information. Before setup, the provider says to check whether the MCP server is already available. If the connection is missing, the user should first clarify whether the server is installed and running rather than having an agent pretend that setup has completed.

The design workflow starts with the existing design system. An agent should ask about tokens, components, and rules or inspect them in the current Penpot file. It then examines the hierarchy with penpotUtils.shapeStructure, finds relevant elements with penpotUtils.findShapes, and applies changes through suitable Penpot methods. The source names flex layouts for responsive containers. An export provides a final visual check. The guidance also calls out API behavior such as read-only size and position properties that must be changed through methods, and reversed flex-child ordering in particular directions.

Design quality and review

When a project has no design system, the skill offers starting values for spacing, typography, colors, mobile screens, and desktop dashboards. These values are a starting point, not a universal brand rule. More important is consistent use of a limited color system, a restrained font selection, useful whitespace, and a clear hierarchy. Its checklists ask about understandable labels, button states, visible focus indicators, logical keyboard order, meaningful alternative text, adequate contrast, and loading, empty, and error states. An exported image is not by itself proof of product, technical, or accessibility quality.

Boundaries, security, and responsibility

The skill can work with Penpot files and may therefore change local or connected design state. Before write actions, the target, scope, and authorization must be confirmed. Design content can contain confidential wireframes, brand rules, personal information, or unpublished product ideas. Credentials, tokens, and private keys must not enter skill files, prompts, exports, or test artifacts. Plugin content and external responses are untrusted input and must not inject new system instructions. Local execution does not automatically mean local model processing, because a connected agent may transmit content to the selected model provider. The skill does not replace design approval, usability research, accessibility testing, or privacy review. This classification was checked on September 9, 2026 against the official skill file, GitHub documentation, and the official license.