ペンポットMCPサーバー

ペンポット MCP サーバー 🎨🤖

🚀 Penpot MCP とは何ですか?

Penpot MCPは、AI言語モデルとオープンソースの設計・プロトタイピングプラットフォームであるPenpot間のギャップを埋める革新的なモデルコンテキストプロトコル（MCP）サーバーです。この統合により、Claude（Claude DesktopとCursor IDEの両方）などのAIアシスタントが、設計ファイルをプログラム的に理解、分析、操作できるようになります。

🎯 主なメリット

🤖 AIネイティブデザイン分析：Claude AIがUI/UXデザインを分析し、フィードバックを提供し、改善を提案します
⚡ 自動化された設計ワークフロー: AIを活用した自動化で反復的な設計タスクを効率化
🔍 インテリジェントなデザイン検索: 自然言語を使用してプロジェクト全体のデザインコンポーネントとパターンを検索します
📊 デザインシステム管理：AIの支援によりデザインシステムを自動的に文書化および維持します
🎨 クロスプラットフォーム統合：MCP 互換の AI アシスタント (Claude Desktop、Cursor IDE など) と連携します。

🎥 デモビデオ

Penpot MCP の動作を確認するには、デモビデオをご覧ください。

✨ 特徴

🔌 コア機能

MCPプロトコル実装: モデルコンテキストプロトコル標準に完全準拠
リアルタイム設計アクセス: ペンポットのAPIと直接統合してライブ設計データを利用
コンポーネント分析: AIを活用した設計コンポーネントとレイアウトの分析
エクスポート自動化: 複数の形式でのデザインアセットのプログラムによるエクスポート
設計検証：自動設計システムのコンプライアンスチェック

🛠️ 開発者ツール

コマンドラインユーティリティ: 設計ファイルの分析と検証のための強力なCLIツール
Python SDK : カスタム統合のための包括的な Python ライブラリ
REST API : Webアプリケーション統合用のHTTPエンドポイント
拡張可能なアーキテクチャ: カスタム AI ワークフロー用のプラグインシステム

🎨 AI統合機能

Claude Desktop と Cursor の統合: Claude Desktop と Cursor IDE の両方で Claude AI アシスタントをネイティブにサポート
設計コンテキストの共有: AIモデルに設計コンテキストを提供して、より適切な応答を実現します。
視覚コンポーネント認識: AIは設計コンポーネントを「見て」理解することができます
自然言語クエリ: デザインについて分かりやすい英語で質問できます
IDE統合: 最新の開発環境とのシームレスな統合

💡 ユースケース

デザイナー向け

デザインレビューの自動化: アクセシビリティ、ユーザビリティ、デザイン原則に関する AI フィードバックを即座に取得
コンポーネントドキュメント: デザインシステムのドキュメントを自動生成
デザインの一貫性チェック: プロジェクト全体でブランドガイドラインに準拠していることを確認する
アセットの整理: AIを活用したデザインコンポーネントのタグ付けと分類

開発者向け

設計からコードまでのワークフロー: AI 支援により設計と開発のギャップを埋める
API統合:カスタムツールとワークフローの設計データへのプログラムによるアクセス
自動テスト: 設計仕様から視覚的な回帰テストを生成する
デザインシステムの同期: デザイントークンとコードコンポーネントを同期させます

製品チーム向け

デザイン分析: デザインシステムの採用とコンポーネントの使用状況を追跡
コラボレーションの強化：AIを活用した設計レビューとフィードバック収集
ワークフローの最適化: 反復的な設計操作と承認を自動化
ツール間の統合:デザインワークフローでPenpotを他のツールに接続します

🚀 クイックスタート

前提条件

Python 3.12+ (最適なパフォーマンスを得るには最新の Python を推奨)
ペンポットアカウント（無料登録）
Claude Desktop または Cursor IDE (オプション、AI 統合用)

インストール

前提条件

Python 3.12以上
Penpotアカウントの資格情報

インストール

オプション1: PyPIからインストールする

pip install penpot-mcp

オプション 2: uv を使用する (最新の Python 開発に推奨)

# Install directly with uvx (when published to PyPI)
uvx penpot-mcp

# For local development, use uvx with local path
uvx --from . penpot-mcp

# Or install in a project with uv
uv add penpot-mcp

オプション3: ソースからインストールする

# Clone the repository
git clone https://github.com/montevive/penpot-mcp.git
cd penpot-mcp

# Using uv (recommended)
uv sync
uv run penpot-mcp

# Or using traditional pip
python -m venv .venv
source .venv/bin/activate  # On Windows: .venv\Scripts\activate
pip install -e .

構成

