Penpot

キャンバス上の見た目だけでなく、SVG・CSS・HTMLとして実装へ持ち込める設計情報を作る

PenpotはWeb標準を前提に設計されており、Inspect modeからSVG、CSS、HTMLを確認できます。レイアウトもCSS GridやFlex Layoutに対応し、レスポンシブな構造を実装時の概念に近い形で組み立てられます。デザイン側だけに閉じた独自表現ではなく、ブラウザやコード側で理解しやすい構造を使うため、デザイナーとフロントエンド開発者の間で『見た目を再解釈して作り直す』距離を縮めることが狙いです。

出典：[1]

Design Tokens、Components、Variantsを設計システムの共通ソースにする

PenpotはDesign Tokensをネイティブ機能として扱い、ComponentsやVariantsと組み合わせて再利用可能なDesign Systemを構築できます。色、余白、タイポグラフィなどの設計判断を単なる画面上のスタイルではなく、開発側と共有しやすいトークンとして管理できるため、複数プロジェクトでUIの一貫性を維持したいチームと相性があります。API、Webhooks、Plugin systemもあり、既存の開発ツールチェーンや社内ワークフローへPenpotを組み込めます。

出典：[1]

MCPからデザインプロジェクトを読み書きし、AIをデザインとコードの往復に参加させる

PenpotにはMCP serverとMCP Pluginがあり、接続したPenpotプロジェクトへAIエージェントが直接アクセスする構成が用意されています。MCP側の初期指示では、AIがPenpot design projectへツール経由で操作することが前提とされており、CSS生成やレイアウト操作などもコード上で実装されています。コードからデザインを参照するだけでなく、AIを介してデザイン側へ変更を戻すmulti-directional workflowを作れる点が、一般的なデザイン閲覧APIより踏み込んだ特徴です。

出典：[1][2]

Figma系の共同デザインを維持しながら、データ所有・セルフホスト・開発連携を重視する組織へ

デザイナーとエンジニアが同じDesign Systemを参照し、画面設計からCSSや実装へ進む際の翻訳コストを減らしたいチームに向きます。また、デザイン資産を外部SaaSだけに置きたくない企業、教育機関、公共系組織など、データ所在やガバナンスを自分たちで管理したい用途でも有力です。ブラウザから使えるSaaS版とセルフホスト版を選べるため、まず試してから自社運用へ移る選択肢も取れます。

出典：[1][3]

セルフホストは単一コンテナではなく、DB・通知基盤・Exporter・MCPなど複数サービスを運用する

公式Docker Compose例では、frontend、backend、exporter、MCP、PostgreSQL、Valkeyを分けて起動し、オブジェクト保存はローカルfilesystemまたはS3互換storageへ切り替えられます。メール確認や招待にはSMTP設定が関係し、外部公開時にはTLS、secure session cookie、email verification、secret keyなどを本番向けに見直す必要があります。Compose例には開発・試用向けの緩い既定値も含まれるため、そのままインターネット公開する前提ではありません。

Penpot本体のソースコードはMozilla Public License 2.0です。READMEでは基本のPenpotはopen sourceとして提供され、EnterpriseはAdmin Console、SSO、advanced permissionsなど複数チームを統制する組織向け機能を有償で追加する位置付けです。MPL-2.0はAGPLのようなアプリ全体への強いcopyleftではありませんが、改変したMPL対象ファイルを配布する場合は対象ソースを同ライセンスで提供する義務があるため、再配布や組み込み時はライセンス条件を確認する必要があります。

出典：[3][1][4]