Open Pencil — AIネイティブなオープンソースFigma代替デザインエディタ

Figmaの代替を謳うOSSプロジェクトは過去にもあったが、Open Pencil は明確に「AI-native」を掲げ、.figファイルのネイティブ対応とMCPサーバー内蔵という、他にない組み合わせで登場した。

2026年2月27日にGitHubで公開され、わずか2週間強で ⭐2,400超 を獲得。現在もアクティブに開発が進んでいる。

---

基本情報

項目	詳細
公式サイト	openpencil.dev
GitHub	open-pencil/open-pencil
デモ	app.openpencil.dev/demo
バージョン	v0.4.2
ライセンス	MIT
言語	TypeScript
デスクトップ	Tauri v2（macOS / Windows / Linux、約7MB）
ブラウザ	PWA対応（インストール不要で試せる）
ステータス	⚠️ Active development — 本番利用はまだ非推奨

---

なぜ注目なのか

1. .figファイルをネイティブに読み書きできる

Figmaのファイル形式（.fig）は独自バイナリで、本来はFigma以外では開けない。Open Pencilはこれを Kiwi binary + Zstd + ZIP として解析し、読み書きの両方に対応している。

Figmaとの間でノードのコピー&ペーストも可能。既存の.figアセットを完全にロックインされた状態から解放できるのは大きい。

2. AIが「おまけ」ではなく中核

⌘J でAIチャットを開き、自然言語でデザインを指示できる。90以上のツールが用意されており、図形作成、Auto Layout設定、コンポーネント操作、デザイントークン分析、アセットエクスポートまでカバーする。

AI接続先は選べる:

• Anthropic（Claude）
• OpenAI
• Google AI
• OpenRouter
• 任意のOpenAI互換エンドポイント

自前のAPIキーを使う方式で、バックエンドもアカウントも不要。

3. MCP対応 — AIコーディングツールとデザインが直結

ここが個人開発者にとって最も面白いポイント。

Open PencilはMCP（Model Context Protocol）サーバーを内蔵しており、Claude Code、Cursor、Windsurfなどのコーディングエージェントから、デザインファイルを直接読み書きできる。

bun add -g @open-pencil/mcp

.claude/mcp.json に追加:

{
  "mcpServers": {
    "open-pencil": {
      "command": "openpencil-mcp"
    }
  }
}

これにより「コードを書きながら、同じAIエージェントがデザインファイルも操作する」ワークフローが技術的に成立する。FigmaのMCPは読み取り専用だが、Open Pencilは 読み書き両対応で90ツール を公開している。

---

主要機能の詳細

CLIでデザインファイルを操作

GUIを開かずに、ターミナルからデザインファイルを解析・検索・エクスポートできる:

# ノードツリーを表示
open-pencil tree design.fig

# XPathでノードを検索
open-pencil query design.fig "//FRAME[@width < 300]"

# Tailwind JSXとしてエクスポート
open-pencil export design.fig -f jsx --style tailwind

# デザインシステムを分析
open-pencil analyze colors design.fig
open-pencil analyze typography design.fig

XPathセレクタでデザインファイルをプログラマブルに検索できるのは新しい。CIパイプラインに組み込んで、デザインの一貫性を自動チェックする使い方も想定されている。

Figma Plugin API互換

figma.currentPage.children のようなFigmaのPlugin APIがそのまま動く。evalコマンドで任意のスクリプトを実行可能:

open-pencil eval design.fig -c "figma.currentPage.children.length"
open-pencil eval design.fig -c "figma.currentPage.selection.forEach(n => n.opacity = 0.5)" -w

Tailwind CSSエクスポート

選択したデザインノードを Tailwind v4 のHTML としてエクスポートできる:

<div class="flex flex-col gap-4 p-6 bg-white rounded-xl">
  <p class="text-2xl font-bold text-[#1D1B20]">Card Title</p>
  <p class="text-sm text-[#49454F]">Description text</p>
</div>

デザインからコードへの変換が、外部プラグインなしで完結する。

リアルタイムコラボレーション

WebRTC P2Pで直接接続。サーバーもアカウントも不要。カーソル表示、プレゼンス、フォローモードに対応。Yjs（CRDT）で同期する。

---

Figma / Open Pencil / Penpot 比較

項目	Figma	Open Pencil	Penpot
料金	無料〜$75/人/月	完全無料（MIT）	無料〜€8/人/月
.figファイル	独自形式	ネイティブ読み書き	インポートのみ
AI機能	Figma AI（有料）	◎ 90+ツール、自前APIキー	なし
MCP対応	読み取りのみ	読み書き90ツール	なし
コラボレーション	◎ クラウド	○ P2P WebRTC	◎ クラウド/セルフホスト
オフライン	△	◎	○ セルフホスト
デスクトップ	Electron（重い）	Tauri（7MB）	なし（ブラウザのみ）
プロトタイピング	◎	✕ 未実装	◎
コンポーネント	◎	△ 基本のみ	◎（2.0で刷新）
デザイントークン	△ Variables	△ 分析のみ	◎ ネイティブ対応
CSS Grid	✕	◎	◎（2.0で導入）
Flex Layout	◎ Auto Layout	◎ Yoga WASM	◎ CSS準拠
Tailwindエクスポート	✕	◎	✕
CLI	✕	◎	✕
プラグイン	◎ 豊富	△ 発展途上	○ API + プラグイン
セルフホスト	✕	○（ローカル完結）	◎ Docker対応
データ主権	✕（Figmaサーバー）	◎ ローカル	◎ セルフホスト
安定性	◎	⚠️ 開発中	○ 本番利用可
GitHub ⭐	—	2,400+（2週間）	44,800+（10年）
ライセンス	独自	MIT	MPL-2.0

