ペンポット 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からインストールする
オプション 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 サーバーをインストールします(まだインストールされていない場合)。
- カーソル設定に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ファイルを参照してください。
謝辞