オープンソースの設計ツールであるPenpotの完全操作機能を提供するモデルコンテキストプロトコル(MCP)サーバー。 このサーバーは、AI アシスタントが、Fima プラグイン機能と同様に、プログラム的に Penpot デザインを作成、変更、および管理できるようにします。

** 複数のアーキテクチャ Docker の画像が使用可能:** linux/amd64, linux/arm64]

アクションで見る

このMCPサーバーを使用してAIアシスタントと自然な会話を通して完全に作成されるチャットインターフェースの例です。 例7:このデザインを生成した完全な会話のためのチャットインターフェイス。

上記のスクリーンショットは、自然言語でデザインを記述できる方法を示します。また、MCP サーバーの機能を使用して、AI アシスタントがペンポで作成します。レイアウト、スタイリング、コンポーネント、インタラクションを自動的に処理します。

##特徴

財布 完全な設計操作

• ファイルの作成と管理: 新規設計ファイルの作成、プロジェクトリストの作成、ファイルメタデータを管理
• 形状の操作: 長方形、円、フレーム、パス、テキスト、SVG 形状を作成します。 -デザインの変更:形状のプロパティの更新、オブジェクトの移動、サイズ変更、回転、スタイル
• ページ管理: ファイル内のページの追加、削除、および整理

Penpot MCP Server

A Model Context Protocol (MCP) server that provides full manipulation capabilities for Penpot - the open-source design tool. This server enables AI assistants to create, modify, and manage Penpot designs programmatically, similar to Figma plugin capabilities.

🐳 Multi-architecture Docker images available: linux/amd64, linux/arm64

🎬 See It In Action

Example chat interface created entirely through natural conversation with an AI assistant using this MCP server. See Example 7: Chat Interface for the complete conversation that generated this design.

The screenshot above demonstrates how you can describe a design in natural language, and the AI assistant will create it in Penpot using the MCP server’s capabilities - handling layout, styling, components, and interactions automatically.

Features

🎨 Complete Design Manipulation

• Create & Manage Files: Create new design files, list projects, and manage file metadata
• Shape Operations: Create rectangles, circles, frames, paths, text, and SVG shapes
• Modify Designs: Update shape properties, move objects, resize, rotate, and style
• Page Management: Add, remove, and organize pages within files
• Component System: Create and manage reusable components

🔄 Real-time Operations

• Direct API integration with Penpot
• Session-based updates with revision tracking
• Support for batch operations

🛠️ Available Tools (76+ Tools!)

Project & File Management (8 tools)

• list_teams - List all accessible teams
• list_projects - List all accessible projects
• list_files - List files in a project
• get_file - Get file data and structure
• create_file - Create a new design file
• rename_file - Rename an existing file
• delete_file - Delete a file permanently

Page Management (8 tools)

• list_pages - List all pages in a file
• add_page - Add a new page to a file
• get_page_shapes - Get all shapes on a specific page (basic info)
• query_shapes - Query and filter shapes with criteria (like grep). Filter by type, area, color, font, text content. Select fields to return. Useful for bulk operations
• get_shape_properties - Get detailed properties of a specific shape (colors, text, fonts, effects, etc.)
• rename_page - Rename a page
• delete_page - Delete a page from a file
• move_shapes - Move shapes to different parent/frame or reorder

Shape Creation (6 tools)

• create_rectangle - Create rectangle shapes
• create_circle - Create circle/ellipse shapes