penpot-mcplisted

Use this skill whenever the user wants to use AI agents to work with Penpot design files via the Penpot MCP Server. Triggers include: using Penpot through an AI agent, design files, design systems, design tokens, Penpot MCP, design-to-code, generating UI from design, auditing a design system, creating components/variants, renaming layers, exporting assets from Penpot, adding flows, interactions, animations, overlays, or prototyping in Penpot, or prompting an AI agent to read/modify a Penpot file. Also triggers when the user wants to set up Penpot MCP, connect any MCP-compatible AI agent or IDE to Penpot, or produce production-ready HTML/CSS/React from a Penpot design. Use this skill for Penpot-agent workflows — design, code, audit, prototyping, or setup.
ar27111994/penpot-mcp · ★ 4 · AI & Automation · score 76

Install: claude install-skill ar27111994/penpot-mcp

# 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. --- ## Architecture Overview ``` MCP Client (any MCP-compatible agent / IDE) ↕ HTTP (or stdio via mcp-remote proxy) MCP Server (hosted remote OR local npx) ↕ WebSocket / plugin bridge Penpot Plugin (running inside the open design file) ``` MCP **always acts on the currently focused page** in the active Penpot browser tab. Only one tab can own MCP at a time. MCP runs through the Penpot MCP plugin. It does **not** provide a documented way to enumerate, install, launch, or drive arbitrary installed community plugins. Coordinate with other plugins only when the user explicitly asks or when file-visible evidence makes a plugin relevant. --- ## 1. Connection Setup ### Remote MCP (recommended for most users) 1. Penpot → **Your account → Integrations → MCP Server** → enable 2. Generate MCP key (shown once — store safely; only one key per user at a time) 3. Copy server URL: `https://<your-penpot-domain>/mcp/stream?userToken=YOUR_MCP_KEY` 4. Add to your MCP client