Penpotは、複数のユーザー間でのリアルタイムなコラボレーションを実現する、オープンソースのデザインおよびコードコラボレーションプラットフォームです。

Penpotとは何ですか？

Penpotは、SVG、CSS、HTMLなどのオープンスタンダードに基づいて構築されたオープンソースのデザインおよびコードコラボレーションプラットフォームです。ブラウザ内でUIデザインとインタラクティブなプロトタイピングを可能にします。このプラットフォームは、リアルタイムのマルチユーザーコラボレーション、W3Cデザイントークン管理、MCPサーバーとの統合をサポートしており、AIがスクリーンショットだけでなく、デザインファイルの実際のコンポーネント、トークン、レイヤー構造を直接読み取ることができます。インスペクトモードでは、ネイティブコードをワンクリックでコピーできるため、「デザインをコードとして捉える」というコンセプトを実現します。

Penpotの主な機能

• UIデザインとプロトタイピングブラウザ上で完全なインターフェース設計、インタラクティブなプロトタイプ作成、ビジュアル編集が可能で、複数ページ管理にも対応しています。
• リアルタイムコラボレーション複数のユーザーが同じデザインファイルを同時に編集でき、コメント、注釈、バージョン同期に対応しています。
• 検査モード任意の要素を選択すると、対応するSVG、CSS、およびHTMLコードを直接表示およびコピーできるため、開発者が手動でコードを再作成する必要がなくなります。
• ネイティブCSSグリッドとフレックスレイアウトデザイン案は実際のウェブレイアウト規則に従ってレンダリングされるため、見たままのものがそのまま出力され、出力コードはビジュアルと完全に一致します。
• デザイントークン管理業界初となるW3Cデザイントークン標準を完全にサポートするデザインツール。色、フォントサイズ、間隔などの変数を統一的に制御できます。
• コンポーネントおよびバリアントシステム再利用可能なコンポーネントとマルチステートバリアントの作成をサポートし、拡張性の高い設計システムの構築を可能にします。
• MCPサーバー統合組み込みのMCPサービス：AIエージェントは、設計ファイルの構造、コンポーネント、トークンを直接読み取り、双方向の設計・コードワークフローを実現します。

WeChatでフォローして「オープンソース「、参加するAIオープンソースプロジェクトに関するディスカッショングループ

Penpotの使い方

• 方法1：SaaSのオンライン利用
  • アカウントを登録する：アクセス design.penpot.appメールアドレスを使って無料アカウントを登録してください。
  • プロジェクトを作成するログイン後、新しいチームまたはプロジェクトを作成し、デザインキャンバスに入って制作を開始してください。
  • デザインインターフェース左側のツールバーを使用して図形、テキスト、コンポーネントを描画し、右側のパネルを使用してプロパティとレイアウトを調整します。
  • トークンの管理トークンパネルで色、フォント、間隔などのデザイン変数を定義し、それらを要素にバインドします。
  • コラボレーションを開始するチームメンバーをプロジェクトに招待することで、複数のユーザーが同じファイルをリアルタイムで編集できるようになります。
  • エクスポートコード要素を選択して検証パネルを開き、ワンクリックでSVG、CSS、またはHTMLコードをコピーして開発に使用できます。
• 方法2：Dockerによるセルフホスティング
  • 設定をダウンロードサーバー上で実行する curl 公式 docker-compose.yaml 書類。
  • サービスを開始する：走る docker compose up -d Penpotサービスをデプロイします。
  • アクセス構成ブラウザを使用してサーバーのIPアドレスのポート9001にアクセスし、ウィザードの手順に従って初期設定を完了してください。
  • 登録管理者初回アクセス時に、イントラネット環境内のすべての機能を独立して使用できる管理者アカウントを作成してください。

Penpotの主な利点

• デザインとはコードである設計は最初からWeb標準に基づいて表現され、Inspectは直接使用可能なコードを出力するため、設計と開発間の変換ロスが排除されます。
• 完全オープンソースで自己ホスト型MPL-2.0プロトコルはプライベート展開をサポートし、金融、政府、医療などの機密性の高い業界におけるコンプライアンスおよびデータ主権の要件を満たします。
• AIネイティブ読み取り可能MCPサーバーを介して、AIエージェントはスクリーンショットではなく設計構造を直接読み取り、正確な生成、自動調整、双方向同期を実現します。
• ベンダーロックインなしSVG/CSS/HTML/JSONなどのオープンスタンダードに基づいているため、ファイル形式は汎用性が高く、他のツールへも容易に移行できます。
• デザイントークン業界標準W3C標準をネイティブにサポートしており、設計変数を一箇所で変更すると全体に反映されるため、拡張性と保守性に優れた設計システムを構築できます。

Penpotのプロジェクトアドレス

• プロジェクト公式サイト：https://penpot.app/
• GitHubリポジトリ：https://github.com/penpot/penpot

Penpotの競合製品比較

Penpotのアプリケーションシナリオ

• エンタープライズレベルの設計システム構築デザイントークンとコンポーネントライブラリを通じて、製品やプラットフォーム全体で一貫性のある設計仕様を構築します。
• 金融・政府機関向けUI開発プライベート展開はデータセキュリティに関するコンプライアンス要件を満たしており、設計図は内部ネットワークから外部に流出しない。
• AIを活用したフロントエンド開発MCPを組み合わせることで、AIは設計図を読み込み、直接コードを生成できるため、設計から展開までのサイクルを短縮できます。
• オープンソースコミュニティと教育機関教育、オープンソースプロジェクトでの共同作業、スキル開発を支援する、フル機能搭載のデザインツールへの無料アクセス。
• デザインと開発のシームレスな連携デザイナーはPenpotでデザインを作成し、開発者はInspectを通じて直接使用可能なコードを取得できるため、コミュニケーションコストを削減できます。