Using the Penpot UI/UX Design skill safely

What the Penpot UI/UX Design Skill Is

The Penpot UI/UX Design Skill is a guide for AI coding assistants that lets them create professional user interfaces directly in Penpot. It comes from GitHub's awesome-copilot collection and targets models connected to the Penpot application through a separate MCP server called penpot-mcp. Penpot itself is an open-source design and prototyping platform that, according to the provider, is built on open web standards such as SVG, HTML, and CSS, and can be self-hosted. The skill bundles knowledge about design principles, component patterns, accessibility, and platform guidelines for iOS, Android, and Material Design, so an AI agent doesn't just generate elements technically but also makes sound design decisions.

Prerequisites: the Penpot MCP Server

For the skill to work, the separate penpot-mcp server must first be running locally. It is cloned from the official repository, dependencies are installed, and the server is started with a bootstrap command. In Penpot, you then open a design file, use the plugin menu's option to load a plugin from a URL, and connect via a local manifest address. The skill explicitly recommends first checking whether the server is already running before redoing the setup, to avoid duplicate installations. For connecting tools like Visual Studio Code, a server URL is additionally added to the editor configuration.

The Skill's Design Workflow

The actual workflow follows classic UX principles: clarity over cleverness, consistency through reusing patterns, designing around user goals rather than pure features, and treating accessibility as a baseline requirement rather than an afterthought. The skill instructs the agent to first check whether an existing design system with colors, typography, and components already exists before creating new elements. Provided tools let it create boards, rectangles, text, and flex layouts, as well as export existing shapes to visually verify the result. This create-and-export feedback loop is meant to prevent an agent from producing elements blindly without checking the outcome.

Security and Best Practices

Because the MCP server runs locally on fixed ports, a firewall should be configured so those ports are not unintentionally reachable from outside. The skill also points out known pitfalls, such as some browsers blocking local network access or security extensions interrupting the WebSocket connection between the plugin and the server. Anyone working with sensitive or internal design files should also consider that, by executing JavaScript code within the plugin context, the agent gains far-reaching access to the open design file, which is why the server should only run in trusted environments.

Practical Value and Limitations

The skill is particularly useful for teams already using Penpot as their design tool who want to speed up recurring tasks such as building dashboards, forms, or landing page structures. Since the guidance covers component patterns as well as contrast rules and touch target sizes, it can also serve as a learning aid for basic UX standards. At the same time, the skill remains bound by the capabilities of the underlying language model: it cannot replace complex, highly individual design decisions or deep visual craftsmanship, only support them in a structured way. The entire functionality also depends on the correct local setup of the penpot-mcp server; without that bridge, the tools described in the skill remain unreachable.