Penpot MCP is an AI-powered server that provides AI agents with full programmatic control over your self-hosted Penpot UI/UX design and prototyping instances, enabling automation and intelligent design workflows.

Is Penpot MCP compatible with my existing Penpot setup?

Yes, Penpot MCP is designed to integrate seamlessly with self-hosted Penpot instances running via Docker Compose, leveraging its database, RPC API, exporter, and a browser plugin bridge for comprehensive access and real-time interaction.

What design tasks can AI agents automate with Penpot MCP?

AI agents can automate a wide range of tasks, including UI component creation, layout generation, design system management, batch operations like renaming or updating colors, and even adding comments directly in Penpot projects.

How does Penpot MCP bridge the design-to-code gap?

It significantly bridges this gap by enabling AI to generate CSS from shapes, export pixel-perfect designs to SVG/PNG, and extract design tokens, streamlining the handover process to developers.

Penpot

Name: Penpot
Author: ancrz

byancrz

•

デザインツール

開発者ツール

Provides AI agents with programmatic access to self-hosted Penpot instances for comprehensive UI/UX design and prototyping.

Penpot bridges AI agents with your self-hosted Penpot instance, granting full programmatic access to read, create, modify, and export design elements. It acts as a comprehensive API for Penpot, solving the lack of a native programmatic interface by offering 68 tools for tasks ranging from UI component creation and layout generation to design-to-code gap bridging, batch operations, and design system maintenance. This enables AI agents like Claude Code or Cursor to interact with Penpot using natural language, streamlining UI/UX design workflows and automating repetitive tasks.

主な機能

01Offers 68 tools for full programmatic control over Penpot projects, shapes, text, and exports

02Integrates AI agents for UI component creation, layout generation, and design system management

03Utilizes a tri-layer access strategy for fast PostgreSQL reads, reliable RPC API writes, and pixel-perfect exports

04Enables real-time canvas interaction and script execution via a browser plugin bridge

05Generates CSS from shapes, exports designs to SVG/PNG, and extracts design tokens

063 GitHub stars

ユースケース

01Automating UI/UX design tasks and workflows with AI assistants

02Programmatically managing and maintaining design systems, including components, colors, and typography

03Bridging the design-to-code gap by programmatically extracting design assets and generating CSS