Penpot MCP Server – Design Systems and UI Workflows
Penpot's official MCP server gives AI agents read and write access to the currently focused Penpot design page, including components, styles, tokens, layers, pages, and libraries. Use it for design-system maintenance, UI creation, structured design audits, asset workflows, and design-to-code collaboration.
Overview
Penpot's official MCP server connects an MCP-compatible AI client to an open
Penpot file. A Penpot plugin running inside the editor links the active design
page to the MCP server, allowing an agent to inspect and modify design content
through natural-language instructions. The integration supports both creative
work and structured maintenance across design and development workflows.
What the MCP server enables
Penpot MCP can read and write the structure of the currently focused page,
including components, styles, tokens, layers, pages, and libraries. Depending
on the selected mode and the agent's model quality, it can:
- Create and apply spacing, typography, and color tokens.
- Generate component variants and organize component sets.
- Rename layers and audit naming consistency.
- Organize pages, groups, libraries, and design-system structure.
- Audit designs for inconsistent or redundant styles and components.
- Apply broad visual updates such as palette changes.
- Create new screens based on an existing design system.
- Extract layout structure and UI metadata for development.
- Generate HTML and CSS from designs and map design tokens to code.
- Export supported assets and inspect component-to-code relationships.
When to use it
Use Penpot MCP when an AI agent needs live access to a Penpot design rather
than static screenshots or copied specifications. Typical uses include cleaning
up a shared design system, generating screens from established components,
checking token usage, preparing developer handoff, exporting selected assets,
translating layouts into frontend code, and synchronizing design and code
conventions.
Connection and authentication
Penpot provides a hosted remote MCP mode and a locally run mode. For the hosted
service, enable MCP under Your account → Integrations → MCP Server, generate
a personal MCP key, and use the supplied URL. On Penpot's official SaaS, the URL
follows https://design.penpot.app/mcp/stream?userToken=.... The key is shown
once, is non-recoverable, and must be treated like a password.
The local server is started with npx @penpot/mcp@stable and exposes
http://localhost:4401/mcp. Local mode uses the active Penpot browser session
instead of an MCP key and can provide controlled local-file capabilities that
are unavailable to the hosted server.
Key considerations
MCP always operates on the currently focused page in the active Penpot tab, and
only one browser tab can own the MCP connection at a time. The plugin must remain
connected while the agent works. Write tools can create, rename, move, delete,
or restyle design objects, so begin with read-only prompts, ask the agent to
describe intended changes, and prefer small reversible steps. Remote mode cannot
import images from local paths and has more limited local export behavior. A
vision-language model is required for image understanding, and Penpot recommends
strong frontier models for complex design tasks.
Supported Transports
streamable_http
URL: https://design.penpot.app/mcp/stream?userToken=${PENPOT_MCP_KEY}
streamable_http
URL: http://localhost:4401/mcp
Frequently Asked Questions
- When should an AI agent use the Penpot MCP server?
- Use it when a workflow needs live access to a Penpot design for tasks such as creating screens, maintaining a design system, organizing components, auditing tokens and styles, exporting assets, or translating designs into frontend code.
- What does the Penpot MCP server add to an AI agent's capabilities?
- It gives the agent structured read and write access to the currently focused Penpot page, including components, layers, styles, tokens, pages, and libraries, instead of limiting the agent to screenshots or manually copied design specifications.
- What can an AI agent access or manage through Penpot MCP?
- The agent can inspect and modify supported design structures, create and apply tokens, organize components and pages, rename layers, audit design consistency, generate screens, export supported assets, and assist with design-to-code workflows. Remote mode has limited local-file access.
- How is authentication configured for the Penpot MCP server?
- Hosted mode uses a personal, non-recoverable MCP key embedded in the userToken query parameter of the server URL. Store it securely and regenerate it if exposed. Local mode requires no MCP key because it relies on the active Penpot browser session and connected local plugin.
- Which transport should be used for the Penpot MCP server?
- Use the hosted Streamable HTTP endpoint on design.penpot.app for the simplest setup and normal design access. Use the local HTTP endpoint at http://localhost:4401/mcp after starting @penpot/mcp when local execution, additional control, or supported local-file operations are required.