Free community version available at github.com/ar27111994/penpot-mcp — this listing provides the packaged, ready-to-install agent skill with continued updates.

Penpot MCP Skill

AI-agent workflows for creating, auditing, and maintaining production-grade design projects and design systems — including flows, interactions, animations, tokens, and visual effects — in Penpot via the official MCP Server.

Compatible AI agents

Works with any MCP-compatible client: Claude Code, Cursor, VS Code / Copilot, Codex / OpenCode, Amp, Cline, Windsurf, Claude Desktop (via mcp-remote), and any agent supporting HTTP or SSE MCP transport.

Required setup: Penpot MCP key

1. Open Penpot → Main menu → Your account → Access tokens
2. Click New token, name it (e.g. mcp-agent), copy the token immediately — it is shown only once
3. Configure your MCP client with the URL: http://<your-machine>:4401/mcp?userToken=YOUR_TOKEN
4. Alternatively use the Penpot Remote MCP Server at https://design.penpot.app/api/mcp/stream?userToken=YOUR_TOKEN

What this skill covers

• Remote & local MCP setup — up-to-date configs for all major MCP clients; Remote MCP recommended for most users; /sse fallback for local transport conflicts
• All 5 MCP tools — execute_code, high_level_overview, penpot_api_info, export_shape, import_image
• Penpot JS API patterns — penpotUtils reference, read-only property gotchas, flex ordering quirks, board positioning, CSS export, plugin data API
• Font & typography constraints — installed variant detection, library vs. layer fontSize types, stale fontId limitation
• Write safety rules — batch size limits (~10 ops/call), page-switch two-call pattern, structural verification over export
• Interactions & animations — full addInteraction API, all triggers (click, mouse-enter, mouse-leave, after-delay), all actions and animations (Dissolve, Slide, Push)
• Prototyping workflows — linear flows, overlays/modals, drawers, multi-flow prototypes, interaction audit, lo-fi→hi-fi progression
• Token-aware prompting — RULESET block, 3-tier token hierarchy, compact schema style
• Design system workflows — build from scratch, full audit, token migration, component library management, palette updates
• Design-to-code workflows — page→HTML/CSS, design→React, token extraction, Style Dictionary config, component mapping, asset export, drift detection
• Design file best practices — layer naming, component organization, spacing, accessibility, handoff conventions
• Component checklists — buttons, forms, navigation, cards, prototype coverage, pre-handoff review

Status vs. other Penpot skills

Built directly from the official Penpot MCP documentation and plugin API docs, cross-referenced against the github/awesome-copilot penpot-uiux-design skill and battle-tested in production.

• ✅ Covers Remote MCP and all major MCP client configs
• ✅ npx @penpot/mcp@stable — not the outdated git clone approach
• ✅ Correct VS Code config key (mcp.servers, not mcpServers)
• ✅ Full interactions & animations API
• ✅ Font/typography constraints from real-world production use
• ✅ Write safety: batch limits, page-switch two-call pattern
• ✅ Prototyping workflows: flows, overlays, multi-flow, animation guide
• ✅ Compatible with all MCP-compatible agents