# Penpot Mcp

> AI-agent skill for creating, auditing, and maintaining Penpot design systems, prototypes, tokens, and design-to-code workflows via the official Penpot MCP Server.

- **Type:** MCP server
- **Install:** `agentstack add mcp-ar27111994-penpot-mcp`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [ar27111994](https://agentstack.voostack.com/s/ar27111994)
- **Installs:** 0
- **Category:** [Content & Media](https://agentstack.voostack.com/c/content-and-media)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [ar27111994](https://github.com/ar27111994)
- **Source:** https://github.com/ar27111994/penpot-mcp
- **Website:** https://www.skills.sh/ar27111994/penpot-mcp

## Install

```sh
agentstack add mcp-ar27111994-penpot-mcp
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# penpot-mcp skill

[](https://github.com/ar27111994/penpot-mcp/stargazers)
[](LICENSE)
[](https://github.com/ar27111994/penpot-mcp/actions/workflows/validate.yml)
[](https://github.com/ar27111994/penpot-mcp)
[](https://skills.sh/ar27111994/penpot-mcp)
[](https://github.com/ar27111994/penpot-mcp)

> AI-agent skill for creating, auditing, and maintaining production-grade design projects and design systems — including flows, interactions, animations, and overlays — in [Penpot](https://penpot.app) via the official [Penpot MCP Server](https://help.penpot.app/mcp/).

## 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.

## 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 guidance 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, community plugin boundaries
- **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 (`navigate-to`, `open-overlay`, `toggle-overlay`, `close-overlay`, `previous-screen`, `open-url`), all animations (`Dissolve`, `Slide`, `Push`) with easing options
- **Prototyping workflows** — linear flows, overlays/modals, drawers, multi-flow prototypes, interaction audit, lo-fi→hi-fi progression, animation selection guide
- **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, layout extraction, 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

## Install

**Via npx (Claude Code / Codex CLI):**

```bash
npx skills add ar27111994/penpot-mcp
```

**Via gh CLI:**

```bash
gh skills install ar27111994/penpot-mcp
```

**Manually:** Copy the `penpot-mcp/` folder into your `.github/skills/` directory (or wherever your agent discovers skills).

## File structure

```text
penpot-mcp/
├── SKILL.md                                ← Always-loaded core
└── references/
    ├── penpot-api-patterns.md              ← JS API, gotchas, fonts, interactions, animations
    ├── prototyping-workflows.md            ← Flows, overlays, audit, lo-fi→hi-fi
    ├── design-system-workflows.md          ← Build, audit, migrate, manage
    └── design-to-code-workflows.md         ← HTML/CSS, React, tokens, assets
```

`SKILL.md` is light enough to always stay in context. Reference files are loaded on demand for the relevant task.

## Status vs. other Penpot skills

Built directly from the [official Penpot MCP documentation](https://help.penpot.app/mcp/) and plugin API docs at [doc.plugins.penpot.app](https://doc.plugins.penpot.app), cross-referenced against the [`github/awesome-copilot` penpot-uiux-design skill](https://github.com/github/awesome-copilot/tree/main/skills/penpot-uiux-design) and battle-tested in production.

Key differences:

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

## Changelog

See [CHANGELOG.md](CHANGELOG.md) for release notes.

## Contributing

PRs welcome — especially for new workflow recipes, additional platform templates, or corrections as the Penpot MCP API evolves. See [CONTRIBUTING.md](CONTRIBUTING.md) and the [Penpot community thread](https://community.penpot.app/t/penpot-mcp-skill/10599).

Please report security issues according to [SECURITY.md](SECURITY.md).

## License

MIT

## Source & license

This open-source MCP server is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [ar27111994](https://github.com/ar27111994)
- **Source:** [ar27111994/penpot-mcp](https://github.com/ar27111994/penpot-mcp)
- **License:** MIT
- **Homepage:** https://www.skills.sh/ar27111994/penpot-mcp

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/mcp-ar27111994-penpot-mcp
- Seller: https://agentstack.voostack.com/s/ar27111994
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.