---

Open Pencil vs Penpot — 詳細比較

同じ「OSS Figma代替」でも、Open PencilとPenpotは明確にポジションが異なる。

Penpotの強み

Penpot は2015年から開発が続くOSSデザインツールで、⭐44,800超・10年の実績がある。2024年のPenpot 2.0で大きく進化した。

• プロトタイピング完備 — 画面遷移、インタラクション、オーバーレイがすべて使える。Open Pencilにはまだない
• デザイントークンのネイティブ対応 — OSSデザインツールとして初。色・タイポグラフィ・スペーシングをトークンとして一元管理できる
• CSS Grid + Flex — Penpot 2.0でCSS Grid Layoutを導入。CSSの実挙動に準拠したレイアウトが組める
• コンポーネントシステム — 2.0で刷新。共有ライブラリでチーム運用が可能
• セルフホスト — Docker Composeで手軽にデプロイ。データを完全に自社管理できる
• プラグインAPI — 拡張性のあるエコシステムが育ちつつある
• 安定性 — 本番利用に耐える成熟度

Open Pencilの強み

• .figファイルのネイティブ対応 — Penpotは.figのインポートのみ。Open Pencilは読み書き両方。Figmaとのコピペも可能
• AI-native — 90+ツールで自然言語からデザイン生成。Penpotにはまだない機能
• MCP統合 — Claude Code/Cursor/Windsurfから直接操作。コーディングとデザインの境界を消す
• CLI — ターミナルからデザインファイルを操作。CIパイプライン統合が容易
• Tailwind CSSエクスポート — デザインから直接Tailwindコードを出力
• Figma Plugin API互換 — 既存のFigma知識がそのまま使える
• 軽量 — Tauri v2で約7MB。Penpotはブラウザのみでデスクトップアプリなし

選び方の指針

ニーズ	推奨
今すぐ本番デザインワークに使いたい	Penpot
チームでプロトタイプを共有したい	Penpot
デザインシステムをトークンで管理したい	Penpot
既存の.figファイルを自由に編集したい	Open Pencil
AIでデザインを生成・操作したい	Open Pencil
Claude Code/CursorからMCPでデザインを触りたい	Open Pencil
CIでデザインの一貫性を自動チェックしたい	Open Pencil
デザインからTailwindコードを直接出力したい	Open Pencil

一言でまとめると：Penpotは「成熟したFigma代替」、Open Pencilは「AIファーストの実験的エディタ」。個人開発者が今すぐ移行するならPenpot、AIとの統合を先取りしたいならOpen Pencilを触ってみる価値がある。

---

技術スタック

レイヤー	技術
レンダリング	Skia (CanvasKit WASM)
レイアウト	Yoga WASM（flex + grid対応の独自fork）
UI	Vue 3, Reka UI, Tailwind CSS 4
ファイル形式	Kiwi binary + Zstd + ZIP
コラボレーション	Trystero (WebRTC P2P) + Yjs (CRDT)
デスクトップ	Tauri v2
AI/MCP	マルチプロバイダー対応, MCP SDK, Hono

---

現時点の制限

本番利用はまだ推奨されていない。具体的に足りないもの:

• プロトタイピング — 画面遷移、インタラクショントリガー、オーバーレイ管理が未実装
• コンポーネントライブラリの共有 — ファイル間でデザインシステムを配布する仕組みがない
• Figma完全互換ではない — レンダリングの差異が存在する
• プラグインエコシステム — Figmaの豊富なプラグインに相当するものはまだない

ロードマップには、シェーダーエフェクト（SkSL）、ラスタータイルキャッシング、CIツール（デザインリンティング、ビジュアルリグレッション）、WebGPU/Graphiteバックエンドなどが挙がっている。

---

個人開発者にとっての意味

今すぐ使えるシナリオ

1. 既存.figファイルの資産活用 — Figmaを解約しても、手元のファイルを開いて編集できる
2. AIでプロトタイプを素早く作る — 自然言語でUIを生成し、Tailwindとしてエクスポート
3. Claude Code/Cursorとの連携 — MCPでコーディングエージェントがデザインも操作
4. CIでデザインを自動チェック — CLIでカラーパレットやタイポグラフィの一貫性を検証

まだ待つべきシナリオ

• チームでの本格的なデザインワーク（コンポーネント共有が必要）
• クライアントへのプロトタイプ提示（プロトタイピング機能が未実装）
• Figmaからの完全移行（レンダリング差異がある）

試すなら

ブラウザで即座に試せる: app.openpencil.dev/demo

Macでインストール:

brew install open-pencil/tap/open-pencil

---

FigmaがCDP（Chrome DevTools Protocol）を封じたことで、プログラマブルなデザインワークフローの選択肢が狭まった。Open Pencilは、そのギャップを埋めるポジションにいる。まだ「Figmaを置き換える」段階ではないが、AIとの親和性では既にFigmaを超えている。データ主権とプログラマビリティを重視する個人開発者にとって、ウォッチリストに入れておく価値がある。

---