OSS探訪概要
OpenPencilは、`.fig`と`.pen`を読み書きできるMIT licenseのdesign editorです。browser/PWAとTauri desktopで動き、built-in AI、CLI、MCP、Vue SDK、design-to-code export、WebRTC P2P collaborationまで同じdocument engineへ統合します。2026年9月16日時点のlatest releaseはv0.14.0です。
特徴と向いている用途
公式資料に基づく紹介・実機未検証 · 内容確認日：
Figma `.fig`をnativeに読み書きし、design fileをCLIやcodeから操作できる
.fig/.penを開いて編集し、PNG/SVG/JSX/Tailwind等へexportできます。CLIではtree/query/lint/analyze/convert/import等をheadlessで実行でき、Figma Plugin API互換のevalからdocumentを変更することもできます。
出典：[2]
100+ design toolをAI/MCPへ公開し、design editorをagentのwrite targetにする
built-in chatは複数AI providerへBYOKで接続し、shape・layout・component・variable・export等を操作します。desktop appのMCP serverをClaude Code、Codex、Cursor等から利用でき、WebRTC/Yjsによるserverless P2P collaborationも提供します。
出典：[2]
design fileを閉じたGUI assetではなく、script・agent・CIから扱えるengineering artifactにしたいteamに
design token抽出、lint、format conversion、headless SDK、MCPまで一つのrepositoryにあるため、design system検査やdesign-to-code automationをsource-control workflowへ寄せたい用途に向きます。
出典：[2]
v0.xかつactive development。Figma互換性やeditor rough edgeをproduction workflowへ入れる前に検証する
README自身がactive developmentでrough edgesがあると明記し、roadmapにもcompatibility gapが残ります。重要な.figを扱う場合はoriginalを保持し、round-trip import/exportやcomponent/variant挙動を自分のfileで確認すべきです。
AIをlocal-firstと混同しない。BYOK provider利用時は選択した外部AIへcontextが送られる
editor本体はaccount不要・local dataを志向しますが、AI assistantでOpenAI/Anthropic/Google AI/OpenRouter等を選べばprovider APIへrequestします。browserではprovider/modelごとのtool-call compatibilityも異なるため、機密designでAIを使う場合は送信範囲とprovider policyを別途確認します。
出典：[2]
参考にした公式資料
- [1]open-pencil/open-pencil — GitHub repository metadata(2026-09-16)
- [2]OpenPencil — README(2026-09-16)
- [3]OpenPencil v0.14.0 release(2026-09-16)
- [4]OpenPencil — MIT License(2026-09-16)
編集部からの補足
単なるFigma風UIではなく、.fig fileをCLI/MCPからwriteできるprogrammable design toolとして評価しました。v0.xなのでround-trip互換性は実fileで確認が必要です。
3ステップで試す
- 1
web demoを開く
installせずにeditorとdocument互換性を確認できます。
https://app.openpencil.dev/demo - 2
design fileを開く
既存.figを使う場合はoriginalを保持し、round-trip互換性を確認します。
Open or create a .fig / .pen document - 3
AIまたはexportを試す
AIはBYOK providerへの外部requestです。機密designでは送信範囲を確認してください。
⌘/Ctrl+J → Try AI, or Export → PNG / SVG / JSX
成長
成長の推移 · 直近30日
8,342 Stars
推移データを蓄積中です。
開発アクティビティ
直近90日・週次
- Commit（直近30日）
- 470
- Open PR
- 9
開発アクティビティを蓄積中です。
Built with
カテゴリとタグ
カテゴリ
GitHubデータ
関連情報
関連記事を投稿するこのOSSの使い方や活用事例をMarkdownで投稿できます。管理者が承認した後に公開されます。
あわせて探訪
- n8n204,525 Stars
視覚的なキャンバスとコードを組み合わせ、サービス連携やAIエージェントを自動化するfair-code基盤。
TypeScript - Oh My Zsh189,748 Stars
Zshの設定をプラグイン、テーマ、自動更新の仕組みで管理するコミュニティ製フレームワーク。
Shell - Excalidraw132,107 Stars
手描き風の図・ワイヤーフレーム・メモを無限キャンバスで作れるオープンソースのホワイトボード。
TypeScript - Godot Engine117,273 Stars
2D/3D gameを一つのeditorで制作し、desktop・mobile・WebへexportできるMIT製game engine。
C++ - Mermaid90,266 Stars
Markdown-like textからflowchart・sequence・UML等を生成するdiagrams-as-code library。
TypeScript
情報の誤りを報告
掲載内容に誤りや古い情報があればお知らせください。