OpenPencil – オープンソースのデザインエディタ、AI を内蔵

概要 – ローカルで実行されるデザインツールで、ネイティブの Figma (.fig) および Pencil (.pen) ファイルを開き、完全な UI で編集し、強力な CLI と AI 駆動の「MCP」サーバーを介してすべてを自動化できます。小型（約 15 MB）のデスクトップアプリ（Tauri v2）と PWA として提供され、他のアプリケーションにエディタを埋め込むための Vue ベースの SDK も提供します。

主な機能

機能	仕組み
ファイルサポート	`.fig`（Figma）および `.pen`（Pencil）ファイルの読み書き；アプリ間でノードをコピー＆ペーストできます。
AI 支援デザイン	100 以上の「ツール」（シェイプ作成、塗り設定、自動レイアウト実行、コンポーネント管理、アセットエクスポートなど）を備えた内蔵チャットパネル。任意の BYOK LLM プロバイダー（OpenAI、Anthropic、Google AI、OpenRouter、DeepSeek など）に接続可能 – バックエンド不要、アカウント不要。
プログラム可能な CLI	`openpencil` を使用すると、ノードツリーの検査、XPath クエリの実行、lint、色/タイポグラフィの分析、形式の変換、PNG/JPG/SVG/PDF/JSX/Tailwind/Storybook へのエクスポート、さらには Figma Plugin API スクリプトのヘッドレス実行が可能です。
MCP サーバー	同じ 100 以上のデザインツールを stdio または HTTP 経由で公開し、AI コーディングエージェント（Claude Code、Codex、Gemini、Cursor など）がプログラムでデザインを読み取り/変更/エクスポートできるようにします。
Vue SDK	ヘッドレスコンポーネントとコンポーザブルを使用して、エディタを埋め込んだり、カスタムワークフロー専用のエディタを構築したりできます。
リアルタイムコラボレーション	ピアツーピアの WebRTC + Yjs CRDT；リンクを共有し、お互いのカーソルを確認し、ビューポートをフォローし、音声通話を開始 – すべて中央サーバーなしで実現。
自動レイアウトと CSS Grid	Yoga を WASM にコンパイルした Flexbox とグリッドをサポートし、gap、padding、alignment を完全にサポート。
画像のベクター化	Recraft または fal.ai を介してラスターレイヤーを編集可能なベクターに変換。
デザインからコードへのエクスポート	選択範囲を JSX/Tailwind としてエクスポート、デザイントークンファイルの生成、Storybook ストーリーの生成。
クロスプラットフォーム	macOS、Windows、Linux 向けのデスクトップビルド（Tauri 経由）；ウェブアプリは最新のブラウザ（Chrome 111+、Edge 111+、Firefox 128+、Safari 16.4+）で動作。

はじめに

# macOS では Homebrew を使用
brew install --cask openpencil

# または CLI をグローバルにインストール
npm i -g @open-pencil/cli   # または bun add -g @open-pencil/cli

最新のデスクトップリリースを GitHub からダウンロードするか、https://app.openpencil.dev/demo でウェブデモを実行してください。

典型的なワークフロー

Figma ファイルを開く → UI を編集するか、openpencil tree design.fig を実行してノード階層を調べます。
AI にコンポーネントの作成を依頼する → チャット（⌘J/Ctrl+J）を開き、UI を説明して、ツールにノードを生成させます。
アセットをエクスポートする → openpencil export design.fig -f tailwind-jsx または -f storybook でコードの引き渡しを行います。
スクリプトで自動化する → openpencil eval design.fig -c "figma.currentPage.selection.forEach(n => n.opacity=0.5)" -w。
コラボレーション → 生成された WebRTC リンクを共有します。チームメイトはライブ編集を確認し、音声チャットができます。
他の場所に統合する → @open-pencil/sdk を Vue アプリにインポートし、カスタムエディタサーフェスを構築します。

誰が使うべきか？

デザインオペレーションチーム：Figma のクローズド API に代わる、スクリプト可能でローカルファーストの代替手段が必要な場合。
開発者：デザインからコードへのパイプライン（JSX/Tailwind の自動エクスポート、トークンファイルの生成）を構築する場合。
AI ツールビルダー：Claude Code、Cursor、カスタム MCP クライアントなどのエージェント向けに、プログラム可能なデザインバックエンドが必要な場合。
教育者とホビイスト：リアルタイムコラボレーションを備えた、無料でオープンソースのデザインエディタを探している場合。

コミュニティと貢献

Discord：https://discord.gg/4wXc9fuZfm – クイックヘルプとショーケース。
GitHub Discussions：Q&A、アイデア、お知らせ。
貢献：ウェブエディタには bun install && bun run dev:portless、デスクトップアプリには bun run tauri dev（Rust が必要）。ガイドラインは CONTRIBUTING.md を参照してください。

ライセンス

MIT – 個人、教育、商用利用は無料。

結論 – OpenPencil は、最高水準の AI 統合を備えた、完全にオープンでスクリプト可能なデザイン環境を提供し、専有プラットフォームに依存せずに UI/UX 作業を自動化、拡張、コラボレーションすることを可能にします。

open-pencil/open-pencil