open-pencil/open-pencil

何を解決するか

OpenPencil は Figma のような閉鎖型デザインプラットフォームに対するオープンソースでプログラム可能な代替手段を提供します。独自のファイル形式や制限されたプログラムアクセスの問題を解決し、ユーザーが .fig ファイルをネイティブに読み書きでき、CLI や API を通じてすべての操作をスクリプト化し、デザインデータをローカルに保持できるようにします。

動作方法

Vue 3 フロントエンドと Skia ベースのレンダリングエンジンで構築されたデザインエディタです。Flex およびグリッドレイアウトには Yoga WASM を使用し、サーバーレスでピアツーピアのリアルタイムコラボレーションには Yjs と WebRTC を採用しています。ヘッドレス CLI（ファイルの検査・編集用）、AIエージェント統合用の MCP サーバー、カスタムエディティング表面を構築するための Vue SDK を含んでいます。

対象ユーザー

• デザイナー：Figma ファイルをサポートし、データ所有権をローカルに保てるオープンソースエディタを求める人。
• 開発者：デザインファイルをプログラムで操作したい、レイアウトのLint、またはデザインをコード（JSX/Tailwind）にエクスポートしたい人。
• AIエンジニア：Model Context Protocol (MCP) を使ってUIデザインを作成・編集するエージェントを開発する人。

特徴

• Figma互換性：.fig ファイルの開く・エクスポートをネイティブでサポート。
• AI駆動のデザイン：組み込みチャットアシスタントと、100以上のツールを備えた MCP サーバーで、AIエージェントがノードを作成・編集可能。
• プログラム可能なツールキット：XPathクエリ対応のヘッドレス CLI、Figma プラグイン API の eval モード、Vue SDK を含む。
• デザインからコードへ：選択範囲を JSX/Tailwind にエクスポートし、HTML/CSS を編集可能なデザインレイヤーにインポート可能。
• サーバーレスコラボレーション：アカウントや中央サーバーを必要とせず、P2P WebRTC によるリアルタイム共同編集が可能。