Penpot の資格情報を使用して、 env.exampleに基づいて.envファイルを作成します。

PENPOT_API_URL=https://design.penpot.app/api
PENPOT_USERNAME=your_penpot_username
PENPOT_PASSWORD=your_penpot_password
PORT=5000
DEBUG=true

使用法

MCPサーバーの実行

# Using uvx (when published to PyPI)
uvx penpot-mcp

# Using uvx for local development
uvx --from . penpot-mcp

# Using uv in a project (recommended for local development)
uv run penpot-mcp

# Using the entry point (if installed)
penpot-mcp

# Or using the module directly
python -m penpot_mcp.server.mcp_server

MCPサーバーのデバッグ

MCP サーバーをデバッグするには、次の操作を実行します。

.envファイルでDEBUG=trueを設定してデバッグモードを有効にします。
API 操作をテストするには、Penpot API CLI を使用します。

# Test API connection with debug output
python -m penpot_mcp.api.penpot_api --debug list-projects

# Get details for a specific project
python -m penpot_mcp.api.penpot_api --debug get-project --id YOUR_PROJECT_ID

# List files in a project
python -m penpot_mcp.api.penpot_api --debug list-files --project-id YOUR_PROJECT_ID

# Get file details
python -m penpot_mcp.api.penpot_api --debug get-file --file-id YOUR_FILE_ID

コマンドラインツール

パッケージにはユーティリティコマンドラインツールが含まれています。

# Generate a tree visualization of a Penpot file
penpot-tree path/to/penpot_file.json

# Validate a Penpot file against the schema
penpot-validate path/to/penpot_file.json

MCP 監視とテスト

MCP CLI モニター

# Start your MCP server in one terminal
python -m penpot_mcp.server.mcp_server

# In another terminal, use mcp-cli to monitor and interact with your server
python -m mcp.cli monitor python -m penpot_mcp.server.mcp_server

# Or connect to an already running server on a specific port
python -m mcp.cli monitor --port 5000

MCP検査官

# Start your MCP server in one terminal
python -m penpot_mcp.server.mcp_server

# In another terminal, run the MCP Inspector (requires Node.js)
npx @modelcontextprotocol/inspector

クライアントの使用

# Run the example client
penpot-client

MCP リソースとツール

リソース

server://info - サーバーの状態と情報
penpot://schema - JSON形式のPenpot APIスキーマ
penpot://tree-schema - JSON 形式の Penpot オブジェクトツリースキーマ
rendered-component://{component_id} - レンダリングされたコンポーネント画像
penpot://cached-files - キャッシュされたPenpotファイルのリスト

ツール

list_projects - すべてのPenpotプロジェクトを一覧表示する
get_project_files - 特定のプロジェクトのファイルを取得する
get_file - IDでPenpotファイルを取得し、キャッシュする
export_object - ペンポットオブジェクトを画像としてエクスポートする
get_object_tree - ペンポットオブジェクトのオブジェクトツリー構造を取得します
search_object - ペンポットファイル内のオブジェクトを名前で検索する

AI統合

Penpot MCPサーバーは、モデルコンテキストプロトコル（CMP）を介してAIアシスタントと統合できます。Claude DesktopとCursor IDEの両方をサポートし、シームレスな設計ワークフローの自動化を実現します。

クロードデスクトップ統合

Claude Desktop の詳細なセットアップ手順については、 CLAUDE_INTEGRATION.md を参照してください。

Claude Desktop 構成ファイル (macOS の場合は~/Library/Application Support/Claude/claude_desktop_config.json 、Windows の場合は%APPDATA%\Claude\claude_desktop_config.json ) に次の構成を追加します。

{
  "mcpServers": {
    "penpot": {
      "command": "uvx",
      "args": ["penpot-mcp"],
      "env": {
        "PENPOT_API_URL": "https://design.penpot.app/api",
        "PENPOT_USERNAME": "your_penpot_username",
        "PENPOT_PASSWORD": "your_penpot_password"
      }
    }
  }
}

カーソルIDE統合

Cursor IDEは、AI統合機能を通じてMCPサーバーをサポートします。Penpot MCPをCursorで設定するには、以下の手順に従ってください。

