この記事は Penpot の提供によるものです Penpot ファイルに、デザイン自体に加えて完全なアイコン セットが含まれており、アイコンのすべてではなく一部が使用されていると想像してください。 Claude や Gemini などの AI に、使用されているアイコンのみをエクスポートするように依頼したとしても、それは実行できません。 Penpot ファイルを操作することはできません。 ただし、Penpot MCP サーバーではそれが可能です。特に Penpot には広範な API があり、オープンソースであるため、設定されたルールと権限の下で厳選された数の操作を実行できます。 AI の仕事は単にユーザーの意図を理解し、MCP サーバーが実行する適切な操作 (この場合はエクスポート) を選択し、パラメーター (つまり、使用されているアイコン) を渡すことです。 MCP サーバーはこれを構造化 API リクエストに変換し、実行します。 AI は注文を受けるレストランのサーバー、MCP サーバーはメニューとシェフの両方、API リクエストは (できれば) 温かいお皿に盛られた熱々のピザパイと考えるとわかりやすいかもしれません。 正確に言うと、なぜ MCP サーバーなのでしょうか? Penpot は LLM ではないため、ユーザーの意図を理解できません。また、Penpot データのセキュリティとプライバシーを確保するために、サードパーティの LLM が Penpot ファイルと対話することも許可しません。 Penpot MCP サーバーは安全なブリッジとして機能し、Penpot ファイルとデータをコンテキストとして使用して AI の意図を API リクエストに変換します。 さらに優れているのは、Penpot はデザインをコードとして表現するアプローチを採用しているため、デザインをプログラムで作成、編集、および詳細なレベルで分析できることです。これは、他の MCP サーバーが提供するものと比較して、よりコンテキストに即し、より具体的であるため、より強力であり、誰も本当に望んでいないと思われる、平均以下の「記述→生成」AI ワークフローよりもはるかに思慮深いものです。 Penpot の AI ホワイトペーパーでは、これは悪いアプローチであり、「コードに変換」アプローチは醜いアプローチであると説明されていますが、MCP サーバーはより洗練され、適応性があります。 機能と技術的な詳細 ユースケースに進む前に、Penpot MCP サーバーがどのように動作するかをさらに説明するいくつかの機能と技術的な詳細を示します。
MCP規格に準拠。 Penpot API と統合してリアルタイムの設計データを取得します。 Python SDK、REST API、プラグイン システム、および CLI ツールが含まれています。 MCP 対応の AI アシスタント (VS コードのクロード、カーソルのクロード、デスクトップのクロードなど) と連携します。 AI モデルと設計コンテキストを共有し、コンポーネントを見て理解できるようにサポートします。 自然言語を使用して Penpot とのコミュニケーションを促進します。
では、MCP サーバーを使用するとペンポットで何ができるようになるのでしょうか?また、既存の実験ではすでに何が達成されているのでしょうか?見てみましょう。 Penpot MCP サーバーの使用例 Penpot MCP サーバーで何ができるかだけをスキップしたい場合は、Penpot の Google ドライブにいくつかの MCP デモが保存されており、見る価値は十分にあります。 Penpot CEO の Pablo Ruiz-Múzquiz 氏は、ビデオ 03、04、06、08、12 がお気に入りだと述べました。 MCP サーバーを要約するさらに迅速な方法は、Penpot Fest 2025 での発表を見ることです。 それ以外の場合は、Penpot が公開ショーケースで示した、より洗練された例をいくつか見てみましょう。 設計からコードへの変換とその逆 (その他) ペンポットのデザインがどのようにコードとして表現されるかについて先ほど述べたことを続けると、これは、MCP サーバーを使用して、AI を使用してデザインをコードに変換できるだけでなく、コードからデザイン、デザインからドキュメント、ドキュメントからデザイン システム要素、そしてそのデザイン システムに基づいて再度デザインからコードに変換し、その後、そのデザイン システムに基づいた完全に新しいコンポーネントを変換することもできることを意味します。 超現実的に聞こえるかもしれませんが、以下のデモはこの変換可能性を示しています。これは曖昧な指示によるものではなく、表現方法 (デザイン、コード、ドキュメント) に関係なく、以前のデザインの選択によるものです。驚くべきことではありません。これらは単に、以前の決定に基づいていずれにせよ下すであろう決定を迅速に実行しただけです。 デモでは、Penpot のデザイナーである Juan de la Cruz García が、いくつかの単純なコンポーネントをドキュメント、デザイン システム要素、コード、新しいコンポーネント、さらには Play-Doh のような完全な Storybook プロジェクトにスムーズに変換します。 設計からコードまで、設計/コードの検証、および簡単な操作 以下の同様のデモでは、Oraios AI の共同創設者である Dominik Jain が、フロントエンド スタイルを更新する前にデザインに基づいて Node.js Web アプリを作成し、一貫性をチェックする前にデザインからコードへのスムーズな変換を保証するために名前と識別子をメモリに保存し、ペンポットで選択したシェイプの横にコメントを追加し、ペンポットの落書きを適応したコンポーネントに置き換えます。ここでは多くのことが起こっていますが、ドミニクがクロード デスクトップに入力している内容とクロードの応答を正確に見ることができ、非常に堅牢です。 ちなみに、前のデモでは VS Code の Claude を使用したため、Penpot MCP サーバーは LLM に依存しないことに注意してください。あなたの技術スタックは完全にあなた次第です。 IvanTheGeek は、JetBrains Rider IDE と Junie AI を使用して MCP サーバーをセットアップすることに成功しました。 その他の使用例 Penpot デザイン トークンを利用しながら、Penpot ボードを本番環境に対応したセマンティック HTML およびモジュール式 CSS に変換します (Penpot デザインはすでにコードとして表現されているため、これは暗中模索ではないことに注意してください)。 既存の HTML を変更せずに、インタラクティブな Web プロトタイプを生成します。 前に示したように、既存のデザインやデザイン システム要素を活用して、落書きをコンポーネントに変換します。 Penpot ファイルからデザイン システム ドキュメントを作成します。 ここでは、Penpot とコミュニティからのその他のユースケースをいくつか紹介します。
高度なエクスポート、 自然言語を使用してデザイン要素を検索し、 自然言語を使用して外部 API からデータを取得し、 Penpotを他の外部ツールに簡単に接続し、 反復的なタスクをメモリに保存して実行する、 視覚的な回帰テスト、 設計の一貫性と冗長性のチェック、 アクセシビリティとユーザビリティの分析とフィードバック、 設計システムのコンプライアンスチェック、 ガイドライン遵守チェック（ブランド、コンテンツ等）、 設計分析により採用と使用状況を監視し、 ドキュメントと設計の同期を自動的に維持し、 ファイル構成を設計します (タグ付け/分類など)。
基本的に、Penpot MCP サーバーは、選択した LLM/LLM クライアントの効率性と使いやすさのおかげで、データを公開することなく、無限の数のワークフローへの道を導きます。 MCP サーバーを何に使用しますか? Penpot MCP サーバーはベータ段階ですらないが、参加できる積極的な実験です。 Penpot ユーザーはすでに MCP サーバーの使用事例を検討し始めていますが、Penpot はさらに多くの事例を検討したいと考えています。次世代のデザイン ツールがデザイナー、開発者、製品チーム全般のニーズを確実に満たすようにするには、特に AI が関係する場合、それらのツールを集合的かつ協力的に構築する必要があります。 注: Penpot は、Penpot の MCP サーバーを探索、実験し、改良することに熱心なベータ テスターを探しています。参加するには、件名を「MCP ベータ テスト ボランティア」として support@penpot.app にメールしてください。 Penpot MCP サーバーで実行できて、現在のツールでは十分に実行できない、十分な速度で実行できない、またはまったく実行できないと感じていることはありますか? ここで Penpot MCP サーバーのセットアップ方法を学び、今日からいじくり始めることができます。または、すでにアイデアで頭がいっぱいの場合は、Penpot がディスカッションに参加し、フィードバックを共有し、ユースケースについて話し合うことを望んでいます。あるいは、すぐ下のコメントセクションから始めるのも悪くありません。
