Penpot MCP Server
Penpot MCPサーバーでClaude連携・オープンソースデザイン作業を自動化
npx @penpot/mcp-server概要
Penpot MCP Serverの設定方法と使い方。
オープンソースのUIデザインツール「Penpot」をClaudeから操作できるMCPサーバー。
プロジェクト管理・ファイル操作・デザインコンポーネント取得が可能。
ClaudeとPenpotのMCPサーバー連携により、デザインファイルの管理・コメント追加・アセット取得を自動化できる。
設定方法はアクセストークンを環境変数に設定するだけでシンプルに完結する。
料金・APIキー情報
料金
完全無料APIキー
🔑 必要🔑 APIキーの取得方法
- 1
Penpot（https://design.penpot.app）にアクセスしてアカウントを作成またはログイン
- 2
右上のユーザーアイコン→「Profile settings」を開く
- 3
「Access tokens」タブをクリックし「Add new token」を選択する
- 4
トークン名を入力して生成し、コピーして保存する（再表示不可のため必ず保存すること）
こんな使い方ができます
Penpotのデザインファイル一覧をClaudeに指示して取得・管理を自動実行できる
デザインプロジェクトの構造やコンポーネントをClaudeに分析・整理させられる
PenpotとGitHubを組み合わせてデザイン変更をコードに自動反映できる
セットアップ手順
- 1
Penpotにログインし、プロフィール設定からアクセストークンを取得する
- 2
claude mcp add penpot -e PENPOT_ACCESS_TOKEN=your-access-token-here -e PENPOT_BASE_URL=https://design.penpot.app -- npx -y @penpot/mcp-server
設定ファイル
コピー前に確認
Penpotアカウントおよびアクセストークン必須
claude mcp add penpot -e PENPOT_ACCESS_TOKEN=your-access-token-here -e PENPOT_BASE_URL=https://design.penpot.app -- npx -y @penpot/mcp-server