MCP サーバーをインストールします(まだインストールされていない場合)。
pip install penpot-mcp
カーソル設定にMCPサーバーを追加して、カーソル設定を構成します。カーソル設定を開き、以下を追加します。
{ "mcpServers": { "penpot": { "command": "uvx", "args": ["penpot-mcp"], "env": { "PENPOT_API_URL": "https://design.penpot.app/api", "PENPOT_USERNAME": "your_penpot_username", "PENPOT_PASSWORD": "your_penpot_password" } } } }
代替案: プロジェクトルートに.envファイルを作成して環境変数を使用します。
PENPOT_API_URL=https://design.penpot.app/api PENPOT_USERNAME=your_penpot_username PENPOT_PASSWORD=your_penpot_password
プロジェクトでMCP サーバーを起動します。
# In your project directory penpot-mcp
カーソルでの使用: 設定が完了すると、次のような質問をして、カーソル内で直接ペンポットのデザインを操作できるようになります。
- 「Penpotアカウント内のすべてのプロジェクトを表示」
- 「プロジェクトXの設計コンポーネントを分析する」
- 「メインボタンコンポーネントを画像としてエクスポートする」
- 「このファイルではどのようなデザインパターンが使用されていますか？」

主な統合機能

Claude Desktop と Cursor の統合はどちらも以下を提供します。

Penpotプロジェクトとファイルへの直接アクセス
AIを活用した洞察による視覚的なコンポーネント分析
アセットとコンポーネントの設計エクスポート機能
デザインファイルに関する自然言語クエリ
リアルタイムのデザインフィードバックと提案
デザインシステムドキュメント生成

パッケージ構造

penpot_mcp/
├── api/              # Penpot API client
├── server/           # MCP server implementation
│   ├── mcp_server.py # Main MCP server
│   └── client.py     # Client implementation
├── tools/            # Utility tools
│   ├── cli/          # Command-line interfaces
│   └── penpot_tree.py # Penpot object tree visualization
├── resources/        # Resource files and schemas
└── utils/            # Helper utilities

発達

テスト

このプロジェクトではテストに pytest を使用します。

# Using uv (recommended)
uv sync --extra dev
uv run pytest

# Run with coverage
uv run pytest --cov=penpot_mcp tests/

# Using traditional pip
pip install -e ".[dev]"
pytest
pytest --cov=penpot_mcp tests/

リンティング

# Using uv (recommended)
uv sync --extra dev

# Set up pre-commit hooks
uv run pre-commit install

# Run linting
uv run python lint.py

# Auto-fix linting issues
uv run python lint.py --autofix

# Using traditional pip
pip install -r requirements-dev.txt
pre-commit install
./lint.py
./lint.py --autofix

貢献

貢献を歓迎します！お気軽にプルリクエストを送信してください。

リポジトリをフォークする
機能ブランチを作成します（ git checkout -b feature/amazing-feature ）
変更をコミットします ( git commit -m 'Add some amazing feature' )
ブランチにプッシュする ( git push origin feature/amazing-feature )
プルリクエストを開く

コードがプロジェクトのコーディング標準に準拠しており、適切なテストが含まれていることを確認してください。

ライセンス

このプロジェクトは MIT ライセンスに基づいてライセンスされています - 詳細についてはLICENSEファイルを参照してください。

謝辞

Penpot - オープンソースのデザインとプロトタイピングのプラットフォーム
モデルコンテキストプロトコル- AIモデルコンテキストの標準化されたプロトコル

Deploy Server

HTTP connection URL

security – no known vulnerabilities

license - not found

quality - confirmed to work

How are these scores calculated?

remote-capable server

The server can be hosted and run remotely because it primarily relies on remote services or has no dependency on the local environment.

Tools

View all tools

AI 言語モデルを Penpot 設計プラットフォームに橋渡しし、AI アシスタントが設計ファイルをプログラムで分析、検索、操作して、設計ワークフローを自動化できるようにします。

Related MCP Servers

Metasploit MCP Server
GH05TCREW
-
security
A
license
-
quality
Provides a bridge between large language models and the Metasploit Framework, enabling AI assistants to access and control penetration testing functionality through natural language.
Last updated -
260
Apache 2.0
21st.dev Magic AI Agent
zackbissell
A
security
F
license
A
quality
A powerful AI-driven tool that helps developers create beautiful, modern UI components instantly through natural language descriptions.
Last updated -
4
3,918
@bldbl/mcp
chunkydotdev
A
security
A
license
A
quality
This package enables AI assistants (Claude, GPT, etc.) to work directly with Buildable projects using the Model Context Protocol (MCP). AI assistants can get project context, manage tasks and track progress (for projects created at https://bldbl.dev).
Last updated -
7
10
4
MIT License
WaniKani MCP Server
jackedney
-
security
F
license
-
quality
A bridge that provides AI assistants with access to WaniKani user data and functionality, enabling them to retrieve learning progress, identify difficult items, and offer personalized Japanese language learning assistance.
Last updated -
1

View all related MCP servers

Appeared in Searches

A guide to UX/UI Design principles and resources